使用场景 ​

Chat 组件可用于普通会话，AI 会话等场景。

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

代码演示 ​

如何引入 ​

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

jsx
import { Chat } from '@kousum/semi-ui-vue';

基本用法 ​

通过设置 chats 和 onChatsChange，onMessageSend 实现基础对话显示和交互。

附件支持通过点击上传按钮，输入框粘贴，拖拽文件至 Chat 区域上传。通过 uploadProps 设置上传参数，详情参考 Upload。

上传按钮的提示文案可通过 uploadTipProps 设置，详情参考 Tooltip。

对话是多方参与，多轮交互的场景。可通过 roleConfig 传入角色信息（包括名称，头像等），具体参数细节 RoleConfig。

使用 align 属性可以设置对话的对齐方式，支持左右对齐（leftRight， 默认）和左对齐（leftAlign）。

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

消息状态 ​

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

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

动态更新数据 ​

对于后台返回 Serve Side Event 数据情况，可将获取到的数据用于更新 chats，对话内容将实时更新。

showStopGenerate 参数可用于设置是否展示停止生成按钮，默认为 false。 可以在 onStopGenerator 中处理停止生成逻辑。

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

清除上下文 ​

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

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

自定义渲染会话框 ​

通过 chatBoxRenderConfig 传入自定义渲染配置, chatBoxRenderConfig 类型如下

ts
interface ChatBoxRenderConfig {
    /* 自定义渲染标题 */
    renderChatBoxTitle?: (props: {role?: Metadata, defaultTitle?: ReactNode}) => ReactNode;
    /* 自定义渲染头像 */
    renderChatBoxAvatar?: (props: { role?: Metadata, defaultAvatar?: ReactNode}) => ReactNode;
    /* 自定义渲染内容区域 */
    renderChatBoxContent?: (props: {message?: Message, role?: Metadata, defaultContent?: ReactNode | ReactNode[], className?: string}) => ReactNode;
    /* 自定义渲染消息操作栏 */
    renderChatBoxAction?: (props: {message?: Message, defaultActions?: ReactNode | ReactNode[], className: string}) => ReactNode;
    /* 完全自定义渲染整个聊天框 */
    renderFullChatBox?: (props: {message?: Message, role?: Metadata, defaultNodes?: FullChatBoxNodes, className: string}) => ReactNode;
}

自定义渲染头像和标题，可通过 renderChatBoxAvatar 和 renderChatBoxTitle 实现。

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

鼠标移动到会话上，即可显示会话操作区，通过 renderChatBoxAction 自定义渲染操作区

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

通过 renderChatBoxContent 自定义操作区域

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

使用 renderFullChatBox 自定义渲染整个会话框

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

自定义渲染输入框 ​

可通过 renderInputArea 自定义渲染输入框，参数如下

ts
export interface RenderInputAreaProps {
    /* 默认节点 */
    defaultNode?: ReactNode;
    /* 如果自定义输入框，发送消息时需调用 */
    onSend?: (content?: string, attachment?: FileItem[]) => void;
    /* 如果自定义清除上下文按钮，点击清除上下文时需调用 */
    onClear?: (e?: any) => void;
}

使用示例如下

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

提示信息 ​

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

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

自定义提示信息渲染 ​

通过 renderHintBox 自定义提示区域内容， 参数如下

ts
type renderHintBox = (props: {content: string; index: number,onHintClick: () => void}) => React.ReactNode;

使用示例如下：

demoApp.vue
demo.tsx
tsconfig.json
Import Map
Show Error
Auto Save

API ​

属性说明类型默认值
align对话对齐方式，支持 leftRight、leftAlignstringleftRight
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-
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 参数, 支持 amber、 blue、 cyan、 green、 grey、 indigo、 light-blue、 light-green、 lime、 orange、 pink、 purple、 red、 teal、 violet、 yellowstringgrey

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[])发送消息

设计变量 ​

变量默认值用法
$radius-chat_chatBox_contentvar(--semi-border-radius-large)聊天框内容圆角
$radius-chat_inputBox_container16px输入框容器圆角
$radius-chat_attachment_imgvar(--semi-border-radius-medium)附件图片圆角
$radius-chat_attachment_filevar(--semi-border-radius-medium)附件文件圆角
$radius-chat_hint_itemvar(--semi-border-radius-large)提示条圆角
$radius-chat_chatBox_content_codevar(--semi-border-radius-large)代码块圆角
$radius-chat_chatBox_content_code_topSlot_copyvar(--semi-border-radius-large)代码块顶部复制按钮圆角
$radius-chat_dropArea16px拖拽上传区域圆角
显示第 1 条-第 8 条，共 8 条
  • 1