109 lines
4.2 KiB
TypeScript
109 lines
4.2 KiB
TypeScript
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';
|
|
|
|
const FRONTMATTER_RE = /^<frontmatter>([\s\S]*?)<\/frontmatter>\s*/;
|
|
|
|
const CollapsibleBlock = ({ label, content }: { label: string; content: string }) => (
|
|
<div className="flex justify-center">
|
|
<details className="max-w-[85%] rounded-2xl bg-duck-dark/5 border border-duck-dark/10 px-4 py-2 text-sm">
|
|
<summary className="text-xs text-duck-dark/40 hover:text-duck-dark/60 cursor-pointer select-none">
|
|
{label}
|
|
</summary>
|
|
<div className="mt-1.5 text-xs text-duck-dark/40 whitespace-pre-wrap border-l-2 border-duck-dark/10 pl-2 max-h-48 overflow-y-auto">
|
|
{content}
|
|
</div>
|
|
</details>
|
|
</div>
|
|
);
|
|
|
|
type MessageBubbleProps = {
|
|
message: ChatMessage;
|
|
onAnswer?: (text: string) => void;
|
|
};
|
|
|
|
export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
|
|
switch (message.role) {
|
|
case 'user': {
|
|
const match = message.text.match(FRONTMATTER_RE);
|
|
const metadata = match ? match[1]!.trim() : null;
|
|
const text = match ? message.text.slice(match[0]!.length) : message.text;
|
|
return (
|
|
<>
|
|
{metadata && <CollapsibleBlock label="Frontmatter" content={metadata} />}
|
|
<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 'system':
|
|
return <CollapsibleBlock label="System prompt" content={message.text} />;
|
|
|
|
case 'assistant':
|
|
if (!message.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]}>
|
|
{message.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">
|
|
{message.text}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
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>
|
|
);
|
|
};
|