create-interview-cockpit 0.5.0 → 0.7.0

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

@@ -8,6 +8,7 @@ import {
   ChevronDown,
   ChevronRight,
   Brain,
+  Trash2,
 } from "lucide-react";
 import TextAnnotator from "./TextAnnotator";
 import type { Annotation } from "../types";
@@ -25,6 +26,7 @@ interface Props {
     originalSpec: string,
     newSpec: string,
   ) => void;
+  onDeleteMessage?: (messageId: string) => void;
 }
 
 function getTextContent(message: UIMessage): string {
@@ -41,10 +43,10 @@ function getReasoningContent(message: UIMessage): string {
   if (!message.parts) return "";
   return message.parts
     .filter(
-      (p): p is { type: "reasoning"; reasoning: string } =>
-        p.type === "reasoning" && typeof (p as any).reasoning === "string",
+      (p): p is Extract<UIMessage["parts"][number], { type: "reasoning" }> =>
+        p.type === "reasoning" && typeof (p as any).text === "string",
     )
-    .map((p) => p.reasoning)
+    .map((p) => p.text)
     .join("\n\n");
 }
 
@@ -87,12 +89,26 @@ const ChatMessage = memo(function ChatMessage({
   onSetBookmark,
   preferenceSuffix,
   onSpecRefined,
+  onDeleteMessage,
 }: Props) {
   const isUser = message.role === "user";
   const content = getTextContent(message);
   const reasoning = !isUser ? getReasoningContent(message) : "";
   const [copied, setCopied] = useState(false);
 
+  // Stable wrappers so MarkdownRenderer's `components` useMemo doesn't invalidate
+  // on every ChatMessage re-render (which would remount InlineCodeBlock and cause
+  // a Zustand update loop).
+  const stableBookmarkBlock = useCallback(
+    (idx: number) => onSetBookmark?.(message.id, idx),
+    [onSetBookmark, message.id],
+  );
+  const stableSpecRefined = useCallback(
+    (orig: string, refined: string) =>
+      onSpecRefined?.(message.id, orig, refined),
+    [onSpecRefined, message.id],
+  );
+
   const handleCopy = useCallback(() => {
     if (!content) return;
     navigator.clipboard.writeText(content).then(() => {
@@ -101,6 +117,10 @@ const ChatMessage = memo(function ChatMessage({
     });
   }, [content]);
 
+  const handleDelete = useCallback(() => {
+    onDeleteMessage?.(message.id);
+  }, [onDeleteMessage, message.id]);
+
   return (
     <div className="group flex gap-3 animate-fadeIn">
       <div
@@ -134,6 +154,15 @@ const ChatMessage = memo(function ChatMessage({
               )}
             </button>
           )}
+          {onDeleteMessage && (
+            <button
+              onClick={handleDelete}
+              className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded text-slate-500 hover:text-red-400 hover:bg-slate-700"
+              title="Delete message"
+            >
+              <Trash2 className="w-3 h-3" />
+            </button>
+          )}
         </div>
         <div className="text-sm leading-relaxed text-slate-200">
           {isUser ? (
@@ -175,17 +204,10 @@ const ChatMessage = memo(function ChatMessage({
                 onAnnotationUpdate={onAnnotationUpdate ?? (() => {})}
                 bookmarkedBlockIndex={bookmarkedBlockIndex}
                 onBookmarkBlock={
-                  onSetBookmark
-                    ? (idx) => onSetBookmark(message.id, idx)
-                    : undefined
+                  onSetBookmark ? stableBookmarkBlock : undefined
                 }
                 preferenceSuffix={preferenceSuffix}
-                onSpecRefined={
-                  onSpecRefined
-                    ? (orig, refined) =>
-                        onSpecRefined(message.id, orig, refined)
-                    : undefined
-                }
+                onSpecRefined={onSpecRefined ? stableSpecRefined : undefined}
               />
             </>
           )}

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,6 +121,178 @@ 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,
@@ -131,8 +306,11 @@ export default function ChatView({ question }: Props) {
     codeSnippets,
     aiSettings,
     setLivePreferenceSuffix,
+    linkConversation,
+    unlinkConversation,
   } = useStore();
   const [showContext, setShowContext] = useState(false);
+  const [showLinkedPicker, setShowLinkedPicker] = useState(false);
   const [systemContext, setSystemContext] = useState(
     question.systemContext || "",
   );
@@ -155,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);
@@ -228,6 +411,7 @@ export default function ChatView({ question }: Props) {
     groupSelections,
     alwaysSendPrefs,
     codeSnippets,
+    linkedConversationIds: question.linkedConversationIds ?? [],
   });
 
   const currentTopic = topics.find((t) => t.id === selectedTopicId);
@@ -245,6 +429,7 @@ export default function ChatView({ question }: Props) {
     groupSelections,
     alwaysSendPrefs,
     codeSnippets,
+    linkedConversationIds: question.linkedConversationIds ?? [],
   };
   aiSettingsRef.current = aiSettings;
 
@@ -379,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;
@@ -462,6 +664,36 @@ 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) => {
@@ -533,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;
@@ -616,126 +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}
-              preferenceSuffix={annotationPrefs}
-              onSpecRefined={handleSpecRefined}
-            />
-          </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">
@@ -754,6 +904,24 @@ export default function ChatView({ question }: Props) {
           />
         </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 && (
@@ -904,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>
   );
 }