Plus 组件 · Chat
对话
用于快速搭建对话内容

使用场景

Chat 组件可用于普通会话,AI 会话等场景。
对话内容渲染基于 MarkdownRender 组件,支持 Markdown 和 MDX,可实现图片,表格,链接,加粗,代码区等常用富文本功能。也可通过 JSX 实现更加复杂定制化的文档撰写与展示需求。

代码演示

如何引入

Chat 从 v2.63.0 版本开始支持。

基本用法

通过设置 chatsonChatsChangeonMessageSend 实现基础对话显示和交互。
附件支持通过点击上传按钮,输入框粘贴,拖拽文件至 Chat 区域上传。通过 uploadProps 设置上传参数,详情参考 Upload
上传按钮的提示文案可通过 uploadTipProps 设置,详情参考 Tooltip
对话是多方参与,多轮交互的场景。可通过 roleConfig 传入角色信息(包括名称,头像等),具体参数细节 RoleConfig
使用 align 属性可以设置对话的对齐方式,支持左右对齐(leftRight, 默认)和左对齐(leftAlign)。

消息状态

chats 类型为 Message[]Message 包含对话的各种信息,如角色(role)、内容(content)、附件(attachment)、状态(status) 、唯一标识(id)、创建时间(createAt)等,具体见 Message。其中 status 不同,会话样式不同。

动态更新数据

对于后台返回 Serve Side Event 数据情况,可将获取到的数据用于更新 chats,对话内容将实时更新。
showStopGenerate 参数可用于设置是否展示停止生成按钮,默认为 false。 可以在 onStopGenerator 中处理停止生成逻辑。

清除上下文

通过 showClearContext 可以开启在输入框中显示清除上下文按钮,默认为 false。 也可以通过 ref 调用 clearContext 方法清除上下文。

自定义渲染会话框

通过 chatBoxRenderConfig 传入自定义渲染配置, chatBoxRenderConfig 类型如下
自定义渲染头像和标题,可通过 renderChatBoxAvatarrenderChatBoxTitle 实现。
鼠标移动到会话上,即可显示会话操作区,通过 renderChatBoxAction 自定义渲染操作区
通过 renderChatBoxContent 自定义操作区域
使用 renderFullChatBox 自定义渲染整个会话框

自定义渲染输入框

可通过 renderInputArea 自定义渲染输入框,参数如下
使用示例如下

提示信息

通过 hints 可设置提示区域内容, 点击提示内容后,提示内容将成为新的用户输入内容,并触发 onHintClick 回调。

自定义提示信息渲染

通过 renderHintBox 自定义提示区域内容, 参数如下
使用示例如下:

API

属性说明类型默认值
align对话对齐方式,支持 leftRightleftAlignstringleftRight
bottomSlot底部插槽React.ReactNode-
chatBoxRenderConfigchatBox 渲染配置ChatBoxRenderConfig-
chats受控对话列表Message-
className自定义类名string-
customMarkDownComponents自定义 markdown render, 透传给对话内容渲染的 MarkdownRenderMDXProps['components']-
hints提示信息string-
hintCls提示区最外层样式类名string-
hintStyle提示区最外层样式CSSProperties-
inputBoxStyle输入框样式CSSProperties-
inputBoxCls输入框类名string-
sendHotKey发送输入内容的键盘快捷键,支持 enter | shift+enter。前者在单独按下 enter 将发送输入框中的消息, shift 和 enter 按键同时按下时,仅换行,不发送。后者相反stringenter
mode对话模式,支持 bubble | noBubble | userBubblestringbubble
roleConfig角色信息配置,具体见RoleConfigRoleConfig-
renderDivider自定义渲染分割线, 自 v2.67.0 支持(message?: Message) => ReactNode-
renderHintBox自定义渲染提示信息(props: {content: string; index: number,onHintClick: () => void}) => React.ReactNode-
onChatsChange对话列表变化时触发(chats: Message[]) => void-
onClear清除上下文消息时候触发() => void-
onHintClick点击提示信息时触发(hint: string) => void-
onInputChange输入区域信息变化时触发(props: { value?: string, attachment?: FileItem[] }) => void;-
onMessageBadFeedback消息负向反馈时触发(message: Message) => void-
onMessageCopy复制消息时触发(message: Message) => void-
onMessageDelete删除消息时触发(message: Message) => void-
onMessageGoodFeedback消息正向反馈时触发(message: Message) => void-
onMessageReset重置消息时触发(message: Message) => void-
onMessageSend发送消息时触发(content: string, attachment?: FileItem[]) => void-
onStopGenerator点击停止生成按钮时触发(message: Message) => void-
placeholder输入框占位符string-
renderInputArea自定义渲染输入框(props: RenderInputAreaProps) => React.ReactNode-
showClearContext是否展示清除上下文按钮booleanfalse
showStopGenerate是否展示停止生成按钮booleanfalse
topSlot顶部插槽React.ReactNode-
uploadProps上传组件属性, 详情参考 UploadUploadProps-
uploadTipProps上传组件提示属性, 详情参考 TooltipTooltipProps-

RoleConfig

属性说明类型默认值
user用户信息Metadata-
assistant助手信息Metadata-
system系统信息Metadata-

Metadata

属性说明类型默认值
name名称string-
avatar头像string-
color头像背景色,同 Avatar 组件的 color 参数, 支持 amberbluecyangreengreyindigolight-bluelight-greenlimeorangepinkpurpleredtealvioletyellowstringgrey

Message

属性说明类型默认值
role角色string-
name名称string-
id唯一标识string| number-
content文本内容stringContent[]
parentId父节点idstring-
createAt创建时间number-
status消息状态,可选值为 loading | incomplete | complete | errorstringcomplete

Content

属性说明类型默认值
type类型, 可选值text | image_url | file_urlstring-
text当类型为 text 时的内容数据string-
image_url当类型为 image_url 时的内容数据{ url: string }-
file_url当类型为 file_url 时的内容数据{ url: string; name: string; size: string; type: string }-

Methods

方法说明
resetMessage重置消息
scrollToBottom(animation: boolean)滚动到最底部, animation 为 true,则有动画,反之无动画
clearContext清除上下文
sendMessage(content: string, attachment: FileItem[])发送消息

设计变量