---
title: Bubble 对话气泡
group:
  title: 对话
  path: /Bubble
  order: 2
---

# Bubble 消息卡片

通用AI对话消息卡片

## 示例

<code src="../../examples/Bubble"></code>

## Props

### Bubble

| 属性            | 类型                                                           | 是否必传 | 默认值 | 说明                                                 |
| --------------- | -------------------------------------------------------------- | -------- | ------ | ---------------------------------------------------- |
| role            | `'user' \| 'assistant'`                                        | 是       | -      | 气泡角色类型                                         |
| avatar          | `string \| React.ReactNode`                                    | 否       | -      | 头像。可传图片或React节点                            |
| content         | `string`                                                       | 否       | -      | 气泡文本/消息内容                                    |
| loading         | `boolean \| React.ReactNode`                                   | 否       | false  | 加载态（如思考中）                                   |
| time            | `number \| string \| dayjs`                                    | 否       | -      | 消息时间                                             |
| className       | `string`                                                       | 否       | -      | 自定义类名                                           |
| showHeader      | `boolean`                                                      | 否       | false  | 是否展示头部                                         |
| header          | `React.ReactNode \| (props: BubbleProps) => React.ReactNode`   | 否       | -      | 头部插槽                                             |
| footer          | `React.ReactNode \| (props: BubbleProps) => React.ReactNode`   | 否       | -      | 底部插槽                                             |
| footerPlacement | `'inner' \| 'outside'`                                         | 否       | inner  | 底部插槽显示位置，inner: 卡片内部；outside: 卡片外部 |
| variant         | `'outlined' \| 'filled' \| 'shadow' \| 'borderless'`           | 否       | shadow | 卡片变体样式（描边/填充/阴影）                       |
| shape           | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | 否       | -      | 卡片四角形状样式(`variant`为`borderless`时无效)      |


### Bubble List

| 属性                | 类型                                              | 是否必传 | 默认值 | 说明                                                                                                                        |
| ------------------- | ------------------------------------------------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------- |
| roles               | `Role[]`                                          | 是       | -      | 角色列表（包含所有会用到的角色及头像等信息）                                                                                |
| messages            | `Message[]`                                       | 是       | -      | 消息数组                                                                                                                    |
| fallbackPlaceholder | `string \| React.ReactNode`                       | 否       | -      | 当没有消息时的占位内容                                                                                                      |
| loading             | `boolean`                                         | 否       | -      | 是否展示加载中状态                                                                                                          |
| children            | `(props: BubbleListPropsItem) => React.ReactNode` | 是       | -      | 渲染每一个消息气泡的方法(AI回答默认采用react-markdown渲染，可以采用自定义替换，如@ant-design/agentic-ui中的 MarkdownEditor) |
| className           | `string`                                          | 否       | -      | 自定义类名                                                                                                                  |


#### Role

| 属性   | 类型                        | 是否必传 | 默认值 | 说明                           |
| ------ | --------------------------- | -------- | ------ | ------------------------------ |
| role   | `'user' \| 'assistant'`     | 是       | -      | 角色类型                       |
| avatar | `string \| React.ReactNode` | 否       | -      | 角色头像（图片URL或React节点） |
| name   | `string`                    | 否       | -      | 角色名称                       |

#### Message
| 属性      | 类型                                    | 是否必传 | 默认值 | 说明                |
| --------- | --------------------------------------- | -------- | ------ | ------------------- |
| role      | `'user' \| 'assistant'`                 | 是       | -      | 消息所属角色        |
| content   | `string`                                | 否       | -      | 消息内容            |
| loading   | `boolean \| React.ReactNode`            | 否       | -      | 是否为加载态        |
| time      | `number \| string`                      | 否       | -      | 消息时间            |
| status    | `'success' \| 'error' \| 'pending'`     | 否       | -      | 消息状态            |
| onRefresh | `() => void`                            | 否       | -      | 重试/刷新的回调函数 |