"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CheckIcon, ChevronDownIcon, XIcon } from "@kineticui/icons"; export type ToolCallProps = { /** Tool name, e.g. "search_web". */ name: string; /** Human label, e.g. "Searched the web". */ title?: React.ReactNode; status: "pending" | "running" | "success" | "error"; icon?: React.ReactNode; input?: unknown; output?: React.ReactNode; /** Shown on the right, e.g. "1.2s" or "4 results". */ meta?: React.ReactNode; /** Approve / deny for tools that need permission (status "pending"). */ onApprove?: () => void; onDeny?: () => void; defaultOpen?: boolean; className?: string; }; const statusIcon = { pending: , running: , success: , error: , }; /** Agent tool invocation card with arguments, result and approval controls. */ export function ToolCall({ name, title, status, icon, input, output, meta, onApprove, onDeny, defaultOpen = false, className }: ToolCallProps) { const [open, setOpen] = React.useState(defaultOpen); const expandable = input !== undefined || output !== undefined; return (

{status === "pending" && (onApprove || onDeny) ? (

This tool needs your permission to run. {onDeny ? ( ) : null} {onApprove ? ( ) : null}

) : null} {open && expandable ? (

{input !== undefined ? (

Input

{typeof input === "string" ? input : JSON.stringify(input, null, 2)}

) : null} {output !== undefined ? (

Output

{output}

) : null}

); }

Tool Call

Installation

Exports