何时使用

常用于聊天的时候。

代码演示

debug 基本 支持位置和头像 头和尾 加载中 打字效果 自定义渲染 变体 形状 气泡列表 语义化自定义 自定义列表内容 使用 GPT-Vis 渲染图表

通用属性参考：通用属性

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

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