{% extends "base.html" %} {% block title %}Text Generation — All You Can GET
AI{% endblock %} {% block content %}
<div class="card chat-page">
  <div class="chat-header">
    <h1>Text Chat</h1>
    <form method="post" style="display: inline">
      <input type="hidden" name="action" value="clear" />
      <button type="submit" class="btn-secondary btn-sm">New Chat</button>
    </form>
  </div>

  <!-- Config row -->
  <details class="chat-config" {% if not chat_history %}open{% endif %}>
    <summary>Model &amp; System Prompt</summary>
    <div class="chat-config-body">
      <label for="cfg-model">Model</label>
      {% if models %}
      <select id="cfg-model" form="chat-form" name="model" required>
        {% for m in models %}
        <option value="{{ m.id }}" {{ "selected" if current_model == m.id else "" }}>{{ m.name }}</option>
        {% endfor %}
      </select>
      {% else %}
      <input
        id="cfg-model"
        form="chat-form"
        name="model"
        type="text"
        required
        placeholder="e.g. openai/gpt-4o"
        value="{{ current_model }}"
      />
      {% endif %}

      <label for="cfg-sys">System prompt (optional)</label>
      <textarea
        id="cfg-sys"
        form="chat-form"
        name="system_prompt"
        rows="2"
        placeholder="Set behavior/instructions for assistant…"
      >
{{ system_prompt }}</textarea
      >
    </div>
  </details>

  <!-- Chat history -->
  <div class="chat-history" id="chat-history">
    {% if not chat_history %}
    <p class="chat-empty">No messages yet. Start the conversation below.</p>
    {% endif %} {% for msg in chat_history %} {% if msg.role == "user" %}
    <div class="chat-bubble chat-bubble--user">
      <span class="bubble-role">You</span>
      <div class="bubble-content">{{ msg.content }}</div>
    </div>
    {% elif msg.role == "assistant" %}
    <div class="chat-bubble chat-bubble--assistant">
      <span class="bubble-role">Assistant</span>
      <div class="bubble-content">{{ msg.content }}</div>
      {% if msg.usage %}
      <span class="bubble-meta"
        >{{ msg.usage.get('total_tokens', '') }} tokens</span
      >
      {% endif %}
    </div>
    {% endif %} {% endfor %} {% if error %}
    <div class="alert alert-error">{{ error }}</div>
    {% endif %}
  </div>

  <!-- Input -->
  <form id="chat-form" method="post" class="chat-input-row">
    <input type="hidden" name="action" value="send" />
    <textarea
      name="prompt"
      id="prompt"
      rows="2"
      required
      placeholder="Type a message…"
      class="chat-input-textarea"
    ></textarea>
    <button type="submit" class="btn-primary">Send</button>
  </form>
</div>

<script>
  // Auto-scroll chat to bottom
  const hist = document.getElementById("chat-history");
  if (hist) hist.scrollTop = hist.scrollHeight;
</script>
{% endblock %}