All components (204)

Reasoning

AI · Reasoning · .amset-reasoning

What it is and when to use it

A model's reasoning, folded: while it thinks it stays open and you watch it grow; when it finishes it folds by itself and leaves one line, "Thought for 4.2 s".

When to use it

Inside an assistant's response, before the final text, to show the reasoning without it taking over the conversation.
For any process text that matters to whoever wants to check it and gets in the way of whoever does not.

When not to

For the response itself: that is a ChatMessage.
For a call to a tool, which has a status and a result: that is a ToolCall.

Keyboard: it is a disclosure button; Tab reaches it and Enter or Space open and close it. Whoever opens or closes it by hand stays as they left it when it finishes: the automatic fold only applies to whoever has not touched anything.

Accessibility: the block is marked busy (aria-busy) while it thinks and the title says "Thinking…" in text; the time is written with the numbers of the language. Folded, the text can still be found with the browser's search.

Fine-tuning: CSS variables --amset-reasoning-ink (the text colour) and --amset-reasoning-rule (the line on the left).

What it looks like

I am matching the three pending orders against the bank statement. #1047 has not shown up yet: the charge may have a different description.

<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

Import it with import { Reasoning } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	What the model has been thinking. Running text or whatever is needed.
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultExpanded`	`boolean`	Open at the start. By default, only while it thinks.
`durationMs`	`number`	How long it took, in milliseconds, once it has finished.
`expanded`	`boolean`	Controlled from outside. With this, `onExpandedChange` must be passed.
`label`	`string`	A title of your own while it thinks, instead of "Thinking…": "Choosing a destination", "Queued".
`onExpandedChange`	`(expanded: boolean) => void`	—
`startedAt`	`number`	When it began thinking (a `Date.now()` stamp): while `streaming`, the title counts the time live, "Thinking… 3.2 s". Without it, it just says "Thinking…".
`streaming`	`boolean`	Still thinking: the block is open and the title says "Thinking…".

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

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

How to change it

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

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: