From 6a6305e8d1d4fca2f2d4f0f349134565ff5a386e Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Sat, 4 Apr 2026 07:53:50 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Updated=20streamChat()=20API,=20ChatWid?=
 =?UTF-8?q?get,=20and=20ChatPage=20to=20thread=20conv=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/api/chat.ts"
- "frontend/src/components/ChatWidget.tsx"
- "frontend/src/pages/ChatPage.tsx"
- "frontend/src/pages/ChatPage.module.css"

GSD-Task: S04/T02
---
 frontend/src/api/chat.ts               |  16 +-
 frontend/src/components/ChatWidget.tsx |  26 +-
 frontend/src/pages/ChatPage.module.css | 103 ++++++--
 frontend/src/pages/ChatPage.tsx        | 314 +++++++++++++++++--------
 4 files changed, 332 insertions(+), 127 deletions(-)

diff --git a/frontend/src/api/chat.ts b/frontend/src/api/chat.ts
index 82a1a24..cc75c36 100644
--- a/frontend/src/api/chat.ts
+++ b/frontend/src/api/chat.ts
@@ -21,10 +21,15 @@ export interface ChatSource {
   section_heading: string;
 }
 
+export interface ChatDoneMeta {
+  cascade_tier: string;
+  conversation_id: string;
+}
+
 export interface ChatCallbacks {
   onSources: (sources: ChatSource[]) => void;
   onToken: (text: string) => void;
-  onDone: (meta: { cascade_tier: string }) => void;
+  onDone: (meta: ChatDoneMeta) => void;
   onError: (message: string) => void;
 }
 
@@ -36,6 +41,7 @@ export function streamChat(
   query: string,
   callbacks: ChatCallbacks,
   creator?: string,
+  conversationId?: string,
 ): AbortController {
   const controller = new AbortController();
 
@@ -57,7 +63,11 @@ export function streamChat(
   fetch(`${BASE}/chat`, {
     method: "POST",
     headers,
-    body: JSON.stringify({ query, creator: creator ?? null }),
+    body: JSON.stringify({
+      query,
+      creator: creator ?? null,
+      conversation_id: conversationId ?? null,
+    }),
     signal: controller.signal,
   })
     .then(async (res) => {
@@ -116,7 +126,7 @@ export function streamChat(
                 callbacks.onToken(JSON.parse(rawData) as string);
                 break;
               case "done":
-                callbacks.onDone(JSON.parse(rawData) as { cascade_tier: string });
+                callbacks.onDone(JSON.parse(rawData) as ChatDoneMeta);
                 break;
               case "error": {
                 const err = JSON.parse(rawData) as { message?: string };
diff --git a/frontend/src/components/ChatWidget.tsx b/frontend/src/components/ChatWidget.tsx
index 0a64071..1f45a1e 100644
--- a/frontend/src/components/ChatWidget.tsx
+++ b/frontend/src/components/ChatWidget.tsx
@@ -120,6 +120,7 @@ export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps)
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [streaming, setStreaming] = useState(false);
+  const [conversationId, setConversationId] = useState<string | undefined>(undefined);
 
   const abortRef = useRef<AbortController | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -151,15 +152,24 @@ export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps)
     };
   }, []);
 
+  const handleClose = useCallback(() => {
+    abortRef.current?.abort();
+    setOpen(false);
+    setMessages([]);
+    setInput("");
+    setStreaming(false);
+    setConversationId(undefined);
+  }, []);
+
   // Escape key closes panel
   useEffect(() => {
     if (!open) return;
     const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key === "Escape") handleClose();
     };
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
-  }, [open]);
+  }, [open, handleClose]);
 
   const sendMessage = useCallback(
     (text: string) => {
@@ -168,6 +178,10 @@ export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps)
 
       abortRef.current?.abort();
 
+      // Generate conversation_id on first message
+      const cid = conversationId ?? crypto.randomUUID();
+      if (!conversationId) setConversationId(cid);
+
       const userMsg: Message = { role: "user", text: q, sources: [], done: true };
       const assistantMsg: Message = { role: "assistant", text: "", sources: [], done: false };
       const newMessages = [...messages, userMsg, assistantMsg];
@@ -192,7 +206,8 @@ export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps)
               ),
             );
           },
-          onDone: () => {
+          onDone: (meta) => {
+            setConversationId(meta.conversation_id);
             setMessages((prev) =>
               prev.map((m, i) => (i === assistantIndex ? { ...m, done: true } : m)),
             );
@@ -208,9 +223,10 @@ export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps)
           },
         },
         creatorName,
+        cid,
       );
     },
-    [messages, streaming, creatorName],
+    [messages, streaming, creatorName, conversationId],
   );
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -249,7 +265,7 @@ export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps)
           </div>
           <button
             className={styles.closeBtn}
-            onClick={() => setOpen(false)}
+            onClick={handleClose}
             aria-label="Close chat"
           >
             ✕
diff --git a/frontend/src/pages/ChatPage.module.css b/frontend/src/pages/ChatPage.module.css
index f43638e..f56c293 100644
--- a/frontend/src/pages/ChatPage.module.css
+++ b/frontend/src/pages/ChatPage.module.css
@@ -1,4 +1,4 @@
-/* ChatPage — dark theme matching existing Chrysopedia styles */
+/* ChatPage — dark theme, multi-message conversation layout */
 
 .container {
   max-width: 800px;
@@ -9,11 +9,39 @@
   min-height: 60vh;
 }
 
+/* ── Header ───────────────────────────────────────────────── */
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
 .title {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--color-text-primary);
-  margin: 0 0 1.5rem;
+  margin: 0;
+}
+
+.newConversationBtn {
+  padding: 0.375rem 0.75rem;
+  background: transparent;
+  color: var(--color-accent);
+  border: 1px solid var(--color-accent);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+
+.newConversationBtn:hover {
+  background: var(--color-accent);
+  color: #0f0f14;
 }
 
 /* ── Input area ───────────────────────────────────────────── */
@@ -21,7 +49,11 @@
 .inputRow {
   display: flex;
   gap: 0.5rem;
-  margin-bottom: 1.5rem;
+  margin-top: auto;
+  padding-top: 1rem;
+  position: sticky;
+  bottom: 0;
+  background: var(--color-bg-page);
 }
 
 .input {
@@ -68,17 +100,40 @@
   cursor: not-allowed;
 }
 
-/* ── Response area ────────────────────────────────────────── */
+/* ── Messages area ────────────────────────────────────────── */
 
-.responseArea {
+.messagesArea {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  padding-bottom: 0.5rem;
+}
+
+.userMsg {
+  align-self: flex-end;
+  max-width: 80%;
+  background: var(--color-accent);
+  color: #0f0f14;
+  padding: 0.625rem 0.875rem;
+  border-radius: 12px 12px 2px 12px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.assistantMsg {
+  align-self: flex-start;
+  max-width: 90%;
   background: var(--color-bg-surface);
   border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  min-height: 100px;
+  border-radius: 12px 12px 12px 2px;
+  padding: 1rem;
 }
 
+/* ── Response text ────────────────────────────────────────── */
+
 .responseText {
   color: var(--color-text-primary);
   font-size: 0.9375rem;
@@ -133,13 +188,14 @@
   border-radius: 8px;
   padding: 0.75rem;
   font-size: 0.875rem;
-  margin-bottom: 1rem;
 }
 
 /* ── Citations / Sources ──────────────────────────────────── */
 
 .sourcesSection {
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border);
 }
 
 .sourcesTitle {
@@ -148,7 +204,7 @@
   color: var(--color-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.5rem;
 }
 
 .sourceList {
@@ -157,27 +213,27 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 
 .sourceItem {
   display: flex;
   gap: 0.625rem;
   align-items: baseline;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
 }
 
 .sourceNumber {
   flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.25rem;
+  height: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-accent);
   color: #0f0f14;
   border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   font-weight: 700;
 }
 
@@ -193,7 +249,7 @@
 
 .sourceMeta {
   color: var(--color-text-secondary);
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
 }
 
 /* ── Citation superscript links in text ───────────────────── */
@@ -222,6 +278,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  flex: 1;
   min-height: 200px;
   color: var(--color-text-secondary);
   font-size: 0.9375rem;
@@ -241,6 +298,12 @@
     padding: 1rem 0.75rem;
   }
 
+  .headerRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
   .inputRow {
     flex-direction: column;
   }
@@ -248,4 +311,8 @@
   .submitBtn {
     width: 100%;
   }
+
+  .userMsg {
+    max-width: 90%;
+  }
 }
diff --git a/frontend/src/pages/ChatPage.tsx b/frontend/src/pages/ChatPage.tsx
index e0a47c9..674bcd4 100644
--- a/frontend/src/pages/ChatPage.tsx
+++ b/frontend/src/pages/ChatPage.tsx
@@ -1,9 +1,10 @@
 /**
- * ChatPage — ask a question, receive a streamed encyclopedic response with citations.
+ * ChatPage — multi-turn chat with streamed encyclopedic responses and citations.
  *
  * Uses SSE streaming via api/chat.ts to display tokens in real-time.
  * Citation markers [N] in the streamed text become superscript links to
- * the source list rendered below the response.
+ * the source list rendered below the response. Conversations are threaded
+ * via conversation_id backed by Redis history on the server.
  */
 
 import React, { useState, useRef, useCallback, useEffect } from "react";
@@ -15,9 +16,16 @@ import styles from "./ChatPage.module.css";
 // Matches [1], [2,3], [1,2,3] etc. — same regex as utils/citations.tsx
 const CITATION_RE = /\[(\d+(?:,\s*\d+)*)\]/g;
 
+interface Message {
+  role: "user" | "assistant";
+  text: string;
+  sources: ChatSource[];
+  done: boolean;
+  error?: string;
+}
+
 /**
  * Parse text containing [N] markers into React nodes with citation links.
- * Links scroll to the source list item and reference ChatSource metadata.
  */
 function parseChatCitations(
   text: string,
@@ -80,16 +88,16 @@ function parseChatCitations(
 export default function ChatPage() {
   useDocumentTitle("Chat — Chrysopedia");
 
-  const [query, setQuery] = useState("");
-  const [sources, setSources] = useState<ChatSource[]>([]);
-  const [responseText, setResponseText] = useState("");
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
   const [streaming, setStreaming] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [done, setDone] = useState(false);
+  const [conversationId, setConversationId] = useState<string | undefined>(
+    undefined,
+  );
 
   const abortRef = useRef<AbortController | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
 
   // Cleanup on unmount
   useEffect(() => {
@@ -98,56 +106,215 @@ export default function ChatPage() {
     };
   }, []);
 
+  // Scroll to bottom when messages update
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const sendMessage = useCallback(
+    (text: string) => {
+      const q = text.trim();
+      if (!q || streaming) return;
+
+      abortRef.current?.abort();
+
+      // Generate conversation_id on first message
+      const cid = conversationId ?? crypto.randomUUID();
+      if (!conversationId) setConversationId(cid);
+
+      const userMsg: Message = {
+        role: "user",
+        text: q,
+        sources: [],
+        done: true,
+      };
+      const assistantMsg: Message = {
+        role: "assistant",
+        text: "",
+        sources: [],
+        done: false,
+      };
+      const newMessages = [...messages, userMsg, assistantMsg];
+      setMessages(newMessages);
+      setInput("");
+      setStreaming(true);
+
+      const assistantIndex = newMessages.length - 1;
+
+      abortRef.current = streamChat(
+        q,
+        {
+          onSources: (sources) => {
+            setMessages((prev) =>
+              prev.map((m, i) =>
+                i === assistantIndex ? { ...m, sources } : m,
+              ),
+            );
+          },
+          onToken: (token) => {
+            setMessages((prev) =>
+              prev.map((m, i) =>
+                i === assistantIndex ? { ...m, text: m.text + token } : m,
+              ),
+            );
+          },
+          onDone: (meta) => {
+            setConversationId(meta.conversation_id);
+            setMessages((prev) =>
+              prev.map((m, i) =>
+                i === assistantIndex ? { ...m, done: true } : m,
+              ),
+            );
+            setStreaming(false);
+          },
+          onError: (msg) => {
+            setMessages((prev) =>
+              prev.map((m, i) =>
+                i === assistantIndex ? { ...m, done: true, error: msg } : m,
+              ),
+            );
+            setStreaming(false);
+          },
+        },
+        undefined, // no creator scope on the main chat page
+        cid,
+      );
+    },
+    [messages, streaming, conversationId],
+  );
+
   const handleSubmit = useCallback(
     (e: React.FormEvent) => {
       e.preventDefault();
-      const q = query.trim();
-      if (!q || streaming) return;
-
-      // Reset state
-      abortRef.current?.abort();
-      setSources([]);
-      setResponseText("");
-      setError(null);
-      setDone(false);
-      setLoading(true);
-      setStreaming(true);
-
-      abortRef.current = streamChat(q, {
-        onSources: (s) => {
-          setSources(s);
-          setLoading(false);
-        },
-        onToken: (text) => {
-          setResponseText((prev) => prev + text);
-        },
-        onDone: () => {
-          setStreaming(false);
-          setDone(true);
-        },
-        onError: (msg) => {
-          setError(msg);
-          setStreaming(false);
-          setLoading(false);
-        },
-      });
+      sendMessage(input);
     },
-    [query, streaming],
+    [input, sendMessage],
   );
 
-  const hasResponse = responseText.length > 0 || sources.length > 0;
+  const handleNewConversation = useCallback(() => {
+    abortRef.current?.abort();
+    setMessages([]);
+    setInput("");
+    setStreaming(false);
+    setConversationId(undefined);
+    inputRef.current?.focus();
+  }, []);
+
+  const hasMessages = messages.length > 0;
 
   return (
     <div className={styles.container}>
-      <h1 className={styles.title}>Ask Chrysopedia</h1>
+      <div className={styles.headerRow}>
+        <h1 className={styles.title}>Ask Chrysopedia</h1>
+        {hasMessages && (
+          <button
+            className={styles.newConversationBtn}
+            onClick={handleNewConversation}
+            title="Start a new conversation"
+          >
+            + New conversation
+          </button>
+        )}
+      </div>
+
+      {!hasMessages && !streaming && (
+        <div className={styles.placeholder}>
+          <span className={styles.placeholderIcon}>💬</span>
+          <p>Ask any question about music production techniques.</p>
+          <p>Responses include citations linking to source pages and videos.</p>
+        </div>
+      )}
+
+      {hasMessages && (
+        <div className={styles.messagesArea}>
+          {messages.map((msg, i) => {
+            if (msg.role === "user") {
+              return (
+                <div key={i} className={styles.userMsg}>
+                  {msg.text}
+                </div>
+              );
+            }
+
+            // Assistant message
+            return (
+              <div key={i} className={styles.assistantMsg}>
+                {msg.error ? (
+                  <div className={styles.error}>{msg.error}</div>
+                ) : (
+                  <>
+                    <div className={styles.responseText}>
+                      {parseChatCitations(msg.text, msg.sources)}
+                      {!msg.done && <span className={styles.cursor} />}
+                    </div>
+                    {msg.done && msg.sources.length > 0 && (
+                      <div className={styles.sourcesSection}>
+                        <h3 className={styles.sourcesTitle}>Sources</h3>
+                        <ol className={styles.sourceList}>
+                          {msg.sources.map((src) => {
+                            const href = src.section_anchor
+                              ? `/techniques/${src.slug}#${src.section_anchor}`
+                              : `/techniques/${src.slug}`;
+                            return (
+                              <li
+                                key={src.number}
+                                className={styles.sourceItem}
+                              >
+                                <span className={styles.sourceNumber}>
+                                  {src.number}
+                                </span>
+                                <div>
+                                  <Link
+                                    to={href}
+                                    className={styles.sourceLink}
+                                  >
+                                    {src.title}
+                                    {src.section_heading
+                                      ? ` — ${src.section_heading}`
+                                      : ""}
+                                  </Link>
+                                  {src.creator_name && (
+                                    <span className={styles.sourceMeta}>
+                                      {" "}
+                                      · {src.creator_name}
+                                    </span>
+                                  )}
+                                </div>
+                              </li>
+                            );
+                          })}
+                        </ol>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            );
+          })}
+
+          {/* Typing indicator — before first token arrives */}
+          {streaming &&
+            messages.length > 0 &&
+            messages[messages.length - 1]?.role === "assistant" &&
+            messages[messages.length - 1]?.text === "" &&
+            !messages[messages.length - 1]?.error && (
+              <div className={styles.loading}>
+                <div className={styles.spinner} />
+                Thinking…
+              </div>
+            )}
+
+          <div ref={messagesEndRef} />
+        </div>
+      )}
 
       <form onSubmit={handleSubmit} className={styles.inputRow}>
         <input
           ref={inputRef}
           type="text"
           className={styles.input}
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
           placeholder="Ask about music production techniques…"
           disabled={streaming}
           autoFocus
@@ -155,66 +322,11 @@ export default function ChatPage() {
         <button
           type="submit"
           className={styles.submitBtn}
-          disabled={!query.trim() || streaming}
+          disabled={!input.trim() || streaming}
         >
-          {streaming ? "Streaming…" : "Ask"}
+          {streaming ? "Streaming…" : "Send"}
         </button>
       </form>
-
-      {error && <div className={styles.error}>{error}</div>}
-
-      {loading && (
-        <div className={styles.loading}>
-          <div className={styles.spinner} />
-          Searching for sources…
-        </div>
-      )}
-
-      {hasResponse && (
-        <div className={styles.responseArea}>
-          <div className={styles.responseText}>
-            {parseChatCitations(responseText, sources)}
-            {streaming && <span className={styles.cursor} />}
-          </div>
-
-          {sources.length > 0 && (done || !streaming) && (
-            <div className={styles.sourcesSection}>
-              <h2 className={styles.sourcesTitle}>Sources</h2>
-              <ol className={styles.sourceList}>
-                {sources.map((src) => {
-                  const href = src.section_anchor
-                    ? `/techniques/${src.slug}#${src.section_anchor}`
-                    : `/techniques/${src.slug}`;
-                  return (
-                    <li key={src.number} className={styles.sourceItem}>
-                      <span className={styles.sourceNumber}>{src.number}</span>
-                      <div>
-                        <Link to={href} className={styles.sourceLink}>
-                          {src.title}
-                          {src.section_heading ? ` — ${src.section_heading}` : ""}
-                        </Link>
-                        {src.creator_name && (
-                          <span className={styles.sourceMeta}>
-                            {" "}· {src.creator_name}
-                          </span>
-                        )}
-                      </div>
-                    </li>
-                  );
-                })}
-              </ol>
-            </div>
-          )}
-        </div>
-      )}
-
-      {!hasResponse && !loading && !error && (
-        <div className={styles.placeholder}>
-          <span className={styles.placeholderIcon}>💬</span>
-          <p>Ask any question about music production techniques.</p>
-          <p>Responses include citations linking to source pages and videos.</p>
-        </div>
-      )}
     </div>
   );
 }