用于聊天的气泡组件。
常用于聊天的时候。
:::demo 基础用法。
bubble/basic
:::
:::demo 通过 avatar 设置自定义头像,通过 placement 设置位置,提供了 start、end 两个选项。
bubble/avatar-and-placement
:::
:::demo 通过 header 和 footer 属性设置气泡的头部和底部。
bubble/header-and-footer
:::
:::demo 通过 loading 属性控制加载状态。
bubble/loading
:::
:::demo 通过设置 typing 属性,开启打字效果。更新 content 如果是之前的子集,则会继续输出,否则会重新输出。
bubble/typing
:::
:::demo 配合 markdown-it 实现自定义渲染内容。
bubble/markdown
:::
:::demo 通过 variant 属性设置气泡的样式变体。
bubble/variant
:::
:::demo 通过 shape 属性设置气泡的形状。
bubble/shape
:::
:::demo 预设样式的气泡列表,支持自动滚动。使用 roles 设置气泡默认属性。
bubble/list
:::
:::demo 示例通过语义化以及加载定制,来调整气泡效果。
bubble/bubble-custom
:::
:::demo 自定义气泡列表内容,这对于个性化定制场景非常有用。
bubble/list-custom
:::
@antv/GPT-Vis 仅支持React。
:::demo 配合 @antv/GPT-Vis 实现大模型输出的图表渲染,支持模型流式输出。
bubble/gpt-vis
:::
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| avatar | 展示头像 | VNode | - | |
| classNames | 语义化结构 class | Record | - | |
| content | 聊天内容 | string | - | |
| footer | 底部内容 | VNode | - | |
| header | 头部内容 | VNode | - | |
| loading | 聊天内容加载状态 | boolean | - | |
| placement | 信息位置 | start | end |
start |
|
| shape | 气泡形状 | round | corner |
- | |
| styles | 语义化结构 style | Record | - | |
| typing | 设置聊天内容打字动画 | boolean | { step?: number, interval?: number } | false | |
| variant | 气泡样式变体 | filled | borderless | outlined | shadow |
filled |
|
| loadingRender | 自定义渲染加载态内容 | () => VNode | - | |
| messageRender | 自定义渲染内容 | (content?: string) => VNode | - | |
| onTypingComplete | 打字效果完成时的回调,如果没有设置 typing 将在渲染时立刻触发 | () => void | - |
| 插槽名 | 说明 | 类型 |
|---|---|---|
| avatar | 头像 | - |
| header | 头部面板 | - |
| footer | 底部内容 | - |
| loading | loading占位 | - |
| message | 消息内容 | { content: string } |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoScroll | 当内容更新时,自动滚动到最新位置。如果用户滚动,则会暂停自动滚动。 | boolean | true | |
| items | 气泡数据列表 | (BubbleProps & { key?: string | number, role?: string })[] | - | |
| roles | 设置气泡默认属性,items 中的 role 会进行自动对应 |
Record | (bubble) => BubbleProps | - |