AiThoughtChain
Used to display multiple steps or complex reasoning paths taken by the AI. Supports single-node and multi-node timeline views.
Basic Usage
Single node mode, similar to AiThinking but with side border. Great for long text blocks.
Analyzing code...
Thinking complete
Basic Usage
Multi-node Timeline
Pass a list of steps to the items prop for a full timeline reasoning trace.
Analysis
Context Search
Generation
Verification
Timeline Mode
Nuxt Support
Thinking chain interactions are Nuxt 3/4 SSR compatible. Component state hydrations are handled at mount.
For more information, see Nuxt Integration Guide.
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
| title | Title (Single mode) | string | — |
| content | Content (Single mode) | string | — |
| status | Overall status | 'thinking' | 'loading' | 'success' | 'complete' | 'error' | 'none' | 'none' |
| items | Reasoning steps | AiThoughtItem[] | [] |
| dot-size | Node dot size | 'small' | 'default' | 'large' | 'default' |
| line-gradient | Whether the line has gradient | boolean | false |
| auto-collapse | Collapses once status is complete (Single) | boolean | false |
AiThoughtItem Structure
| Name | Description | Type |
|---|---|---|
| title | Step title | string |
| content / description | Step details text | string |
| status | Step status | AiThoughtStatus |
| expanded | Whether details are expanded | boolean |
| icon | Custom icon name | string |
Slots
| Name | Description |
|---|---|
| default | Detail area for single node mode |
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) |