64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { Wrench } from "lucide-react";
|
|
import { cn } from "@/shared/ui/cn";
|
|
import { AgentProgressStatusIcon } from "./agent-progress-status-icon";
|
|
import type { AgentChatProgress } from "../types";
|
|
import { AgentProcessDisclosure } from "./agent-process-disclosure";
|
|
|
|
export function AgentToolProgress({
|
|
item,
|
|
compact = false
|
|
}: {
|
|
item: AgentChatProgress;
|
|
compact?: boolean;
|
|
}) {
|
|
const name =
|
|
item.tool?.name ??
|
|
item.title
|
|
.replace(/^(?:正在调用|准备调用)\s*/, "")
|
|
.replace(
|
|
/\s*(?:调用失败|已执行完成|已完成|正在执行|正在调用|调用中|已进入待执行状态|等待执行|执行失败)\s*$/,
|
|
""
|
|
);
|
|
const input = item.tool?.input;
|
|
return (
|
|
<AgentProcessDisclosure
|
|
kind="tool"
|
|
label={
|
|
<span className={cn("flex min-w-0 items-start gap-2", compact && "text-xs")}>
|
|
<AgentProgressStatusIcon status={item.status} />
|
|
<span
|
|
data-tool-symbol
|
|
className="inline-flex h-6 w-4 shrink-0 items-center justify-center"
|
|
>
|
|
<Wrench aria-hidden="true" className="size-4 text-muted-foreground" />
|
|
</span>
|
|
<span data-tool-name className="min-w-0 break-all font-medium leading-6">
|
|
{name || "工具调用"}
|
|
</span>
|
|
</span>
|
|
}
|
|
>
|
|
{input ? (
|
|
<div className="space-y-2">
|
|
<p className="text-xs text-muted-foreground">调用参数</p>
|
|
<pre className="max-h-72 overflow-auto whitespace-pre-wrap break-all rounded-md border border-border bg-muted/30 p-3 text-xs leading-relaxed">
|
|
{JSON.stringify(input, null, 2)}
|
|
</pre>
|
|
{item.status === "error" && item.detail ? (
|
|
<p className="whitespace-pre-wrap break-words text-xs leading-relaxed text-destructive">
|
|
{item.detail}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
{!input && item.detail ? (
|
|
<p className="whitespace-pre-wrap break-words text-xs leading-relaxed text-muted-foreground">
|
|
{item.detail}
|
|
</p>
|
|
) : !input ? (
|
|
<p className="text-xs text-muted-foreground">无附加参数</p>
|
|
) : null}
|
|
</AgentProcessDisclosure>
|
|
);
|
|
}
|