Строка одного вызова инструмента в ленте агента. На иконке инструмента сидит маленький значок статуса: крутящийся индикатор во время работы, галочка после успеха или красный крестик при ошибке — смена значков идёт на пружине. Пока инструмент работает, подпись мерцает, а по завершении справа появляется затраченное время.
По клику строка раскрывается: видны аргументы в виде моноширинных чипов и результат или текст ошибки. В демо несколько вызовов складываются в живой разговор агента, который можно повторить.
Скопируйте эти файлы в components/tool-call-card/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ToolCallCard } from "@/components/tool-call-card/tool-call-card";
export function Call() {
return (
<ToolCallCard
name="bash"
label="Прогнать тесты"
args={{ command: "pnpm vitest run" }}
result="Tests 12 passed (12)"
runDuration={1800}
/>
);
}nameИмя инструмента
Тип string
label?Человеческое описание действия
Тип string
args?Аргументы вызова
Тип Record<string, unknown> | string
result?Результат после успеха
Тип string
error?Текст ошибки; вызов завершится ошибкой
Тип string
status?Управляемый статус; без него статус идёт сам
Тип "pending" | "running" | "done" | "error"
autoPlay?Проигрывать ожидание и работу автоматически
Тип boolean·По умолчанию true
runDuration?Длительность работы, мс
Тип number·По умолчанию 1600
startDelay?Задержка перед стартом, мс
Тип number·По умолчанию 0
icon?Иконка инструмента
Тип ReactNode·По умолчанию гаечный ключ
defaultOpen?Раскрыть детали сразу
Тип boolean·По умолчанию false
shimmerDuration?Период мерцания подписи, с
Тип number·По умолчанию 1.4
onComplete?Вызов завершён успехом или ошибкой
Тип (status) => void
className?Классы корневого блока
Тип string