325 lines
12 KiB
TypeScript
325 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import {
|
|
AlertCircle,
|
|
CheckCircle2,
|
|
Circle,
|
|
FileJson,
|
|
FileOutput,
|
|
FileText,
|
|
Image as ImageIcon,
|
|
Link2,
|
|
ListChecks,
|
|
Loader2,
|
|
PanelRightOpen,
|
|
X,
|
|
} from 'lucide-react';
|
|
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { appStatusLabel } from '@/lib/i18n/common';
|
|
import { pickAppText } from '@/lib/i18n/core';
|
|
import { useAppI18n } from '@/lib/i18n/provider';
|
|
import type {
|
|
SessionProgressArtifactView,
|
|
SessionProgressStepView,
|
|
SessionProgressView,
|
|
} from '@/lib/session-progress';
|
|
import type { ProcessArtifact, ProcessRunStatus } from '@/types';
|
|
|
|
function formatShortTime(value: string, locale: 'zh-CN' | 'en-US') {
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return value;
|
|
return new Intl.DateTimeFormat(locale, {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
}).format(date);
|
|
}
|
|
|
|
function statusTone(status: ProcessRunStatus) {
|
|
if (status === 'done') return 'text-[#2F8D50] bg-[#E3F1E7] border-[#B8D9C2]';
|
|
if (status === 'running') return 'text-[#2F6FCA] bg-[#E7EEF9] border-[#B8CBE8]';
|
|
if (status === 'error') return 'text-[#8A3A2D] bg-[#F0E5E1] border-[#D9BDB4]';
|
|
if (status === 'cancelled') return 'text-[#6A5E58] bg-[#ECE8E5] border-[#D8D2CE]';
|
|
return 'text-[#6A5E58] bg-[#F0ECE9] border-[#D8D2CE]';
|
|
}
|
|
|
|
function StepMarker({ step, index }: { step: SessionProgressStepView; index: number }) {
|
|
if (step.status === 'done') {
|
|
return (
|
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2F8D50] text-white">
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
</span>
|
|
);
|
|
}
|
|
if (step.status === 'running') {
|
|
return (
|
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#2F6FCA] text-[11px] font-semibold text-white">
|
|
{index + 1}
|
|
</span>
|
|
);
|
|
}
|
|
if (step.status === 'error') {
|
|
return (
|
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#8A3A2D] text-white">
|
|
<AlertCircle className="h-4 w-4" />
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-[#D8D2CE] text-[#6A5E58]">
|
|
<Circle className="h-3.5 w-3.5" />
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function artifactIcon(type: ProcessArtifact['artifact_type']) {
|
|
if (type === 'json') return <FileJson className="h-4 w-4" />;
|
|
if (type === 'image') return <ImageIcon className="h-4 w-4" />;
|
|
if (type === 'link') return <Link2 className="h-4 w-4" />;
|
|
if (type === 'markdown' || type === 'text') return <FileText className="h-4 w-4" />;
|
|
return <FileOutput className="h-4 w-4" />;
|
|
}
|
|
|
|
function ProgressHeader({ view }: { view: SessionProgressView }) {
|
|
const { locale } = useAppI18n();
|
|
const percent = view.progress.percent;
|
|
|
|
return (
|
|
<section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4 shadow-[0_8px_24px_rgba(0,0,0,0.04)]">
|
|
<div className="flex items-start gap-3">
|
|
<div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#E3F1E7] text-[#2F8D50]">
|
|
<ListChecks className="h-4 w-4" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="line-clamp-2 text-sm font-semibold text-foreground">{view.title}</div>
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<span className={`rounded-full border px-2 py-0.5 text-[11px] font-medium ${statusTone(view.status)}`}>
|
|
{appStatusLabel(view.status, locale)}
|
|
</span>
|
|
<span className="text-[11px] text-muted-foreground">
|
|
{pickAppText(locale, '更新于', 'Updated')} {formatShortTime(view.updatedAt, locale)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<div className="mb-2 flex items-center justify-between gap-3 text-xs text-muted-foreground">
|
|
<span>{view.progress.label}</span>
|
|
{percent !== null && <span className="font-medium text-foreground">{percent}%</span>}
|
|
</div>
|
|
<div className="h-2 overflow-hidden rounded-full bg-[#ECE8E5]">
|
|
<div
|
|
className="h-full rounded-full bg-[#5DB56F] transition-all"
|
|
style={{ width: `${percent ?? 0}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{view.summary && (
|
|
<p className="mt-3 line-clamp-3 text-xs leading-5 text-muted-foreground">{view.summary}</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function StepList({ steps }: { steps: SessionProgressStepView[] }) {
|
|
const { locale } = useAppI18n();
|
|
|
|
return (
|
|
<section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-foreground">
|
|
{pickAppText(locale, '运行步骤', 'Run Steps')}
|
|
</h3>
|
|
<span className="text-xs text-muted-foreground">
|
|
{pickAppText(locale, `${steps.length} 步`, `${steps.length} steps`)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-0">
|
|
{steps.map((step, index) => (
|
|
<div key={step.runId} className="grid grid-cols-[24px_1fr] gap-3">
|
|
<div className="flex flex-col items-center">
|
|
<StepMarker step={step} index={index} />
|
|
{index < steps.length - 1 && <span className="mt-2 h-full min-h-8 w-px bg-[#E6E1DE]" />}
|
|
</div>
|
|
<div className="pb-5">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="line-clamp-2 text-sm font-medium text-foreground">
|
|
{index + 1}. {step.title}
|
|
</div>
|
|
<div className="mt-1 text-[11px] text-muted-foreground">
|
|
{step.actorName} · {formatShortTime(step.updatedAt, locale)}
|
|
</div>
|
|
</div>
|
|
<span className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] ${statusTone(step.status)}`}>
|
|
{appStatusLabel(step.status, locale)}
|
|
</span>
|
|
</div>
|
|
{step.description && (
|
|
<p className="mt-2 line-clamp-3 text-xs leading-5 text-muted-foreground">
|
|
{step.description}
|
|
</p>
|
|
)}
|
|
{step.status === 'running' && (
|
|
<div className="mt-2 flex items-center gap-1.5 text-[11px] text-[#2F6FCA]">
|
|
<Loader2 className="h-3 w-3 animate-spin" />
|
|
<span>{pickAppText(locale, '正在处理', 'In progress')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ArtifactRow({ artifact }: { artifact: SessionProgressArtifactView }) {
|
|
return (
|
|
<a
|
|
href={artifact.url || undefined}
|
|
target={artifact.url ? '_blank' : undefined}
|
|
rel={artifact.url ? 'noreferrer' : undefined}
|
|
className="block rounded-lg border border-[#ECE7E3] bg-[#FDFDFC] px-3 py-3 transition-colors hover:bg-[#F7F6F5]"
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#ECE8E5] text-[#5F5550]">
|
|
{artifactIcon(artifact.type)}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-medium text-foreground">{artifact.title}</div>
|
|
<div className="mt-1 text-[11px] text-muted-foreground">
|
|
{artifact.actorName} · {artifact.typeLabel}
|
|
</div>
|
|
<p className="mt-2 line-clamp-2 text-xs leading-5 text-muted-foreground">{artifact.preview}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
function ArtifactSection({ view }: { view: SessionProgressView }) {
|
|
const { locale } = useAppI18n();
|
|
|
|
return (
|
|
<section className="rounded-lg border border-[#ECE7E3] bg-white px-4 py-4">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-foreground">
|
|
{pickAppText(locale, '生成内容', 'Generated Content')}
|
|
</h3>
|
|
<span className="text-xs text-muted-foreground">
|
|
{pickAppText(locale, `${view.artifacts.length} 个`, `${view.artifacts.length} items`)}
|
|
</span>
|
|
</div>
|
|
|
|
{view.artifactTypeSummaries.length > 0 ? (
|
|
<div className="mb-3 flex flex-wrap gap-2">
|
|
{view.artifactTypeSummaries.map((item) => (
|
|
<span
|
|
key={item.type}
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-[#E6E1DE] bg-[#F7F6F5] px-2.5 py-1 text-xs text-[#4F4642]"
|
|
>
|
|
{artifactIcon(item.type)}
|
|
<span>{item.label}</span>
|
|
<span className="font-semibold">{item.count}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="mb-3 text-xs text-muted-foreground">
|
|
{pickAppText(locale, '暂时还没有生成内容。', 'No generated content yet.')}
|
|
</p>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
{view.artifacts.map((artifact) => (
|
|
<ArtifactRow key={artifact.artifactId} artifact={artifact} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function ProgressPanel({
|
|
view,
|
|
onClose,
|
|
}: {
|
|
view: SessionProgressView;
|
|
onClose?: () => void;
|
|
}) {
|
|
const { locale } = useAppI18n();
|
|
|
|
return (
|
|
<div className="flex h-full flex-col bg-[#FBFAF9]">
|
|
<div className="flex h-16 shrink-0 items-center justify-between border-b border-[#E6E1DE] px-5">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-foreground">
|
|
{pickAppText(locale, '当前会话的运行进度', 'Current Session Progress')}
|
|
</h2>
|
|
<p className="text-xs text-muted-foreground">
|
|
{pickAppText(locale, '任务列表会自动刷新', 'Task updates refresh automatically')}
|
|
</p>
|
|
</div>
|
|
{onClose && (
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded-full p-2 text-muted-foreground transition-colors hover:bg-[#ECE8E5] hover:text-foreground"
|
|
aria-label={pickAppText(locale, '关闭进度面板', 'Close progress panel')}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<ScrollArea className="min-h-0 flex-1 px-4 py-4">
|
|
<div className="space-y-4 pb-6">
|
|
<ProgressHeader view={view} />
|
|
<StepList steps={view.steps} />
|
|
<ArtifactSection view={view} />
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CurrentSessionProgressSidebar({ view }: { view: SessionProgressView }) {
|
|
const { locale } = useAppI18n();
|
|
const [mobileOpen, setMobileOpen] = React.useState(false);
|
|
|
|
return (
|
|
<>
|
|
<aside className="hidden h-full w-[380px] shrink-0 border-l border-[#E6E1DE] xl:flex">
|
|
<ProgressPanel view={view} />
|
|
</aside>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setMobileOpen(true)}
|
|
className="fixed right-3 top-24 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-[#E6E1DE] bg-white text-[#342E2B] shadow-[0_8px_22px_rgba(0,0,0,0.16)] transition-colors hover:bg-[#F7F6F5] xl:hidden"
|
|
aria-label={pickAppText(locale, '查看当前会话运行进度', 'View current session progress')}
|
|
>
|
|
<PanelRightOpen className="h-5 w-5" />
|
|
</button>
|
|
|
|
{mobileOpen && (
|
|
<div className="fixed inset-0 z-50 xl:hidden">
|
|
<button
|
|
type="button"
|
|
className="absolute inset-0 bg-black/30"
|
|
onClick={() => setMobileOpen(false)}
|
|
aria-label={pickAppText(locale, '关闭进度面板', 'Close progress panel')}
|
|
/>
|
|
<div className="absolute inset-y-0 right-0 w-[min(92vw,390px)] border-l border-[#E6E1DE] shadow-2xl">
|
|
<ProgressPanel view={view} onClose={() => setMobileOpen(false)} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|