Todos los componentes (204)

Llamada a herramienta

IA · ToolCall

Qué es y cuándo usarlo

Una llamada a una herramienta: qué se llamó, con qué, si va, ha ido bien o ha fallado, y lo que devolvió. Plegada deja una línea; una que ha fallado se abre sola, que es la que hay que leer.

Cuándo usarlo

En la respuesta de un asistente que usa herramientas, una por llamada, en el orden en que ocurrieron.
En un registro de ejecución donde importa ver la entrada y el resultado de cada paso.

Cuándo no

Para una línea de registro sin entrada ni resultado: es una fila de ActivityLog.
Para el razonamiento del modelo: es un Reasoning.

Teclado: es un botón de despliegue; Tab llega a él y Intro o Espacio lo abren y lo cierran. Sin entrada ni resultado no hay nada que desplegar y el botón queda apagado.

Accesibilidad: el estado se dice con texto -«En curso», «Hecho», «Con error»- además de con el icono y el color, y un cambio de estado se anuncia con una región status sin mover el foco. La entrada y el resultado son bloques de código enfocables, con su botón de copiar.

Aspecto fino: variables CSS --amset-tool-call-rule (el borde) y --amset-tool-call-state (el color del estado).

Cómo se ve

buscar_pedidos: En curso

{ "estado": "pendiente" }

3 pedidos: #1042, #1043, #1047

buscar_pedidos: Hecho

{ "pedido": "#1047" }

El cliente no tiene un correo registrado.

enviar_correo: Con error

<ToolCall name="buscar_pedidos" status="running" input={consulta} />

<ToolCall
  name="buscar_pedidos"
  status="success"
  input={consulta}
  output="3 pedidos: #1042, #1043, #1047"
  durationMs={850}
  defaultExpanded
/>

<ToolCall
  name="enviar_correo"
  status="error"
  input={consulta}
  output="El cliente no tiene un correo registrado."
  durationMs={120}
/>

Props

Se importa con import { ToolCall } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`name`obligatoria	`string`	El nombre de la herramienta, tal cual: `buscar_pedidos`, `Read`.
`status`obligatoria	`ToolCallStatus`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultExpanded`	`boolean`	Abierto al empezar. Por defecto, solo si ha fallado.
`durationMs`	`number`	Lo que tardo, en milisegundos.
`expanded`	`boolean`	—
`input`	`ReactNode`	Con que se llamo. Un texto va en un bloque de codigo; cualquier otra cosa, tal cual.
`onExpandedChange`	`(expanded: boolean) => void`	—
`output`	`ReactNode`	Lo que devolvio, o el mensaje de error.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: