Bubble

A bubble component for chat.

Import

import{ Bubble }from"@ant-design/x";

Sourcecomponents/bubble

Docs

Edit this page Changelog

When To Use

Often used when chatting.

Examples

Basic

string bubble

longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

block block block block block block block block block block block block block block block block block block block block block block block block block

fixed width content

Basic placement: end

string bubble

longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

block block block block block block block block block block block block block block block block block block block block block block block block block

fixed width content

Custom

header

string bubble

header

longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

header

block block block block block block block block block block block block block block block block block block block block block block block block block

header

fixed width content

Custom placement: end

header

string bubble

header

longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

header

block block block block block block block block block block block block block block block block block block block block block block block block block

header

fixed width content

List

header

string bubble

header

longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

header

block block block block block block block block block block block block block block block block block block block block block block block block block

header

fixed width content

debug

Only use in debug to check Bubble

hello world !

Basic

Basic usage.

Good morning, how are you?

What a beautiful day!

Hi, good morning, I'm fine!

Thank you!

Placement and avatar

Set custom avatar by avatar prop, set the placement of the message by placement prop, which has two preset values: start and end.

Ant Design X

Hello, welcome to use Ant Design X! Just ask if you have any questions.

Header and footer

Use header and footer properties to set the header and footer of the bubble content.

Loading state:

Control the loading state by loading prop.

A💗

Typing effect

Enable typing output by setting the typing prop. If the updated content is a subset of the previous content, it will continue to output, otherwise it will output again.

Content render

Cooperate with markdown-it to achieve customized rendering content.

variant: filled

variant: outlined

variant: shadow

variant: borderless to customize

How to rest effectively after long hours of work?

What are the secrets to maintaining a positive mindset?

How to stay calm under immense pressure?

Variant

Set the style variant of the bubble through the variant property.

shape: default

This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component.

shape: round

shape: corner

Shape

Set the shape of bubble through shape.

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

Bubble List

Preset Bubble list. Support auto scroll. Use roles to set default properties of Bubble.

Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content.

Mock user content.

Custom loading...

Semantic Custom

Sample for adjusting the bubble effect through semantic and loading customization.

Normal message

ReactNode message

How to rest effectively after long hours of work?

What are the secrets to maintaining a positive mindset?

How to stay calm under immense pressure?

excel-file

.xlsx

Checking the data

word-file

.docx

23%

Custom List Content

Customize the content of the bubble list, which is very useful for personalized customization scenarios.

API

Common props ref：Common props

Bubble

Property	Description	Type	Default
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
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) => BubbleProps	-

Semantic DOM

Ant Design X

Feel free to use Ant Design !

avatar
Wrapper element of the avatar
header
Wrapper element of the header
content
Wrapper element of the content
footer
Wrapper element of the footer

Bubble

When To Use

Examples

variant: borderless to customize

API

Bubble

Bubble.List

Semantic DOM

avatar

header

content

footer

Design Token