1539 lines
56 KiB
TypeScript
1539 lines
56 KiB
TypeScript
import {
|
||
memo,
|
||
type ReactNode,
|
||
useCallback,
|
||
useEffect,
|
||
useLayoutEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from 'react';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import remarkGfm from 'remark-gfm';
|
||
import {
|
||
Bot,
|
||
BookOpen,
|
||
Check,
|
||
CheckCircle2,
|
||
ChevronDown,
|
||
CircleAlert,
|
||
Copy,
|
||
ExternalLink,
|
||
GitFork,
|
||
Globe2,
|
||
Hammer,
|
||
Layers3,
|
||
ListChecks,
|
||
LoaderCircle,
|
||
Pencil,
|
||
RotateCcw,
|
||
Search,
|
||
ShieldCheck,
|
||
Terminal,
|
||
Workflow,
|
||
Wrench,
|
||
XCircle,
|
||
} from 'lucide-react';
|
||
import { toast } from 'sonner';
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
openConversationExternalUrl,
|
||
openConversationLocalWebFile,
|
||
openableConversationLocalWebPath,
|
||
resolveConversationMarkdownWebPath,
|
||
safeConversationExternalUrl,
|
||
showConversationLinkContextMenu,
|
||
} from '@/lib/conversation-links';
|
||
import { cn } from '@/lib/utils';
|
||
import {
|
||
selectCodingConversationSnapshot,
|
||
useCodingConversationStore,
|
||
type CodingConversationStoreState,
|
||
} from '@/stores/coding-conversations';
|
||
import type {
|
||
ConversationBoundaryNode,
|
||
ConversationCompactionNode,
|
||
ConversationContentBlock,
|
||
ConversationMessageNode,
|
||
ConversationNode,
|
||
ConversationNoticeNode,
|
||
ConversationRunState,
|
||
ConversationSubagentNode,
|
||
ConversationToolNode,
|
||
KnownToolDetails,
|
||
SubagentDetailsV1,
|
||
} from '../../../shared/coding-conversation-contracts';
|
||
import { CodingAttachmentPreview } from './CodingAttachmentPreview';
|
||
|
||
const EMPTY_NODES: ConversationNode[] = [];
|
||
const IDLE_RUN: ConversationRunState = { status: 'idle' };
|
||
const INITIAL_WINDOW = 120;
|
||
const WINDOW_STEP = 100;
|
||
const LONG_OUTPUT_CHARS = 4_000;
|
||
const STREAMING_THINKING_WINDOW_CHARS = 16_000;
|
||
const PROGRESS_PREVIEW_MAX_CHARS = 360;
|
||
const PROGRESS_ROLL_CHAR_STEP = 6;
|
||
|
||
const NODE_STATUS_LABELS: Record<string, string> = {
|
||
declared: '已声明',
|
||
waiting: '等待中',
|
||
running: '执行中',
|
||
complete: '已完成',
|
||
error: '失败',
|
||
aborted: '已中止',
|
||
queued: '排队中',
|
||
skipped: '已跳过',
|
||
};
|
||
|
||
type TextualBlock = Exclude<ConversationContentBlock, { kind: 'image' }>;
|
||
type ThinkingBlock = Extract<ConversationContentBlock, { kind: 'thinking' }>;
|
||
|
||
type ProcessItem =
|
||
| { kind: 'thinking'; id: string; block: ThinkingBlock }
|
||
| { kind: 'assistant-commentary'; id: string; node: ConversationMessageNode; blocks: ConversationContentBlock[] }
|
||
| { kind: 'tool'; id: string; node: ConversationToolNode }
|
||
| { kind: 'compaction'; id: string; node: ConversationCompactionNode }
|
||
| { kind: 'retry'; id: string; node: ConversationBoundaryNode }
|
||
| { kind: 'subagent'; id: string; node: ConversationSubagentNode }
|
||
| { kind: 'notice'; id: string; node: ConversationNoticeNode };
|
||
|
||
interface TimelineTurn {
|
||
id: string;
|
||
user?: ConversationMessageNode;
|
||
process: ProcessItem[];
|
||
final?: ConversationMessageNode;
|
||
}
|
||
|
||
function statusLabel(status: string): string {
|
||
return NODE_STATUS_LABELS[status] ?? status;
|
||
}
|
||
|
||
const MarkdownText = memo(function MarkdownText({
|
||
text,
|
||
compact = false,
|
||
muted = false,
|
||
}: {
|
||
text: string;
|
||
compact?: boolean;
|
||
muted?: boolean;
|
||
}) {
|
||
const openExternal = useCallback((href: string) => {
|
||
void openConversationExternalUrl(href)
|
||
.catch(() => toast.error('链接无法打开'));
|
||
}, []);
|
||
const openLocalWebFile = useCallback((path: string) => {
|
||
void openConversationLocalWebFile(path)
|
||
.catch(() => toast.error('本地网页无法打开'));
|
||
}, []);
|
||
const showLinkContextMenu = useCallback((
|
||
request: Parameters<typeof showConversationLinkContextMenu>[0],
|
||
) => {
|
||
void showConversationLinkContextMenu(request)
|
||
.catch(() => toast.error('链接菜单无法打开'));
|
||
}, []);
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
'chat-assistant-message-markdown min-w-0 break-words',
|
||
muted ? 'text-muted-foreground' : 'text-foreground',
|
||
compact && 'text-[14px]',
|
||
)}
|
||
data-testid="assistant-markdown"
|
||
>
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
skipHtml
|
||
components={{
|
||
h1: ({ children }) => (
|
||
<h1 className={cn(
|
||
'mb-2.5 mt-6 font-semibold tracking-tight first:mt-0',
|
||
compact ? 'text-base leading-6' : 'text-xl leading-7',
|
||
)}>
|
||
{children}
|
||
</h1>
|
||
),
|
||
h2: ({ children }) => (
|
||
<h2 className={cn(
|
||
'mb-2 mt-5 font-semibold tracking-tight first:mt-0',
|
||
compact ? 'text-[15px] leading-6' : 'text-lg leading-7',
|
||
)}>
|
||
{children}
|
||
</h2>
|
||
),
|
||
h3: ({ children }) => (
|
||
<h3 className={cn(
|
||
'mb-1.5 mt-4 font-semibold first:mt-0',
|
||
compact ? 'text-sm leading-6' : 'text-base leading-6',
|
||
)}>
|
||
{children}
|
||
</h3>
|
||
),
|
||
h4: ({ children }) => (
|
||
<h4 className="mb-1.5 mt-3.5 text-[15px] font-semibold leading-6 first:mt-0">
|
||
{children}
|
||
</h4>
|
||
),
|
||
p: ({ children }) => (
|
||
<p className={cn(
|
||
'my-2 text-pretty first:mt-0 last:mb-0',
|
||
compact ? 'leading-[1.65]' : 'leading-7',
|
||
)}>
|
||
{children}
|
||
</p>
|
||
),
|
||
a: ({ href, children }) => {
|
||
const safeHref = safeConversationExternalUrl(href);
|
||
if (!safeHref) return <span>{children}</span>;
|
||
return (
|
||
<a
|
||
href={safeHref}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
title="左键用默认浏览器打开；右键查看更多操作"
|
||
className="inline-flex max-w-full items-baseline gap-0.5 break-all font-medium text-brand underline decoration-brand/35 underline-offset-[3px] hover:decoration-brand focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
openExternal(safeHref);
|
||
}}
|
||
onContextMenu={(event) => {
|
||
event.preventDefault();
|
||
showLinkContextMenu({ kind: 'external', target: safeHref });
|
||
}}
|
||
>
|
||
<span>{children}</span>
|
||
<ExternalLink className="inline h-3 w-3 shrink-0 self-center" aria-hidden="true" />
|
||
</a>
|
||
);
|
||
},
|
||
strong: ({ children }) => (
|
||
<strong className={cn(
|
||
'font-semibold',
|
||
muted ? 'text-muted-foreground' : 'text-foreground',
|
||
)}>
|
||
{children}
|
||
</strong>
|
||
),
|
||
ul: ({ children }) => (
|
||
<ul className="my-2.5 list-disc space-y-1 pl-5 marker:text-muted-foreground">
|
||
{children}
|
||
</ul>
|
||
),
|
||
ol: ({ children }) => (
|
||
<ol className="my-2.5 list-decimal space-y-1 pl-5 marker:font-medium marker:text-muted-foreground">
|
||
{children}
|
||
</ol>
|
||
),
|
||
li: ({ children }) => <li className="pl-1 leading-6">{children}</li>,
|
||
blockquote: ({ children }) => (
|
||
<blockquote className={cn(
|
||
'my-3 rounded-r-lg border-l-2 border-brand/45 bg-brand-soft/35 py-2 pl-3.5 pr-3',
|
||
muted ? 'text-muted-foreground' : 'text-foreground/80',
|
||
)}>
|
||
{children}
|
||
</blockquote>
|
||
),
|
||
hr: () => <hr className="my-5 border-border/80" />,
|
||
code: ({ children, className }) => {
|
||
const rawCode = String(children);
|
||
const codeText = rawCode.replace(/\n$/, '');
|
||
const blockCode = rawCode.endsWith('\n') || Boolean(className?.startsWith('language-'));
|
||
const inlineUrl = blockCode ? null : safeConversationExternalUrl(codeText);
|
||
const localWebPath = blockCode ? null : openableConversationLocalWebPath(codeText);
|
||
const resolvedWebPath = blockCode || localWebPath
|
||
? null
|
||
: resolveConversationMarkdownWebPath(codeText, text);
|
||
if (inlineUrl) {
|
||
return (
|
||
<a
|
||
href={inlineUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
title="左键用默认浏览器打开；右键查看更多操作"
|
||
className="inline-flex max-w-full items-center gap-1 align-baseline font-mono text-[0.92em] text-brand underline decoration-brand/35 underline-offset-2 hover:decoration-brand focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
|
||
onClick={(event) => {
|
||
event.preventDefault();
|
||
openExternal(inlineUrl);
|
||
}}
|
||
onContextMenu={(event) => {
|
||
event.preventDefault();
|
||
showLinkContextMenu({ kind: 'external', target: inlineUrl });
|
||
}}
|
||
>
|
||
<code className="min-w-0 break-all">{codeText}</code>
|
||
<ExternalLink className="h-3 w-3 shrink-0" aria-hidden="true" />
|
||
</a>
|
||
);
|
||
}
|
||
if (resolvedWebPath) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
className="group/path inline-flex max-w-full items-center gap-1 align-baseline font-mono text-[0.92em] text-brand underline decoration-brand/35 underline-offset-2 hover:decoration-brand focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
|
||
aria-label={`用默认浏览器打开 ${codeText}`}
|
||
title="左键用默认浏览器打开；右键查看更多操作"
|
||
onClick={() => openLocalWebFile(resolvedWebPath)}
|
||
onContextMenu={(event) => {
|
||
event.preventDefault();
|
||
showLinkContextMenu({ kind: 'local-web', target: resolvedWebPath });
|
||
}}
|
||
>
|
||
<code className="min-w-0 break-all">{codeText}</code>
|
||
<ExternalLink className="h-3 w-3 shrink-0 opacity-60 group-hover/path:opacity-100" aria-hidden="true" />
|
||
</button>
|
||
);
|
||
}
|
||
if (localWebPath) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
className="group/path inline-flex max-w-full items-center gap-1 align-baseline font-mono text-[0.92em] text-brand underline decoration-brand/35 underline-offset-2 hover:decoration-brand focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
|
||
aria-label={`用默认浏览器打开 ${localWebPath}`}
|
||
title="左键用默认浏览器打开；右键查看更多操作"
|
||
onClick={() => openLocalWebFile(localWebPath)}
|
||
onContextMenu={(event) => {
|
||
event.preventDefault();
|
||
showLinkContextMenu({ kind: 'local-web', target: localWebPath });
|
||
}}
|
||
>
|
||
<code className="min-w-0 break-all">{codeText}</code>
|
||
<ExternalLink className="h-3 w-3 shrink-0 opacity-60 group-hover/path:opacity-100" aria-hidden="true" />
|
||
</button>
|
||
);
|
||
}
|
||
return (
|
||
<code
|
||
className={cn(
|
||
blockCode
|
||
? 'font-mono text-[0.92em]'
|
||
: 'rounded bg-foreground/[0.055] px-1 py-0.5 font-mono text-[0.92em]',
|
||
className,
|
||
)}
|
||
>
|
||
{children}
|
||
</code>
|
||
);
|
||
},
|
||
pre: ({ children }) => (
|
||
<pre className="my-3 max-w-full overflow-x-auto rounded-xl border border-border/70 bg-surface-subtle p-3.5 font-mono text-xs leading-5">
|
||
{children}
|
||
</pre>
|
||
),
|
||
table: ({ children }) => (
|
||
<div className="my-4 max-w-full overflow-x-auto rounded-xl border border-border/80">
|
||
<table className="w-full min-w-[32rem] border-collapse text-left text-[13px] leading-5">
|
||
{children}
|
||
</table>
|
||
</div>
|
||
),
|
||
thead: ({ children }) => <thead className="bg-surface-subtle">{children}</thead>,
|
||
tbody: ({ children }) => <tbody className="divide-y divide-border/70">{children}</tbody>,
|
||
th: ({ children }) => (
|
||
<th className={cn(
|
||
'px-3 py-2.5 align-top font-semibold',
|
||
muted ? 'text-muted-foreground' : 'text-foreground',
|
||
)}>
|
||
{children}
|
||
</th>
|
||
),
|
||
td: ({ children }) => (
|
||
<td className={cn(
|
||
'px-3 py-2.5 align-top',
|
||
muted ? 'text-muted-foreground' : 'text-foreground/85',
|
||
)}>
|
||
{children}
|
||
</td>
|
||
),
|
||
img: ({ src, alt }) => typeof src === 'string' ? (
|
||
<img
|
||
src={src}
|
||
alt={alt || '回复中的图片'}
|
||
loading="lazy"
|
||
className="my-4 max-h-[32rem] max-w-full rounded-xl border border-border/70 object-contain"
|
||
/>
|
||
) : null,
|
||
}}
|
||
>
|
||
{text}
|
||
</ReactMarkdown>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const ContentBlock = memo(function ContentBlock({
|
||
block,
|
||
markdown,
|
||
compactMarkdown = false,
|
||
muted = false,
|
||
}: {
|
||
block: ConversationContentBlock;
|
||
markdown: boolean;
|
||
compactMarkdown?: boolean;
|
||
muted?: boolean;
|
||
}) {
|
||
if (block.kind === 'image') {
|
||
return <CodingAttachmentPreview attachmentId={block.attachmentId} mime={block.mime} />;
|
||
}
|
||
if (!markdown) {
|
||
return (
|
||
<p className={cn(
|
||
'whitespace-pre-wrap break-words text-pretty leading-6',
|
||
muted && 'text-muted-foreground',
|
||
)}>
|
||
{block.text}
|
||
{block.status === 'streaming' && (
|
||
<span
|
||
className={cn(
|
||
'ml-0.5 inline-block h-3.5 w-1 animate-pulse align-middle',
|
||
muted ? 'bg-muted-foreground/35' : 'bg-foreground/35',
|
||
)}
|
||
aria-label="正在生成回答"
|
||
/>
|
||
)}
|
||
</p>
|
||
);
|
||
}
|
||
return (
|
||
<div className="min-w-0">
|
||
<MarkdownText text={block.text} compact={compactMarkdown} muted={muted} />
|
||
{block.status === 'streaming' && (
|
||
<span
|
||
className={cn(
|
||
'mt-1 inline-block h-4 w-1 animate-pulse align-middle',
|
||
muted ? 'bg-muted-foreground/35' : 'bg-foreground/35',
|
||
)}
|
||
aria-label="正在生成回答"
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
});
|
||
|
||
function answerBlocks(node: ConversationMessageNode): ConversationContentBlock[] {
|
||
return node.blocks.filter((block) => block.kind !== 'thinking');
|
||
}
|
||
|
||
function hasVisibleAnswer(node: ConversationMessageNode): boolean {
|
||
return answerBlocks(node).some((block) => (
|
||
block.kind === 'image' || block.text.trim().length > 0 || block.status === 'streaming'
|
||
));
|
||
}
|
||
|
||
const MessageNode = memo(function MessageNode({
|
||
node,
|
||
onFork,
|
||
assistantName,
|
||
}: {
|
||
node: ConversationMessageNode;
|
||
onFork?(sourceEntryId: string): void;
|
||
assistantName?: string;
|
||
}) {
|
||
const user = node.role === 'user';
|
||
const blocks = user ? node.blocks : answerBlocks(node);
|
||
const answerText = blocks
|
||
.filter((block): block is TextualBlock => block.kind === 'text')
|
||
.map((block) => block.text)
|
||
.join('\n\n')
|
||
.trim();
|
||
const [copied, setCopied] = useState(false);
|
||
const copyAnswer = useCallback(() => {
|
||
if (!answerText || !navigator.clipboard) return;
|
||
void navigator.clipboard.writeText(answerText).then(() => {
|
||
setCopied(true);
|
||
window.setTimeout(() => setCopied(false), 1_600);
|
||
}).catch(() => undefined);
|
||
}, [answerText]);
|
||
|
||
return (
|
||
<article
|
||
data-node-id={node.id}
|
||
data-node-kind="message"
|
||
aria-label={user ? '你的消息' : assistantName ? `${assistantName} 的回复` : '助手回复'}
|
||
className={cn('group/message flex items-start', user && 'justify-end')}
|
||
>
|
||
<div
|
||
className={cn(
|
||
'min-w-0 text-[15px] text-foreground',
|
||
user ? 'max-w-[82%]' : 'flex-1',
|
||
)}
|
||
>
|
||
<div
|
||
className={cn(
|
||
'space-y-2.5',
|
||
user
|
||
? 'chat-user-message-surface rounded-[18px] rounded-tr-md px-3.5 py-2.5'
|
||
: 'chat-assistant-message-surface w-full py-0.5',
|
||
node.status === 'error' && user && 'bg-destructive/[0.07]',
|
||
)}
|
||
>
|
||
{blocks.map((block) => (
|
||
<ContentBlock key={block.id} block={block} markdown={!user} />
|
||
))}
|
||
{node.status === 'optimistic' && <p className="text-xs text-muted-foreground">正在提交…</p>}
|
||
{node.status === 'error' && (
|
||
<p className="text-xs font-medium text-destructive">
|
||
{user ? '本次提交未被接受，内容已保留在输入框。' : '本次回复失败。'}
|
||
</p>
|
||
)}
|
||
{node.status === 'aborted' && <p className="text-xs text-muted-foreground">本次处理已中止。</p>}
|
||
{user && node.sourceEntryId && onFork && node.status !== 'optimistic' && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
className="h-auto min-h-0 rounded-md px-1.5 py-1 text-[11px] text-muted-foreground"
|
||
onClick={() => onFork(node.sourceEntryId!)}
|
||
>
|
||
<GitFork className="mr-1 h-3 w-3" aria-hidden="true" />
|
||
从这里创建新对话分支
|
||
</Button>
|
||
)}
|
||
</div>
|
||
{!user && answerText && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="mt-1 h-7 w-7 rounded-md text-muted-foreground opacity-0 transition-opacity group-hover/message:opacity-100 focus-visible:opacity-100"
|
||
aria-label={copied ? '已复制回复' : '复制回复'}
|
||
onClick={copyAnswer}
|
||
>
|
||
{copied
|
||
? <Check className="h-3.5 w-3.5 text-emerald-600" aria-hidden="true" />
|
||
: <Copy className="h-3.5 w-3.5" aria-hidden="true" />}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</article>
|
||
);
|
||
});
|
||
|
||
function subagentModeLabel(mode: SubagentDetailsV1['mode']): string {
|
||
if (mode === 'parallel') return '并行子任务';
|
||
if (mode === 'chain') return '串行子任务';
|
||
return '单个子任务';
|
||
}
|
||
|
||
function subagentStatus(details: SubagentDetailsV1): 'running' | 'error' | 'complete' {
|
||
if (details.tasks.some((task) => task.status === 'queued' || task.status === 'running')) return 'running';
|
||
if (details.tasks.some((task) => task.status === 'error')) return 'error';
|
||
return 'complete';
|
||
}
|
||
|
||
const SubagentGraph = memo(function SubagentGraph({ details }: { details: SubagentDetailsV1 }) {
|
||
return (
|
||
<div className="space-y-2.5 text-xs" data-subagent-mode={details.mode}>
|
||
<div className="flex items-center gap-2 text-muted-foreground">
|
||
<span>{subagentModeLabel(details.mode)}</span>
|
||
<span className="ml-auto truncate font-mono text-[10px]">{details.dispatchId}</span>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
{details.tasks.map((task) => (
|
||
<div key={task.taskId} className="flex items-start gap-2 py-0.5">
|
||
<span className={cn(
|
||
'mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full',
|
||
task.status === 'error'
|
||
? 'bg-destructive'
|
||
: task.status === 'complete'
|
||
? 'bg-emerald-500'
|
||
: 'bg-brand',
|
||
)} />
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<p className="min-w-0 flex-1 truncate font-medium text-foreground">{task.agentId}</p>
|
||
<span className="shrink-0 text-muted-foreground">{statusLabel(task.status)}</span>
|
||
</div>
|
||
<p className="mt-0.5 text-muted-foreground">{task.toolProfile === 'coding' ? '可写代码' : '只读'}</p>
|
||
{task.summary && <p className="mt-1 text-pretty leading-5 text-foreground/80">{task.summary}</p>}
|
||
{task.errorCode && <p className="mt-1 font-mono text-destructive">{task.errorCode}</p>}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const ToolDetails = memo(function ToolDetails({ details }: { details: KnownToolDetails }) {
|
||
if (details.schema === 'changed-file.v1') {
|
||
return (
|
||
<div className="text-xs">
|
||
<p className="font-medium text-foreground">本轮变更文件</p>
|
||
{details.paths.map((path) => <p key={path} className="mt-1 truncate font-mono text-muted-foreground">{path}</p>)}
|
||
</div>
|
||
);
|
||
}
|
||
if (details.schema === 'task-state.v1') {
|
||
return (
|
||
<div className="text-xs">
|
||
<p className="flex items-center gap-2 font-medium text-foreground"><ListChecks className="h-3.5 w-3.5" aria-hidden="true" />任务状态</p>
|
||
{details.tasks.map((task) => (
|
||
<p key={task.id} className="mt-1.5 flex gap-2"><span className="min-w-0 flex-1 truncate">{task.title}</span><span className="text-muted-foreground">{statusLabel(task.status)}</span></p>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
if (details.schema === 'write-lease.v1') {
|
||
return <p className="flex items-center gap-2 text-xs"><ShieldCheck className="h-3.5 w-3.5" aria-hidden="true" />写入权限：{statusLabel(details.status)}</p>;
|
||
}
|
||
if (details.schema === 'agent-browser.v1') {
|
||
return (
|
||
<div className="space-y-2 text-xs">
|
||
<p className="flex items-center gap-2 font-medium"><Globe2 className="h-3.5 w-3.5" aria-hidden="true" />浏览器操作 · {details.action}</p>
|
||
{details.attachmentId && details.mime && (
|
||
<CodingAttachmentPreview attachmentId={details.attachmentId} mime={details.mime} caption="浏览器附件" />
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
if (details.schema === 'game-assets.v1') {
|
||
return (
|
||
<div className="text-xs">
|
||
<p className="font-medium">素材确认 · {details.status === 'pending' ? '等待处理' : '已完成'}</p>
|
||
<p className="mt-1 text-muted-foreground">待确认 {details.pendingAssetIds.length} · 已采用 {details.approvedAssetIds.length} · 已丢弃 {details.discardedAssetIds.length}</p>
|
||
</div>
|
||
);
|
||
}
|
||
if (details.schema === 'runtime-context.v1') {
|
||
return (
|
||
<div className="grid gap-3 text-xs sm:grid-cols-2">
|
||
<div><p className="font-medium">技能</p>{details.skills.map((skill) => <p key={skill.id} className="mt-1 truncate text-muted-foreground">{skill.selected ? '已启用 · ' : ''}{skill.name}</p>)}</div>
|
||
<div><p className="font-medium">命令</p>{details.commands.map((command) => <p key={`${command.source}:${command.name}`} className="mt-1 truncate font-mono text-muted-foreground">/{command.name}</p>)}</div>
|
||
</div>
|
||
);
|
||
}
|
||
return <SubagentGraph details={details} />;
|
||
});
|
||
|
||
function toolStatusIsActive(status: ConversationToolNode['status']): boolean {
|
||
return status === 'declared' || status === 'waiting' || status === 'running';
|
||
}
|
||
|
||
function toolStatusIcon(node: ConversationToolNode, active: boolean) {
|
||
if (active) {
|
||
return <LoaderCircle className="h-3.5 w-3.5 shrink-0 animate-spin text-brand" aria-hidden="true" />;
|
||
}
|
||
if (node.status === 'error') {
|
||
return <XCircle className="h-3.5 w-3.5 shrink-0 text-destructive" aria-hidden="true" />;
|
||
}
|
||
return toolActivityIcon(node);
|
||
}
|
||
|
||
function toolActivityIcon(node: ConversationToolNode) {
|
||
const name = node.toolName.toLowerCase();
|
||
const title = node.title.toLowerCase();
|
||
const className = cn(
|
||
'h-3.5 w-3.5 shrink-0',
|
||
node.status === 'error'
|
||
? 'text-destructive'
|
||
: 'text-muted-foreground',
|
||
);
|
||
if (title.includes('加载')) return <Wrench className={className} aria-hidden="true" />;
|
||
if (name.includes('read')) return <BookOpen className={className} aria-hidden="true" />;
|
||
if (name.includes('search') || name.includes('grep') || name.includes('find')) {
|
||
return <Search className={className} aria-hidden="true" />;
|
||
}
|
||
if (name.includes('edit') || name.includes('write') || name.includes('patch') || name.includes('change')) {
|
||
return <Pencil className={className} aria-hidden="true" />;
|
||
}
|
||
if (name.includes('bash') || name.includes('exec') || name.includes('command') || name.includes('terminal')) {
|
||
return <Terminal className={className} aria-hidden="true" />;
|
||
}
|
||
if (name.includes('browser')) return <Globe2 className={className} aria-hidden="true" />;
|
||
return <Hammer className={className} aria-hidden="true" />;
|
||
}
|
||
|
||
function latestProgressLine(value: string): string | null {
|
||
const lines = value
|
||
.split(/\r?\n/)
|
||
.map((line) => line.trim())
|
||
.filter(Boolean);
|
||
const line = lines
|
||
.at(-1)
|
||
?.replace(/\s+/g, ' ')
|
||
.replace(/^#{1,6}\s+/, '')
|
||
.replace(/^(?:[-*+]|\d+[.)])\s+/, '');
|
||
if (!line) return null;
|
||
return line.length > PROGRESS_PREVIEW_MAX_CHARS
|
||
? `…${line.slice(-(PROGRESS_PREVIEW_MAX_CHARS - 1))}`
|
||
: line;
|
||
}
|
||
|
||
function progressInlineParts(text: string): Array<{ code: boolean; text: string }> {
|
||
return text
|
||
.split(/(`[^`\n]+`)/g)
|
||
.filter(Boolean)
|
||
.map((part) => (
|
||
part.startsWith('`') && part.endsWith('`')
|
||
? { code: true, text: part.slice(1, -1) }
|
||
: { code: false, text: part }
|
||
));
|
||
}
|
||
|
||
const RollingProgressPreview = memo(function RollingProgressPreview({
|
||
text,
|
||
active,
|
||
shimmer = true,
|
||
rollUpdates = true,
|
||
contentVersion,
|
||
testId,
|
||
className,
|
||
codeClassName = 'text-muted-foreground',
|
||
}: {
|
||
text: string;
|
||
active: boolean;
|
||
shimmer?: boolean;
|
||
rollUpdates?: boolean;
|
||
contentVersion: number;
|
||
testId?: string;
|
||
className?: string;
|
||
codeClassName?: string;
|
||
}) {
|
||
const viewportRef = useRef<HTMLSpanElement | null>(null);
|
||
const revision = `${active ? 'active' : 'settled'}:${Math.floor(
|
||
contentVersion / PROGRESS_ROLL_CHAR_STEP,
|
||
)}`;
|
||
const parts = progressInlineParts(text);
|
||
|
||
useLayoutEffect(() => {
|
||
const viewport = viewportRef.current;
|
||
if (!viewport) return;
|
||
viewport.scrollLeft = viewport.scrollWidth;
|
||
}, [contentVersion, text]);
|
||
|
||
useEffect(() => {
|
||
const viewport = viewportRef.current;
|
||
if (!viewport || typeof ResizeObserver === 'undefined') return;
|
||
const observer = new ResizeObserver(() => {
|
||
viewport.scrollLeft = viewport.scrollWidth;
|
||
});
|
||
observer.observe(viewport);
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
return (
|
||
<span
|
||
ref={viewportRef}
|
||
aria-label={text}
|
||
className={cn(
|
||
'block h-[1.65em] min-w-0 overflow-hidden whitespace-nowrap text-left',
|
||
className,
|
||
)}
|
||
data-progress-alignment="left"
|
||
data-progress-update-motion={rollUpdates ? 'roll' : 'none'}
|
||
data-progress-shimmer={active && shimmer ? 'true' : 'false'}
|
||
data-progress-tail="true"
|
||
data-roll-revision={rollUpdates ? revision : undefined}
|
||
data-testid={testId}
|
||
title={text}
|
||
>
|
||
<span className="inline-flex min-w-max items-center">
|
||
<span
|
||
key={rollUpdates ? revision : 'steady'}
|
||
aria-hidden="true"
|
||
className={cn(
|
||
'block whitespace-nowrap',
|
||
active && rollUpdates && 'streaming-progress-roll',
|
||
)}
|
||
>
|
||
<span className={cn(active && shimmer && 'streaming-progress-shimmer')}>
|
||
{parts.map((part, index) => (
|
||
part.code
|
||
? (
|
||
<code
|
||
key={`${part.text}:${index}`}
|
||
className={cn(
|
||
'rounded bg-foreground/[0.045] px-1 py-0.5 font-mono text-[0.92em]',
|
||
codeClassName,
|
||
)}
|
||
>
|
||
{part.text}
|
||
</code>
|
||
)
|
||
: <span key={`${part.text}:${index}`}>{part.text}</span>
|
||
))}
|
||
</span>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
);
|
||
});
|
||
|
||
function contentBlocksProgressPreview(
|
||
blocks: ConversationContentBlock[],
|
||
fallback: string,
|
||
): string {
|
||
for (let index = blocks.length - 1; index >= 0; index -= 1) {
|
||
const block = blocks[index];
|
||
if (!block) continue;
|
||
if (block.kind === 'image') return '图片附件';
|
||
const preview = latestProgressLine(block.text);
|
||
if (preview) return preview;
|
||
}
|
||
return fallback;
|
||
}
|
||
|
||
function toolDetailsProgress(details: KnownToolDetails | undefined): string | null {
|
||
if (!details) return null;
|
||
if (details.schema === 'changed-file.v1') {
|
||
const latestPath = details.paths.at(-1);
|
||
return latestPath ? `${details.paths.length} 个文件 · ${latestPath}` : '尚未记录文件';
|
||
}
|
||
if (details.schema === 'task-state.v1') {
|
||
const task = details.tasks.find((candidate) => (
|
||
candidate.status === 'running' || candidate.status === 'pending'
|
||
)) ?? details.tasks.at(-1);
|
||
return task ? `${task.title} · ${statusLabel(task.status)}` : '等待任务状态';
|
||
}
|
||
if (details.schema === 'write-lease.v1') {
|
||
return `写入权限 · ${statusLabel(details.status)}`;
|
||
}
|
||
if (details.schema === 'agent-browser.v1') {
|
||
return `浏览器操作 · ${details.action}`;
|
||
}
|
||
if (details.schema === 'game-assets.v1') {
|
||
return details.status === 'pending'
|
||
? `等待确认 ${details.pendingAssetIds.length} 个素材`
|
||
: `已采用 ${details.approvedAssetIds.length} · 已丢弃 ${details.discardedAssetIds.length}`;
|
||
}
|
||
if (details.schema === 'runtime-context.v1') {
|
||
const selectedSkills = details.skills.filter((skill) => skill.selected);
|
||
return `已启用 ${selectedSkills.length} 项技能 · ${details.commands.length} 条命令`;
|
||
}
|
||
const task = details.tasks.find((candidate) => (
|
||
candidate.status === 'running' || candidate.status === 'queued'
|
||
)) ?? details.tasks.at(-1);
|
||
return task
|
||
? `${task.agentId} · ${task.summary || statusLabel(task.status)}`
|
||
: `${subagentModeLabel(details.mode)} · 等待任务`;
|
||
}
|
||
|
||
function toolProgressPreview(node: ConversationToolNode): string {
|
||
for (let index = node.output.length - 1; index >= 0; index -= 1) {
|
||
const block = node.output[index];
|
||
if (!block) continue;
|
||
if (block.kind === 'image') return '已生成图片附件';
|
||
const outputPreview = latestProgressLine(block.text);
|
||
if (outputPreview) return outputPreview;
|
||
}
|
||
return latestProgressLine(node.inputText)
|
||
?? toolDetailsProgress(node.details)
|
||
?? statusLabel(node.status);
|
||
}
|
||
|
||
const ToolNode = memo(function ToolNode({
|
||
node,
|
||
processActive,
|
||
}: {
|
||
node: ConversationToolNode;
|
||
processActive: boolean;
|
||
}) {
|
||
const outputChars = node.output.reduce((total, block) => (
|
||
total + (block.kind === 'image' ? 0 : block.text.length)
|
||
), 0);
|
||
const progressContentVersion = node.inputText.length + outputChars + node.output.length;
|
||
const [expanded, setExpanded] = useState(false);
|
||
const title = node.title || node.toolName;
|
||
const progress = toolProgressPreview(node);
|
||
const showProgress = progress.trim() !== title.trim();
|
||
const active = processActive && toolStatusIsActive(node.status);
|
||
const prominentStatus = active || node.status === 'error' || node.status === 'aborted';
|
||
|
||
return (
|
||
<details
|
||
data-node-id={node.id}
|
||
data-node-kind="tool"
|
||
className="group/tool text-[13px]"
|
||
open={expanded}
|
||
onToggle={(event) => setExpanded(event.currentTarget.open)}
|
||
>
|
||
<summary
|
||
data-collapsed-lines="1"
|
||
className="flex h-8 cursor-pointer list-none items-center gap-2 overflow-hidden rounded-md px-1.5 text-muted-foreground hover:bg-foreground/[0.035] hover:text-foreground"
|
||
>
|
||
{toolStatusIcon(node, active)}
|
||
<span className={cn(
|
||
'min-w-0 truncate text-muted-foreground',
|
||
showProgress ? 'max-w-[42%] shrink-0' : 'flex-1',
|
||
)}>
|
||
{title}
|
||
</span>
|
||
{showProgress && (
|
||
<>
|
||
<span className="shrink-0 text-foreground/25" aria-hidden="true">·</span>
|
||
<RollingProgressPreview
|
||
text={progress}
|
||
active={active}
|
||
contentVersion={progressContentVersion}
|
||
testId="tool-progress-preview"
|
||
className="flex-1 text-muted-foreground/75"
|
||
/>
|
||
</>
|
||
)}
|
||
<span className={cn(
|
||
prominentStatus ? 'shrink-0 text-[11px]' : 'sr-only',
|
||
active && 'text-brand',
|
||
(node.status === 'error' || node.status === 'aborted') && 'text-destructive',
|
||
)}>
|
||
{statusLabel(node.status)}
|
||
</span>
|
||
<ChevronDown className="h-3.5 w-3.5 shrink-0 opacity-50 transition-[opacity,transform] duration-150 group-hover/tool:opacity-100 group-focus-within/tool:opacity-100 group-open/tool:rotate-180 group-open/tool:opacity-100" aria-hidden="true" />
|
||
</summary>
|
||
<div
|
||
data-testid="tool-details"
|
||
className="ml-3.5 space-y-2.5 border-l border-foreground/10 py-2 pl-4 text-muted-foreground"
|
||
>
|
||
<p className="text-[11px]">当前状态：{statusLabel(node.status)}</p>
|
||
{node.details && <ToolDetails details={node.details} />}
|
||
{node.inputText && (
|
||
<pre className="max-h-44 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-5">
|
||
{node.inputText}
|
||
</pre>
|
||
)}
|
||
{node.output.length > 0 && (
|
||
<div className="max-h-64 space-y-2 overflow-auto text-[11px] leading-5">
|
||
{node.output.map((block) => (
|
||
<ContentBlock key={block.id} block={block} markdown={false} muted />
|
||
))}
|
||
</div>
|
||
)}
|
||
{outputChars > LONG_OUTPUT_CHARS && (
|
||
<p className="text-[11px]">长输出已收纳，不会形成独立消息。</p>
|
||
)}
|
||
{!node.details && !node.inputText && node.output.length === 0 && (
|
||
<p className="text-[11px]">
|
||
{active ? '正在等待工具返回详细进度…' : '该工具没有返回额外详情。'}
|
||
</p>
|
||
)}
|
||
</div>
|
||
</details>
|
||
);
|
||
});
|
||
|
||
const CompactionNode = memo(function CompactionNodeView({
|
||
node,
|
||
processActive,
|
||
}: {
|
||
node: ConversationCompactionNode;
|
||
processActive: boolean;
|
||
}) {
|
||
const [expanded, setExpanded] = useState(false);
|
||
const hasDetails = Boolean(node.summary) || node.status === 'error';
|
||
const running = processActive && node.status === 'running';
|
||
return (
|
||
<details
|
||
data-node-id={node.id}
|
||
data-node-kind="compaction"
|
||
className="group/compaction text-xs"
|
||
open={expanded}
|
||
onToggle={(event) => setExpanded(event.currentTarget.open)}
|
||
>
|
||
<summary className="flex min-h-8 cursor-pointer list-none items-center gap-2 rounded-md px-1.5 text-muted-foreground hover:bg-foreground/[0.035] hover:text-foreground">
|
||
{running
|
||
? <LoaderCircle className="h-3.5 w-3.5 animate-spin text-brand" aria-hidden="true" />
|
||
: <Layers3 className={cn('h-3.5 w-3.5', node.status === 'error' && 'text-destructive')} aria-hidden="true" />}
|
||
<span className="min-w-0 flex-1 text-muted-foreground">整理上下文</span>
|
||
<span className={cn(running && 'text-brand', node.status === 'error' && 'text-destructive')}>{statusLabel(node.status)}</span>
|
||
{hasDetails && <ChevronDown className="h-3.5 w-3.5 transition-transform duration-150 group-open/compaction:rotate-180" aria-hidden="true" />}
|
||
</summary>
|
||
{hasDetails && (
|
||
<div className="ml-3.5 border-l border-foreground/10 py-1.5 pl-4 leading-5 text-muted-foreground">
|
||
{node.summary && <p className="text-pretty">{node.summary}</p>}
|
||
{node.status === 'error' && (
|
||
<p className="mt-1">{node.willRetry ? '系统会自动重试。' : '本次整理已结束，不会自动重试。'}</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</details>
|
||
);
|
||
});
|
||
|
||
const RetryNode = memo(function RetryNodeView({ node }: { node: ConversationBoundaryNode }) {
|
||
return (
|
||
<div data-node-id={node.id} data-node-kind="boundary" className="flex min-h-8 items-center gap-2 px-1.5 text-xs text-muted-foreground">
|
||
<RotateCcw className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
|
||
<span>
|
||
正在重试{node.attempt ? ` · 第 ${node.attempt} 次` : ''}{node.delayMs ? ` · ${Math.ceil(node.delayMs / 1_000)} 秒后` : ''}
|
||
</span>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const NoticeNode = memo(function NoticeNodeView({ node }: { node: ConversationNoticeNode }) {
|
||
return (
|
||
<div
|
||
data-node-id={node.id}
|
||
data-node-kind="notice"
|
||
className={cn(
|
||
'flex min-h-8 items-start gap-2 px-1.5 py-1.5 text-xs text-muted-foreground',
|
||
node.level === 'error' && 'text-destructive',
|
||
)}
|
||
>
|
||
<CircleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />
|
||
<p className="text-pretty leading-5">{node.message}</p>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const SubagentNode = memo(function SubagentNodeView({
|
||
node,
|
||
processActive,
|
||
}: {
|
||
node: ConversationSubagentNode;
|
||
processActive: boolean;
|
||
}) {
|
||
const [expanded, setExpanded] = useState(false);
|
||
const status = subagentStatus(node.details);
|
||
const running = processActive && status === 'running';
|
||
return (
|
||
<details
|
||
data-node-id={node.id}
|
||
data-node-kind="subagent"
|
||
className="group/subagent text-xs"
|
||
open={expanded}
|
||
onToggle={(event) => setExpanded(event.currentTarget.open)}
|
||
>
|
||
<summary className="flex min-h-8 cursor-pointer list-none items-center gap-2 rounded-md px-1.5 text-muted-foreground hover:bg-foreground/[0.035] hover:text-foreground">
|
||
{running
|
||
? <LoaderCircle className="h-3.5 w-3.5 animate-spin text-brand" aria-hidden="true" />
|
||
: <Workflow className={cn('h-3.5 w-3.5', status === 'error' && 'text-destructive')} aria-hidden="true" />}
|
||
<span className="min-w-0 flex-1 truncate text-muted-foreground">{subagentModeLabel(node.details.mode)}</span>
|
||
<span>{node.details.tasks.length} 个任务</span>
|
||
<span className={cn(running && 'text-brand', status === 'error' && 'text-destructive')}>{statusLabel(status)}</span>
|
||
<ChevronDown className="h-3.5 w-3.5 transition-transform duration-150 group-open/subagent:rotate-180" aria-hidden="true" />
|
||
</summary>
|
||
<div className="ml-3.5 border-l border-foreground/10 py-2 pl-4">
|
||
<SubagentGraph details={node.details} />
|
||
</div>
|
||
</details>
|
||
);
|
||
});
|
||
|
||
const CompactProcessText = memo(function CompactProcessText({
|
||
label,
|
||
expandLabel,
|
||
collapseLabel,
|
||
streaming,
|
||
shimmer = true,
|
||
rollUpdates = true,
|
||
previewClassName = 'text-muted-foreground/75',
|
||
previewCodeClassName = 'text-muted-foreground',
|
||
contentVersion,
|
||
preview,
|
||
children,
|
||
}: {
|
||
label: string;
|
||
expandLabel: string;
|
||
collapseLabel: string;
|
||
streaming: boolean;
|
||
shimmer?: boolean;
|
||
rollUpdates?: boolean;
|
||
previewClassName?: string;
|
||
previewCodeClassName?: string;
|
||
contentVersion: number;
|
||
preview: string;
|
||
children: ReactNode;
|
||
}) {
|
||
const [expanded, setExpanded] = useState(false);
|
||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||
|
||
useLayoutEffect(() => {
|
||
const element = scrollRef.current;
|
||
if (!element) return;
|
||
if (expanded && streaming) {
|
||
element.scrollTop = element.scrollHeight;
|
||
return;
|
||
}
|
||
if (!expanded) element.scrollTop = 0;
|
||
}, [contentVersion, expanded, streaming]);
|
||
|
||
return (
|
||
<div className="group/process-text relative min-w-0">
|
||
<div
|
||
ref={scrollRef}
|
||
aria-label={label}
|
||
data-collapsed-lines="1"
|
||
data-expanded={expanded ? 'true' : 'false'}
|
||
data-streaming={streaming ? 'true' : 'false'}
|
||
className={cn(
|
||
'min-w-0 pr-10 transition-[max-height] duration-150 ease-out',
|
||
expanded
|
||
? 'max-h-60 overflow-y-auto'
|
||
: 'max-h-[1.65em] overflow-hidden',
|
||
)}
|
||
>
|
||
{expanded
|
||
? children
|
||
: (
|
||
<RollingProgressPreview
|
||
text={preview}
|
||
active={streaming}
|
||
shimmer={shimmer}
|
||
rollUpdates={rollUpdates}
|
||
contentVersion={contentVersion}
|
||
testId="process-progress-preview"
|
||
className={previewClassName}
|
||
codeClassName={previewCodeClassName}
|
||
/>
|
||
)}
|
||
</div>
|
||
<div className="absolute right-0 top-0 flex h-6 items-center gap-0.5 bg-background/90 pl-1">
|
||
{streaming && (
|
||
<span
|
||
className="h-1.5 w-1.5 animate-pulse rounded-full bg-brand"
|
||
title="正在更新"
|
||
aria-hidden="true"
|
||
/>
|
||
)}
|
||
<button
|
||
type="button"
|
||
aria-label={expanded ? collapseLabel : expandLabel}
|
||
aria-expanded={expanded}
|
||
className={cn(
|
||
'flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,opacity] duration-150 hover:bg-foreground/[0.045] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
|
||
expanded
|
||
? 'opacity-100'
|
||
: 'opacity-50 group-hover/process-text:opacity-100 group-focus-within/process-text:opacity-100',
|
||
)}
|
||
onClick={() => setExpanded((current) => !current)}
|
||
>
|
||
<ChevronDown
|
||
className={cn(
|
||
'h-3.5 w-3.5 transition-transform duration-150',
|
||
expanded && 'rotate-180',
|
||
)}
|
||
aria-hidden="true"
|
||
/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const ProcessThinking = memo(function ProcessThinking({
|
||
block,
|
||
processActive,
|
||
}: {
|
||
block: ThinkingBlock;
|
||
processActive: boolean;
|
||
}) {
|
||
const streaming = processActive && block.status === 'streaming';
|
||
const thinkingText = streaming && block.text.length > STREAMING_THINKING_WINDOW_CHARS
|
||
? block.text.slice(-STREAMING_THINKING_WINDOW_CHARS)
|
||
: block.text;
|
||
const windowed = thinkingText.length !== block.text.length;
|
||
|
||
return (
|
||
<div
|
||
data-node-id={block.id}
|
||
data-node-kind="thinking"
|
||
className="px-1.5 py-1.5 text-[14px] text-muted-foreground"
|
||
>
|
||
<CompactProcessText
|
||
label="思考过程"
|
||
expandLabel="展开思考详情"
|
||
collapseLabel="收起思考详情"
|
||
streaming={streaming}
|
||
rollUpdates={false}
|
||
contentVersion={block.text.length}
|
||
preview={latestProgressLine(block.text) ?? (
|
||
streaming ? 'Pi 正在形成思路…' : '思考已完成'
|
||
)}
|
||
>
|
||
<div className="min-w-0 whitespace-pre-wrap break-words text-pretty leading-[1.65]">
|
||
<MarkdownText
|
||
text={thinkingText || (streaming ? 'Pi 正在形成思路…' : '')}
|
||
compact
|
||
muted
|
||
/>
|
||
{windowed && (
|
||
<p className="mt-1 text-[11px] text-muted-foreground">
|
||
流式阶段显示最近内容，完成后可查看完整思考。
|
||
</p>
|
||
)}
|
||
</div>
|
||
</CompactProcessText>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const AssistantCommentary = memo(function AssistantCommentary({
|
||
node,
|
||
blocks,
|
||
processActive,
|
||
}: {
|
||
node: ConversationMessageNode;
|
||
blocks: ConversationContentBlock[];
|
||
processActive: boolean;
|
||
}) {
|
||
const streaming = processActive && (
|
||
node.status === 'streaming'
|
||
|| blocks.some((block) => block.kind !== 'image' && block.status === 'streaming')
|
||
);
|
||
const contentVersion = blocks.reduce((total, block) => (
|
||
total + (block.kind === 'image' ? 1 : block.text.length)
|
||
), 0);
|
||
|
||
return (
|
||
<div
|
||
data-node-id={node.id}
|
||
data-node-kind="assistant-commentary"
|
||
className="px-1.5 py-1.5 text-[14px] text-foreground"
|
||
>
|
||
<CompactProcessText
|
||
label="过程说明"
|
||
expandLabel="展开过程说明"
|
||
collapseLabel="收起过程说明"
|
||
streaming={streaming}
|
||
shimmer={false}
|
||
rollUpdates={false}
|
||
previewClassName={cn(
|
||
node.status === 'error' && 'text-destructive',
|
||
node.status === 'aborted' && 'text-muted-foreground',
|
||
node.status !== 'error' && node.status !== 'aborted' && 'text-foreground',
|
||
)}
|
||
previewCodeClassName="text-foreground"
|
||
contentVersion={contentVersion}
|
||
preview={contentBlocksProgressPreview(
|
||
blocks,
|
||
node.status === 'error'
|
||
? '本次处理失败。'
|
||
: node.status === 'aborted'
|
||
? '本次处理已中止。'
|
||
: streaming
|
||
? '正在更新过程说明…'
|
||
: '过程说明已完成。',
|
||
)}
|
||
>
|
||
<div className="min-w-0 space-y-1 leading-[1.65]">
|
||
{blocks.map((block) => (
|
||
<ContentBlock key={block.id} block={block} markdown compactMarkdown />
|
||
))}
|
||
{blocks.length === 0 && node.status === 'error' && <p className="text-destructive">本次处理失败。</p>}
|
||
{blocks.length === 0 && node.status === 'aborted' && <p className="text-muted-foreground">本次处理已中止。</p>}
|
||
</div>
|
||
</CompactProcessText>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
const ProcessItemView = memo(function ProcessItemView({
|
||
item,
|
||
processActive,
|
||
}: {
|
||
item: ProcessItem;
|
||
processActive: boolean;
|
||
}) {
|
||
if (item.kind === 'thinking') return <ProcessThinking block={item.block} processActive={processActive} />;
|
||
if (item.kind === 'assistant-commentary') {
|
||
return <AssistantCommentary node={item.node} blocks={item.blocks} processActive={processActive} />;
|
||
}
|
||
if (item.kind === 'tool') return <ToolNode node={item.node} processActive={processActive} />;
|
||
if (item.kind === 'compaction') return <CompactionNode node={item.node} processActive={processActive} />;
|
||
if (item.kind === 'retry') return <RetryNode node={item.node} />;
|
||
if (item.kind === 'subagent') return <SubagentNode node={item.node} processActive={processActive} />;
|
||
return <NoticeNode node={item.node} />;
|
||
});
|
||
|
||
function processItemIsActive(item: ProcessItem): boolean {
|
||
if (item.kind === 'thinking') return item.block.status === 'streaming';
|
||
if (item.kind === 'assistant-commentary') return item.node.status === 'streaming';
|
||
if (item.kind === 'tool') return ['declared', 'waiting', 'running'].includes(item.node.status);
|
||
if (item.kind === 'compaction') return item.node.status === 'running';
|
||
if (item.kind === 'subagent') return subagentStatus(item.node.details) === 'running';
|
||
return false;
|
||
}
|
||
|
||
function processItemIsFailed(item: ProcessItem): boolean {
|
||
if (item.kind === 'assistant-commentary') return item.node.status === 'error';
|
||
if (item.kind === 'tool' || item.kind === 'compaction') return item.node.status === 'error';
|
||
if (item.kind === 'subagent') return subagentStatus(item.node.details) === 'error';
|
||
return item.kind === 'notice' && item.node.level === 'error';
|
||
}
|
||
|
||
function processGroupIsFailed(
|
||
items: ProcessItem[],
|
||
run: ConversationRunState,
|
||
latest: boolean,
|
||
final?: ConversationMessageNode,
|
||
): boolean {
|
||
if (latest) {
|
||
if (run.status === 'error' || run.terminalReason === 'failed') return true;
|
||
if (run.terminalReason === 'completed' || run.terminalReason === 'aborted') return false;
|
||
}
|
||
if (final) return final.status === 'error' || final.stopReason === 'error';
|
||
return items.some(processItemIsFailed);
|
||
}
|
||
|
||
function runIsActive(run: ConversationRunState): boolean {
|
||
return ['preparing', 'queued', 'running', 'retrying', 'compacting', 'aborting'].includes(run.status);
|
||
}
|
||
|
||
function settledDurationLabel(run: ConversationRunState): string | null {
|
||
if (run.startedAt === undefined || run.settledAt === undefined || run.settledAt < run.startedAt) return null;
|
||
const seconds = Math.max(1, Math.round((run.settledAt - run.startedAt) / 1_000));
|
||
if (seconds < 60) return `${seconds} 秒`;
|
||
const minutes = Math.floor(seconds / 60);
|
||
const remaining = seconds % 60;
|
||
return remaining === 0 ? `${minutes} 分钟` : `${minutes} 分 ${remaining} 秒`;
|
||
}
|
||
|
||
function runningDurationLabel(run: ConversationRunState, now: number): string | null {
|
||
if (run.startedAt === undefined || run.startedAt < 946_684_800_000 || now < run.startedAt) return null;
|
||
return settledDurationLabel({ ...run, settledAt: now });
|
||
}
|
||
|
||
const ProcessGroup = memo(function ProcessGroup({
|
||
items,
|
||
run,
|
||
latest,
|
||
final,
|
||
}: {
|
||
items: ProcessItem[];
|
||
run: ConversationRunState;
|
||
latest: boolean;
|
||
final?: ConversationMessageNode;
|
||
}) {
|
||
const [expanded, setExpanded] = useState(false);
|
||
const authoritativelySettled = (run.status === 'idle' && run.settledAt !== undefined)
|
||
|| run.status === 'error';
|
||
const active = latest
|
||
&& !authoritativelySettled
|
||
&& (runIsActive(run) || items.some(processItemIsActive));
|
||
const failed = processGroupIsFailed(items, run, latest, final);
|
||
const [now, setNow] = useState(() => Date.now());
|
||
useEffect(() => {
|
||
if (!active || run.startedAt === undefined) return;
|
||
const timer = window.setInterval(() => setNow(Date.now()), 1_000);
|
||
return () => window.clearInterval(timer);
|
||
}, [active, run.startedAt]);
|
||
const duration = latest
|
||
? active
|
||
? runningDurationLabel(run, now)
|
||
: settledDurationLabel(run)
|
||
: null;
|
||
const summary = active
|
||
? `处理中${duration ? ` ${duration}` : ''}`
|
||
: failed
|
||
? `处理失败${duration ? ` · ${duration}` : ''}`
|
||
: `已处理${duration ? ` ${duration}` : ''}`;
|
||
|
||
return (
|
||
<details
|
||
data-testid="coding-process-group"
|
||
data-process-state={active ? 'active' : 'settled'}
|
||
className="group/process"
|
||
open={active || expanded}
|
||
onToggle={(event) => {
|
||
if (!active) setExpanded(event.currentTarget.open);
|
||
}}
|
||
>
|
||
<summary
|
||
className="flex min-h-8 cursor-pointer list-none items-center gap-2 border-b border-border/70 px-1.5 pb-2 text-[13px] text-muted-foreground hover:text-foreground"
|
||
onClick={(event) => {
|
||
if (active) event.preventDefault();
|
||
}}
|
||
>
|
||
{active
|
||
? <LoaderCircle className="h-3.5 w-3.5 shrink-0 animate-spin text-brand" aria-hidden="true" />
|
||
: failed
|
||
? <CircleAlert className="h-3.5 w-3.5 shrink-0 text-destructive" aria-hidden="true" />
|
||
: <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />}
|
||
<span className={cn(failed && !active && 'text-foreground')}>{summary}</span>
|
||
{!active && <ChevronDown className="h-3.5 w-3.5 transition-transform duration-150 group-open/process:rotate-180" aria-hidden="true" />}
|
||
</summary>
|
||
<div className="mt-2 space-y-1">
|
||
{items.map((item) => (
|
||
<ProcessItemView key={item.id} item={item} processActive={active} />
|
||
))}
|
||
</div>
|
||
</details>
|
||
);
|
||
});
|
||
|
||
function finalAssistant(nodes: ConversationNode[]): ConversationMessageNode | undefined {
|
||
for (let index = nodes.length - 1; index >= 0; index -= 1) {
|
||
const node = nodes[index];
|
||
if (node?.kind === 'message'
|
||
&& node.role === 'assistant'
|
||
&& node.stopReason !== 'tool-use'
|
||
&& hasVisibleAnswer(node)) {
|
||
const hasDownstreamWork = nodes.slice(index + 1).some((candidate) => (
|
||
candidate.kind === 'tool'
|
||
|| candidate.kind === 'compaction'
|
||
|| candidate.kind === 'subagent'
|
||
|| (candidate.kind === 'boundary' && candidate.boundary === 'retry')
|
||
));
|
||
if (node.stopReason !== undefined || !hasDownstreamWork) return node;
|
||
}
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
function processItems(nodes: ConversationNode[], finalId?: string): ProcessItem[] {
|
||
const items: ProcessItem[] = [];
|
||
for (const node of nodes) {
|
||
if (node.kind === 'message') {
|
||
if (node.role === 'user') continue;
|
||
for (const block of node.blocks) {
|
||
if (block.kind === 'thinking') {
|
||
items.push({ kind: 'thinking', id: `${node.id}:${block.id}:thinking`, block });
|
||
}
|
||
}
|
||
if (node.id !== finalId) {
|
||
const blocks = answerBlocks(node);
|
||
if (blocks.length > 0 || node.status === 'error' || node.status === 'aborted') {
|
||
items.push({ kind: 'assistant-commentary', id: `${node.id}:commentary`, node, blocks });
|
||
}
|
||
}
|
||
continue;
|
||
}
|
||
if (node.kind === 'boundary') {
|
||
if (node.boundary === 'retry') items.push({ kind: 'retry', id: node.id, node });
|
||
continue;
|
||
}
|
||
if (node.kind === 'tool') {
|
||
if (node.toolName !== 'changed_file') items.push({ kind: 'tool', id: node.id, node });
|
||
continue;
|
||
}
|
||
if (node.kind === 'compaction') items.push({ kind: 'compaction', id: node.id, node });
|
||
else if (node.kind === 'subagent') items.push({ kind: 'subagent', id: node.id, node });
|
||
else items.push({ kind: 'notice', id: node.id, node });
|
||
}
|
||
return items;
|
||
}
|
||
|
||
function timelineTurns(nodes: ConversationNode[]): TimelineTurn[] {
|
||
const groups: ConversationNode[][] = [];
|
||
let current: ConversationNode[] = [];
|
||
const flush = () => {
|
||
if (current.length > 0) groups.push(current);
|
||
current = [];
|
||
};
|
||
|
||
for (const node of nodes) {
|
||
if (node.kind === 'message' && node.role === 'user') flush();
|
||
current.push(node);
|
||
}
|
||
flush();
|
||
|
||
return groups.map((group, index) => {
|
||
const user = group[0]?.kind === 'message' && group[0].role === 'user' ? group[0] : undefined;
|
||
const remaining = user ? group.slice(1) : group;
|
||
const final = finalAssistant(remaining);
|
||
return {
|
||
id: user?.id ?? remaining[0]?.id ?? `turn-${index}`,
|
||
...(user ? { user } : {}),
|
||
process: processItems(remaining, final?.id),
|
||
...(final ? { final } : {}),
|
||
};
|
||
});
|
||
}
|
||
|
||
const TimelineTurnView = memo(function TimelineTurnView({
|
||
turn,
|
||
run,
|
||
latest,
|
||
onFork,
|
||
assistantName,
|
||
}: {
|
||
turn: TimelineTurn;
|
||
run: ConversationRunState;
|
||
latest: boolean;
|
||
onFork?(sourceEntryId: string): void;
|
||
assistantName?: string;
|
||
}) {
|
||
return (
|
||
<section className="space-y-3.5" data-testid="coding-conversation-turn">
|
||
{turn.user && <MessageNode node={turn.user} onFork={onFork} />}
|
||
{turn.process.length > 0 && (
|
||
<ProcessGroup items={turn.process} run={run} latest={latest} final={turn.final} />
|
||
)}
|
||
{turn.final && (
|
||
<MessageNode
|
||
node={turn.final}
|
||
assistantName={assistantName}
|
||
/>
|
||
)}
|
||
</section>
|
||
);
|
||
});
|
||
|
||
export const CodingConversationTimeline = memo(function CodingConversationTimeline({
|
||
conversationId,
|
||
onFork,
|
||
assistantName,
|
||
}: {
|
||
conversationId: string;
|
||
onFork?(sourceEntryId: string): void;
|
||
assistantName?: string;
|
||
}) {
|
||
const selectNodes = useCallback((state: CodingConversationStoreState) => (
|
||
selectCodingConversationSnapshot(conversationId)(state)?.nodes ?? EMPTY_NODES
|
||
), [conversationId]);
|
||
const selectRun = useCallback((state: CodingConversationStoreState) => (
|
||
selectCodingConversationSnapshot(conversationId)(state)?.run ?? IDLE_RUN
|
||
), [conversationId]);
|
||
const nodes = useCodingConversationStore(selectNodes);
|
||
const run = useCodingConversationStore(selectRun);
|
||
const [visibleLimit, setVisibleLimit] = useState(INITIAL_WINDOW);
|
||
const windowStart = Math.max(0, nodes.length - visibleLimit);
|
||
const visibleNodes = nodes.slice(windowStart);
|
||
const turns = useMemo(() => timelineTurns(visibleNodes), [visibleNodes]);
|
||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||
const stickToBottomRef = useRef(true);
|
||
|
||
useLayoutEffect(() => {
|
||
if (!stickToBottomRef.current) return;
|
||
const element = scrollRef.current;
|
||
if (element) element.scrollTop = element.scrollHeight;
|
||
}, [nodes]);
|
||
|
||
return (
|
||
<div
|
||
ref={scrollRef}
|
||
role="log"
|
||
aria-live="polite"
|
||
data-testid="coding-conversation-timeline"
|
||
className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-5 sm:px-3 sm:py-6"
|
||
onScroll={(event) => {
|
||
const element = event.currentTarget;
|
||
stickToBottomRef.current = element.scrollHeight - element.scrollTop - element.clientHeight < 64;
|
||
}}
|
||
>
|
||
<div className="mx-auto flex w-full max-w-[50rem] flex-col gap-8">
|
||
{windowStart > 0 && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
className="mx-auto min-h-9 rounded-lg px-4 text-xs transition-transform duration-150 ease-out active:scale-[0.96]"
|
||
onClick={() => setVisibleLimit((current) => current + WINDOW_STEP)}
|
||
>
|
||
加载更早内容
|
||
</Button>
|
||
)}
|
||
{turns.map((turn, index) => (
|
||
<TimelineTurnView
|
||
key={turn.id}
|
||
turn={turn}
|
||
run={run}
|
||
latest={index === turns.length - 1}
|
||
onFork={onFork}
|
||
assistantName={assistantName}
|
||
/>
|
||
))}
|
||
{nodes.length === 0 && (
|
||
<div className="mx-auto flex max-w-md flex-col items-center px-6 py-16 text-center">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-subtle">
|
||
<Bot className="h-4.5 w-4.5 text-muted-foreground" aria-hidden="true" />
|
||
</div>
|
||
<h2 className="mt-4 text-balance text-base font-semibold">开始一条对话</h2>
|
||
<p className="mt-1.5 text-pretty text-sm leading-6 text-muted-foreground">
|
||
Pi 会连续展示思考和工具进度，处理完成后自动收纳过程并给出结论。
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|