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

Co-authored-by: Copilot <copilot@github.com>
2026-04-29 14:39:38 +02:00
parent 78b76dc331
commit 3d32e6df74
7 changed files with 428 additions and 79 deletions
@@ -695,3 +695,123 @@ pre {
  border-radius: 8px;
  margin-top: 0.5rem;
 }
+
+/* ─── Chat interface ─────────────────────────────────────────────────────── */
+.chat-page {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 100px);
+  max-height: 900px;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.chat-config {
+  border: 1px solid var(--border, #ddd);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+}
+
+.chat-config summary {
+  cursor: pointer;
+  font-weight: 500;
+  user-select: none;
+}
+
+.chat-config-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 0.5rem;
+}
+
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--border, #ddd);
+  border-bottom: 1px solid var(--border, #ddd);
+  margin-bottom: 0.75rem;
+}
+
+.chat-empty {
+  color: var(--text-muted, #888);
+  text-align: center;
+  margin: auto;
+  font-size: 0.9rem;
+}
+
+.chat-bubble {
+  max-width: 80%;
+  padding: 0.6rem 0.9rem;
+  border-radius: 12px;
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.chat-bubble--user {
+  align-self: flex-end;
+  background: var(--accent, #7c6ff7);
+  color: #fff;
+  border-bottom-right-radius: 3px;
+}
+
+.chat-bubble--assistant {
+  align-self: flex-start;
+  background: var(--surface-2, #f0f0f0);
+  color: var(--text, #222);
+  border-bottom-left-radius: 3px;
+}
+
+.bubble-role {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  opacity: 0.7;
+  margin-bottom: 0.25rem;
+}
+
+.bubble-content {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.bubble-meta {
+  display: block;
+  font-size: 0.7rem;
+  opacity: 0.6;
+  margin-top: 0.3rem;
+  text-align: right;
+}
+
+.chat-input-row {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-end;
+}
+
+.chat-input-textarea {
+  flex: 1;
+  resize: none;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.95rem;
+  min-height: 2.5rem;
+  max-height: 8rem;
+}
+
+.btn-sm {
+  padding: 0.3rem 0.7rem;
+  font-size: 0.8rem;
+}