第一次提交
This commit is contained in:
@ -0,0 +1,187 @@
|
||||
'use client';
|
||||
|
||||
import { FileJson, FileOutput, FolderSearch, Image as ImageIcon, Link2, MessagesSquare } from 'lucide-react';
|
||||
|
||||
import type { ProcessArtifact, ProcessEvent, ProcessRun } from '@/types';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
function statusLabel(status: string) {
|
||||
if (status === 'done') return '已完成';
|
||||
if (status === 'error') return '失败';
|
||||
if (status === 'cancelled') return '已取消';
|
||||
if (status === 'waiting') return '等待中';
|
||||
if (status === 'running') return '运行中';
|
||||
if (status === 'queued') return '排队中';
|
||||
return status;
|
||||
}
|
||||
|
||||
function actorTypeLabel(actorType: string) {
|
||||
if (actorType === 'mcp') return 'MCP';
|
||||
if (actorType === 'system') return '系统';
|
||||
if (actorType === 'agent') return '智能体';
|
||||
return actorType;
|
||||
}
|
||||
|
||||
function eventKindLabel(kind: string) {
|
||||
if (kind === 'run_started') return '已启动';
|
||||
if (kind === 'run_progress') return '进行中';
|
||||
if (kind === 'run_status') return '状态更新';
|
||||
if (kind === 'run_artifact') return '产物';
|
||||
if (kind === 'run_finished') return '已结束';
|
||||
if (kind === 'run_cancelled') return '已取消';
|
||||
return kind;
|
||||
}
|
||||
|
||||
function artifactIcon(type: ProcessArtifact['artifact_type']) {
|
||||
if (type === 'json') return <FileJson className="w-4 h-4" />;
|
||||
if (type === 'image') return <ImageIcon className="w-4 h-4" />;
|
||||
if (type === 'link') return <Link2 className="w-4 h-4" />;
|
||||
return <FileOutput className="w-4 h-4" />;
|
||||
}
|
||||
|
||||
function renderArtifactBody(artifact: ProcessArtifact) {
|
||||
if (artifact.artifact_type === 'json' && artifact.data !== undefined) {
|
||||
return (
|
||||
<pre className="text-[11px] leading-5 whitespace-pre-wrap break-words rounded-md bg-background/70 p-3 overflow-x-auto">
|
||||
{JSON.stringify(artifact.data, null, 2)}
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
if (artifact.artifact_type === 'link' && artifact.url) {
|
||||
return (
|
||||
<a href={artifact.url} target="_blank" rel="noreferrer" className="text-sm text-sky-300 underline break-all">
|
||||
{artifact.url}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="text-xs text-foreground/90 whitespace-pre-wrap break-words">
|
||||
{artifact.content || '（空产物）'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArtifactSidebar({
|
||||
selectedRun,
|
||||
events,
|
||||
artifacts,
|
||||
}: {
|
||||
selectedRun: ProcessRun | null;
|
||||
events: ProcessEvent[];
|
||||
artifacts: ProcessArtifact[];
|
||||
}) {
|
||||
const runArtifacts = selectedRun
|
||||
? artifacts.filter((item) => item.run_id === selectedRun.run_id)
|
||||
: artifacts;
|
||||
const runEvents = selectedRun
|
||||
? events.filter((item) => item.run_id === selectedRun.run_id)
|
||||
: events.slice(-12);
|
||||
const hasContent = Boolean(
|
||||
selectedRun || runArtifacts.length > 0 || runEvents.length > 0
|
||||
);
|
||||
|
||||
if (!hasContent) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full bg-card/60 flex flex-col border-l border-border">
|
||||
<div className="px-4 py-3 border-b border-border">
|
||||
<h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">结果面板</h2>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{selectedRun ? `当前选中: ${selectedRun.actor_name}` : '选择一个任务查看详细过程与产物'}
|
||||
</p>
|
||||
</div>
|
||||
<ScrollArea className="flex-1 px-4 py-4">
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<FolderSearch className="w-4 h-4" />
|
||||
任务摘要
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2 text-sm">
|
||||
{selectedRun ? (
|
||||
<>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline">{actorTypeLabel(selectedRun.actor_type)}</Badge>
|
||||
<Badge variant="outline">{statusLabel(selectedRun.status)}</Badge>
|
||||
{selectedRun.source && <Badge variant="secondary">{selectedRun.source}</Badge>}
|
||||
</div>
|
||||
<div className="font-medium">{selectedRun.title}</div>
|
||||
<div className="text-muted-foreground whitespace-pre-wrap break-words">
|
||||
{selectedRun.summary || '暂时还没有最终摘要。'}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-muted-foreground text-sm">当前没有选中的任务。</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<MessagesSquare className="w-4 h-4" />
|
||||
事件记录
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2">
|
||||
{runEvents.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground">暂时还没有结构化事件。</div>
|
||||
)}
|
||||
{runEvents.map((event, index) => (
|
||||
<div key={event.event_id}>
|
||||
<div className="rounded-md border border-border/60 px-3 py-2 bg-background/60">
|
||||
<div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
|
||||
<span>{eventKindLabel(event.kind)}</span>
|
||||
{event.status && <span>{statusLabel(event.status)}</span>}
|
||||
</div>
|
||||
<div className="text-xs whitespace-pre-wrap break-words">
|
||||
{event.text || '结构化更新'}
|
||||
</div>
|
||||
</div>
|
||||
{index < runEvents.length - 1 && <Separator className="my-2" />}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<FileOutput className="w-4 h-4" />
|
||||
产物列表
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-3">
|
||||
{runArtifacts.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground">暂时还没有产物。</div>
|
||||
)}
|
||||
{runArtifacts.map((artifact) => (
|
||||
<div key={artifact.artifact_id} className="rounded-lg border border-border/70 bg-background/70 p-3 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
|
||||
{artifactIcon(artifact.artifact_type)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium truncate">{artifact.title}</div>
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{artifact.actor_id} · {artifact.artifact_type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderArtifactBody(artifact)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,147 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import type { ChatMessage, ProcessArtifact, ProcessEvent, ProcessRun } from '@/types';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { MessageList } from '@/components/chat-workbench/MessageList';
|
||||
import { ProcessLane } from '@/components/chat-workbench/ProcessLane';
|
||||
import { ArtifactSidebar } from '@/components/chat-workbench/ArtifactSidebar';
|
||||
|
||||
export function ChatWorkbench({
|
||||
messages,
|
||||
isThinking,
|
||||
messagesEndRef,
|
||||
messageViewportRef,
|
||||
processRuns,
|
||||
processEvents,
|
||||
processArtifacts,
|
||||
selectedRunId,
|
||||
onSelectRun,
|
||||
onCancelRun,
|
||||
}: {
|
||||
messages: ChatMessage[];
|
||||
isThinking: boolean;
|
||||
messagesEndRef: React.RefObject<HTMLDivElement>;
|
||||
messageViewportRef: React.RefObject<HTMLDivElement>;
|
||||
processRuns: ProcessRun[];
|
||||
processEvents: ProcessEvent[];
|
||||
processArtifacts: ProcessArtifact[];
|
||||
selectedRunId: string | null;
|
||||
onSelectRun: (runId: string) => void;
|
||||
onCancelRun: (runId: string) => void;
|
||||
}) {
|
||||
const selectedRun = processRuns.find((item) => item.run_id === selectedRunId) || processRuns[0] || null;
|
||||
const selectedRunEvents = selectedRun
|
||||
? processEvents.filter((item) => item.run_id === selectedRun.run_id)
|
||||
: [];
|
||||
const selectedRunArtifacts = selectedRun
|
||||
? processArtifacts.filter((item) => item.run_id === selectedRun.run_id)
|
||||
: [];
|
||||
const hasProcessLane = processRuns.length > 0;
|
||||
const hasResultsPanel = Boolean(
|
||||
selectedRun &&
|
||||
(
|
||||
selectedRun.summary ||
|
||||
selectedRunEvents.length > 0 ||
|
||||
selectedRunArtifacts.length > 0
|
||||
)
|
||||
);
|
||||
const desktopColumns = hasProcessLane && hasResultsPanel
|
||||
? 'lg:grid-cols-[minmax(0,1fr)_360px_360px]'
|
||||
: hasProcessLane
|
||||
? 'lg:grid-cols-[minmax(0,1fr)_360px]'
|
||||
: hasResultsPanel
|
||||
? 'lg:grid-cols-[minmax(0,1fr)_360px]'
|
||||
: 'lg:grid-cols-[minmax(0,1fr)]';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`hidden lg:grid h-full ${desktopColumns}`}>
|
||||
<div className="min-h-0">
|
||||
<MessageList
|
||||
messages={messages}
|
||||
isThinking={isThinking}
|
||||
messagesEndRef={messagesEndRef}
|
||||
viewportRef={messageViewportRef}
|
||||
/>
|
||||
</div>
|
||||
{hasProcessLane && (
|
||||
<div className="min-h-0">
|
||||
<ProcessLane
|
||||
runs={processRuns}
|
||||
events={processEvents}
|
||||
selectedRunId={selectedRun?.run_id || null}
|
||||
onSelectRun={onSelectRun}
|
||||
onCancelRun={onCancelRun}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{hasResultsPanel && (
|
||||
<div className="min-h-0">
|
||||
<ArtifactSidebar
|
||||
selectedRun={selectedRun}
|
||||
events={processEvents}
|
||||
artifacts={processArtifacts}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="lg:hidden h-full">
|
||||
{!hasProcessLane && !hasResultsPanel ? (
|
||||
<MessageList
|
||||
messages={messages}
|
||||
isThinking={isThinking}
|
||||
messagesEndRef={messagesEndRef}
|
||||
viewportRef={messageViewportRef}
|
||||
/>
|
||||
) : (
|
||||
<Tabs defaultValue="chat" className="h-full flex flex-col">
|
||||
<div className="px-4 pt-3 border-b border-border">
|
||||
<TabsList
|
||||
className={`grid w-full ${
|
||||
hasProcessLane && hasResultsPanel
|
||||
? 'grid-cols-3'
|
||||
: 'grid-cols-2'
|
||||
}`}
|
||||
>
|
||||
<TabsTrigger value="chat">聊天</TabsTrigger>
|
||||
{hasProcessLane && <TabsTrigger value="process">过程</TabsTrigger>}
|
||||
{hasResultsPanel && <TabsTrigger value="results">结果</TabsTrigger>}
|
||||
</TabsList>
|
||||
</div>
|
||||
<TabsContent value="chat" className="flex-1 min-h-0 mt-0">
|
||||
<MessageList
|
||||
messages={messages}
|
||||
isThinking={isThinking}
|
||||
messagesEndRef={messagesEndRef}
|
||||
viewportRef={messageViewportRef}
|
||||
/>
|
||||
</TabsContent>
|
||||
{hasProcessLane && (
|
||||
<TabsContent value="process" className="flex-1 min-h-0 mt-0">
|
||||
<ProcessLane
|
||||
runs={processRuns}
|
||||
events={processEvents}
|
||||
selectedRunId={selectedRun?.run_id || null}
|
||||
onSelectRun={onSelectRun}
|
||||
onCancelRun={onCancelRun}
|
||||
/>
|
||||
</TabsContent>
|
||||
)}
|
||||
{hasResultsPanel && (
|
||||
<TabsContent value="results" className="flex-1 min-h-0 mt-0">
|
||||
<ArtifactSidebar
|
||||
selectedRun={selectedRun}
|
||||
events={processEvents}
|
||||
artifacts={processArtifacts}
|
||||
/>
|
||||
</TabsContent>
|
||||
)}
|
||||
</Tabs>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
'use client';
|
||||
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
|
||||
export function MarkdownContent({ content }: { content: string }) {
|
||||
return (
|
||||
<div className="prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
table: ({ children, ...props }) => (
|
||||
<div className="my-3 overflow-x-auto rounded-lg border border-border">
|
||||
<table className="w-full border-collapse text-sm" {...props}>
|
||||
{children}
|
||||
</table>
|
||||
</div>
|
||||
),
|
||||
thead: ({ children, ...props }) => (
|
||||
<thead className="bg-muted/60" {...props}>
|
||||
{children}
|
||||
</thead>
|
||||
),
|
||||
th: ({ children, ...props }) => (
|
||||
<th className="px-3 py-2 text-left font-semibold text-foreground border-b border-border" {...props}>
|
||||
{children}
|
||||
</th>
|
||||
),
|
||||
td: ({ children, ...props }) => (
|
||||
<td className="px-3 py-2 border-b border-border/50" {...props}>
|
||||
{children}
|
||||
</td>
|
||||
),
|
||||
tr: ({ children, ...props }) => (
|
||||
<tr className="hover:bg-muted/30 transition-colors" {...props}>
|
||||
{children}
|
||||
</tr>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
149
app-instance/frontend/components/chat-workbench/MessageList.tsx
Normal file
149
app-instance/frontend/components/chat-workbench/MessageList.tsx
Normal file
@ -0,0 +1,149 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Bot, Loader2, Paperclip, User } from 'lucide-react';
|
||||
|
||||
import type { ChatMessage } from '@/types';
|
||||
import { getAccessToken, getFileUrl } from '@/lib/api';
|
||||
import { MarkdownContent } from '@/components/chat-workbench/MarkdownContent';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
|
||||
function AuthImage({ src, alt, className }: { src: string; alt: string; className?: string }) {
|
||||
const [blobUrl, setBlobUrl] = React.useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const token = getAccessToken();
|
||||
const headers: Record<string, string> = {};
|
||||
if (token) headers.Authorization = `Bearer ${token}`;
|
||||
|
||||
let revoke: string | null = null;
|
||||
fetch(src, { headers })
|
||||
.then((res) => res.blob())
|
||||
.then((blob) => {
|
||||
revoke = URL.createObjectURL(blob);
|
||||
setBlobUrl(revoke);
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
return () => {
|
||||
if (revoke) URL.revokeObjectURL(revoke);
|
||||
};
|
||||
}, [src]);
|
||||
|
||||
if (!blobUrl) return <div className="w-32 h-32 bg-muted animate-pulse rounded" />;
|
||||
return <img src={blobUrl} alt={alt} className={className} loading="lazy" decoding="async" />;
|
||||
}
|
||||
|
||||
function MessageBubble({ message }: { message: ChatMessage }) {
|
||||
const isUser = message.role === 'user';
|
||||
const textContent = typeof message.content === 'string' ? message.content : String(message.content || '');
|
||||
|
||||
return (
|
||||
<div className={`flex gap-3 ${isUser ? 'justify-end' : ''}`}>
|
||||
{!isUser && (
|
||||
<div className="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Bot className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`rounded-xl px-4 py-3 max-w-[88%] shadow-sm ${
|
||||
isUser
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-card border border-border/80'
|
||||
}`}
|
||||
>
|
||||
{message.attachments && message.attachments.length > 0 && (
|
||||
<div className="mb-2 space-y-2">
|
||||
{message.attachments.map((att) => {
|
||||
const fileUrl = getFileUrl(att.file_id);
|
||||
if (att.content_type.startsWith('image/')) {
|
||||
return (
|
||||
<a key={att.file_id} href={fileUrl} target="_blank" rel="noopener noreferrer">
|
||||
<AuthImage
|
||||
src={fileUrl}
|
||||
alt={att.name}
|
||||
className="max-w-xs max-h-60 rounded border border-border/50 cursor-pointer hover:opacity-90"
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<a
|
||||
key={att.file_id}
|
||||
href={fileUrl}
|
||||
download={att.name}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm ${
|
||||
isUser
|
||||
? 'bg-primary-foreground/10 hover:bg-primary-foreground/20'
|
||||
: 'bg-muted hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
<Paperclip className="w-3.5 h-3.5 flex-shrink-0" />
|
||||
<span className="truncate">{att.name}</span>
|
||||
{att.size && (
|
||||
<span className="text-xs opacity-70 flex-shrink-0">
|
||||
{att.size > 1024 * 1024
|
||||
? `${(att.size / 1024 / 1024).toFixed(1)}MB`
|
||||
: `${(att.size / 1024).toFixed(0)}KB`}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isUser ? (
|
||||
<p className="text-sm whitespace-pre-wrap">{textContent}</p>
|
||||
) : (
|
||||
<MarkdownContent content={textContent} />
|
||||
)}
|
||||
</div>
|
||||
{isUser && (
|
||||
<div className="w-7 h-7 rounded-full bg-secondary flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<User className="w-4 h-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MessageList({
|
||||
messages,
|
||||
isThinking,
|
||||
messagesEndRef,
|
||||
viewportRef,
|
||||
}: {
|
||||
messages: ChatMessage[];
|
||||
isThinking: boolean;
|
||||
messagesEndRef: React.RefObject<HTMLDivElement>;
|
||||
viewportRef: React.RefObject<HTMLDivElement>;
|
||||
}) {
|
||||
return (
|
||||
<ScrollArea className="h-full px-4" viewportRef={viewportRef}>
|
||||
<div className="max-w-4xl mx-auto py-4 space-y-4">
|
||||
{messages.length === 0 && !isThinking && (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Bot className="w-12 h-12 mb-4 opacity-50" />
|
||||
<p className="text-lg font-medium">Boardware Genius</p>
|
||||
<p className="text-sm">发送消息开始对话</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{messages.map((msg, i) => (
|
||||
<MessageBubble key={`${msg.role}:${msg.timestamp || i}:${i}`} message={msg} />
|
||||
))}
|
||||
|
||||
{isThinking && (
|
||||
<div className="flex items-center gap-2 text-muted-foreground px-1">
|
||||
<Bot className="w-5 h-5" />
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span className="text-sm">思考中...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
186
app-instance/frontend/components/chat-workbench/ProcessLane.tsx
Normal file
186
app-instance/frontend/components/chat-workbench/ProcessLane.tsx
Normal file
@ -0,0 +1,186 @@
|
||||
'use client';
|
||||
|
||||
import { AlertCircle, Bot, BrainCircuit, Loader2, ServerCog, Square } from 'lucide-react';
|
||||
|
||||
import type { ProcessEvent, ProcessRun } from '@/types';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function statusLabel(status: string) {
|
||||
if (status === 'done') return '已完成';
|
||||
if (status === 'error') return '失败';
|
||||
if (status === 'cancelled') return '已取消';
|
||||
if (status === 'waiting') return '等待中';
|
||||
if (status === 'running') return '运行中';
|
||||
if (status === 'queued') return '排队中';
|
||||
return status;
|
||||
}
|
||||
|
||||
function actorTypeLabel(actorType: string) {
|
||||
if (actorType === 'mcp') return 'MCP';
|
||||
if (actorType === 'system') return '系统';
|
||||
if (actorType === 'agent') return '智能体';
|
||||
return actorType;
|
||||
}
|
||||
|
||||
function eventKindLabel(kind: string) {
|
||||
if (kind === 'run_started') return '已启动';
|
||||
if (kind === 'run_progress') return '进行中';
|
||||
if (kind === 'run_status') return '状态更新';
|
||||
if (kind === 'run_artifact') return '产物';
|
||||
if (kind === 'run_finished') return '已结束';
|
||||
if (kind === 'run_cancelled') return '已取消';
|
||||
return kind;
|
||||
}
|
||||
|
||||
function statusTone(status: string) {
|
||||
if (status === 'done') return 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20';
|
||||
if (status === 'error') return 'bg-rose-500/10 text-rose-300 border-rose-500/20';
|
||||
if (status === 'cancelled') return 'bg-zinc-500/10 text-zinc-300 border-zinc-500/20';
|
||||
if (status === 'waiting') return 'bg-amber-500/10 text-amber-300 border-amber-500/20';
|
||||
return 'bg-sky-500/10 text-sky-300 border-sky-500/20';
|
||||
}
|
||||
|
||||
function actorIcon(run: ProcessRun) {
|
||||
if (run.actor_type === 'mcp') return <ServerCog className="w-4 h-4" />;
|
||||
if (run.actor_type === 'system') return <BrainCircuit className="w-4 h-4" />;
|
||||
return <Bot className="w-4 h-4" />;
|
||||
}
|
||||
|
||||
export function ProcessLane({
|
||||
runs,
|
||||
events,
|
||||
selectedRunId,
|
||||
onSelectRun,
|
||||
onCancelRun,
|
||||
}: {
|
||||
runs: ProcessRun[];
|
||||
events: ProcessEvent[];
|
||||
selectedRunId: string | null;
|
||||
onSelectRun: (runId: string) => void;
|
||||
onCancelRun: (runId: string) => void;
|
||||
}) {
|
||||
const sortedRuns = [...runs].sort((a, b) => {
|
||||
const at = new Date(a.started_at).getTime();
|
||||
const bt = new Date(b.started_at).getTime();
|
||||
return bt - at;
|
||||
});
|
||||
|
||||
if (sortedRuns.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-card/60 border-l border-border">
|
||||
<div className="px-4 py-3 border-b border-border flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">执行过程</h2>
|
||||
<p className="text-xs text-muted-foreground mt-1">智能体、A2A、MCP 的实时过程</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{sortedRuns.length} 个任务
|
||||
</Badge>
|
||||
</div>
|
||||
<ScrollArea className="flex-1 px-4 py-4">
|
||||
<div className="space-y-3">
|
||||
{sortedRuns.map((run) => {
|
||||
const runEvents = events
|
||||
.filter((event) => event.run_id === run.run_id)
|
||||
.slice(-5)
|
||||
.reverse();
|
||||
const isSelected = run.run_id === selectedRunId;
|
||||
const canCancel =
|
||||
!run.parent_run_id &&
|
||||
run.actor_type !== 'mcp' &&
|
||||
(run.status === 'running' || run.status === 'waiting');
|
||||
return (
|
||||
<Card
|
||||
key={run.run_id}
|
||||
className={cn(
|
||||
'cursor-pointer transition-colors border-border/80 hover:border-primary/40',
|
||||
isSelected && 'border-primary bg-primary/5'
|
||||
)}
|
||||
onClick={() => onSelectRun(run.run_id)}
|
||||
>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
|
||||
{actorIcon(run)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<CardTitle className="text-sm leading-none truncate">{run.actor_name}</CardTitle>
|
||||
<p className="text-xs text-muted-foreground mt-1 truncate">{run.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Badge variant="outline" className={cn('text-[10px] border', statusTone(run.status))}>
|
||||
{statusLabel(run.status)}
|
||||
</Badge>
|
||||
{canCancel && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 px-2"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onCancelRun(run.run_id);
|
||||
}}
|
||||
>
|
||||
<Square className="w-3.5 h-3.5 mr-1" />
|
||||
取消
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2">
|
||||
<div className="flex items-center gap-2 text-[11px] text-muted-foreground flex-wrap">
|
||||
<span>{actorTypeLabel(run.actor_type)}</span>
|
||||
{run.source && <span>{run.source}</span>}
|
||||
{run.parent_run_id && <span>子任务</span>}
|
||||
</div>
|
||||
{run.summary && (
|
||||
<div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground whitespace-pre-wrap line-clamp-3">
|
||||
{run.summary}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1.5">
|
||||
{runEvents.length === 0 && run.status === 'running' && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
等待首个事件...
|
||||
</div>
|
||||
)}
|
||||
{runEvents.map((event) => (
|
||||
<div key={event.event_id} className="text-xs rounded-md border border-border/50 bg-background/60 px-3 py-2">
|
||||
<div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
|
||||
<span>{eventKindLabel(event.kind)}</span>
|
||||
{event.status && <span>{statusLabel(event.status)}</span>}
|
||||
</div>
|
||||
<div className="text-foreground/90 whitespace-pre-wrap break-words">
|
||||
{event.text || '结构化更新'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{run.status === 'error' && (
|
||||
<div className="flex items-center gap-2 text-xs text-rose-300">
|
||||
<AlertCircle className="w-3.5 h-3.5" />
|
||||
此任务执行失败。
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user