Todos los componentes (204)

Razonamiento

IA · Reasoning · .amset-reasoning

Qué es y cuándo usarlo

El razonamiento de un modelo, plegado: mientras piensa va abierto y se ve crecer; al terminar se recoge solo y deja una línea, «Ha pensado durante 4,2 s».

Cuándo usarlo

Dentro de la respuesta de un asistente, antes del texto final, para enseñar el razonamiento sin que ocupe la conversación.
Para cualquier texto de proceso que importa a quien quiere comprobarlo y estorba a quien no.

Cuándo no

Para la respuesta en sí: eso es un ChatMessage.
Para una llamada a una herramienta, que tiene estado y resultado: es un ToolCall.

Teclado: es un botón de despliegue; Tab llega a él y Intro o Espacio lo abren y lo cierran. Quien lo abre o lo cierra a mano se queda como lo dejó cuando termina: el cierre automático solo vale para quien no ha tocado nada.

Accesibilidad: el bloque se marca como ocupado (aria-busy) mientras piensa y el título dice «Pensando…» con texto; el tiempo se escribe con los números del idioma. Plegado, el texto sigue siendo encontrable con el buscador del navegador.

Aspecto fino: variables CSS --amset-reasoning-ink (el color del texto) y --amset-reasoning-rule (la raya de la izquierda).

Cómo se ve

Estoy cruzando los tres pedidos pendientes con el extracto del banco. El #1047 no aparece todavía: puede que el cobro tenga otro concepto.

<Reasoning streaming defaultExpanded>
  Estoy cruzando los tres pedidos pendientes con el extracto del banco…
</Reasoning>

<Reasoning durationMs={4200}>
  Primero miro los pedidos pendientes de esta semana. Hay tres con el pago sin revisar.
</Reasoning>

Props

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

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	Lo que el modelo ha ido pensando. Texto corrido o lo que haga falta.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultExpanded`	`boolean`	Abierto al empezar. Por defecto, solo mientras piensa.
`durationMs`	`number`	Cuanto ha tardado, en milisegundos, cuando ya termino.
`expanded`	`boolean`	Controlado desde fuera. Con esto hay que pasar `onExpandedChange`.
`label`	`string`	Un titulo propio mientras piensa, en lugar de «Pensando…»: «Eligiendo destino», «En cola».
`onExpandedChange`	`(expanded: boolean) => void`	—
`startedAt`	`number`	Cuando empezo a pensar (una marca de `Date.now()`): mientras `streaming`, el titulo cuenta el tiempo en vivo, «Pensando… 3,2 s». Sin esto, dice solo «Pensando…».
`streaming`	`boolean`	Todavia esta pensando: el bloque va abierto y el titulo dice «Pensando…».

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

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-reasoning-ink`	`var(--amset-ink-2)`
`--amset-reasoning-rule`	`var(--amset-border)`

Cómo se cambia

.amset-reasoning {
  --amset-reasoning-ink: ...;
  --amset-reasoning-rule: ...;
}

En el banco de pruebas

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