270 lines
9.6 KiB
TypeScript
270 lines
9.6 KiB
TypeScript
import { memo, useMemo, useState, type ReactNode } from "react"
|
|
import type { AdaptedContentPart } from "@/lib/adapters/ai-elements-adapter"
|
|
import type { AgentToolCall } from "@/lib/types"
|
|
import { tryParseJson, extractJsonField } from "./content-parts-renderer"
|
|
import { MessageResponse } from "@/components/ai-elements/message"
|
|
import { Shimmer } from "@/components/ai-elements/shimmer"
|
|
import { getStatusBadge } from "@/components/ai-elements/tool"
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible"
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
CompassIcon,
|
|
MapIcon,
|
|
TerminalIcon,
|
|
WrenchIcon,
|
|
} from "lucide-react"
|
|
import { useTranslations } from "next-intl"
|
|
|
|
// ── helpers ────────────────────────────────────────────────────────────
|
|
|
|
const ICON_CLASS = "size-4 text-muted-foreground"
|
|
|
|
function getAgentIcon(subagentType: string | null) {
|
|
const t = subagentType?.toLowerCase() ?? ""
|
|
if (t.includes("explore")) return <CompassIcon className={ICON_CLASS} />
|
|
if (t.includes("plan")) return <MapIcon className={ICON_CLASS} />
|
|
if (t.includes("bash")) return <TerminalIcon className={ICON_CLASS} />
|
|
return <WrenchIcon className={ICON_CLASS} />
|
|
}
|
|
|
|
function getAccentColor(subagentType: string | null): string {
|
|
const t = subagentType?.toLowerCase() ?? ""
|
|
if (t.includes("explore"))
|
|
return "border-l-blue-500/50 dark:border-l-blue-400/40"
|
|
if (t.includes("plan"))
|
|
return "border-l-amber-500/50 dark:border-l-amber-400/40"
|
|
if (t.includes("bash"))
|
|
return "border-l-green-500/50 dark:border-l-green-400/40"
|
|
return "border-l-purple-500/50 dark:border-l-purple-400/40"
|
|
}
|
|
|
|
function formatDuration(ms: number): string {
|
|
if (ms < 1000) return `${ms}ms`
|
|
const sec = ms / 1000
|
|
if (sec < 60) return `${sec.toFixed(1)}s`
|
|
return `${(sec / 60).toFixed(1)}m`
|
|
}
|
|
|
|
/** Convert AgentToolCall[] to AdaptedContentPart[] for reuse with ToolCallPart */
|
|
function adaptToolCalls(
|
|
calls: AgentToolCall[],
|
|
parentId: string
|
|
): AdaptedContentPart[] {
|
|
return calls.map(
|
|
(call, i): Extract<AdaptedContentPart, { type: "tool-call" }> => ({
|
|
type: "tool-call",
|
|
toolCallId: `${parentId}-sub-${i}`,
|
|
toolName: call.tool_name,
|
|
input: call.input_preview ?? null,
|
|
state: call.is_error ? "output-error" : "output-available",
|
|
output: call.output_preview ?? null,
|
|
errorText: call.is_error ? (call.output_preview ?? undefined) : undefined,
|
|
})
|
|
)
|
|
}
|
|
|
|
// ── main component ────────────────────────────────────────────────────
|
|
|
|
export const AgentToolCallPart = memo(function AgentToolCallPart({
|
|
part,
|
|
renderToolCall,
|
|
}: {
|
|
part: Extract<AdaptedContentPart, { type: "tool-call" }>
|
|
/** Render a single tool-call part — injected by the parent to avoid
|
|
* circular imports (content-parts-renderer → agent-tool-call → renderer). */
|
|
renderToolCall: (
|
|
part: Extract<AdaptedContentPart, { type: "tool-call" }>,
|
|
key: string
|
|
) => ReactNode
|
|
}) {
|
|
const t = useTranslations("Folder.chat.contentParts")
|
|
const tTool = useTranslations("Folder.chat.tool")
|
|
|
|
const isRunning =
|
|
part.state === "input-available" || part.state === "input-streaming"
|
|
const isError = part.state === "output-error"
|
|
|
|
const [bodyOpen, setBodyOpen] = useState(isRunning || isError)
|
|
const [promptOpen, setPromptOpen] = useState(false)
|
|
|
|
const parsed = useMemo(
|
|
() => (part.input ? tryParseJson(part.input) : null),
|
|
[part.input]
|
|
)
|
|
|
|
const subagentType = useMemo(
|
|
() =>
|
|
(parsed?.subagent_type as string | undefined) ??
|
|
(part.input ? extractJsonField(part.input, "subagent_type") : null),
|
|
[parsed, part.input]
|
|
)
|
|
|
|
const description = useMemo(
|
|
() =>
|
|
(parsed?.description as string | undefined) ??
|
|
(part.input ? extractJsonField(part.input, "description") : null),
|
|
[parsed, part.input]
|
|
)
|
|
|
|
const prompt = useMemo(
|
|
() =>
|
|
(parsed?.prompt as string | undefined) ??
|
|
(part.input ? extractJsonField(part.input, "prompt") : null),
|
|
[parsed, part.input]
|
|
)
|
|
|
|
const model = useMemo(
|
|
() =>
|
|
(parsed?.model as string | undefined) ??
|
|
(part.input ? extractJsonField(part.input, "model") : null),
|
|
[parsed, part.input]
|
|
)
|
|
|
|
const icon = useMemo(() => getAgentIcon(subagentType), [subagentType])
|
|
const accentColor = useMemo(
|
|
() => getAccentColor(subagentType),
|
|
[subagentType]
|
|
)
|
|
|
|
const title = useMemo(() => {
|
|
const prefix = subagentType ?? "Agent"
|
|
return description ? `${prefix}: ${description}` : prefix
|
|
}, [subagentType, description])
|
|
|
|
const statusLabel =
|
|
part.state === "input-available"
|
|
? tTool("status.inputAvailable")
|
|
: part.state === "input-streaming"
|
|
? tTool("status.inputStreaming")
|
|
: part.state === "output-available"
|
|
? tTool("status.outputAvailable")
|
|
: tTool("status.outputError")
|
|
|
|
const agentStats = part.agentStats ?? null
|
|
const adaptedToolCalls = useMemo(
|
|
() => adaptToolCalls(agentStats?.tool_calls ?? [], part.toolCallId),
|
|
[agentStats?.tool_calls, part.toolCallId]
|
|
)
|
|
|
|
const durationSuffix = useMemo(() => {
|
|
if (!agentStats?.total_duration_ms) return null
|
|
return formatDuration(agentStats.total_duration_ms)
|
|
}, [agentStats])
|
|
|
|
return (
|
|
<Collapsible open={bodyOpen} onOpenChange={setBodyOpen}>
|
|
<div
|
|
className={cn(
|
|
"rounded-md border border-border/60 bg-muted/20 overflow-hidden",
|
|
"border-l-[3px]",
|
|
accentColor
|
|
)}
|
|
>
|
|
{/* Header — clickable to toggle body */}
|
|
<CollapsibleTrigger className="flex w-full min-w-0 items-center justify-between gap-3 px-4 py-3">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<span className="shrink-0">{icon}</span>
|
|
<span className="min-w-0 flex-1 truncate whitespace-nowrap text-sm font-medium text-left">
|
|
{title}
|
|
</span>
|
|
{!bodyOpen && durationSuffix && (
|
|
<span className="shrink-0 text-xs text-muted-foreground/60">
|
|
{durationSuffix}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
{getStatusBadge(part.state, statusLabel)}
|
|
<ChevronDownIcon
|
|
className={cn(
|
|
"size-4 text-muted-foreground transition-transform",
|
|
!bodyOpen && "-rotate-90"
|
|
)}
|
|
/>
|
|
</div>
|
|
</CollapsibleTrigger>
|
|
|
|
{/* Collapsible body */}
|
|
<CollapsibleContent>
|
|
<div className="max-h-[32rem] overflow-y-auto space-y-3 px-4 pb-4">
|
|
{/* Model + duration summary */}
|
|
{(model || durationSuffix) && (
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
|
|
{model && (
|
|
<span>
|
|
{t("agentModelLabel")}:{" "}
|
|
<span className="font-mono">{model}</span>
|
|
</span>
|
|
)}
|
|
{durationSuffix && <span>{durationSuffix}</span>}
|
|
</div>
|
|
)}
|
|
|
|
{/* Collapsible prompt */}
|
|
{prompt && (
|
|
<Collapsible open={promptOpen} onOpenChange={setPromptOpen}>
|
|
<CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors">
|
|
<ChevronRightIcon
|
|
className={cn(
|
|
"size-3.5 transition-transform",
|
|
promptOpen && "rotate-90"
|
|
)}
|
|
/>
|
|
{t("agentPromptLabel")}
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<div className="mt-2 rounded-md bg-muted/50 p-3 text-xs text-muted-foreground prose prose-sm dark:prose-invert max-w-none [&_ul]:list-inside [&_ol]:list-inside">
|
|
<MessageResponse>{prompt}</MessageResponse>
|
|
</div>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
)}
|
|
|
|
{/* Subagent tool calls — rendered with the same ToolCallPart
|
|
as the outer conversation for consistent appearance */}
|
|
{adaptedToolCalls.length > 0 && (
|
|
<div className="space-y-2">
|
|
{adaptedToolCalls.map((tc, i) =>
|
|
renderToolCall(
|
|
tc as Extract<AdaptedContentPart, { type: "tool-call" }>,
|
|
`subagent-tc-${i}`
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Running indicator */}
|
|
{isRunning && !part.output && (
|
|
<Shimmer className="text-sm" duration={2}>
|
|
Running...
|
|
</Shimmer>
|
|
)}
|
|
|
|
{/* Error output */}
|
|
{isError && part.errorText && (
|
|
<div className="rounded-md bg-destructive/10 p-3">
|
|
<pre className="whitespace-pre-wrap break-words text-xs text-destructive">
|
|
{part.errorText}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* Final output */}
|
|
{part.output && !isError && (
|
|
<div className="text-sm prose prose-sm dark:prose-invert max-w-none [&_ul]:list-inside [&_ol]:list-inside">
|
|
<MessageResponse>{part.output}</MessageResponse>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CollapsibleContent>
|
|
</div>
|
|
</Collapsible>
|
|
)
|
|
})
|