Ant Design X

Bubble

A bubble component for chat.

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

Sourcecomponents/bubble

Docs

Edit this page Changelog

When To Use

Often used when chatting.

Examples

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 \| (content: BubbleContentType) => 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, index) => BubbleProps	-

Semantic DOM

Design Token

Basic

Basic usage.

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.

Header and footer

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

Loading

Control the loading state by loading prop.

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

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

Shape

Set the shape of bubble through shape.

Bubble List

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

Semantic Custom

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

Custom List Content

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

Using GPT-Vis to render charts

Cooperate with @antv/GPT-Vis to achieve customized rendering chart of LLM stream output.

hello world !

Good morning, how are you?

What a beautiful day!

Hi, good morning, I'm fine!

Thank you!

Ant Design X

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

Loading state:

A

A💗

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?

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

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: corner

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.

Use roles as:

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.

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...

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%

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