{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tool-call","type":"registry:component","title":"Tool call","description":"One tool invocation from arguments to result: preparing, running, done, failed or denied.","author":"Hairline UI","dependencies":["lucide-react"],"registryDependencies":["https://hairlineui.com/r/number-roll.json","https://hairlineui.com/r/text-morph.json"],"files":[{"path":"registry/tool-call.tsx","type":"registry:component","content":"\"use client\";\n\nimport * as React from \"react\";\nimport { AlertCircle, Ban, ChevronDown, RotateCcw, Wrench } from \"lucide-react\";\nimport { NumberRoll } from \"./number-roll\";\nimport { TextMorph } from \"./text-morph\";\n\n/* ─────────────────────────────────────────────────────────\n * TOOL CALL: one tool invocation, from arguments to result\n *\n * preparing the model is still writing the arguments; the\n * panel eases taller as each one arrives\n * running a spinner opens in and the label morphs to\n * \"Running\"\n * done the spinner blurs into a check that draws itself\n * and the run time rolls up from zero; the output\n * rises in as the panel eases to fit it\n * error the label morphs to \"Failed\" in red, with the\n * message and a retry\n * denied the user said no\n *\n * One status pill throughout: its icon slot opens and closes,\n * icons swap through a blur and the label morphs, so it never\n * swaps out. Arguments render as readable fields; nested\n * values as JSON.\n * Pass renderOutput to show a result your own way.\n * ───────────────────────────────────────────────────────── */\n\nexport type ToolCallStatus = \"preparing\" | \"running\" | \"done\" | \"error\" | \"denied\";\n\nexport interface ToolCallProps extends Omit, \"title\"> {\n /** The tool's name as the model calls it, e.g. \"search_flights\". */\n name: string;\n /** A human label, e.g. \"Search flights\". */\n title?: string;\n status: ToolCallStatus;\n /** Arguments, possibly partial while preparing. */\n input?: unknown;\n /** The result, once done. */\n output?: unknown;\n /** Render the result yourself, e.g. as a small card. */\n renderOutput?: (output: unknown) => React.ReactNode;\n errorText?: string;\n onRetry?: () => void;\n /** How long it ran (ms). */\n duration?: number;\n icon?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\nconst FOCUS = \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40\";\nconst MORPH = \"cubic-bezier(0.16,1,0.3,1)\";\n// A light that sweeps across the label. A mask, not a text clip, so it reaches letters that are mid-morph.\nconst SHEEN =\n \"text-foreground [mask-image:linear-gradient(90deg,rgb(0_0_0/0.45)_35%,#000_50%,rgb(0_0_0/0.45)_65%)] [mask-size:200%_100%] animate-[ui-sheen_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:[mask-image:none] motion-reduce:text-foreground/70\";\nconst LABELS: Record = { preparing: \"Preparing\", running: \"Running\", done: \"Done\", error: \"Failed\", denied: \"Denied\" };\n\nconst reducedQuery = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduced = (onChange: () => void) => {\n const query = window.matchMedia(reducedQuery);\n query.addEventListener(\"change\", onChange);\n return () => query.removeEventListener(\"change\", onChange);\n};\nconst useReducedMotion = () =>\n React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false);\n\n/** Icons trade places through a blur: the old one shrinks away as the new one grows in. */\nconst swap = (on: boolean, reduced: boolean): React.CSSProperties => ({\n opacity: on ? 1 : 0,\n transform: on ? \"none\" : \"scale(0.6)\",\n filter: on ? \"none\" : \"blur(3px)\",\n transition: reduced ? \"none\" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`,\n});\n\nfunction DrawnCheck({ drawn, reduced }: { drawn: boolean; reduced: boolean }) {\n return (\n \n \n \n );\n}\n\n/** The run time, in the unit that reads best; it rolls up from zero when the call has just finished. */\nfunction Duration({ ms, rollIn }: { ms: number; rollIn: boolean }) {\n const from = rollIn ? 0 : undefined;\n if (ms < 1000) return ;\n if (ms < 60000) return ;\n return (\n <>\n \n  \n \n \n );\n}\nconst ONE_DECIMAL = { minimumFractionDigits: 1, maximumFractionDigits: 1 };\n\nfunction isPlainObject(value: unknown): value is Record {\n return typeof value === \"object\" && value !== null && !Array.isArray(value);\n}\n\nfunction Value({ value }: { value: unknown }) {\n if (typeof value === \"string\") return {value};\n if (typeof value === \"number\" || typeof value === \"boolean\" || value === null)\n return {String(value)};\n return {JSON.stringify(value)};\n}\n\nfunction Fields({ value }: { value: unknown }) {\n if (isPlainObject(value)) {\n const entries = Object.entries(value);\n if (entries.length === 0) return

No arguments

;\n return (\n
\n {entries.map(([key, v]) => (\n \n
{key}
\n
\n \n
\n \n ))}\n
\n );\n }\n if (typeof value === \"string\") return

{value}

;\n return (\n 
\n      {JSON.stringify(value, null, 2)}\n
\n );\n}\n\nfunction Label({ children }: { children: React.ReactNode }) {\n return

{children}

;\n}\n\nexport function ToolCall({\n name,\n title,\n status,\n input,\n output,\n renderOutput,\n errorText,\n onRetry,\n duration,\n icon,\n open,\n defaultOpen = false,\n onOpenChange,\n className = \"\",\n ...props\n}: ToolCallProps) {\n const reduced = useReducedMotion();\n const [ownOpen, setOwnOpen] = React.useState(defaultOpen);\n const [errorSeen, setErrorSeen] = React.useState(false);\n const panelId = React.useId();\n const bodyRef = React.useRef(null);\n const [bodyHeight, setBodyHeight] = React.useState(null);\n\n // Each time it finishes while you watch, the run time rolls up from zero (a finished call in history just sits).\n const [prevStatus, setPrevStatus] = React.useState(status);\n const [finishes, setFinishes] = React.useState(0);\n if (prevStatus !== status) {\n setPrevStatus(status);\n if (status === \"done\") setFinishes((n) => n + 1);\n }\n\n // The panel takes the height of what's in it, so arguments and output arriving ease it taller instead of jumping.\n React.useLayoutEffect(() => {\n const el = bodyRef.current;\n if (!el) return;\n const measure = () => setBodyHeight((h) => (h === el.offsetHeight ? h : el.offsetHeight));\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n // Failures open themselves once, so the reason is visible without a click.\n React.useEffect(() => {\n if (status === \"error\" && !errorSeen) {\n setErrorSeen(true);\n if (open === undefined) setOwnOpen(true);\n }\n }, [status, errorSeen, open]);\n\n const expanded = open ?? ownOpen;\n const toggle = () => {\n const next = !expanded;\n if (open === undefined) setOwnOpen(next);\n onOpenChange?.(next);\n };\n\n const showTime = status === \"done\" && duration !== undefined;\n const icons: Partial> = {\n // Spins only while running, so a hidden spinner never keeps the page busy.\n running: (\n \n ),\n done: (\n \n \n \n ),\n error: ,\n denied: ,\n };\n const badge = (\n \n \n {(Object.keys(icons) as ToolCallStatus[]).map((s) => (\n \n {icons[s]}\n \n ))}\n \n \n {showTime ? \"\" : LABELS[status]}\n \n {duration !== undefined && (\n \n \n 0 && !reduced} />\n \n \n )}\n \n );\n\n return (\n
\n \n \n {icon ?? }\n \n \n {title ?? name}\n {title && {name}}\n \n \n {badge}\n \n \n \n\n \n
\n
\n {input !== undefined && (\n
\n \n \n
\n )}\n\n {status === \"done\" && output !== undefined && (\n
\n \n {renderOutput ? renderOutput(output) : }\n
\n )}\n\n {status === \"error\" && (\n
\n

{errorText ?? \"The tool failed.\"}

\n {onRetry && (\n \n \n Retry\n \n )}\n
\n )}\n\n {status === \"denied\" &&

You declined this action, so it didn’t run.

}\n
\n
\n
\n \n );\n}\n"}],"css":{"@keyframes ui-sheen":{"from":{"mask-position":"150% 0"},"to":{"mask-position":"-50% 0"}},"@keyframes ui-fade-up":{"from":{"opacity":"0","transform":"translateY(4px)"},"to":{"opacity":"1","transform":"none"}}},"docs":"Docs and live preview: https://hairlineui.com/ui/tool-call"}