v2.0.0: BooCoder frontend — chat pane + diff pane + session picker
Phase 3 of v2.0. React + Vite SPA at apps/coder/web/ served by the coder Fastify server via @fastify/static with SPA fallback. Chat pane: message list via WS streaming (useSessionStream hook), input bar, POST /api/sessions/:id/messages on submit, markdown rendering via react-markdown + remark-gfm, inline tool-call display. Diff pane: fetches GET /api/sessions/:id/pending, shows pending changes with file path + operation badge (create/edit/delete), before/after diff for edits, Approve/Reject per change and Approve All/Reject All buttons. Layout: fixed two-pane split (chat 60%, diff 40%). Dark theme (bg-zinc-900). Desktop-first for v2.0.0. Session picker (Home page): lists projects and sessions from the shared DB. No CRUD — use BooChat's UI for that. Dockerfile updated: builds web app in builder stage, copies dist to runtime. index.ts registers fastifyStatic + SPA fallback route. Tailwind v4, React 18, TypeScript strict. ~20 new files, ~370KB built output. Functional developer tool UI, not polished consumer product — Phase 7 (v2.0.3) handles polish. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
131
apps/coder/web/src/components/ChatPane.tsx
Normal file
131
apps/coder/web/src/components/ChatPane.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Send, Square } from 'lucide-react';
|
||||
import type { Message } from '@/api/types';
|
||||
import { api } from '@/api/client';
|
||||
import { MessageBubble } from './MessageBubble';
|
||||
|
||||
interface Props {
|
||||
sessionId: string;
|
||||
chatId: string;
|
||||
messages: Message[];
|
||||
isStreaming: boolean;
|
||||
connected: boolean;
|
||||
}
|
||||
|
||||
export function ChatPane({ sessionId, chatId, messages, isStreaming, connected }: Props) {
|
||||
const [input, setInput] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Auto-scroll to bottom when messages change
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
// Auto-resize textarea
|
||||
useEffect(() => {
|
||||
const el = textareaRef.current;
|
||||
if (!el) return;
|
||||
el.style.height = 'auto';
|
||||
el.style.height = Math.min(el.scrollHeight, 200) + 'px';
|
||||
}, [input]);
|
||||
|
||||
const handleSend = async () => {
|
||||
const content = input.trim();
|
||||
if (!content || sending || isStreaming) return;
|
||||
|
||||
setInput('');
|
||||
setSending(true);
|
||||
try {
|
||||
await api.messages.send(sessionId, chatId, content);
|
||||
} catch (err) {
|
||||
console.error('send failed:', err);
|
||||
// Restore input on failure
|
||||
setInput(content);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStop = async () => {
|
||||
try {
|
||||
await api.messages.stop(sessionId);
|
||||
} catch (err) {
|
||||
console.error('stop failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
// Filter out system messages for display (sentinels)
|
||||
const visibleMessages = messages.filter((m) => m.role !== 'system');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Connection indicator */}
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b border-zinc-800 text-xs text-zinc-500">
|
||||
<div
|
||||
className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`}
|
||||
/>
|
||||
<span>{connected ? 'Connected' : 'Disconnected'}</span>
|
||||
{isStreaming && (
|
||||
<span className="text-blue-400 ml-auto">Generating...</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Messages list */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4">
|
||||
{visibleMessages.length === 0 && (
|
||||
<div className="text-center text-zinc-500 mt-8">
|
||||
<p className="text-lg font-medium">BooCoder</p>
|
||||
<p className="text-sm mt-1">Send a message to start coding.</p>
|
||||
</div>
|
||||
)}
|
||||
{visibleMessages.map((msg) => (
|
||||
<MessageBubble key={msg.id} message={msg} />
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{/* Input area */}
|
||||
<div className="border-t border-zinc-800 px-4 py-3">
|
||||
<div className="flex items-end gap-2">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Message BooCoder..."
|
||||
rows={1}
|
||||
className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 resize-none focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
||||
disabled={sending}
|
||||
/>
|
||||
{isStreaming ? (
|
||||
<button
|
||||
onClick={handleStop}
|
||||
className="p-2 rounded-lg bg-red-600 hover:bg-red-500 text-white transition-colors"
|
||||
title="Stop generation"
|
||||
>
|
||||
<Square size={18} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={!input.trim() || sending}
|
||||
className="p-2 rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-40 disabled:cursor-not-allowed text-white transition-colors"
|
||||
title="Send message"
|
||||
>
|
||||
<Send size={18} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
352
apps/coder/web/src/components/DiffPane.tsx
Normal file
352
apps/coder/web/src/components/DiffPane.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Check, X, RotateCcw, FileText, FilePlus, Trash2, RefreshCw } from 'lucide-react';
|
||||
import type { PendingChange } from '@/api/types';
|
||||
import { api } from '@/api/client';
|
||||
|
||||
interface Props {
|
||||
sessionId: string;
|
||||
onPendingChange: (cb: (change: PendingChange) => void) => () => void;
|
||||
}
|
||||
|
||||
export function DiffPane({ sessionId, onPendingChange }: Props) {
|
||||
const [changes, setChanges] = useState<PendingChange[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
|
||||
const fetchPending = useCallback(async () => {
|
||||
try {
|
||||
const result = await api.pending.list(sessionId);
|
||||
setChanges(result);
|
||||
} catch (err) {
|
||||
console.error('fetch pending failed:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [sessionId]);
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
fetchPending();
|
||||
}, [fetchPending]);
|
||||
|
||||
// Listen for WS pending change events
|
||||
useEffect(() => {
|
||||
const unsub = onPendingChange((change) => {
|
||||
setChanges((prev) => {
|
||||
const idx = prev.findIndex((c) => c.id === change.id);
|
||||
if (idx >= 0) {
|
||||
const next = [...prev];
|
||||
next[idx] = change;
|
||||
return next;
|
||||
}
|
||||
return [...prev, change];
|
||||
});
|
||||
});
|
||||
return unsub;
|
||||
}, [onPendingChange]);
|
||||
|
||||
const pendingChanges = changes.filter((c) => c.status === 'pending');
|
||||
const resolvedChanges = changes.filter((c) => c.status !== 'pending');
|
||||
|
||||
const handleApplyOne = async (id: string) => {
|
||||
try {
|
||||
await api.pending.applyOne(id);
|
||||
setChanges((prev) =>
|
||||
prev.map((c) => (c.id === id ? { ...c, status: 'applied' as const } : c)),
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('apply failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRejectOne = async (id: string) => {
|
||||
try {
|
||||
await api.pending.rejectOne(id);
|
||||
setChanges((prev) =>
|
||||
prev.map((c) => (c.id === id ? { ...c, status: 'rejected' as const } : c)),
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('reject failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRewindOne = async (id: string) => {
|
||||
try {
|
||||
await api.pending.rewindOne(id);
|
||||
setChanges((prev) =>
|
||||
prev.map((c) => (c.id === id ? { ...c, status: 'reverted' as const } : c)),
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('rewind failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleApplyAll = async () => {
|
||||
try {
|
||||
const result = await api.pending.applyAll(sessionId);
|
||||
const appliedIds = new Set(
|
||||
result.results.filter((r) => r.success).map((r) => r.id),
|
||||
);
|
||||
setChanges((prev) =>
|
||||
prev.map((c) =>
|
||||
appliedIds.has(c.id) ? { ...c, status: 'applied' as const } : c,
|
||||
),
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('apply all failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRejectAll = async () => {
|
||||
// Reject each pending change individually (no batch reject endpoint)
|
||||
for (const c of pendingChanges) {
|
||||
await handleRejectOne(c.id);
|
||||
}
|
||||
};
|
||||
|
||||
const OpIcon = ({ op }: { op: PendingChange['operation'] }) => {
|
||||
switch (op) {
|
||||
case 'create':
|
||||
return <FilePlus size={14} className="text-green-400" />;
|
||||
case 'edit':
|
||||
return <FileText size={14} className="text-blue-400" />;
|
||||
case 'delete':
|
||||
return <Trash2 size={14} className="text-red-400" />;
|
||||
}
|
||||
};
|
||||
|
||||
const StatusBadge = ({ status }: { status: PendingChange['status'] }) => {
|
||||
const colors: Record<PendingChange['status'], string> = {
|
||||
pending: 'bg-yellow-500/20 text-yellow-400',
|
||||
applied: 'bg-green-500/20 text-green-400',
|
||||
rejected: 'bg-zinc-500/20 text-zinc-400',
|
||||
reverted: 'bg-orange-500/20 text-orange-400',
|
||||
};
|
||||
return (
|
||||
<span className={`text-[10px] px-1.5 py-0.5 rounded ${colors[status]}`}>
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b border-zinc-800">
|
||||
<h2 className="text-sm font-medium text-zinc-300">
|
||||
Pending Changes
|
||||
{pendingChanges.length > 0 && (
|
||||
<span className="ml-1.5 text-xs text-zinc-500">
|
||||
({pendingChanges.length})
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={fetchPending}
|
||||
className="p-1 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200"
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
</button>
|
||||
{pendingChanges.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={handleApplyAll}
|
||||
className="text-xs px-2 py-1 rounded bg-green-600/80 hover:bg-green-600 text-white"
|
||||
>
|
||||
Apply All
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRejectAll}
|
||||
className="text-xs px-2 py-1 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300"
|
||||
>
|
||||
Reject All
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Changes list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{loading && (
|
||||
<div className="text-center text-zinc-500 text-sm py-8">Loading...</div>
|
||||
)}
|
||||
|
||||
{!loading && changes.length === 0 && (
|
||||
<div className="text-center text-zinc-500 text-sm py-8">
|
||||
No pending changes yet.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending changes first */}
|
||||
{pendingChanges.map((change) => (
|
||||
<ChangeItem
|
||||
key={change.id}
|
||||
change={change}
|
||||
expanded={expandedId === change.id}
|
||||
onToggle={() =>
|
||||
setExpandedId((prev) => (prev === change.id ? null : change.id))
|
||||
}
|
||||
onApply={() => handleApplyOne(change.id)}
|
||||
onReject={() => handleRejectOne(change.id)}
|
||||
OpIcon={OpIcon}
|
||||
StatusBadge={StatusBadge}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Resolved changes */}
|
||||
{resolvedChanges.length > 0 && pendingChanges.length > 0 && (
|
||||
<div className="border-t border-zinc-800 my-1" />
|
||||
)}
|
||||
{resolvedChanges.map((change) => (
|
||||
<ChangeItem
|
||||
key={change.id}
|
||||
change={change}
|
||||
expanded={expandedId === change.id}
|
||||
onToggle={() =>
|
||||
setExpandedId((prev) => (prev === change.id ? null : change.id))
|
||||
}
|
||||
onRewind={
|
||||
change.status === 'applied'
|
||||
? () => handleRewindOne(change.id)
|
||||
: undefined
|
||||
}
|
||||
OpIcon={OpIcon}
|
||||
StatusBadge={StatusBadge}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ChangeItemProps {
|
||||
change: PendingChange;
|
||||
expanded: boolean;
|
||||
onToggle: () => void;
|
||||
onApply?: () => void;
|
||||
onReject?: () => void;
|
||||
onRewind?: () => void;
|
||||
OpIcon: React.ComponentType<{ op: PendingChange['operation'] }>;
|
||||
StatusBadge: React.ComponentType<{ status: PendingChange['status'] }>;
|
||||
}
|
||||
|
||||
function ChangeItem({
|
||||
change,
|
||||
expanded,
|
||||
onToggle,
|
||||
onApply,
|
||||
onReject,
|
||||
onRewind,
|
||||
OpIcon,
|
||||
StatusBadge,
|
||||
}: ChangeItemProps) {
|
||||
const fileName = change.file_path.split('/').pop() || change.file_path;
|
||||
const dirPath = change.file_path.split('/').slice(0, -1).join('/');
|
||||
|
||||
return (
|
||||
<div className="border-b border-zinc-800/50">
|
||||
<div
|
||||
className="flex items-center gap-2 px-4 py-2 hover:bg-zinc-800/50 cursor-pointer"
|
||||
onClick={onToggle}
|
||||
>
|
||||
<OpIcon op={change.operation} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-sm font-mono text-zinc-200 truncate block">
|
||||
{fileName}
|
||||
</span>
|
||||
{dirPath && (
|
||||
<span className="text-[11px] text-zinc-500 truncate block">
|
||||
{dirPath}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<StatusBadge status={change.status} />
|
||||
{change.status === 'pending' && (
|
||||
<div className="flex items-center gap-1 ml-1">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onApply?.();
|
||||
}}
|
||||
className="p-1 rounded hover:bg-green-600/30 text-green-400"
|
||||
title="Apply"
|
||||
>
|
||||
<Check size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onReject?.();
|
||||
}}
|
||||
className="p-1 rounded hover:bg-red-600/30 text-red-400"
|
||||
title="Reject"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{change.status === 'applied' && onRewind && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRewind();
|
||||
}}
|
||||
className="p-1 rounded hover:bg-orange-600/30 text-orange-400"
|
||||
title="Rewind"
|
||||
>
|
||||
<RotateCcw size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{expanded && (
|
||||
<div className="px-4 pb-3">
|
||||
{change.operation === 'edit' && (
|
||||
<div className="space-y-2">
|
||||
{change.old_string && (
|
||||
<div className="rounded bg-red-950/30 border border-red-900/30 p-2">
|
||||
<div className="text-[10px] text-red-400 mb-1 font-medium">
|
||||
Remove
|
||||
</div>
|
||||
<pre className="text-xs text-red-200 whitespace-pre-wrap break-all font-mono">
|
||||
{change.old_string}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{change.new_string && (
|
||||
<div className="rounded bg-green-950/30 border border-green-900/30 p-2">
|
||||
<div className="text-[10px] text-green-400 mb-1 font-medium">
|
||||
Add
|
||||
</div>
|
||||
<pre className="text-xs text-green-200 whitespace-pre-wrap break-all font-mono">
|
||||
{change.new_string}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{change.operation === 'create' && change.content && (
|
||||
<div className="rounded bg-green-950/30 border border-green-900/30 p-2">
|
||||
<div className="text-[10px] text-green-400 mb-1 font-medium">
|
||||
New file
|
||||
</div>
|
||||
<pre className="text-xs text-green-200 whitespace-pre-wrap break-all font-mono max-h-60 overflow-y-auto">
|
||||
{change.content.length > 2000
|
||||
? change.content.slice(0, 2000) + '\n... (truncated)'
|
||||
: change.content}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{change.operation === 'delete' && (
|
||||
<div className="rounded bg-red-950/30 border border-red-900/30 p-2 text-xs text-red-300">
|
||||
This file will be deleted.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
62
apps/coder/web/src/components/Layout.tsx
Normal file
62
apps/coder/web/src/components/Layout.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { useState } from 'react';
|
||||
import { Code2, MessageSquare, GitPullRequest } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
chatPane: React.ReactNode;
|
||||
diffPane: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Layout({ chatPane, diffPane }: Props) {
|
||||
const [activeTab, setActiveTab] = useState<'chat' | 'diff'>('chat');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-zinc-900">
|
||||
{/* Top bar */}
|
||||
<header className="flex items-center gap-3 px-4 py-2 border-b border-zinc-800 bg-zinc-900/95">
|
||||
<Code2 size={20} className="text-blue-400" />
|
||||
<h1 className="text-sm font-semibold text-zinc-200">BooCoder</h1>
|
||||
</header>
|
||||
|
||||
{/* Mobile tab bar (visible below lg breakpoint) */}
|
||||
<div className="lg:hidden flex border-b border-zinc-800">
|
||||
<button
|
||||
onClick={() => setActiveTab('chat')}
|
||||
className={`flex-1 flex items-center justify-center gap-1.5 py-2 text-sm ${
|
||||
activeTab === 'chat'
|
||||
? 'text-blue-400 border-b-2 border-blue-400'
|
||||
: 'text-zinc-500'
|
||||
}`}
|
||||
>
|
||||
<MessageSquare size={14} />
|
||||
Chat
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('diff')}
|
||||
className={`flex-1 flex items-center justify-center gap-1.5 py-2 text-sm ${
|
||||
activeTab === 'diff'
|
||||
? 'text-blue-400 border-b-2 border-blue-400'
|
||||
: 'text-zinc-500'
|
||||
}`}
|
||||
>
|
||||
<GitPullRequest size={14} />
|
||||
Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Desktop split layout */}
|
||||
<div className="flex-1 hidden lg:flex overflow-hidden">
|
||||
<div className="w-[60%] border-r border-zinc-800 overflow-hidden">
|
||||
{chatPane}
|
||||
</div>
|
||||
<div className="w-[40%] overflow-hidden">
|
||||
{diffPane}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile: show only the active tab */}
|
||||
<div className="flex-1 lg:hidden overflow-hidden">
|
||||
{activeTab === 'chat' ? chatPane : diffPane}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
apps/coder/web/src/components/MessageBubble.tsx
Normal file
115
apps/coder/web/src/components/MessageBubble.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import Markdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import type { Message } from '@/api/types';
|
||||
import { Wrench, AlertCircle, Loader2 } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
message: Message;
|
||||
}
|
||||
|
||||
export function MessageBubble({ message }: Props) {
|
||||
if (message.role === 'tool') {
|
||||
return <ToolResultBubble message={message} />;
|
||||
}
|
||||
|
||||
const isUser = message.role === 'user';
|
||||
const isStreaming = message.status === 'streaming';
|
||||
const isFailed = message.status === 'failed';
|
||||
|
||||
return (
|
||||
<div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-3`}>
|
||||
<div
|
||||
className={`max-w-[85%] rounded-lg px-4 py-2.5 ${
|
||||
isUser
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-zinc-800 text-zinc-100 border border-zinc-700'
|
||||
}`}
|
||||
>
|
||||
{isFailed && (
|
||||
<div className="flex items-center gap-1.5 text-red-400 text-xs mb-1">
|
||||
<AlertCircle size={12} />
|
||||
<span>Failed</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{message.tool_calls && message.tool_calls.length > 0 && (
|
||||
<div className="mb-2 space-y-1">
|
||||
{message.tool_calls.map((tc) => (
|
||||
<div
|
||||
key={tc.id}
|
||||
className="flex items-center gap-1.5 text-xs text-zinc-400 bg-zinc-900/50 rounded px-2 py-1"
|
||||
>
|
||||
<Wrench size={11} />
|
||||
<span className="font-mono">{tc.name}</span>
|
||||
<span className="text-zinc-500 truncate max-w-[200px]">
|
||||
{truncateArgs(tc.arguments)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{message.content.trim() && (
|
||||
<div className="prose prose-invert prose-sm max-w-none [&_pre]:bg-zinc-900 [&_pre]:p-3 [&_pre]:rounded [&_pre]:overflow-x-auto [&_code]:text-zinc-300 [&_p]:my-1.5">
|
||||
<Markdown remarkPlugins={[remarkGfm]}>{message.content}</Markdown>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isStreaming && !message.content.trim() && (
|
||||
<div className="flex items-center gap-1.5 text-zinc-400">
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
<span className="text-xs">Thinking...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isStreaming && message.content.trim() && (
|
||||
<span className="inline-block w-1.5 h-4 bg-zinc-400 animate-pulse ml-0.5 align-middle" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolResultBubble({ message }: Props) {
|
||||
const result = message.tool_results;
|
||||
if (!result) return null;
|
||||
|
||||
const isError = result.error;
|
||||
const output = result.output || '';
|
||||
const displayOutput =
|
||||
output.length > 300 ? output.slice(0, 300) + '...' : output;
|
||||
|
||||
return (
|
||||
<div className="flex justify-start mb-2 ml-6">
|
||||
<div
|
||||
className={`max-w-[80%] rounded px-3 py-2 text-xs font-mono border ${
|
||||
isError
|
||||
? 'bg-red-950/30 border-red-800/50 text-red-300'
|
||||
: 'bg-zinc-800/50 border-zinc-700/50 text-zinc-400'
|
||||
}`}
|
||||
>
|
||||
{result.truncated && (
|
||||
<span className="text-yellow-500 text-[10px] block mb-1">
|
||||
[truncated]
|
||||
</span>
|
||||
)}
|
||||
<pre className="whitespace-pre-wrap break-all">{displayOutput}</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function truncateArgs(args: string): string {
|
||||
if (!args) return '';
|
||||
try {
|
||||
const parsed = JSON.parse(args);
|
||||
const keys = Object.keys(parsed);
|
||||
if (keys.length === 0) return '';
|
||||
const first = keys[0]!;
|
||||
const val = String(parsed[first]);
|
||||
const display = val.length > 40 ? val.slice(0, 40) + '...' : val;
|
||||
return `${first}: ${display}`;
|
||||
} catch {
|
||||
return args.length > 50 ? args.slice(0, 50) + '...' : args;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user