188 lines
7.3 KiB
TypeScript
188 lines
7.3 KiB
TypeScript
'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>
|
|
);
|
|
}
|