Chain of Thought | Tuff Docs

Usage

Loading demo...

Key steps by a stable id, not an array index.
Keep at most one active step; auto-scroll follows only one.
Move a finished step from active to done or error, or its spinner stays.
Write tool titles as call signatures (read_file(src/main.ts)), not bare tool names.
For custom step rendering, compose TxReasoningDisclosure and TxToolCallCard.

Name	Type	Default	Description
`steps`	`AiChainStep[]`	—	The steps, required. `AiChainStep` is `{ id, kind: 'thinking' \| 'tool', title, body?, status: 'active' \| 'done' \| 'error', durationMs? }`.
`streaming`	`boolean`	`false`	Output is still arriving; with an active step, the header shows a thinking orb.
`defaultOpen`	`boolean`	`true`	Open state while not streaming.
`label`	`string`	`'Chain of thought'`	Header label; override it on non-English surfaces.
`userOpen`	`boolean`	—	Host-held open state that overrides everything; feed `toggle` back in so it survives remounts.

Name	Payload	Description
`toggle`	`(open: boolean)`	Fires on a header click with the resulting open state.

Open state: userOpen wins, then a user click; otherwise it follows active steps while streaming and defaultOpen when not.
When any step's body grows, the active step's body scrolls to its end.
A done step with durationMs shows its duration after the title (· 3.2s; whole seconds from 10s).
The header count is steps.length, hidden for a single step.
The header is a native <button> with aria-expanded and aria-controls; steps are an <ol>.