create-interview-cockpit 0.3.0 → 0.5.0

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

@@ -1,7 +1,14 @@
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
-import type { FileUIPart } from "ai";
-import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+import type { FileUIPart, UIMessage } from "ai";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  Fragment,
+} from "react";
 import type { Question, Annotation, ReadingBookmark } from "../types";
 import { useStore } from "../store";
 import ChatMessage from "./ChatMessage";
@@ -13,44 +20,15 @@ import {
   RotateCcw,
   ImagePlus,
   X,
+  AlertTriangle,
+  ChevronRight,
 } from "lucide-react";
 
 interface Props {
   question: Question;
 }
 
-type ResponseLength = "normal" | "moderate" | "concise";
-type ResponseStyle = "prose" | "bullets" | "structured";
-type ResponseAudience = "normal" | "beginner";
-
-interface ResponsePreferenceCache {
-  length?: ResponseLength;
-  style?: ResponseStyle;
-  audience?: ResponseAudience;
-}
-
-const responseLengthPrompts: Record<ResponseLength, string> = {
-  concise:
-    "Keep the response concise. Aim for roughly 300 characters of text when possible. These limits do not apply to mermaid diagrams. You can generate as many as you want to explain the solution effectively. Prioritize diagrams over text.",
-  moderate:
-    "Keep the response moderately detailed. Aim for roughly 550 characters of text when possible.",
-  normal:
-    "Use a fuller answer with enough context to explain the idea clearly.",
-};
-
-const responseStylePrompts: Record<ResponseStyle, string> = {
-  prose:
-    "Use natural prose with short paragraphs. Avoid bullet lists and numbered lists unless I explicitly ask for them.",
-  bullets: "Use bullet points and short lists as the main format.",
-  structured:
-    "Use structured sections with headings and numbered steps when helpful.",
-};
-
-const responseAudiencePrompts: Record<ResponseAudience, string> = {
-  normal: "",
-  beginner:
-    "When using technical terms or abbreviations, immediately expand their meaning in square brackets right after the term — e.g. 'TCP [Transmission Control Protocol — a connection-oriented transport protocol]' or 'idempotent [an operation that produces the same result no matter how many times it is applied]'. Do this throughout your response so I never need to look anything up.",
-};
+type ResponsePreferenceCache = Record<string, string | undefined>;
 
 function findLastUserMessageIndex(messages: any[]): number {
   for (let index = messages.length - 1; index >= 0; index -= 1) {
@@ -64,23 +42,16 @@ function findLastUserMessageIndex(messages: any[]): number {
 
 function buildPreferenceSuffix(
   cache: ResponsePreferenceCache,
-  responseLength: ResponseLength,
-  responseStyle: ResponseStyle,
-  responseAudience: ResponseAudience,
+  selections: Record<string, string>,
+  promptGroups: Record<string, { options: Record<string, string> }>,
 ): string {
   const updates: string[] = [];
 
-  if (cache.length !== responseLength) {
-    updates.push(responseLengthPrompts[responseLength]);
-  }
-
-  if (cache.style !== responseStyle) {
-    updates.push(responseStylePrompts[responseStyle]);
-  }
-
-  if (cache.audience !== responseAudience) {
-    const audiencePrompt = responseAudiencePrompts[responseAudience];
-    if (audiencePrompt) updates.push(audiencePrompt);
+  for (const [key, sel] of Object.entries(selections)) {
+    if (cache[key] !== sel) {
+      const prompt = promptGroups[key]?.options[sel];
+      if (prompt) updates.push(prompt);
+    }
   }
 
   if (updates.length === 0) {
@@ -152,23 +123,30 @@ export default function ChatView({ question }: Props) {
     refreshCurrentQuestion,
     uploadQuestionFiles,
     removeQuestionFile,
+    linkFileToQuestion,
     clearMessages,
     updateQuestionSystemContext,
     topics,
     selectedTopicId,
     codeSnippets,
+    aiSettings,
+    setLivePreferenceSuffix,
   } = useStore();
   const [showContext, setShowContext] = useState(false);
   const [systemContext, setSystemContext] = useState(
     question.systemContext || "",
   );
   const [input, setInput] = useState("");
-  const [responseLength, setResponseLength] =
-    useState<ResponseLength>("normal");
-  const [responseStyle, setResponseStyle] = useState<ResponseStyle>("prose");
-  const [responseAudience, setResponseAudience] =
-    useState<ResponseAudience>("normal");
-  const [alwaysSendPrefs, setAlwaysSendPrefs] = useState(false);
+  const [groupSelections, setGroupSelections] = useState<
+    Record<string, string>
+  >(() =>
+    Object.fromEntries(
+      Object.entries(aiSettings.promptGroups).map(([k, g]) => [k, g.default]),
+    ),
+  );
+  const [alwaysSendPrefs, setAlwaysSendPrefs] = useState(
+    () => aiSettings.alwaysSendPrefsDefault ?? false,
+  );
   const [annotations, setAnnotations] = useState<Annotation[]>(
     question.annotations ?? [],
   );
@@ -183,6 +161,20 @@ export default function ChatView({ question }: Props) {
   const responsePreferenceCacheRef = useRef<ResponsePreferenceCache>({});
   const pendingResponsePreferenceCacheRef =
     useRef<ResponsePreferenceCache | null>(null);
+  const aiSettingsRef = useRef(aiSettings);
+  const lastStreamActivityRef = useRef<number>(Date.now());
+  const [isStalled, setIsStalled] = useState(false);
+
+  // Sync groupSelections when new groups are added via settings
+  useEffect(() => {
+    setGroupSelections((prev) => {
+      const additions: Record<string, string> = {};
+      for (const [k, g] of Object.entries(aiSettings.promptGroups)) {
+        if (!(k in prev)) additions[k] = g.default;
+      }
+      return Object.keys(additions).length ? { ...prev, ...additions } : prev;
+    });
+  }, [aiSettings.promptGroups]);
 
   // ── Inline image attachments (per-message, ephemeral) ──────────────────────
   const [attachedImages, setAttachedImages] = useState<
@@ -232,9 +224,8 @@ export default function ChatView({ question }: Props) {
     questionTitle: question.title,
     codeContextFiles: question.codeContextFiles,
     systemContext,
-    responseLength,
-    responseStyle,
-    responseAudience,
+    responseLength: "normal" as string,
+    groupSelections,
     alwaysSendPrefs,
     codeSnippets,
   });
@@ -250,12 +241,12 @@ export default function ChatView({ question }: Props) {
     questionTitle: question.title,
     codeContextFiles: question.codeContextFiles,
     systemContext,
-    responseLength,
-    responseStyle,
-    responseAudience,
+    responseLength: groupSelections["length"] ?? "normal",
+    groupSelections,
     alwaysSendPrefs,
     codeSnippets,
   };
+  aiSettingsRef.current = aiSettings;
 
   const transport = useMemo(
     () =>
@@ -268,9 +259,8 @@ export default function ChatView({ question }: Props) {
                   requestOptionsRef.current.alwaysSendPrefs
                     ? {}
                     : responsePreferenceCacheRef.current,
-                  requestOptionsRef.current.responseLength,
-                  requestOptionsRef.current.responseStyle,
-                  requestOptionsRef.current.responseAudience,
+                  requestOptionsRef.current.groupSelections,
+                  aiSettingsRef.current.promptGroups,
                 )
               : "";
 
@@ -280,11 +270,7 @@ export default function ChatView({ question }: Props) {
           );
 
           pendingResponsePreferenceCacheRef.current = preferenceSuffix
-            ? {
-                length: requestOptionsRef.current.responseLength,
-                style: requestOptionsRef.current.responseStyle,
-                audience: requestOptionsRef.current.responseAudience,
-              }
+            ? { ...requestOptionsRef.current.groupSelections }
             : null;
 
           return {
@@ -304,10 +290,12 @@ export default function ChatView({ question }: Props) {
   // and triggering an update loop.
   const initialMessages = useMemo(
     () =>
-      question.messages.map((m) => ({
+      (question.messages ?? []).map((m) => ({
         id: m.id,
         role: m.role as "user" | "assistant",
-        parts: [{ type: "text" as const, text: m.content }],
+        parts: (m.parts ?? [
+          { type: "text" as const, text: m.content },
+        ]) as UIMessage["parts"],
       })),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [question.id],
@@ -337,6 +325,60 @@ export default function ChatView({ question }: Props) {
 
   const isLoading = status === "streaming" || status === "submitted";
 
+  // ── Stall detection ────────────────────────────────────────────────────────
+  // Track when streaming content last arrived
+  useEffect(() => {
+    if (status === "streaming") {
+      lastStreamActivityRef.current = Date.now();
+    }
+  }, [messages, status]);
+
+  // Start an interval when streaming begins; fire stall if silent for 15s
+  useEffect(() => {
+    if (status !== "streaming") {
+      setIsStalled(false);
+      return;
+    }
+    lastStreamActivityRef.current = Date.now();
+    const id = window.setInterval(() => {
+      if (Date.now() - lastStreamActivityRef.current > 15_000) {
+        setIsStalled(true);
+      }
+    }, 3_000);
+    return () => window.clearInterval(id);
+  }, [status]);
+  // ──────────────────────────────────────────────────────────────────────────
+
+  const handleContinue = useCallback(() => {
+    setIsStalled(false);
+    sendMessage({ text: "Please continue from where you left off." });
+  }, [sendMessage]);
+
+  // Only show the Continue button if the last assistant message looks truncated
+  // (doesn't end with sentence-terminating punctuation or a closing code fence).
+  const lastResponseLooksTruncated = useMemo(() => {
+    if (messages.length === 0) return false;
+    const last = messages[messages.length - 1];
+    if (last.role !== "assistant") return false;
+    // Find the last text part
+    const parts: any[] = (last as any).parts ?? [];
+    let text = "";
+    for (let i = parts.length - 1; i >= 0; i--) {
+      const p = parts[i];
+      if (p?.type === "text" && p.text) {
+        text = p.text;
+        break;
+      }
+    }
+    const trimmed = text.trimEnd();
+    if (!trimmed) return false;
+    // Walk back to last non-empty line
+    const lines = trimmed.split("\n");
+    const lastLine = (lines.filter(Boolean).pop() ?? "").trimEnd();
+    // Complete if ends with sentence punctuation or structural close chars
+    return !/[.!?`\])>]$/.test(lastLine);
+  }, [messages]);
+
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
@@ -420,6 +462,64 @@ export default function ChatView({ question }: Props) {
     [question.id],
   );
 
+  // 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.
@@ -570,12 +670,40 @@ export default function ChatView({ question }: Props) {
                   : undefined
               }
               onSetBookmark={handleSetBookmark}
-              responseLength={responseLength}
-              responseStyle={responseStyle}
-              responseAudience={responseAudience}
+              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">
@@ -617,6 +745,10 @@ 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
           />
@@ -705,70 +837,40 @@ export default function ChatView({ question }: Props) {
         </form>
 
         {/* Response controls */}
-        <div className="flex items-center gap-4 mt-2">
-          <div className="flex items-center gap-1.5">
-            <span className="text-[10px] text-slate-500 uppercase tracking-wider">
-              Length
-            </span>
-            {(["normal", "moderate", "concise"] as const).map((opt) => (
-              <button
-                key={opt}
-                onClick={() => setResponseLength(opt)}
-                className={`px-2 py-0.5 text-[11px] rounded-md transition-colors ${
-                  responseLength === opt
-                    ? "bg-cyan-600/30 text-cyan-300 border border-cyan-600/50"
-                    : "text-slate-500 hover:text-slate-300 border border-transparent"
-                }`}
-              >
-                {opt.charAt(0).toUpperCase() + opt.slice(1)}
-              </button>
-            ))}
-          </div>
-          <div className="w-px h-4 bg-slate-700" />
-          <div className="flex items-center gap-1.5">
-            <span className="text-[10px] text-slate-500 uppercase tracking-wider">
-              Style
-            </span>
-            {(
-              [
-                ["prose", "Prose"],
-                ["bullets", "Bullets"],
-                ["structured", "Structured"],
-              ] as const
-            ).map(([key, label]) => (
-              <button
-                key={key}
-                onClick={() => setResponseStyle(key)}
-                className={`px-2 py-0.5 text-[11px] rounded-md transition-colors ${
-                  responseStyle === key
-                    ? "bg-cyan-600/30 text-cyan-300 border border-cyan-600/50"
-                    : "text-slate-500 hover:text-slate-300 border border-transparent"
-                }`}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-          <div className="w-px h-4 bg-slate-700" />
-          <div className="flex items-center gap-1.5">
-            <span className="text-[10px] text-slate-500 uppercase tracking-wider">
-              Mode
-            </span>
-            {(["normal", "beginner"] as const).map((opt) => (
-              <button
-                key={opt}
-                onClick={() => setResponseAudience(opt)}
-                className={`px-2 py-0.5 text-[11px] rounded-md transition-colors ${
-                  responseAudience === opt
-                    ? "bg-cyan-600/30 text-cyan-300 border border-cyan-600/50"
-                    : "text-slate-500 hover:text-slate-300 border border-transparent"
-                }`}
-              >
-                {opt.charAt(0).toUpperCase() + opt.slice(1)}
-              </button>
-            ))}
-          </div>
-          <div className="w-px h-4 bg-slate-700" />
+        <div className="flex items-center gap-3 mt-2 flex-wrap">
+          {Object.entries(aiSettings.promptGroups).map(
+            ([groupKey, group], idx) => (
+              <Fragment key={groupKey}>
+                {idx > 0 && <div className="w-px h-4 bg-slate-700 shrink-0" />}
+                <div className="flex items-center gap-1">
+                  <span className="text-[10px] text-slate-500 uppercase tracking-wider shrink-0">
+                    {group.label.replace(/^Response\s+/i, "")}
+                  </span>
+                  {Object.keys(group.options).map((optKey) => (
+                    <button
+                      key={optKey}
+                      onClick={() =>
+                        setGroupSelections((p) => ({
+                          ...p,
+                          [groupKey]: optKey,
+                        }))
+                      }
+                      className={`px-2 py-0.5 text-[11px] rounded-md transition-colors ${
+                        groupSelections[groupKey] === optKey
+                          ? "bg-cyan-600/30 text-cyan-300 border border-cyan-600/50"
+                          : "text-slate-500 hover:text-slate-300 border border-transparent"
+                      }`}
+                    >
+                      {optKey.charAt(0).toUpperCase() + optKey.slice(1)}
+                    </button>
+                  ))}
+                </div>
+              </Fragment>
+            ),
+          )}
+          {Object.keys(aiSettings.promptGroups).length > 0 && (
+            <div className="w-px h-4 bg-slate-700 shrink-0" />
+          )}
           <button
             onClick={() => setAlwaysSendPrefs((p) => !p)}
             title={