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

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[]	[]

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)