Llamada de herramienta.

<section class="ui-sample ui-ai" data-tool-call="true"><header><strong>Llamada de herramienta</strong><span class="badge badge--ok">Completa</span></header><pre><code>buscar_datos(region=&quot;Valparaíso&quot;, periodo=&quot;2026-T2&quot;)</code></pre><p>Solicitud permitida · 184 ms</p><a class="btn btn--quiet" href="#detalle">Ver entrada validada</a></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-tool-call="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Llamada de herramienta</strong><span class="badge badge--ok">Completa</span></header><pre class="overflow-x-auto border border-slate-300 bg-slate-50 p-3"><code>buscar_datos(region=&quot;Valparaíso&quot;, periodo=&quot;2026-T2&quot;)</code></pre><p>Solicitud permitida · 184 ms</p><a class="btn btn--quiet underline underline-offset-4" href="#detalle">Ver entrada validada</a></section>

export interface ToolCallProps {
  /** Encabezado del bloque («Llamada de herramienta»). */
  title?: string;
  /** Estado de la llamada («En curso», «Completa», «Falló»); se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (completa o permitida: `ok`; pendiente: `warn`; falló, denegada o rechazada: `err`; en curso u otro: `neutral`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Llamada tal como se envió, con el nombre de la herramienta y sus argumentos; vacía oculta el bloque de código. */
  code?: string;
  /** Permiso y duración, o qué hacer si falló («Solicitud permitida · 184 ms»); vacío lo oculta. */
  description?: string;
  /** Destino del detalle de la llamada; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace al detalle; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const TOOL_CALL_TONOS: [string, "ok" | "warn" | "err" | "neutral"][] = [
  ["complet", "ok"],
  ["permitid", "ok"],
  ["pendiente", "warn"],
  ["falló", "err"],
  ["denegad", "err"],
  ["rechazad", "err"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? TOOL_CALL_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

/**
 * Llamada de un agente de IA a una herramienta, con su estado, los argumentos enviados, el permiso y la duración, y un enlace al detalle; se usa en una conversación o en el registro de un agente para mostrar qué pidió.
 *
 * Si la llamada falla, `status` lo dice y `description` indica si se puede reintentar. El estado va en texto dentro de una etiqueta con tono (`badge`), no sólo en color; el enlace al detalle es una acción terciaria (`btn--quiet`).
 *
 * @example <ToolCall status="Completa" code={'buscar_datos(region="Valparaíso", periodo="2026-T2")'} description="Solicitud permitida · 184 ms" href="/llamadas/184" />
 * @example <ToolCall status="Falló" description="La fuente no respondió; puedes reintentar." />
 */
export function ToolCall({
  title = "Llamada de herramienta",
  status = "Completa",
  statusTone,
  code = 'buscar_datos(region="Valparaíso", periodo="2026-T2")',
  description = "Solicitud permitida · 184 ms",
  href = "#detalle",
  linkLabel = "Ver entrada validada",
  className,
}: ToolCallProps) {
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-tool-call>
      <header>
        <strong>{title}</strong>
        {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
      </header>
      {code ? <pre><code>{code}</code></pre> : null}
      {description ? <p>{description}</p> : null}
      {href && linkLabel ? <a className="btn btn--quiet" href={href}>{linkLabel}</a> : null}
    </section>
  );
}