create-interview-cockpit 0.4.0 → 0.6.0

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

@@ -16,9 +16,7 @@ interface Props {
   onUpdate: (updated: Annotation) => void;
   messageContent: string;
   initialPos?: { x: number; y: number };
-  responseLength?: string;
-  responseStyle?: string;
-  responseAudience?: string;
+  preferenceSuffix?: string;
 }
 
 export default function AnnotationDialog({
@@ -27,9 +25,7 @@ export default function AnnotationDialog({
   onUpdate,
   messageContent,
   initialPos,
-  responseLength,
-  responseStyle,
-  responseAudience,
+  preferenceSuffix,
 }: Props) {
   const [pos, setPos] = useState(() => ({
     x: initialPos?.x ?? Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
@@ -169,9 +165,7 @@ export default function AnnotationDialog({
           messageContent,
           priorResponse: ann.response,
           followUps: ann.followUps ?? [],
-          responseLength,
-          responseStyle,
-          responseAudience,
+          preferenceSuffix,
         }),
       });
       const data = await res.json();

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

@@ -1,6 +1,15 @@
-import { memo } from "react";
+import { memo, useState, useCallback } from "react";
 import type { UIMessage } from "ai";
-import { User, Bot } from "lucide-react";
+import {
+  User,
+  Bot,
+  Copy,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  Brain,
+  Trash2,
+} from "lucide-react";
 import TextAnnotator from "./TextAnnotator";
 import type { Annotation } from "../types";
 
@@ -11,9 +20,13 @@ interface Props {
   onAnnotationUpdate?: (annotation: Annotation) => void;
   bookmarkedBlockIndex?: number;
   onSetBookmark?: (messageId: string, blockIndex: number) => void;
-  responseLength?: string;
-  responseStyle?: string;
-  responseAudience?: string;
+  preferenceSuffix?: string;
+  onSpecRefined?: (
+    messageId: string,
+    originalSpec: string,
+    newSpec: string,
+  ) => void;
+  onDeleteMessage?: (messageId: string) => void;
 }
 
 function getTextContent(message: UIMessage): string {
@@ -26,6 +39,47 @@ function getTextContent(message: UIMessage): string {
   return "";
 }
 
+function getReasoningContent(message: UIMessage): string {
+  if (!message.parts) return "";
+  return message.parts
+    .filter(
+      (p): p is Extract<UIMessage["parts"][number], { type: "reasoning" }> =>
+        p.type === "reasoning" && typeof (p as any).text === "string",
+    )
+    .map((p) => p.text)
+    .join("\n\n");
+}
+
+function ThinkingBlock({ reasoning }: { reasoning: string }) {
+  const [open, setOpen] = useState(false);
+  const wordCount = reasoning.trim().split(/\s+/).length;
+  return (
+    <div className="mb-2 rounded-lg border border-slate-700/60 bg-slate-800/40 text-xs overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-1.5 px-3 py-2 text-slate-500 hover:text-slate-300 transition-colors text-left"
+      >
+        <Brain className="w-3 h-3 shrink-0 text-violet-400" />
+        <span className="text-violet-400/80 font-medium">Thinking</span>
+        <span className="text-slate-600 ml-auto mr-1">
+          {wordCount.toLocaleString()} words
+        </span>
+        {open ? (
+          <ChevronDown className="w-3 h-3 shrink-0" />
+        ) : (
+          <ChevronRight className="w-3 h-3 shrink-0" />
+        )}
+      </button>
+      {open && (
+        <div className="px-3 pb-3 pt-0 text-slate-500 whitespace-pre-wrap leading-relaxed border-t border-slate-700/40 max-h-80 overflow-y-auto">
+          {reasoning}
+        </div>
+      )}
+    </div>
+  );
+}
+
 const ChatMessage = memo(function ChatMessage({
   message,
   annotations = [],
@@ -33,15 +87,42 @@ const ChatMessage = memo(function ChatMessage({
   onAnnotationUpdate,
   bookmarkedBlockIndex,
   onSetBookmark,
-  responseLength,
-  responseStyle,
-  responseAudience,
+  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(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [content]);
+
+  const handleDelete = useCallback(() => {
+    onDeleteMessage?.(message.id);
+  }, [onDeleteMessage, message.id]);
 
   return (
-    <div className="flex gap-3 animate-fadeIn">
+    <div className="group flex gap-3 animate-fadeIn">
       <div
         className={`w-7 h-7 rounded-full flex items-center justify-center shrink-0 mt-0.5 ${
           isUser
@@ -56,8 +137,32 @@ const ChatMessage = memo(function ChatMessage({
         )}
       </div>
       <div className="min-w-0 flex-1">
-        <div className="text-[10px] font-medium text-slate-600 mb-1">
-          {isUser ? "You" : "Coach"}
+        <div className="flex items-center gap-2 mb-1">
+          <div className="text-[10px] font-medium text-slate-600">
+            {isUser ? "You" : "Coach"}
+          </div>
+          {content && (
+            <button
+              onClick={handleCopy}
+              className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 rounded text-slate-500 hover:text-slate-300 hover:bg-slate-700"
+              title="Copy message"
+            >
+              {copied ? (
+                <Check className="w-3 h-3 text-cyan-400" />
+              ) : (
+                <Copy className="w-3 h-3" />
+              )}
+            </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 ? (
@@ -89,22 +194,22 @@ const ChatMessage = memo(function ChatMessage({
               )}
             </div>
           ) : (
-            <TextAnnotator
-              content={content}
-              messageId={message.id}
-              annotations={annotations}
-              onAnnotationCreate={onAnnotationCreate ?? (() => {})}
-              onAnnotationUpdate={onAnnotationUpdate ?? (() => {})}
-              bookmarkedBlockIndex={bookmarkedBlockIndex}
-              onBookmarkBlock={
-                onSetBookmark
-                  ? (idx) => onSetBookmark(message.id, idx)
-                  : undefined
-              }
-              responseLength={responseLength}
-              responseStyle={responseStyle}
-              responseAudience={responseAudience}
-            />
+            <>
+              {reasoning && <ThinkingBlock reasoning={reasoning} />}
+              <TextAnnotator
+                content={content}
+                messageId={message.id}
+                annotations={annotations}
+                onAnnotationCreate={onAnnotationCreate ?? (() => {})}
+                onAnnotationUpdate={onAnnotationUpdate ?? (() => {})}
+                bookmarkedBlockIndex={bookmarkedBlockIndex}
+                onBookmarkBlock={
+                  onSetBookmark ? stableBookmarkBlock : undefined
+                }
+                preferenceSuffix={preferenceSuffix}
+                onSpecRefined={onSpecRefined ? stableSpecRefined : undefined}
+              />
+            </>
           )}
         </div>
       </div>