Web & H5

最近更新时间:2024-12-26 11:05:12

我的收藏

功能描述

@tencentcloud/chat-uikit-vuev2.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

常见问题

如何发送流式响应消息?

若您需和 TUIKit 搭配使用,请务必保证您的 TUIKit 源码版本不低于 v2.3.6,且机器人发送的自定义消息符合 默认解析规则