功能描述
@tencentcloud/chat-uikit-vue 从 v2.3.6 版本,支持 Markdown & 流式响应格式消息解析。通过后台发送指定格式的 Markdown 流式响应内容自定义消息,UIKit 可以自动对 Markdown 流式响应消息进行解析展示。
您可以通过此功能快速实现 AI Chat 场景以及混合消息效果,效果如下:
说明:
TUIKit 仅支持解析展示 Markdown 消息,不支持直接从输入框输入并发送 Markdown 格式。

默认解析规则
当服务端发送的消息同时满足以下条件时,TUIKit 将自动解析 Markdown 流式响应格式。
流式响应 & Markdown 消息均为自定义消息,且发送者为机器人。
当客户端接收到的机器人自定义消息的
payload 中的 data 字段符合以下规则时,自动展示 markdown 格式的流式输出效果。本文介绍的自定义消息的
payload 中的 data 字段为 JSON 结构体经过序列化后的值,详情请参见 CustomPayload 。TUIKit 内部会通过监听 MESSAGE_MODIFIED 事件监听消息内容的变更,此处您无需额外处理。
TUIKit 机器人消息解析在客服插件之后,请务必保证该机器人账号没有被配置为客服账号,否则将无法进入机器人消息解析逻辑。
// 以下为自定义消息 payload 字段中的 data 字段格式规则{// chunks 代表流式消息的内容"chunks": ["###","标题1","\\n\\n### 标题","2\\n","####2.1","\\n",],// isFinished为 0 时表示流式输出未结束,1 代表流式输出结束// 如果您不需要流式输出效果,可以设置此字段为 1"isFinished": 1,}
高级指引
以下内容为辅助阅读资料, markdown 流式响应相关功能已在 TUIKit v2.3.6 之后实现,不需要您进行额外操作。
如果您想进行更深层次的自定义效果,请参考以下内容。
<MessageStreamMarkdown>
TUIKit 内部采用 <MessageStreamMarkdown> 组件来实现 markdown 消息解析和流式响应效果。
组件位置:
TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.ts引入 <MessageStreamMarkdown>
// 以下引入路径仅供参考,请结合您的实际项目位置进行引入import MessageStreamMarkdown from './TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown/index.ts';
参数列表
参数名 | 必填 | 默认值 | 类型 | 含义 |
payloadData | 是 | - | string | 自定义消息 message.payload.data 字段。 |
enableMarkdown | 否 | true | boolean | 是否开启 markdown 格式解析,默认开启。 开启后仅代表支持 markdown 格式解析,不满足 markdown 格式的消息内容则不会有 markdown 格式展示。 |
enableStreaming | 否 | true | boolean | 是否开启流式输出效果,默认开启。 开启后仅代表支持流式响应消息格式解析,不满足流式响应格式则不会有流式效果。 流式响应格式需满足 payloadData 字段通过 JSON.parse 解析后有 isFinished 字段,isFinished 为 0 代表流输出中,isFinished 为 1 代表流式输出结束。 |
enableOperation | 否 | true | boolean | 是否开启消息底部操作栏(目前仅支持复制操作)。 |
使用 <MessageStreamMarkdown>
您可以通过以下方式使用 <MessageStreamMarkdown>, TUIKit 内部具体使用方式请参考 src/TUIKit/components/TUIChat/message-list/index.vue。
<MessageStreamMarkdown:payloadData="message.payload.data":enableMarkdown="true":enableStreaming="false":enableOperation="false"/>
自定义解析规则
源码目录位置:
消息列表
<MessageStreamMarkdown> 引入位置:src/TUIKit/components/TUIChat/message-list/index.vue <MessageStreamMarkdown> 组件目录:src/TUIKit/components/TUIChat/message-list/message-elements/message-stream-markdown