AiConversations
AiConversations is a sidebar component tailored for AI chat sessions, offering full interactive capabilities for creating, switching, renaming, and deleting conversations.
Basic Usage
Demonstrates basic list rendering and interactions.
Basic Usage
Custom Theme
Use theme-overrides to customize component styles.
Custom Theme
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
| data | List data | AiConversation[] | [] |
| activeId | Currently active ID | string | '' |
| loading | Shows loading state | boolean | false |
| theme-overrides | Theme variables override | AiConversationsThemeVars | — |
Events
| Name | Description | Callback Parameters |
|---|---|---|
| update:activeId | Emitted when selection changes | (id: string) => void |
| create | Emitted when clicking Add button | () => void |
| delete | Emitted when clicking Delete button | (item: AiConversation) => void |
| edit | Emitted when finishing title edit | (item: AiConversation, newTitle: string) => void |
| click | Emitted when clicking list item | (item: AiConversation) => void |
Slots
| Name | Description | Slot Scope |
|---|---|---|
| add-icon | Custom icon for Add button | — |
| add-text | Custom text for Add button | — |
| edit-icon | Custom icon for Edit button | — |
| delete-icon | Custom icon for Delete button | — |
| empty | Layout when list is empty | — |
Use in Nuxt
This component fully supports Nuxt 3/4. In Nuxt projects, the component will be automatically imported.
For detailed configuration, please see Nuxt Integration.
Theme Variables
| Variable Name | Description | Default Value |
|---|---|---|
--yh-ai-conversations-bg-color | Container background color | var(--yh-bg-color) |
--yh-ai-conversations-border-color | Border color | var(--yh-border-color) |
--yh-ai-conversations-header-padding | Header padding | 16px |
--yh-ai-conversations-item-padding | Item padding | 12px 16px |
--yh-ai-conversations-hover-bg-color | Item hover background color | var(--yh-bg-color-page) |
--yh-ai-conversations-active-bg-color | Active item background color | var(--yh-color-primary-light-9) |
--yh-ai-conversations-active-text-color | Active item text color | var(--yh-color-primary) |
--yh-ai-conversations-title-font-size | Title font size | 14px |
--yh-ai-conversations-time-font-size | Time font size | 12px |