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
Pinning & Grouping
Supported grouping by time by default, and pinning conversations.
Pinning & Grouping
Virtual Scroll
Use virtual-scroll to improve performance for massive history items.
Virtual Scroll
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 | — |
| grouped | Whether to group conversations by time | boolean | true |
| virtual-scroll | Enable virtual scroll | boolean | false |
| virtual-scroll-height | Container height for virtual scroll | number | 400 |
| virtual-scroll-item-height | Item height for virtual scroll | number | 50 |
| virtual-scroll-overscan | Number of items to render outside viewport | number | 3 |
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 |
| pin | Emitted when clicking Pin button | (item: AiConversation, pinned: boolean) => void |
Slots
| Name | Description | Slot Scope |
|---|---|---|
| add-icon | Custom icon for Add button | — |
| add-text | Custom text for Add button | — |
| group-label | Custom text for group labels | { label: string } |
| edit-icon | Custom icon for Edit button | — |
| delete-icon | Custom icon for Delete button | — |
| empty | Layout when list is empty | — |
Methods
| Name | Description | Parameters |
|---|---|---|
| scrollToItem | Scroll to item by ID | (id: string) |
| scrollToIndex | Scroll to item by index | (index: number) |
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 |