Todos los componentes (204)

Uso y coste

IA · UsageBadge

Qué es y cuándo usarlo

Cuánto ha costado una respuesta: los tokens en compacto y el coste en la moneda del idioma, en una línea pequeña y apagada. «1,2 mil tok · 0,03 US$».

Cuándo usarlo

En el pie de un mensaje de un asistente (meta de ChatMessage).
En un resumen de una tarea o de una conversación.

Cuándo no

Para un panel de costes con series y periodos: es un gráfico.
Para una cifra grande de resumen: es un Stat.

Teclado: no es interactivo; no entra en la tabulación.

Accesibilidad: el texto visible va compacto y oculto al lector; lo que se oye es la frase entera, «Uso: 1234 tokens, 0,03 US$». Un coste menor de un céntimo no sale como 0,00: se escribe con cuatro decimales.

Aspecto fino: hereda el color y el tamaño del texto pequeño; no tiene variables propias.

Cómo se ve

<UsageBadge tokens={1234} cost={0.03} currency="USD" />
<UsageBadge tokens={482000} cachedTokens={391000} cost={1.84} currency="EUR" />
<UsageBadge cost={0.03} currency="USD" />

Props

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

Prop	Tipo	Para qué sirve
`cachedTokens`	`number`	De esos tokens, cuantos salieron de la cache del proveedor. Se ensena como porcentaje: «62 % en cache».
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`cost`	`number`	Lo que ha costado.
`currency`	`string`	La moneda del coste, en ISO 4217. Por defecto, dolares.
`tokens`	`number`	Tokens gastados. Se escriben en compacto: «1,2 mil».

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: