Reasoning

A collapsible "chain of thought" disclosure that tracks streaming duration and splits text into labelled sections.

View as Markdown View source

Planning the approach

Check the existing layout, then decide which axis needs centering.

Verifying

Confirm the element centers both horizontally and vertically.

Usage guidelines

Chain-of-thought disclosure — a collapsible block for a model's thinking.
Live label — shimmers "Thinking…" while streaming and settles to "Thought for Ns" when it stops; the duration is tracked for you.
Sectioned content — bold **Header** lines split the text into labelled sections, rendered as markdown.
State via useReasoning — read streaming, open, and duration from anywhere inside.
Get started — see Installation to add the package and copy the component.

Anatomy

<Reasoning isStreaming={isStreaming}>
  <Reasoning.Trigger />
  <Reasoning.Content>{reasoningText}</Reasoning.Content>
</Reasoning>

Driven from a streaming message, passing the reasoning parts' text:

<Reasoning isStreaming={isLast && isStreaming} defaultOpen={false}>
  <Reasoning.Trigger label={headers} />
  <Reasoning.Content>{texts}</Reasoning.Content>
</Reasoning>

useReasoning

Read the disclosure state from anywhere inside <Reasoning>:

Prop	Type	Default
`isStreaming`	`boolean`	—
Name `isStreaming` Description Whether reasoning is still streaming in. Type `boolean` Default —
`isOpen`	`boolean`	—
Name `isOpen` Description Whether the panel is open. Type `boolean` Default —
`setIsOpen`	`(open: boolean) => void`	—
Name `setIsOpen` Description Toggle the panel. Type `(open: boolean) => void` Default —
`duration`	`number \| undefined`	—
Name `duration` Description Tracked streaming duration in seconds. Type `number \| undefined` Default —

Accessibility

Built on a disclosure: Reasoning.Trigger is a <button> with aria-expanded and aria-controls pointing at the panel, so screen readers announce the collapsed/expanded state and the relationship. While isStreaming, the root carries aria-busy so assistive tech knows the content is still updating.

API reference

Every part accepts className, style, and render (see PrimitiveProps) and emits a bespoke part attribute (data-<part>) unless noted.

Reasoning

The disclosure root. Renders data-reasoning.

Prop	Type	Default
`isStreaming`	`boolean`	`false`
Name `isStreaming` Description While true the trigger shimmers; the streamed duration is captured when it flips false. Type `boolean` Default `false`
`duration`	`number`	—
Name `duration` Description Override the tracked streaming duration (seconds). Type `number` Default —
`defaultOpen`	`boolean`	`false`
Name `defaultOpen` Description Uncontrolled initial open state. Type `boolean` Default `false`
`open`	`boolean`	—
Name `open` Description Controlled open state. Type `boolean` Default —
`onOpenChange`	`(open: boolean) => void`	—
Name `onOpenChange` Description Fires on toggle. Type `(open: boolean) => void` Default —

Attribute	Description
`data-reasoning`	The disclosure root.
`data-streaming`	Present while isStreaming is true.
`data-open`	Present while open.
`data-closed`	Present while closed.

Reasoning.Trigger

The toggle. Renders a <button> with data-reasoning-trigger. Without children it shows the default thinking/thought message.

Prop	Type	Default
`label`	`string[]`	—
Name `label` Description Streaming section headers; the last one labels the live "Thinking…" message. Type `string[]` Default —
`getThinkingMessage`	`(isStreaming, duration?, label?) => { key, component }`	—
Name `getThinkingMessage` Description Override the animated trigger label. Type `(isStreaming, duration?, label?) => { key, component }` Default —
`children`	`ReactNode`	—
Name `children` Description Replaces the default trigger content entirely. Type `ReactNode` Default —

Attribute	Description
`data-reasoning-trigger`	The toggle button.
`data-open`	Present while open.
`data-closed`	Present while closed.

Reasoning.Content

The collapsible panel. Renders data-reasoning-content. Bold **Header** lines split the text into sections rendered as markdown.

Prop	Type	Default
`children`	`string \| string[]`	`(required)`
Name `children` Description Reasoning text; bold headers split it into sections. Type `string \| string[]` Default `(required)`
`keepMounted`	`boolean`	`false`
Name `keepMounted` Description Keep the panel in the DOM (hidden) when closed. Type `boolean` Default `false`

Attribute	Description
`data-reasoning-content`	The panel.
`data-open`	Present while open.
`data-closed`	Present while closed.
`data-starting-style`	Present on the first open frame (enter transition).
`data-ending-style`	Present while the exit animation runs.