AiChat

Provides an out-of-the-box AI conversational interface container. Features a pre-built suggestions array, context clear button, and seamless scrolling.

Basic Usage

Renders the conversation flow based on the messages array.

Hello! I am your AI assistant, how can I help you?

Basic Chat Flow

Advanced Interactions

With support for suggestions and clear functions, you can display what users might want to ask initially on a blank slate. Also, once messages hold history, the header clear button offers an easy way to reset memory.

Advanced Model

Generative UI (Dynamic Component Mounting)

AiChat possesses an exceptionally robust internal state isolation, meaning you can fully drive Generative UI directly through metadata in the dialogue context utilizing the #message slot. Based on metadata—such as triggered tool calls or deep reasoning steps—the <yh-ai-bubble> component empowers seamless integration of any external component logic inside its natural flow structure (e.g., embedding the AiThoughtChain).

Experiment by sending a message below to witness the seamless internal transition between rendering a logic chain UI and textual markdown.

I am capable of executing complex generative structure tasks for you.

Generative Component Rendering

Virtual Scroll

When dealing with large numbers of messages (e.g., more than 50), traditional rendering may cause performance issues. AiChat has built-in virtual scrolling functionality to efficiently render large message lists by only rendering items within the visible area, significantly improving performance.

• Auto-enable: Virtual scroll is automatically enabled when message count > 50
• Manual enable: Can be manually enabled via virtual-scroll prop
• Configurable: Supports custom container height and estimated item height
• Clear support: The header “Clear” action also works under virtual scroll mode to reset the entire history

User message #1

AI response #2, which may be longer to test virtual scroll.

User message #3

AI response #4, which may be longer to test virtual scroll.

User message #5

AI response #6, which may be longer to test virtual scroll.

User message #7

AI response #8, which may be longer to test virtual scroll.

User message #9

AI response #10, which may be longer to test virtual scroll.

Virtual Scroll Demo

Performance Tip

Virtual scroll is automatically enabled when message count exceeds 50. For chat scenarios dealing with thousands of messages, it is recommended to enable this feature for a smooth scrolling experience.

Use in Nuxt

This container wrapper perfectly embraces Nuxt 3/4 SSR and lazy hydrated behaviors. Works flawlessly under Nuxt's auto-importing environments.

For detail configurations, please check Nuxt Usage.

SSR Notes:

• ✅ Inner sub-components isomorphic generation supported
• ✅ Events bindings operate correctly

SSR Safety

AiChat wrapper natively passes SSR compliance checks across major frameworks.

API

Props

Name	Description	Type	Default
messages	Message List	Array<{id: string, role: string, content: string, status?: string, time?: string}>	[]
loading	Indicates if the AI is replying	boolean	false
suggestions	Bottom default suggestion pills	string[]	[]
virtualScroll	Enable virtual scroll (auto-enabled when messages > 50)	boolean	false
virtualHeight	Virtual scroll container height	number	400
estimatedItemHeight	Estimated item height for virtual scroll	number	80

Events

Name	Description	Parameter
send	Emitted on message sent	(message: string) => void
clear	Emitted on clearing history	() => void

Slots

Name	Description	Parameter
message	Customize message rendering per item	{ message: Record<string, unknown>, index: number }
sender	Customize the bottom sender block	—
header	Customize the top toolbar header	—

Theme Variables

Variable Name	Description	Default Value
--yh-ai-chat-bg	Chat container background color	var(--yh-bg-color)
--yh-ai-chat-header-bg	Top header toolbar background color	var(--yh-bg-color-page)
--yh-ai-chat-footer-bg	Bottom sender area background color	var(--yh-bg-color)