feat: 添加swarms团队编排功能并优化agent委派系统
- 引入AgentTeamOrchestrator支持多agent协同任务执行 - 增加第三方swarms库依赖并配置git协议替换以改善包管理 - 扩展DelegationManager支持团队任务调度和进度跟踪 - 实现中文bigram分词算法提升中文任务检索准确性 - 调整A2AClient和DelegationManager超时时间从30秒增至600秒 - 优化AgentRunResult状态判断逻辑增加有意义摘要检测 - 修改Dockerfile配置npm仓库镜像地址和git协议映射 - 更新CLI命令行接口支持网关端口配置传递 - 调整提供者超时配置机制增强请求稳定性 - 移除过时的support_group字段简化agent描述符结构 - 增强错误处理和进度事件报告机制改进用户体验
This commit is contained in:
@ -6,6 +6,9 @@ import { CheckCircle2, Loader2, Sparkles, Square } from 'lucide-react';
|
||||
import type { ProcessArtifact, ProcessEvent, ProcessRun } from '@/types';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { appArtifactPreview, appFeedRoleLabel, appStatusLabel } from '@/lib/i18n/common';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type RunCardPhase = 'live' | 'exiting' | 'collapsed';
|
||||
@ -51,15 +54,6 @@ function accentFor(index: number) {
|
||||
return AGENT_ACCENTS[index % AGENT_ACCENTS.length];
|
||||
}
|
||||
|
||||
function statusLabel(status: ProcessRun['status']) {
|
||||
if (status === 'done') return '已完成';
|
||||
if (status === 'error') return '失败';
|
||||
if (status === 'cancelled') return '已取消';
|
||||
if (status === 'waiting') return '等待中';
|
||||
if (status === 'queued') return '排队中';
|
||||
return '进行中';
|
||||
}
|
||||
|
||||
function statusTone(status: ProcessRun['status']) {
|
||||
if (status === 'done') return 'border-emerald-500/20 bg-emerald-500/10 text-emerald-300';
|
||||
if (status === 'error') return 'border-rose-500/20 bg-rose-500/10 text-rose-300';
|
||||
@ -69,13 +63,6 @@ function statusTone(status: ProcessRun['status']) {
|
||||
return 'border-sky-500/20 bg-sky-500/10 text-sky-300';
|
||||
}
|
||||
|
||||
function roleLabel(role: AgentFeedItem['role']) {
|
||||
if (role === 'user') return '主 agent';
|
||||
if (role === 'tool') return '工具输出';
|
||||
if (role === 'system') return '状态';
|
||||
return '子 agent';
|
||||
}
|
||||
|
||||
function feedTone(role: AgentFeedItem['role']) {
|
||||
if (role === 'user') {
|
||||
return 'ml-6 border-border/70 bg-muted/60 text-foreground';
|
||||
@ -89,22 +76,6 @@ function feedTone(role: AgentFeedItem['role']) {
|
||||
return 'mr-6 border-border/70 bg-background/80 text-foreground';
|
||||
}
|
||||
|
||||
function artifactPreview(artifact: ProcessArtifact): string {
|
||||
if (artifact.artifact_type === 'link' && artifact.url) {
|
||||
return `${artifact.title}\n${artifact.url}`;
|
||||
}
|
||||
if ((artifact.artifact_type === 'text' || artifact.artifact_type === 'markdown') && artifact.content) {
|
||||
return `${artifact.title}\n${artifact.content}`;
|
||||
}
|
||||
if (artifact.artifact_type === 'json') {
|
||||
return `${artifact.title}\n已生成结构化结果`;
|
||||
}
|
||||
if (artifact.file_id) {
|
||||
return `${artifact.title}\n已生成文件输出`;
|
||||
}
|
||||
return artifact.title;
|
||||
}
|
||||
|
||||
function delegatedTask(run: ProcessRun): string | null {
|
||||
const value = run.metadata?.delegated_task;
|
||||
return typeof value === 'string' && value.trim() ? value.trim() : null;
|
||||
@ -114,6 +85,7 @@ function buildFeed(
|
||||
run: ProcessRun,
|
||||
events: ProcessEvent[],
|
||||
artifacts: ProcessArtifact[],
|
||||
locale: 'zh-CN' | 'en-US',
|
||||
): AgentFeedItem[] {
|
||||
const items: AgentFeedItem[] = [];
|
||||
let hasLeadBubble = false;
|
||||
@ -160,7 +132,7 @@ function buildFeed(
|
||||
key: artifact.artifact_id,
|
||||
created_at: artifact.created_at,
|
||||
role: artifact.actor_type === 'mcp' ? 'tool' : 'assistant',
|
||||
text: artifactPreview(artifact),
|
||||
text: appArtifactPreview(artifact, locale),
|
||||
});
|
||||
}
|
||||
|
||||
@ -181,12 +153,12 @@ function buildFeed(
|
||||
.slice(-8);
|
||||
}
|
||||
|
||||
function runSummary(run: ProcessRun, feed: AgentFeedItem[]): string {
|
||||
function runSummary(run: ProcessRun, feed: AgentFeedItem[], locale: 'zh-CN' | 'en-US'): string {
|
||||
if (run.summary?.trim()) {
|
||||
return run.summary.trim();
|
||||
}
|
||||
const latestAssistant = [...feed].reverse().find((item) => item.role === 'assistant' || item.role === 'tool');
|
||||
return latestAssistant?.text || '已完成子任务处理';
|
||||
return latestAssistant?.text || pickAppText(locale, '已完成子任务处理', 'Subtask processing completed');
|
||||
}
|
||||
|
||||
function useRunCardPhases(runs: ProcessRun[]) {
|
||||
@ -256,7 +228,13 @@ function useRunCardPhases(runs: ProcessRun[]) {
|
||||
return phases;
|
||||
}
|
||||
|
||||
function AgentBubble({ item }: { item: AgentFeedItem }) {
|
||||
function AgentBubble({
|
||||
item,
|
||||
locale,
|
||||
}: {
|
||||
item: AgentFeedItem;
|
||||
locale: 'zh-CN' | 'en-US';
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@ -266,7 +244,7 @@ function AgentBubble({ item }: { item: AgentFeedItem }) {
|
||||
)}
|
||||
>
|
||||
<div className="mb-1 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
|
||||
<span>{roleLabel(item.role)}</span>
|
||||
<span>{appFeedRoleLabel(item.role, locale)}</span>
|
||||
</div>
|
||||
<div className="whitespace-pre-wrap break-words">{item.text}</div>
|
||||
</div>
|
||||
@ -281,6 +259,7 @@ function LiveAgentCard({
|
||||
phase,
|
||||
accentIndex,
|
||||
onSelect,
|
||||
locale,
|
||||
}: {
|
||||
run: ProcessRun;
|
||||
feed: AgentFeedItem[];
|
||||
@ -289,6 +268,7 @@ function LiveAgentCard({
|
||||
phase: RunCardPhase;
|
||||
accentIndex: number;
|
||||
onSelect: () => void;
|
||||
locale: 'zh-CN' | 'en-US';
|
||||
}) {
|
||||
const showSpinner = !TERMINAL_STATUSES.has(run.status);
|
||||
const accent = accentFor(accentIndex);
|
||||
@ -308,13 +288,13 @@ function LiveAgentCard({
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<span className={cn('h-2 w-2 rounded-full', accent.dot)} />
|
||||
<span>Sub-Agent</span>
|
||||
<span>{pickAppText(locale, '子 Agent', 'Sub-agent')}</span>
|
||||
</div>
|
||||
<div className={cn('mt-1 truncate text-sm font-semibold', accent.title)}>{run.actor_name}</div>
|
||||
<div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{run.title}</div>
|
||||
</div>
|
||||
<Badge variant="outline" className={cn('border', statusTone(run.status))}>
|
||||
{statusLabel(run.status)}
|
||||
{appStatusLabel(run.status, locale)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
@ -322,11 +302,11 @@ function LiveAgentCard({
|
||||
<div className="max-h-[280px] space-y-2.5 overflow-y-auto pr-1">
|
||||
{feed.length === 0 && (
|
||||
<div className="rounded-2xl border border-dashed border-border/60 bg-background/60 px-4 py-5 text-center text-sm text-muted-foreground">
|
||||
等待子 agent 输出...
|
||||
{pickAppText(locale, '等待子 agent 输出...', 'Waiting for sub-agent output...')}
|
||||
</div>
|
||||
)}
|
||||
{feed.map((item) => (
|
||||
<AgentBubble key={item.key} item={item} />
|
||||
<AgentBubble key={item.key} item={item} locale={locale} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@ -335,10 +315,10 @@ function LiveAgentCard({
|
||||
{showSpinner && (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-muted/40 px-2.5 py-1 text-foreground/80">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
运行中
|
||||
{pickAppText(locale, '运行中', 'Running')}
|
||||
</span>
|
||||
)}
|
||||
{artifactCount > 0 && <span>{artifactCount} 个输出</span>}
|
||||
{artifactCount > 0 && <span>{pickAppText(locale, `${artifactCount} 个输出`, `${artifactCount} outputs`)}</span>}
|
||||
{typeof run.source === 'string' && run.source.trim() && <span>{run.source}</span>}
|
||||
</div>
|
||||
</button>
|
||||
@ -352,6 +332,7 @@ function ResultCard({
|
||||
selected,
|
||||
accentIndex,
|
||||
onSelect,
|
||||
locale,
|
||||
}: {
|
||||
run: ProcessRun;
|
||||
summary: string;
|
||||
@ -359,6 +340,7 @@ function ResultCard({
|
||||
selected: boolean;
|
||||
accentIndex: number;
|
||||
onSelect: () => void;
|
||||
locale: 'zh-CN' | 'en-US';
|
||||
}) {
|
||||
const accent = accentFor(accentIndex);
|
||||
|
||||
@ -374,7 +356,7 @@ function ResultCard({
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[10px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Result</div>
|
||||
<div className="text-[10px] font-medium uppercase tracking-[0.18em] text-muted-foreground">{pickAppText(locale, '结果', 'Result')}</div>
|
||||
<div className={cn('mt-1 truncate text-sm font-semibold', accent.title)}>{run.actor_name}</div>
|
||||
</div>
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-400" />
|
||||
@ -382,9 +364,9 @@ function ResultCard({
|
||||
<div className="mt-2 line-clamp-3 text-sm text-foreground/80">{summary}</div>
|
||||
<div className="mt-3 flex items-center gap-2 text-[11px] text-muted-foreground">
|
||||
<Badge variant="outline" className={cn('border', statusTone(run.status))}>
|
||||
{statusLabel(run.status)}
|
||||
{appStatusLabel(run.status, locale)}
|
||||
</Badge>
|
||||
{artifactCount > 0 && <span>{artifactCount} 个输出</span>}
|
||||
{artifactCount > 0 && <span>{pickAppText(locale, `${artifactCount} 个输出`, `${artifactCount} outputs`)}</span>}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
@ -407,6 +389,7 @@ export function AgentTeamBlock({
|
||||
onSelectRun: (runId: string) => void;
|
||||
onCancelRun: (runId: string) => void;
|
||||
}) {
|
||||
const { locale } = useAppI18n();
|
||||
const phases = useRunCardPhases(memberRuns);
|
||||
const sortedRuns = React.useMemo(
|
||||
() =>
|
||||
@ -431,23 +414,24 @@ export function AgentTeamBlock({
|
||||
<div className="mr-1 flex min-h-[68px] min-w-[132px] max-w-[180px] flex-col justify-center">
|
||||
<div className="inline-flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
Agent Results
|
||||
{pickAppText(locale, '智能体结果', 'Agent results')}
|
||||
</div>
|
||||
<div className="mt-1 line-clamp-2 text-sm font-medium text-foreground">{rootRun.title}</div>
|
||||
</div>
|
||||
{terminalRuns.map((run, index) => {
|
||||
const runEvents = events.filter((event) => event.run_id === run.run_id);
|
||||
const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
|
||||
const feed = buildFeed(run, runEvents, runArtifacts);
|
||||
const feed = buildFeed(run, runEvents, runArtifacts, locale);
|
||||
return (
|
||||
<ResultCard
|
||||
key={run.run_id}
|
||||
run={run}
|
||||
summary={runSummary(run, feed)}
|
||||
summary={runSummary(run, feed, locale)}
|
||||
artifactCount={runArtifacts.length}
|
||||
selected={selectedRunId === run.run_id}
|
||||
accentIndex={index}
|
||||
onSelect={() => onSelectRun(run.run_id)}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
@ -461,25 +445,27 @@ export function AgentTeamBlock({
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
Agent Team
|
||||
{pickAppText(locale, '智能体团队', 'Agent team')}
|
||||
</div>
|
||||
<div className="mt-1.5 text-base font-semibold text-foreground">{rootRun.title}</div>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{liveCount > 0 ? `主 agent 正在协调 ${liveCount} 个运行中的 sub-agent` : '子 agent 已完成，结果已折叠为摘要卡片'}
|
||||
{liveCount > 0
|
||||
? pickAppText(locale, `主 agent 正在协调 ${liveCount} 个运行中的 sub-agent`, `Lead agent is coordinating ${liveCount} running sub-agents`)
|
||||
: pickAppText(locale, '子 agent 已完成，结果已折叠为摘要卡片', 'Sub-agents are done. Results are folded into summary cards')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{canCancelRoot && (
|
||||
<Button variant="outline" size="sm" className="bg-background/60" onClick={() => onCancelRun(rootRun.run_id)}>
|
||||
<Square className="mr-1.5 h-3.5 w-3.5" />
|
||||
取消
|
||||
{pickAppText(locale, '取消', 'Cancel')}
|
||||
</Button>
|
||||
)}
|
||||
<Badge variant="outline" className="border-border/70 bg-background/55 text-foreground/85">
|
||||
{memberRuns.length} 个 sub-agent
|
||||
{pickAppText(locale, `${memberRuns.length} 个 sub-agent`, `${memberRuns.length} sub-agents`)}
|
||||
</Badge>
|
||||
<Badge variant="outline" className={cn('border', statusTone(rootRun.status))}>
|
||||
{statusLabel(rootRun.status)}
|
||||
{appStatusLabel(rootRun.status, locale)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
@ -490,7 +476,7 @@ export function AgentTeamBlock({
|
||||
{liveRuns.map((run, index) => {
|
||||
const runEvents = events.filter((event) => event.run_id === run.run_id);
|
||||
const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
|
||||
const feed = buildFeed(run, runEvents, runArtifacts);
|
||||
const feed = buildFeed(run, runEvents, runArtifacts, locale);
|
||||
return (
|
||||
<LiveAgentCard
|
||||
key={run.run_id}
|
||||
@ -501,6 +487,7 @@ export function AgentTeamBlock({
|
||||
phase={phases[run.run_id] || 'live'}
|
||||
accentIndex={index}
|
||||
onSelect={() => onSelectRun(run.run_id)}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
@ -513,16 +500,17 @@ export function AgentTeamBlock({
|
||||
{collapsedRuns.map((run, index) => {
|
||||
const runEvents = events.filter((event) => event.run_id === run.run_id);
|
||||
const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
|
||||
const feed = buildFeed(run, runEvents, runArtifacts);
|
||||
const feed = buildFeed(run, runEvents, runArtifacts, locale);
|
||||
return (
|
||||
<ResultCard
|
||||
key={run.run_id}
|
||||
run={run}
|
||||
summary={runSummary(run, feed)}
|
||||
summary={runSummary(run, feed, locale)}
|
||||
artifactCount={runArtifacts.length}
|
||||
selected={selectedRunId === run.run_id}
|
||||
accentIndex={index}
|
||||
onSelect={() => onSelectRun(run.run_id)}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -7,33 +7,9 @@ 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;
|
||||
}
|
||||
import { appActorTypeLabel, appEventKindLabel, appStatusLabel } from '@/lib/i18n/common';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
|
||||
function artifactIcon(type: ProcessArtifact['artifact_type']) {
|
||||
if (type === 'json') return <FileJson className="w-4 h-4" />;
|
||||
@ -42,7 +18,7 @@ function artifactIcon(type: ProcessArtifact['artifact_type']) {
|
||||
return <FileOutput className="w-4 h-4" />;
|
||||
}
|
||||
|
||||
function renderArtifactBody(artifact: ProcessArtifact) {
|
||||
function renderArtifactBody(artifact: ProcessArtifact, locale: 'zh-CN' | 'en-US') {
|
||||
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">
|
||||
@ -59,7 +35,7 @@ function renderArtifactBody(artifact: ProcessArtifact) {
|
||||
}
|
||||
return (
|
||||
<div className="text-xs text-foreground/90 whitespace-pre-wrap break-words">
|
||||
{artifact.content || '（空产物）'}
|
||||
{artifact.content || pickAppText(locale, '（空产物）', '(Empty artifact)')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -73,6 +49,7 @@ export function ArtifactSidebar({
|
||||
events: ProcessEvent[];
|
||||
artifacts: ProcessArtifact[];
|
||||
}) {
|
||||
const { locale } = useAppI18n();
|
||||
const runArtifacts = selectedRun
|
||||
? artifacts.filter((item) => item.run_id === selectedRun.run_id)
|
||||
: artifacts;
|
||||
@ -90,9 +67,11 @@ export function ArtifactSidebar({
|
||||
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>
|
||||
<h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">{pickAppText(locale, '结果面板', 'Results')}</h2>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{selectedRun ? `当前选中: ${selectedRun.actor_name}` : '选择一个任务查看详细过程与产物'}
|
||||
{selectedRun
|
||||
? pickAppText(locale, `当前选中: ${selectedRun.actor_name}`, `Selected: ${selectedRun.actor_name}`)
|
||||
: pickAppText(locale, '选择一个任务查看详细过程与产物', 'Select a task to inspect its process and artifacts')}
|
||||
</p>
|
||||
</div>
|
||||
<ScrollArea className="flex-1 px-4 py-4">
|
||||
@ -101,24 +80,24 @@ export function ArtifactSidebar({
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<FolderSearch className="w-4 h-4" />
|
||||
任务摘要
|
||||
{pickAppText(locale, '任务摘要', 'Task summary')}
|
||||
</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>
|
||||
<Badge variant="outline">{appActorTypeLabel(selectedRun.actor_type, locale)}</Badge>
|
||||
<Badge variant="outline">{appStatusLabel(selectedRun.status, locale)}</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 || '暂时还没有最终摘要。'}
|
||||
{selectedRun.summary || pickAppText(locale, '暂时还没有最终摘要。', 'No final summary yet.')}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-muted-foreground text-sm">当前没有选中的任务。</div>
|
||||
<div className="text-muted-foreground text-sm">{pickAppText(locale, '当前没有选中的任务。', 'No task is selected right now.')}</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -127,22 +106,22 @@ export function ArtifactSidebar({
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<MessagesSquare className="w-4 h-4" />
|
||||
事件记录
|
||||
{pickAppText(locale, '事件记录', 'Events')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-2">
|
||||
{runEvents.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground">暂时还没有结构化事件。</div>
|
||||
<div className="text-xs text-muted-foreground">{pickAppText(locale, '暂时还没有结构化事件。', 'No structured events yet.')}</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>}
|
||||
<span>{appEventKindLabel(event.kind, locale)}</span>
|
||||
{event.status && <span>{appStatusLabel(event.status, locale)}</span>}
|
||||
</div>
|
||||
<div className="text-xs whitespace-pre-wrap break-words">
|
||||
{event.text || '结构化更新'}
|
||||
{event.text || pickAppText(locale, '结构化更新', 'Structured update')}
|
||||
</div>
|
||||
</div>
|
||||
{index < runEvents.length - 1 && <Separator className="my-2" />}
|
||||
@ -155,12 +134,12 @@ export function ArtifactSidebar({
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<FileOutput className="w-4 h-4" />
|
||||
产物列表
|
||||
{pickAppText(locale, '产物列表', 'Artifacts')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0 space-y-3">
|
||||
{runArtifacts.length === 0 && (
|
||||
<div className="text-xs text-muted-foreground">暂时还没有产物。</div>
|
||||
<div className="text-xs text-muted-foreground">{pickAppText(locale, '暂时还没有产物。', 'No artifacts yet.')}</div>
|
||||
)}
|
||||
{runArtifacts.map((artifact) => (
|
||||
<div key={artifact.artifact_id} className="rounded-lg border border-border/70 bg-background/70 p-3 space-y-2">
|
||||
@ -175,7 +154,7 @@ export function ArtifactSidebar({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderArtifactBody(artifact)}
|
||||
{renderArtifactBody(artifact, locale)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
|
||||
@ -6,6 +6,8 @@ import type { ChatMessage, ProcessArtifact, ProcessEvent, ProcessRun } from '@/t
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { MessageList } from '@/components/chat-workbench/MessageList';
|
||||
import { ArtifactSidebar } from '@/components/chat-workbench/ArtifactSidebar';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
|
||||
export function ChatWorkbench({
|
||||
messages,
|
||||
@ -30,6 +32,29 @@ export function ChatWorkbench({
|
||||
onSelectRun: (runId: string) => void;
|
||||
onCancelRun: (runId: string) => void;
|
||||
}) {
|
||||
const { locale } = useAppI18n();
|
||||
const [isDesktop, setIsDesktop] = React.useState(() =>
|
||||
typeof window === 'undefined' ? true : window.matchMedia('(min-width: 1024px)').matches
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
const mediaQuery = window.matchMedia('(min-width: 1024px)');
|
||||
const updateLayout = () => setIsDesktop(mediaQuery.matches);
|
||||
updateLayout();
|
||||
|
||||
if (typeof mediaQuery.addEventListener === 'function') {
|
||||
mediaQuery.addEventListener('change', updateLayout);
|
||||
return () => mediaQuery.removeEventListener('change', updateLayout);
|
||||
}
|
||||
|
||||
mediaQuery.addListener(updateLayout);
|
||||
return () => mediaQuery.removeListener(updateLayout);
|
||||
}, []);
|
||||
|
||||
const selectedRun = selectedRunId
|
||||
? processRuns.find((item) => item.run_id === selectedRunId) || null
|
||||
: null;
|
||||
@ -48,25 +73,29 @@ export function ChatWorkbench({
|
||||
)
|
||||
);
|
||||
const desktopColumns = hasResultsPanel
|
||||
? 'lg:grid-cols-[minmax(0,1fr)_360px]'
|
||||
: 'lg:grid-cols-[minmax(0,1fr)]';
|
||||
? 'grid-cols-[minmax(0,1fr)_360px]'
|
||||
: 'grid-cols-[minmax(0,1fr)]';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`hidden lg:grid h-full ${desktopColumns}`}>
|
||||
const messageList = (
|
||||
<MessageList
|
||||
messages={messages}
|
||||
isThinking={isThinking}
|
||||
messagesEndRef={messagesEndRef}
|
||||
viewportRef={messageViewportRef}
|
||||
processRuns={processRuns}
|
||||
processEvents={processEvents}
|
||||
processArtifacts={processArtifacts}
|
||||
selectedRunId={selectedRun?.run_id || null}
|
||||
onSelectRun={onSelectRun}
|
||||
onCancelRun={onCancelRun}
|
||||
/>
|
||||
);
|
||||
|
||||
if (isDesktop) {
|
||||
return (
|
||||
<div className={`grid h-full ${desktopColumns}`}>
|
||||
<div className="min-h-0">
|
||||
<MessageList
|
||||
messages={messages}
|
||||
isThinking={isThinking}
|
||||
messagesEndRef={messagesEndRef}
|
||||
viewportRef={messageViewportRef}
|
||||
processRuns={processRuns}
|
||||
processEvents={processEvents}
|
||||
processArtifacts={processArtifacts}
|
||||
selectedRunId={selectedRun?.run_id || null}
|
||||
onSelectRun={onSelectRun}
|
||||
onCancelRun={onCancelRun}
|
||||
/>
|
||||
{messageList}
|
||||
</div>
|
||||
{hasResultsPanel && (
|
||||
<div className="min-h-0">
|
||||
@ -78,55 +107,33 @@ export function ChatWorkbench({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="lg:hidden h-full">
|
||||
{!hasResultsPanel ? (
|
||||
<MessageList
|
||||
messages={messages}
|
||||
isThinking={isThinking}
|
||||
messagesEndRef={messagesEndRef}
|
||||
viewportRef={messageViewportRef}
|
||||
processRuns={processRuns}
|
||||
processEvents={processEvents}
|
||||
processArtifacts={processArtifacts}
|
||||
selectedRunId={selectedRun?.run_id || null}
|
||||
onSelectRun={onSelectRun}
|
||||
onCancelRun={onCancelRun}
|
||||
/>
|
||||
) : (
|
||||
<Tabs defaultValue="chat" className="h-full flex flex-col">
|
||||
<div className="px-4 pt-3 border-b border-border">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="chat">聊天</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}
|
||||
processRuns={processRuns}
|
||||
processEvents={processEvents}
|
||||
processArtifacts={processArtifacts}
|
||||
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>
|
||||
</>
|
||||
return (
|
||||
<div className="h-full">
|
||||
{!hasResultsPanel ? (
|
||||
messageList
|
||||
) : (
|
||||
<Tabs defaultValue="chat" className="h-full flex flex-col">
|
||||
<div className="px-4 pt-3 border-b border-border">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="chat">{pickAppText(locale, '聊天', 'Chat')}</TabsTrigger>
|
||||
<TabsTrigger value="results">{pickAppText(locale, '结果', 'Results')}</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
<TabsContent value="chat" className="flex-1 min-h-0 mt-0">
|
||||
{messageList}
|
||||
</TabsContent>
|
||||
<TabsContent value="results" className="flex-1 min-h-0 mt-0">
|
||||
<ArtifactSidebar
|
||||
selectedRun={selectedRun}
|
||||
events={processEvents}
|
||||
artifacts={processArtifacts}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,6 +8,8 @@ import { getAccessToken, getFileUrl } from '@/lib/api';
|
||||
import { AgentTeamBlock } from '@/components/chat-workbench/AgentTeamBlock';
|
||||
import { MarkdownContent } from '@/components/chat-workbench/MarkdownContent';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
|
||||
function AuthImage({ src, alt, className }: { src: string; alt: string; className?: string }) {
|
||||
const [blobUrl, setBlobUrl] = React.useState<string | null>(null);
|
||||
@ -115,6 +117,20 @@ type AgentTeamGroup = {
|
||||
startedAt: string;
|
||||
};
|
||||
|
||||
const TERMINAL_RUN_STATUSES = new Set<ProcessRun['status']>(['done', 'error', 'cancelled']);
|
||||
|
||||
function shouldHideSystemAgentMessage(message: ChatMessage): boolean {
|
||||
if (message.role !== 'assistant' || typeof message.content !== 'string') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const content = message.content.trim();
|
||||
return (
|
||||
/^\[(Agent team|Subagent)\s+['"][^'"]+['"]\s+(completed|failed|cancelled|finished)\]/i.test(content)
|
||||
|| (content.startsWith('[Agent team ') && content.includes('\nTask:'))
|
||||
);
|
||||
}
|
||||
|
||||
function parseTimelineTime(value?: string | null): number | null {
|
||||
if (!value) return null;
|
||||
const parsed = new Date(value).getTime();
|
||||
@ -194,9 +210,20 @@ export function MessageList({
|
||||
onSelectRun: (runId: string) => void;
|
||||
onCancelRun: (runId: string) => void;
|
||||
}) {
|
||||
const teamGroups = React.useMemo(() => buildAgentTeamGroups(processRuns), [processRuns]);
|
||||
const { locale } = useAppI18n();
|
||||
const visibleMessages = React.useMemo(
|
||||
() => messages.filter((message) => !shouldHideSystemAgentMessage(message)),
|
||||
[messages]
|
||||
);
|
||||
const teamGroups = React.useMemo(
|
||||
() =>
|
||||
buildAgentTeamGroups(processRuns).filter((group) =>
|
||||
group.memberRuns.some((run) => !TERMINAL_RUN_STATUSES.has(run.status))
|
||||
),
|
||||
[processRuns]
|
||||
);
|
||||
const timelineItems = React.useMemo(() => {
|
||||
const messageItems = messages.map((message, index) => ({
|
||||
const messageItems = visibleMessages.map((message, index) => ({
|
||||
kind: 'message' as const,
|
||||
key: `${message.role}:${message.timestamp || index}:${index}`,
|
||||
sortTime: parseTimelineTime(message.timestamp) ?? Number.MAX_SAFE_INTEGER / 2 + index,
|
||||
@ -204,12 +231,12 @@ export function MessageList({
|
||||
message,
|
||||
}));
|
||||
const teamItems = teamGroups.map((group, index) => ({
|
||||
kind: 'team' as const,
|
||||
key: `team:${group.rootRun.run_id}`,
|
||||
sortTime: parseTimelineTime(group.startedAt) ?? Number.MAX_SAFE_INTEGER / 2 + messages.length + index,
|
||||
order: messages.length + index,
|
||||
group,
|
||||
}));
|
||||
kind: 'team' as const,
|
||||
key: `team:${group.rootRun.run_id}`,
|
||||
sortTime: parseTimelineTime(group.startedAt) ?? Number.MAX_SAFE_INTEGER / 2 + visibleMessages.length + index,
|
||||
order: visibleMessages.length + index,
|
||||
group,
|
||||
}));
|
||||
|
||||
return [...messageItems, ...teamItems].sort((a, b) => {
|
||||
if (a.sortTime !== b.sortTime) {
|
||||
@ -217,16 +244,16 @@ export function MessageList({
|
||||
}
|
||||
return a.order - b.order;
|
||||
});
|
||||
}, [messages, teamGroups]);
|
||||
}, [teamGroups, visibleMessages]);
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full px-4" viewportRef={viewportRef}>
|
||||
<div className="max-w-6xl mx-auto py-4 space-y-4">
|
||||
{messages.length === 0 && teamGroups.length === 0 && !isThinking && (
|
||||
{visibleMessages.length === 0 && teamGroups.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 Agent Sandbox</p>
|
||||
<p className="text-sm">发送消息开始对话</p>
|
||||
<p className="text-sm">{pickAppText(locale, '发送消息开始对话', 'Send a message to start the conversation')}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -251,7 +278,7 @@ export function MessageList({
|
||||
<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>
|
||||
<span className="text-sm">{pickAppText(locale, '思考中...', 'Thinking...')}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@ -7,35 +7,11 @@ 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 { appActorTypeLabel, appEventKindLabel, appStatusLabel } from '@/lib/i18n/common';
|
||||
import { pickAppText } from '@/lib/i18n/core';
|
||||
import { useAppI18n } from '@/lib/i18n/provider';
|
||||
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';
|
||||
@ -63,6 +39,7 @@ export function ProcessLane({
|
||||
onSelectRun: (runId: string) => void;
|
||||
onCancelRun: (runId: string) => void;
|
||||
}) {
|
||||
const { locale } = useAppI18n();
|
||||
const sortedRuns = [...runs].sort((a, b) => {
|
||||
const at = new Date(a.started_at).getTime();
|
||||
const bt = new Date(b.started_at).getTime();
|
||||
@ -77,11 +54,11 @@ export function ProcessLane({
|
||||
<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>
|
||||
<h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">{pickAppText(locale, '执行过程', 'Execution')}</h2>
|
||||
<p className="text-xs text-muted-foreground mt-1">{pickAppText(locale, '智能体、A2A、MCP 的实时过程', 'Live process stream for agents, A2A, and MCP')}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{sortedRuns.length} 个任务
|
||||
{pickAppText(locale, `${sortedRuns.length} 个任务`, `${sortedRuns.length} tasks`)}
|
||||
</Badge>
|
||||
</div>
|
||||
<ScrollArea className="flex-1 px-4 py-4">
|
||||
@ -120,7 +97,7 @@ export function ProcessLane({
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Badge variant="outline" className={cn('text-[10px] border', statusTone(run.status))}>
|
||||
{statusLabel(run.status)}
|
||||
{appStatusLabel(run.status, locale)}
|
||||
</Badge>
|
||||
{canCancel && (
|
||||
<Button
|
||||
@ -133,7 +110,7 @@ export function ProcessLane({
|
||||
}}
|
||||
>
|
||||
<Square className="w-3.5 h-3.5 mr-1" />
|
||||
取消
|
||||
{pickAppText(locale, '取消', 'Cancel')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
@ -141,9 +118,9 @@ export function ProcessLane({
|
||||
</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>
|
||||
<span>{appActorTypeLabel(run.actor_type, locale)}</span>
|
||||
{run.source && <span>{run.source}</span>}
|
||||
{run.parent_run_id && <span>子任务</span>}
|
||||
{run.parent_run_id && <span>{pickAppText(locale, '子任务', 'Subtask')}</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">
|
||||
@ -154,24 +131,24 @@ export function ProcessLane({
|
||||
{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" />
|
||||
等待首个事件...
|
||||
{pickAppText(locale, '等待首个事件...', 'Waiting for the first event...')}
|
||||
</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>}
|
||||
<span>{appEventKindLabel(event.kind, locale)}</span>
|
||||
{event.status && <span>{appStatusLabel(event.status, locale)}</span>}
|
||||
</div>
|
||||
<div className="text-foreground/90 whitespace-pre-wrap break-words">
|
||||
{event.text || '结构化更新'}
|
||||
{event.text || pickAppText(locale, '结构化更新', 'Structured update')}
|
||||
</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" />
|
||||
此任务执行失败。
|
||||
{pickAppText(locale, '此任务执行失败。', 'This task failed.')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user