create-interview-cockpit 0.4.0 → 0.6.0

package/template/client/src/components/ChatView.tsx

@@ -8,6 +8,7 @@ import {
   useMemo,
   useCallback,
   Fragment,
+  memo,
 } from "react";
 import type { Question, Annotation, ReadingBookmark } from "../types";
 import { useStore } from "../store";
@@ -22,7 +23,9 @@ import {
   X,
   AlertTriangle,
   ChevronRight,
+  Link,
 } from "lucide-react";
+import LinkedConvosPicker from "./LinkedConvosPicker";
 
 interface Props {
   question: Question;
@@ -118,19 +121,196 @@ function appendPreferenceSuffixToMessages(
   });
 }
 
+interface ChatTranscriptProps {
+  messages: UIMessage[];
+  readingBookmark?: ReadingBookmark;
+  hasBookmarkedMessage: boolean;
+  bookmarkRef: { current: HTMLDivElement | null };
+  messagesEndRef: { current: HTMLDivElement | null };
+  onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+  annotationsByMessageId: Record<string, Annotation[]>;
+  emptyAnnotations: Annotation[];
+  onAnnotationCreate: (annotation: Annotation) => void;
+  onAnnotationUpdate: (annotation: Annotation) => void;
+  onSetBookmark: (messageId: string, blockIndex: number) => void;
+  preferenceSuffix: string;
+  onSpecRefined: (
+    messageId: string,
+    originalSpec: string,
+    newSpec: string,
+  ) => void;
+  onDeleteMessage: (messageId: string) => void;
+  isLoading: boolean;
+  isStalled: boolean;
+  status: string;
+  lastResponseLooksTruncated: boolean;
+  onContinue: () => void;
+  error?: Error;
+}
+
+const ChatTranscript = memo(function ChatTranscript({
+  messages,
+  readingBookmark,
+  hasBookmarkedMessage,
+  bookmarkRef,
+  messagesEndRef,
+  onScroll,
+  annotationsByMessageId,
+  emptyAnnotations,
+  onAnnotationCreate,
+  onAnnotationUpdate,
+  onSetBookmark,
+  preferenceSuffix,
+  onSpecRefined,
+  onDeleteMessage,
+  isLoading,
+  isStalled,
+  status,
+  lastResponseLooksTruncated,
+  onContinue,
+  error,
+}: ChatTranscriptProps) {
+  return (
+    <>
+      {hasBookmarkedMessage && (
+        <div className="shrink-0 px-4 pt-2">
+          <button
+            onClick={() => {
+              const el = document.querySelector<HTMLElement>(
+                '[data-reading-bookmark="true"]',
+              );
+              (el ?? bookmarkRef.current)?.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+              });
+            }}
+            className="w-full flex items-center gap-1.5 justify-center text-[11px] text-amber-400/80 hover:text-amber-300 bg-amber-500/5 hover:bg-amber-500/10 border border-amber-500/20 rounded-lg py-1.5 transition-colors"
+          >
+            <span>↓</span> Resume reading from bookmark
+          </button>
+        </div>
+      )}
+
+      <div
+        id="chat-scroll-area"
+        onScroll={onScroll}
+        className="flex-1 overflow-y-auto px-4 py-4 space-y-4"
+      >
+        {messages.length === 0 && (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <p className="text-sm text-slate-500">No messages yet</p>
+              <p className="text-xs text-slate-600 mt-1">
+                Ask about this topic and get explanations with code & diagrams
+              </p>
+            </div>
+          </div>
+        )}
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            ref={message.id === readingBookmark?.messageId ? bookmarkRef : null}
+          >
+            <ChatMessage
+              message={message}
+              annotations={
+                annotationsByMessageId[message.id] ?? emptyAnnotations
+              }
+              onAnnotationCreate={onAnnotationCreate}
+              onAnnotationUpdate={onAnnotationUpdate}
+              bookmarkedBlockIndex={
+                message.id === readingBookmark?.messageId
+                  ? readingBookmark?.blockIndex
+                  : undefined
+              }
+              onSetBookmark={onSetBookmark}
+              preferenceSuffix={preferenceSuffix}
+              onSpecRefined={onSpecRefined}
+              onDeleteMessage={!isLoading ? onDeleteMessage : undefined}
+            />
+          </div>
+        ))}
+
+        {isStalled && status === "streaming" && (
+          <div className="flex items-center gap-3 bg-amber-500/10 border border-amber-500/20 rounded-lg px-4 py-3 text-sm">
+            <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
+            <span className="text-amber-300 flex-1">
+              Response appears to have stalled.
+            </span>
+            <button
+              onClick={onContinue}
+              className="flex items-center gap-1 text-xs text-amber-400 hover:text-amber-200 border border-amber-500/30 hover:border-amber-400/60 rounded-md px-2.5 py-1 transition-colors"
+            >
+              Continue <ChevronRight className="w-3 h-3" />
+            </button>
+          </div>
+        )}
+
+        {status === "ready" && lastResponseLooksTruncated && (
+          <div className="flex justify-start pl-10">
+            <button
+              onClick={onContinue}
+              className="flex items-center gap-1 text-[11px] text-slate-500 hover:text-cyan-400 border border-slate-700/50 hover:border-cyan-500/40 rounded-md px-2.5 py-1 transition-colors"
+              title="Ask the model to continue from where it left off"
+            >
+              <ChevronRight className="w-3 h-3" /> Continue
+            </button>
+          </div>
+        )}
+        {status === "submitted" && (
+          <div className="flex items-start gap-3 px-1">
+            <div className="w-7 h-7 rounded-lg bg-cyan-600/20 flex items-center justify-center shrink-0 mt-0.5">
+              <Loader2 className="w-3.5 h-3.5 text-cyan-400 animate-spin" />
+            </div>
+            <div className="flex items-center gap-1.5 py-2">
+              <span className="text-sm text-slate-400">Thinking</span>
+              <span className="flex gap-0.5">
+                <span
+                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
+                  style={{ animationDelay: "0ms" }}
+                />
+                <span
+                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
+                  style={{ animationDelay: "150ms" }}
+                />
+                <span
+                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
+                  style={{ animationDelay: "300ms" }}
+                />
+              </span>
+            </div>
+          </div>
+        )}
+        {status === "error" && (
+          <div className="bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-3 text-sm text-red-400">
+            {error?.message ||
+              "An error occurred. Check your API key and try again."}
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+    </>
+  );
+});
+
 export default function ChatView({ question }: Props) {
   const {
     refreshCurrentQuestion,
     uploadQuestionFiles,
     removeQuestionFile,
+    linkFileToQuestion,
     clearMessages,
     updateQuestionSystemContext,
     topics,
     selectedTopicId,
     codeSnippets,
     aiSettings,
+    setLivePreferenceSuffix,
+    linkConversation,
+    unlinkConversation,
   } = useStore();
   const [showContext, setShowContext] = useState(false);
+  const [showLinkedPicker, setShowLinkedPicker] = useState(false);
   const [systemContext, setSystemContext] = useState(
     question.systemContext || "",
   );
@@ -142,7 +322,9 @@ export default function ChatView({ question }: Props) {
       Object.entries(aiSettings.promptGroups).map(([k, g]) => [k, g.default]),
     ),
   );
-  const [alwaysSendPrefs, setAlwaysSendPrefs] = useState(false);
+  const [alwaysSendPrefs, setAlwaysSendPrefs] = useState(
+    () => aiSettings.alwaysSendPrefsDefault ?? false,
+  );
   const [annotations, setAnnotations] = useState<Annotation[]>(
     question.annotations ?? [],
   );
@@ -151,6 +333,11 @@ export default function ChatView({ question }: Props) {
   >(question.readingBookmark);
   const bookmarkRef = useRef<HTMLDivElement | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  // Whether the user is pinned to the bottom of the scroll area.
+  // True by default; becomes false when user scrolls up; reset on new message.
+  const stickToBottomRef = useRef(true);
+  // rAF handle so we schedule at most one scroll per animation frame during streaming.
+  const scrollRafRef = useRef<number | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const imageInputRef = useRef<HTMLInputElement>(null);
   const systemContextSaveTimeoutRef = useRef<number | null>(null);
@@ -224,6 +411,7 @@ export default function ChatView({ question }: Props) {
     groupSelections,
     alwaysSendPrefs,
     codeSnippets,
+    linkedConversationIds: question.linkedConversationIds ?? [],
   });
 
   const currentTopic = topics.find((t) => t.id === selectedTopicId);
@@ -241,6 +429,7 @@ export default function ChatView({ question }: Props) {
     groupSelections,
     alwaysSendPrefs,
     codeSnippets,
+    linkedConversationIds: question.linkedConversationIds ?? [],
   };
   aiSettingsRef.current = aiSettings;
 
@@ -375,9 +564,26 @@ export default function ChatView({ question }: Props) {
     return !/[.!?`\])>]$/.test(lastLine);
   }, [messages]);
 
+  // Smooth scroll to bottom whenever a NEW message is added (length changes).
+  // Using messages.length instead of the full messages array avoids firing on
+  // every token update during streaming.
   useEffect(() => {
+    stickToBottomRef.current = true;
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+  }, [messages.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // During streaming: rAF-throttled instant scroll — coalesces many per-token
+  // renders into at most one scroll per animation frame, and avoids restarting a
+  // smooth-scroll animation on every token (which causes jank + layout thrash).
+  useEffect(() => {
+    if (status !== "streaming" || !stickToBottomRef.current) return;
+    if (scrollRafRef.current !== null) return; // already scheduled this frame
+    scrollRafRef.current = requestAnimationFrame(() => {
+      scrollRafRef.current = null;
+      const el = document.getElementById("chat-scroll-area");
+      if (el) el.scrollTop = el.scrollHeight;
+    });
+  }, [messages, status]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (systemContext === question.systemContext) return;
@@ -458,6 +664,94 @@ export default function ChatView({ question }: Props) {
     [question.id],
   );
 
+  const handleDeleteMessage = useCallback(
+    async (messageId: string) => {
+      // Use functional update so we don't close over `messages` — keeping this
+      // callback stable across streaming token updates is critical: if it changed
+      // on every token, React.memo on ChatMessage would be bypassed for ALL N
+      // messages simultaneously, making long chats extremely slow.
+      setMessages((prev) => {
+        const filtered = prev.filter((m) => m.id !== messageId);
+        const serverMessages = filtered.map((m) => ({
+          id: m.id,
+          role: m.role,
+          content: (m.parts ?? [])
+            .filter(
+              (p): p is { type: "text"; text: string } => p.type === "text",
+            )
+            .map((p) => p.text)
+            .join(""),
+          parts: m.parts,
+        }));
+        fetch(`/api/questions/${question.id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ messages: serverMessages }),
+        }).catch((err) => console.error("Failed to delete message:", err));
+        return filtered;
+      });
+    },
+    [setMessages, question.id], // stable — does NOT depend on `messages`
+  );
+
+  // Persist a refined viz spec back to the server so changes survive refresh
+  const handleSpecRefined = useCallback(
+    (messageId: string, originalSpec: string, newSpec: string) => {
+      setMessages((prev) =>
+        prev.map((m) => {
+          if (m.id !== messageId) return m;
+          const updatedParts = (m.parts ?? []).map((p) => {
+            if (p.type !== "text") return p;
+            const tp = p as { type: "text"; text: string };
+            return {
+              ...tp,
+              text: tp.text.split(originalSpec).join(newSpec),
+            };
+          });
+          return { ...m, parts: updatedParts };
+        }),
+      );
+      // Persist to server — rebuild server-side Message[] from updated UIMessages
+      setMessages((prev) => {
+        const serverMessages = prev.map((m) => ({
+          id: m.id,
+          role: m.role,
+          content: (m.parts ?? [])
+            .filter(
+              (p): p is { type: "text"; text: string } => p.type === "text",
+            )
+            .map((p) => p.text)
+            .join(""),
+          parts: m.parts,
+        }));
+        fetch(`/api/questions/${question.id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ messages: serverMessages }),
+        }).catch((err) =>
+          console.error("Failed to persist refined spec:", err),
+        );
+        return prev; // no further state change
+      });
+    },
+    [question.id, setMessages],
+  );
+
+  // Build a preference text for annotation dialogs from ALL current group selections
+  const annotationPrefs = useMemo(() => {
+    const parts: string[] = [];
+    for (const [key, sel] of Object.entries(groupSelections)) {
+      const prompt = aiSettings.promptGroups[key]?.options[sel];
+      if (prompt) parts.push(prompt);
+    }
+    return parts.join(" ");
+  }, [groupSelections, aiSettings.promptGroups]);
+
+  // Keep the store in sync so FileViewerModal can read the current preference string
+  useEffect(() => {
+    setLivePreferenceSuffix(annotationPrefs);
+  }, [annotationPrefs, setLivePreferenceSuffix]);
+
   // Group annotations by message id so we don't run filter() inside render,
   // which would produce a new array reference on every ChatView re-render and
   // defeat React.memo on ChatMessage.
@@ -471,6 +765,22 @@ export default function ChatView({ question }: Props) {
   }, [annotations]);
   const EMPTY_ANNOTATIONS: Annotation[] = useMemo(() => [], []);
 
+  // Memoised O(N) bookmark check — avoids traversing messages on every render.
+  const hasBookmarkedMessage = useMemo(
+    () =>
+      readingBookmark
+        ? messages.some((m) => m.id === readingBookmark.messageId)
+        : false,
+    [messages, readingBookmark],
+  );
+
+  // Track whether the user has scrolled away from the bottom.
+  const handleScrollArea = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const el = e.currentTarget;
+    stickToBottomRef.current =
+      el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+  }, []);
+
   useEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -554,127 +864,28 @@ export default function ChatView({ question }: Props) {
         )}
       </div>
 
-      {/* Sticky bookmark banner — sits outside the scroll container */}
-      {readingBookmark &&
-        messages.some((m) => m.id === readingBookmark.messageId) && (
-          <div className="shrink-0 px-4 pt-2">
-            <button
-              onClick={() => {
-                const el = document.querySelector<HTMLElement>(
-                  '[data-reading-bookmark="true"]',
-                );
-                (el ?? bookmarkRef.current)?.scrollIntoView({
-                  behavior: "smooth",
-                  block: "center",
-                });
-              }}
-              className="w-full flex items-center gap-1.5 justify-center text-[11px] text-amber-400/80 hover:text-amber-300 bg-amber-500/5 hover:bg-amber-500/10 border border-amber-500/20 rounded-lg py-1.5 transition-colors"
-            >
-              <span>↓</span> Resume reading from bookmark
-            </button>
-          </div>
-        )}
-
-      {/* Messages */}
-      <div
-        id="chat-scroll-area"
-        className="flex-1 overflow-y-auto px-4 py-4 space-y-4"
-      >
-        {messages.length === 0 && (
-          <div className="flex items-center justify-center h-full">
-            <div className="text-center">
-              <p className="text-sm text-slate-500">No messages yet</p>
-              <p className="text-xs text-slate-600 mt-1">
-                Ask about this topic and get explanations with code & diagrams
-              </p>
-            </div>
-          </div>
-        )}
-        {messages.map((message) => (
-          <div
-            key={message.id}
-            ref={message.id === readingBookmark?.messageId ? bookmarkRef : null}
-          >
-            <ChatMessage
-              message={message}
-              annotations={
-                annotationsByMessageId[message.id] ?? EMPTY_ANNOTATIONS
-              }
-              onAnnotationCreate={handleAnnotationCreate}
-              onAnnotationUpdate={handleAnnotationUpdate}
-              bookmarkedBlockIndex={
-                message.id === readingBookmark?.messageId
-                  ? readingBookmark?.blockIndex
-                  : undefined
-              }
-              onSetBookmark={handleSetBookmark}
-              responseLength={groupSelections["length"]}
-              responseStyle={groupSelections["style"]}
-              responseAudience={groupSelections["audience"]}
-            />
-          </div>
-        ))}
-
-        {/* Stall warning — shown when streaming has gone silent for 15s */}
-        {isStalled && status === "streaming" && (
-          <div className="flex items-center gap-3 bg-amber-500/10 border border-amber-500/20 rounded-lg px-4 py-3 text-sm">
-            <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
-            <span className="text-amber-300 flex-1">
-              Response appears to have stalled.
-            </span>
-            <button
-              onClick={handleContinue}
-              className="flex items-center gap-1 text-xs text-amber-400 hover:text-amber-200 border border-amber-500/30 hover:border-amber-400/60 rounded-md px-2.5 py-1 transition-colors"
-            >
-              Continue <ChevronRight className="w-3 h-3" />
-            </button>
-          </div>
-        )}
-
-        {/* Continue button — only shown when the last response looks truncated */}
-        {status === "ready" && lastResponseLooksTruncated && (
-          <div className="flex justify-start pl-10">
-            <button
-              onClick={handleContinue}
-              className="flex items-center gap-1 text-[11px] text-slate-500 hover:text-cyan-400 border border-slate-700/50 hover:border-cyan-500/40 rounded-md px-2.5 py-1 transition-colors"
-              title="Ask the model to continue from where it left off"
-            >
-              <ChevronRight className="w-3 h-3" /> Continue
-            </button>
-          </div>
-        )}
-        {status === "submitted" && (
-          <div className="flex items-start gap-3 px-1">
-            <div className="w-7 h-7 rounded-lg bg-cyan-600/20 flex items-center justify-center shrink-0 mt-0.5">
-              <Loader2 className="w-3.5 h-3.5 text-cyan-400 animate-spin" />
-            </div>
-            <div className="flex items-center gap-1.5 py-2">
-              <span className="text-sm text-slate-400">Thinking</span>
-              <span className="flex gap-0.5">
-                <span
-                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
-                  style={{ animationDelay: "0ms" }}
-                />
-                <span
-                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
-                  style={{ animationDelay: "150ms" }}
-                />
-                <span
-                  className="w-1 h-1 rounded-full bg-slate-500 animate-bounce"
-                  style={{ animationDelay: "300ms" }}
-                />
-              </span>
-            </div>
-          </div>
-        )}
-        {status === "error" && (
-          <div className="bg-red-500/10 border border-red-500/20 rounded-lg px-4 py-3 text-sm text-red-400">
-            {error?.message ||
-              "An error occurred. Check your API key and try again."}
-          </div>
-        )}
-        <div ref={messagesEndRef} />
-      </div>
+      <ChatTranscript
+        messages={messages}
+        readingBookmark={readingBookmark}
+        hasBookmarkedMessage={hasBookmarkedMessage}
+        bookmarkRef={bookmarkRef}
+        messagesEndRef={messagesEndRef}
+        onScroll={handleScrollArea}
+        annotationsByMessageId={annotationsByMessageId}
+        emptyAnnotations={EMPTY_ANNOTATIONS}
+        onAnnotationCreate={handleAnnotationCreate}
+        onAnnotationUpdate={handleAnnotationUpdate}
+        onSetBookmark={handleSetBookmark}
+        preferenceSuffix={annotationPrefs}
+        onSpecRefined={handleSpecRefined}
+        onDeleteMessage={handleDeleteMessage}
+        isLoading={isLoading}
+        isStalled={isStalled}
+        status={status}
+        lastResponseLooksTruncated={lastResponseLooksTruncated}
+        onContinue={handleContinue}
+        error={error}
+      />
 
       {/* Input */}
       <div className="border-t border-slate-800 px-4 py-3 shrink-0">
@@ -684,11 +895,33 @@ export default function ChatView({ question }: Props) {
             files={question.contextFiles || []}
             onUpload={(files) => uploadQuestionFiles(question.id, files)}
             onRemove={(fileId) => removeQuestionFile(question.id, fileId)}
+            onLink={(fileId, originalName) =>
+              linkFileToQuestion(question.id, fileId, originalName)
+            }
+            downloadBase={`/api/questions/${question.id}/context-files`}
             label="question"
             compact
           />
         </div>
 
+        {/* Link other conversations as context */}
+        <div className="flex items-center gap-2 mb-2">
+          <button
+            type="button"
+            onClick={() => setShowLinkedPicker(true)}
+            className="inline-flex items-center gap-1 text-[10px] text-slate-600 hover:text-violet-400 transition-colors"
+            title="Link conversations from this topic as context"
+          >
+            <Link className="w-2.5 h-2.5" />
+            Link conversations
+          </button>
+          {(question.linkedConversationIds?.length ?? 0) > 0 && (
+            <span className="text-[10px] bg-violet-500/15 text-violet-400 px-1.5 py-0.5 rounded">
+              {question.linkedConversationIds!.length} linked
+            </span>
+          )}
+        </div>
+
         <form onSubmit={handleSubmit}>
           {/* Attached image thumbnails */}
           {attachedImages.length > 0 && (
@@ -839,6 +1072,15 @@ export default function ChatView({ question }: Props) {
           />
         )}
       </div>
+
+      {/* Linked conversations picker modal */}
+      {showLinkedPicker && (
+        <LinkedConvosPicker
+          question={question}
+          topicId={question.topicId}
+          onClose={() => setShowLinkedPicker(false)}
+        />
+      )}
     </div>
   );
 }