Bubble

Bubble component for displaying conversation messages, supporting multiple style variants and interactive effects. The Bubble component is one of the core components for building conversational AI interaction interfaces. It simulates the message bubble style commonly seen in chat applications, supporting text, Markdown rendering, and typewriter animation effects for a more natural and smooth AI conversation experience.

Basic Usage

Variants and Shapes

Markdown

Props

Property	Description	Type	Default
placement	Bubble position	'start' | 'end'	'start'
content	Bubble content	string	''
typing	Whether to enable typewriter effect	boolean	false
typingOver	Content output completion flag, typewriter auto-completes when true	boolean	true
loading	Whether to show loading state	boolean	false
isMarkdown	Whether to render Markdown content	boolean	false
variant	Bubble variant style	'filled' | 'outlined' | 'shadow' | 'borderless'	'filled'
shape	Bubble shape	'default' | 'round' | 'corner'	'default'

Slots

Slot Name	Description	Scope Parameters
default	Custom bubble content, overrides content prop. With typewriter, content gradually fills	content: string
avatar	Custom avatar area	-
header	Custom header area	-
footer	Custom footer area	-

Exposes

Method Name	Description	Type
overTyperwriter	Immediately complete typewriter effect	() => void