AiThoughtChain
AiThoughtChain visualizes the reasoning steps of an AI model. It supports single-node and multi-node timeline modes, with drag-and-drop reordering, per-node progress, and Markdown-powered text rendering.
Basic Usage
Single node mode, similar to AiThinking but with a side border. Great for inline reasoning blocks.
Multi-node Timeline & Progress (Smooth Animation)
When you pass an items list, the component switches to timeline mode and renders each reasoning step in order. You can attach status and progress to each node and show an aggregated progress bar at the top.
TIP
Smooth Interaction: The component features a built-in smooth expand/collapse animation powered by CSS Grid. When you click a node to toggle its details, the content area slides naturally without jarring layout shifts.
Editable & Draggable Nodes
Enable draggable and editable to support drag-and-drop reordering, deleting steps, and inserting new steps. Node content is rendered with Markdown by default to better express complex reasoning.
Events & Interaction
With editing and drag features enabled, you can react to user actions via events and keep external state in sync:
Nuxt Support
Thought chain interactions are fully Nuxt 3/4 SSR compatible. Component state hydration is handled at mount.
For more information, see Nuxt Integration Guide.
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
| title | Title (single-node mode) | string | — |
| content | Content (single-node mode) | string | — |
| status | Overall status (works with both single and multi-node modes) | 'thinking' | 'loading' | 'success' | 'complete' | 'error' | 'none' | 'none' |
| items | Reasoning steps; enables timeline mode when provided | AiThoughtItem[] | [] |
| autoCollapse | Auto-collapse single-node content once status becomes done | boolean | true |
| dot-size | Node dot size | 'small' | 'default' | 'large' | 'default' |
| line-gradient | Whether the vertical line uses a gradient | boolean | false |
| show-progress | Whether to show a global progress bar on top | boolean | false |
| draggable | Enable drag-and-drop reordering of steps | boolean | false |
| editable | Enable node operations (add / delete), usually with drag | boolean | false |
| markdown | Render content / description using Markdown | boolean | true |
| theme-overrides | Instance-level theme overrides (from @yh-ui/theme) | ComponentThemeVars | — |
AiThoughtItem Structure
| Name | Description | Type |
|---|---|---|
| title | Step title | string |
| content / description | Detailed step text | string |
| status | Step status | AiThoughtStatus |
| expanded | Whether details are expanded by default | boolean |
| icon | Custom icon name | string |
| id | Unique identifier for drag / updates | string |
| extra | Extra business payload | Record<string, unknown> |
| progress | Step progress percentage 0-100 | number |
| clickable | Whether the step content is clickable | boolean |
Events
| Name | Description | Payload |
|---|---|---|
| update:items | Fired when the items list is updated | (items: AiThoughtItem[]) |
| node-click | Fired when a node content is clicked | (item: AiThoughtItem, index: number) |
| node-delete | Fired when the delete button is used | (item: AiThoughtItem, index: number) |
| node-add | Fired when a new node is requested | (index: number) |
| reorder | Fired after drag-and-drop reordering | (items: AiThoughtItem[]) |
Slots
| Name | Description |
|---|---|
| default | Custom content for single-node use |
Theme Variables
AiThoughtChain is deeply integrated with the design system:
AI ThoughtChain CSS Variables
| Variable Name | Default Value |
|---|---|
--yh-ai-thought-chain-line-color | var(--yh-border-color-lighter) |
--yh-ai-thought-chain-active-color | var(--yh-color-primary) |