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