AiBubble

AiBubble is the core component for AI conversation interaction.

Basic Usage

Display visual differences between user and assistant, along with loading animations.

Artificial Intelligence (AI) is technology that can perform tasks that typically require human intelligence.

Can it write code by itself?

Basic Usage

Advanced Features & Variants

AiBubble features a built-in Markdown engine and highlight.js parsing. It offers various variants (variant), shapes (shape), and specialized metadata support.

10:23 AM

This is a Markdown rendering example. Let’s see some code:

const greeting = 'Hello World';
console.log(greeting);

Great! Can I change the style?

Sure, this is outlined mode.

It looks really premium.

If you don’t like outlines, you can use borderless mode.

Advanced Combo

Typewriter Effect & 60fps Streaming

More than just a loading state, it allows text to flow out with a flickering cursor, mimicking the AI writing experience.

• Streaming Performance: Under the hood, we introduced a requestAnimationFrame debouncing queue. When receiving high-frequency text payloads in typing mode, it stabilizes the intense Markdown parsing and keeps your browser refreshing at a seamless 60 frames per second without blocking the main thread!

Typewriter Effect

Citations & Reference Tooltip

AI responses often need verification to avoid hallucinations. Besides appending a raw list at the bottom, we injected a smart Citation syntax interceptor natively. If the citations array is present and the model outputs Markdown tags like [1] or [2]: the bubble automatically transforms them into interactive, softly-glowing citation badges. 💡 Try it: Hover your mouse over [1], [2], or [3] in the text below to trigger the elegant floating citation popover.

According to the latest YH-UI guide ¹, we recommend using Composition API ². Moreover, Vite’s build optimizations ³ can significantly improve UX.

Citations3

1YH-UI Official Docs2Vue 3 Composition API Guide3Vite Developer Community

Citations

Multimodal Rendering

The component supports direct display of various media formats, including image grids, audio players with waveform animations, and file/download cards.

Here are the audio assets and reference documents I generated for you.

0:02

Requirements.pdf

1.2 MB

Multimodal

Theme Overrides

Besides global CSS variables, you can use the theme-overrides property for granular instance-level styling.

I’ve adjusted my appearance based on your brand colors.

Instance Level Overrides

API

Props

Property	Description	Type	Default
content	Message content	string	''
markdown	Enable Markdown & highlight.js	boolean	true
role	Sender role	'user' | 'assistant' | 'system'	'assistant'
placement	Bubble side	'start' | 'end'	Inferred from role
shape	Corner shape	'corner' | 'round'	'corner'
variant	Visual style	'filled' | 'outlined' | 'shadow' | 'borderless'	'filled'
time	Timestamp label	string	—
avatar	Custom avatar URL	string	—
loading	Whether is loading	boolean	false
typing	Show typewriter cursor animation	boolean	false
citations	Citation sources list	AiCitation[]	[]
multimodal	Multimodal content list	AiMultimodal[]	[]
themeOverrides	Theme variable overrides	ComponentThemeVars	—

AiCitation

Property	Description	Type
id	Index identifier	string | number
title	Title of source	string
url	Web link	string
source	Source site name	string
icon	Source icon	string

AiMultimodal

Property	Description	Type
type	Media type	'image' | 'audio' | 'file' | 'video'
title	Title/Filename	string
url	Resource URL	string
size	Resource size	string
extra	Extra args (e.g. duration)	Record<string, unknown>

Slots

Name	Description	Props
default	Custom content	—
avatar	Custom avatar	—
header	Custom header	—
footer	Custom footer	—

Theme Variables

Variable Name	Description	Default Value
--yh-ai-bubble-user-bg	User bubble background	var(--yh-color-primary)
--yh-ai-bubble-user-color	User bubble text color	var(--yh-color-white)
--yh-ai-bubble-assistant-bg	AI bubble background	var(--yh-fill-color-light)
--yh-ai-bubble-assistant-color	AI bubble text color	var(--yh-text-color-primary)
--yh-ai-bubble-border-radius	Bubble border radius	12px