extracted chat component to widgets

2026-02-17 19:52:41 +00:00
parent 21213c281d
commit 74e98e95e1
37 changed files with 44 additions and 327 deletions
@@ -0,0 +1,94 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import type { ChatMessage } from './types';
+import { ToolActivity } from './ToolActivity';
+import { QuestionActivity } from './QuestionActivity';
+
+type MessageBubbleProps = {
+  message: ChatMessage;
+  onAnswer?: (text: string) => void;
+};
+
+export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
+  const text = formatText(message.text);
+  switch (message.role) {
+    case 'user':
+      return (
+        <div className="flex justify-end">
+          <div className="max-w-[80%] rounded-2xl rounded-tr-sm bg-duck-yellow/10 border border-duck-yellow/20 px-4 py-2.5 text-sm text-duck-dark">
+            {message.images?.map((img, i) => (
+              <img key={i} src={img.dataUrl} alt={img.filename} className="max-w-full max-h-64 rounded-lg mb-2" />
+            ))}
+            <div className="whitespace-pre-wrap">{text}</div>
+          </div>
+        </div>
+      );
+
+    case 'assistant':
+      if (!text) return null;
+      return (
+        <div className="flex justify-start">
+          <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-white/80 border border-duck-dark/10 px-4 py-2.5 text-sm text-duck-dark prose prose-sm max-w-none prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none">
+            <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+              {text}
+            </ReactMarkdown>
+          </div>
+        </div>
+      );
+
+    case 'tool':
+      if (message.toolName === 'question' && onAnswer) {
+        return <QuestionActivity message={message} onAnswer={onAnswer} />;
+      }
+      return <ToolActivity message={message} />;
+
+    case 'result':
+      return (
+        <div className="flex justify-center py-1">
+          <span className="text-xs text-duck-dark/40">
+            Done · ${message.costUsd.toFixed(3)} · {(message.durationMs / 1000).toFixed(1)}s · {message.numTurns} turn
+            {message.numTurns !== 1 ? 's' : ''}
+            {message.isError ? ' (with errors)' : ''}
+          </span>
+        </div>
+      );
+
+    case 'error':
+      return (
+        <div className="flex justify-start">
+          <div className="max-w-[80%] rounded-2xl bg-red-50 border border-red-200 px-4 py-2.5 text-sm text-red-700">
+            {text}
+          </div>
+        </div>
+      );
+  }
+};
+
+function formatText(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (value == null) return '';
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+type StreamingBubbleProps = {
+  text: string;
+};
+
+export const StreamingBubble = ({ text }: StreamingBubbleProps) => {
+  if (!text) return null;
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-white/80 border border-duck-dark/10 px-4 py-2.5 text-sm text-duck-dark prose prose-sm max-w-none prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none">
+        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+          {text}
+        </ReactMarkdown>
+        <span className="inline-block w-2 h-4 bg-duck-teal/60 animate-pulse ml-0.5 align-middle" />
+      </div>
+    </div>
+  );
+};