AiThinking
Used to display the reasoning state of AI models before generating the final output, allowing detailed thoughts to be collapsed for a cleaner chat interface.
Basic Usage
Control the current thinking state using the status prop.
Basic Usage
Auto Collapse
Set auto-collapse to true. When status changes to end, the component will automatically collapse the detail area.
Thinking complete
Auto Collapse
Nuxt Support
This component fully supports Nuxt 3/4 SSR. In a Nuxt project, it is auto-imported.
For more details, refer to Nuxt Integration Guide.
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
| modelValue / v-model | Whether the details are expanded | boolean | false |
| status | Thinking status | 'start' | 'thinking' | 'end' | 'error' | 'thinking' |
| title | Custom title text | string | — |
| content | Detail content text | string | — |
| auto-collapse | Collapses once status is 'end' | boolean | false |
Slots
| Name | Description |
|---|---|
| default | Custom details section content |
Theme Variables
AiThinking uses a compact design to maintain clarity in message flows while offering high extensibility:
AI Thinking CSS Variables
| Variable Name | Default Value |
|---|---|
--yh-ai-thinking-bg | var(--yh-fill-color-light) |
--yh-ai-thinking-border-radius | 8px |