ThinkingBlock
thinking-blockReveals or collapses an agent reasoning trace with active and completed states.
Usage
Basic usage
Completed reasoning: Click on the head to expand/collapse the thought chain.
tsx
<ThinkingBlock duration="Thinking 3s">
{reasoning}
</ThinkingBlock>Thinking
When thinking, the title rotates + the highlight flows, and is expanded by default.
The user should make the homepage 100% dogfood. First look at what components are used in the existing page.tsx, then check what replaceable typesetting/layout primitives are in the library, and finally replace them block by block and fill the gaps.
tsx
<ThinkingBlock thinking>
{reasoning}
</ThinkingBlock>Custom title
title overrides the default "Thinking Process", duration marks time-consuming.
tsx
<ThinkingBlock title="Planning task disassembly" duration="2.4s">
{reasoning}
</ThinkingBlock>Expand by default
defaultOpen Make completed blocks also expand the text by default.
The user should make the homepage 100% dogfood. First look at what components are used in the existing page.tsx, then check what replaceable typesetting/layout primitives are in the library, and finally replace them block by block and fill the gaps.
tsx
<ThinkingBlock defaultOpen duration="Thinking 1s">
{reasoning}
</ThinkingBlock>When to Use
Use it to disclose a concise, user-facing reasoning summary or progress narrative. The header is highlighted while work is in progress and can collapse after completion. Use AgentPlan for structured steps or ToolCall for one tool invocation.
Import
ts
import { ThinkingBlock } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| thinking | boolean | false | Active state with a spinner and highlight; also supplies the default expanded state |
| defaultOpen | boolean | With thinking | Uncontrolled initial expansion state |
| open | boolean | — | Controlled expansion state |
| className | string | — | Container class name |
Events
| Event | Type | Description |
|---|---|---|
| onOpenChange | (open: boolean) => void | Called when the expanded state changes |
Slots
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Header title; defaults to \u601d\u8003\u8fc7\u7a0b ("Thinking process") |
| duration | ReactNode | Muted duration label beside the title, such as "Thought for 3s" |
| children | ReactNode | Reasoning or progress content; wrap rendered Markdown in <Prose /> |
Usage Guidelines
- Choose either controlled or uncontrolled state. Pair
openwithonOpenChange; usedefaultOpenonly to set the initial uncontrolled value. - When
defaultOpen/openis not passed, the expanded state defaults tothinking(expanded during thinking, collapsed after completion).
Related
ToolCall · AgentPlan · Dossier · Artifact · ConfirmCard · ThreadList
Playground
<ThinkingBlock>{reasoning}</ThinkingBlock>