index.en-US.md

category	Components
group	title order Common 0
title	Bubble
description	A bubble component for chat.
cover	https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rHIYQIL1X-QAAAAAAAAAAAAADgCCAQ/original
coverDark	https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*uaGhTY1-LL0AAAAAAAAAAAAADgCCAQ/original
demo	cols 1

When To Use

Often used when chatting.

Examples

Basic Placement and avatar Header and footer Loading Typing effect Content render Variant Shape Bubble List Semantic Custom Custom List Content Using GPT-Vis to render charts Reference debug debug list

API

Common props ref：Common props

Bubble

Property	Description	Type	Default	Version
avatar	Avatar component	React.ReactNode	-
classNames	Semantic DOM class	Record<SemanticDOM, string>	-
content	Content of bubble	string	-
footer	Footer content	React.ReactNode	-
header	Header content	React.ReactNode	-
loading	Loading state of Message	boolean	-
placement	Direction of Message	start | end	start
shape	Shape of bubble	round | corner	-
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-
typing	Show message with typing motion	boolean | { step?: number, interval?: number }	false
variant	Style variant	filled | borderless | outlined | shadow	filled
loadingRender	Customize loading content	() => ReactNode	-
messageRender	Customize display content	(content?: string) => ReactNode	-
onTypingComplete	Callback when typing effect is completed. If typing is not set, it will be triggered immediately when rendering.	() => void	-

Bubble.List

Property	Description	Type	Default	Version
autoScroll	When the content is updated, scroll to the latest position automatically. If the user scrolls, the automatic scrolling will be paused.	boolean	true
items	Bubble items list	(BubbleProps & { key?: string | number, role?: string })[]	-
roles	Set the default properties of the bubble. The role in items will be automatically matched.	Record<string, BubbleProps> | (bubble, index) => BubbleProps	-

Semantic DOM

Design Token