Implement chat interface with message history and system prompt support; update frontend and tests accordingly

Co-authored-by: Copilot <copilot@github.com>

frontend/app/templates/generate_text.html

@@ -1,52 +1,92 @@
 {% extends "base.html" %} {% block title %}Text Generation — All You Can GET
 AI{% endblock %} {% block content %}
-<div class="card">
-  <h1>Text Generation</h1>
-  <form method="post">
-    <label for="model">Model</label>
-    {% if models %}
-    <select id="model" name="model" required>
-      {% for m in models %}
-      <option value="{{ m.id }}" {% if request.form.get('model', '') == m.id %}selected{% endif %}>{{ m.name }}</option>
-      {% endfor %}
-    </select>
-    {% else %}
-    <input
-      id="model"
-      name="model"
-      type="text"
-      required
-      placeholder="e.g. openai/gpt-4o"
-      value="{{ request.form.get('model', '') }}"
-    />
-    {% endif %}
+<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>
 
-    <label for="prompt">Prompt</label>
-    <textarea
-      id="prompt"
-      name="prompt"
-      rows="5"
-      required
-      placeholder="Describe what you want…"
-    >
-{{ request.form.get('prompt', '') }}</textarea
-    >
+  <!-- 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 %}
 
-    <button type="submit">Generate text</button>
-  </form>
+      <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>
 
-  {% if error %}
-  <div class="alert alert-error mt-2">{{ error }}</div>
-  {% endif %} {% if result %}
-  <div class="result">
-    <h2>Result</h2>
-    <pre>{{ result.content }}</pre>
-    {% if result.usage %}
-    <p class="text-muted mt-1" style="font-size: 0.8rem">
-      Tokens: {{ result.usage.get('total_tokens', '—') }}
-    </p>
+  <!-- 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>
-  {% endif %}
+
+  <!-- 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 %}