logoAnt Design X

设计研发组件演示
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • ThoughtChain思维链
  • 工具
    • useXAgent模型调度
    • useXChat数据管理
    • XStream流
    • XRequest请求
    • XProvider全局化配置

Bubble
对话气泡

用于聊天的气泡组件。
使用import { Bubble } from "@ant-design/x";
源码components/bubble
文档
编辑此页更新日志

相关资源

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

常用于聊天的时候。

代码演示

hello world !
基本

基础用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Good morning, how are you?
What a beautiful day!
Hi, good morning, I'm fine!
Thank you!
支持位置和头像

通过 avatar 设置自定义头像，通过 placement 设置位置，提供了 start、end 两个选项。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Ant Design X
Hello, welcome to use Ant Design X! Just ask if you have any questions.
头和尾

通过 header 和 footer 属性设置气泡的头部和底部。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Loading state:
加载中

通过 loading 属性控制加载状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
A
A💗
打字效果

通过设置 typing 属性，开启打字效果。更新 content 如果是之前的子集，则会继续输出，否则会重新输出。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义渲染

配合 markdown-it 实现自定义渲染内容。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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 属性设置气泡的样式变体。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.
形状

通过 shape 属性设置气泡的形状。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.
气泡列表

预设样式的气泡列表，支持自动滚动。使用 roles 设置气泡默认属性。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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...
语义化自定义

示例通过语义化以及加载定制，来调整气泡效果。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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%
自定义列表内容

自定义气泡列表内容，这对于个性化定制场景非常有用。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
使用 GPT-Vis 渲染图表

配合 @antv/GPT-Vis 实现大模型输出的图表渲染，支持模型流式输出。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考：通用属性

Bubble

属性说明类型默认值版本
avatar展示头像React.ReactNode-
classNames语义化结构 classRecord<SemanticDOM, string>-
content聊天内容string-
footer底部内容React.ReactNode | (content: BubbleContentType) => React.ReactNode-
header头部内容React.ReactNode-
loading聊天内容加载状态boolean-
placement信息位置start | endstart
shape气泡形状round | corner-
styles语义化结构 styleRecord<SemanticDOM, CSSProperties>-
typing设置聊天内容打字动画boolean | { step?: number, interval?: number }false
variant气泡样式变体filled | borderless | outlined | shadowfilled
loadingRender自定义渲染加载态内容() => ReactNode-
messageRender自定义渲染内容(content?: string) => ReactNode-
onTypingComplete打字效果完成时的回调，如果没有设置 typing 将在渲染时立刻触发() => void-

Bubble.List

属性说明类型默认值版本
autoScroll当内容更新时，自动滚动到最新位置。如果用户滚动，则会暂停自动滚动。booleantrue
items气泡数据列表(BubbleProps & { key?: string | number, role?: string })[]-
roles设置气泡默认属性，items 中的 role 会进行自动对应Record<string, BubbleProps> | (bubble, index) => BubbleProps-

Semantic DOM

Ant Design X
Feel free to use Ant Design !
  • avatar
    头像的外层容器
  • header
    头部的容器
  • content
    聊天内容的容器
  • footer
    底部的容器

主题变量（Design Token）