Tool Invocation

1"use client";
2 
3import { AlertCircle, CheckCircleIcon } from "lucide-react";
4import { type ComponentProps, useState } from "react";
5import { Card } from "@/components/ui/card";
6import {
7	Collapsible,
8	CollapsibleContent,
9	CollapsibleTrigger,
10} from "@/components/ui/collapsible";
11import { cn } from "@/lib/utils";
12import { idToReadableText } from "@/registry/lib/id-to-readable-text";
13 
14export function ToolInvocation({
15	className,
16	...props
17}: ComponentProps<typeof Card>) {
18	return (
19		<Card
20			className={cn("max-w-full overflow-hidden p-0 gap-0", className)}
21			{...props}
22		/>
23	);
24}
25 
26export function ToolInvocationHeader({
27	className,
28	...props
29}: ComponentProps<"div">) {
30	return <div className={cn("px-4 py-3 border-b", className)} {...props} />;
31}
32 
33export function ToolInvocationName({
34	name,
35	capitalize = true,
36	type,
37	isError = false,
38	className,
39}: {
40	name: string;
41	capitalize?: boolean;
42	type:
43		| "input-streaming"
44		| "input-available"
45		| "output-available"
46		| "output-error";
47	isError?: boolean;
48	className?: string;
49}) {
50	// Combine explicit error state with passed error flag
51	const hasError = type === "output-error" || isError;
52 
53	return (
54		<div className={cn("flex items-center gap-2 text-sm", className)}>
55			{(type === "input-streaming" || type === "input-available") && (
56				<ToolInvocationLoadingIcon
57					className="size-4 text-muted-foreground"
58					duration="2s"
59				/>
60			)}
61			{type === "output-available" && !hasError && (
62				<CheckCircleIcon className="size-4 text-muted-foreground" />
63			)}
64			{hasError && <AlertCircle className="size-4 text-red-500" />}
65			<span className={cn("font-medium", hasError && "text-red-600")}>
66				{idToReadableText(name, { capitalize })}
67			</span>
68		</div>
69	);
70}
71 
72export function ToolInvocationContent({
73	children,
74	className,
75}: {
76	children: React.ReactNode;
77	className?: string;
78}) {
79	return (
80		<div>
81			<div className="flex items-center justify-between">
82				<span className="text-xs font-medium text-muted-foreground">
83					Tool Details
84				</span>
85			</div>
86 
87			<div className={cn("px-4 py-3 space-y-4", className)}>
88				{children}
89			</div>
90		</div>
91	);
92}
93 
94export function ToolInvocationContentCollapsible({
95	children,
96	className,
97	defaultOpen = false,
98	open: controlledOpen,
99}: {
100	children: React.ReactNode;
101	className?: string;
102	defaultOpen?: boolean;
103	open?: boolean;
104}) {
105	const [internalOpen, setInternalOpen] = useState(defaultOpen);
106	const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
107 
108// … truncated