前端集成说明

使用背景

假如渠道部署后页面不满足业务需求，需要自定义对话聊天窗样式，可使用ChatSDK进行二次开发，满足业务定制要求。

注意进行二次定制开发后，智能客服内部答案渲染调整升级后，需要集成方升级ChatSDK或者修改应用的卡片版本。具体更新记录参考ChatSDK的ChangeLog

接入步骤

1. 根据使用场景，选择使用机器人【集成示例】网页端或者渠道ChatUI IMSDK（V2）使用说明对接对话机器人

   1. 当没有人工服务需求，且所在浏览器或者内嵌webview支持SSE请求的话，可以使用机器人网页集成方式进行集成

   2. 当需要人工服务或者所在浏览器和内嵌webview支持websocket时，可以选择渠道ChatUI IMSDK（V2）使用说明对接方式进行集成

2. 参考ChatSDK配置对话聊天窗页面样式

3. requests.send改为第1步中的消息处理方法，确认消息是否正常发送和接收

4. 接收到消息后，使用isvParser方法将对话机器人消息转换为ChatSDK的消息格式，注意isvParser使用格式是`isvParser({data: res})`

5. 假如不使用ChatSDK渲染消息，接入方自己渲染消息，则需要注意答案格式问题

   1. 大模型卡片文本片段使用SentenceList数组中的Content拼接字段，外层的Content中可能会出现有`[1]`这样的引用标记

   2. 假如高频问答编辑使用了富文本格式答案，则最终输出时就会有富文本格式输出的情况。富文本答案消息中，为了保证格式一致性，在原始编辑内容后追加了一个样式文件并使用div包裹，例如原始文本是<p>原始文本</p>，则最终输出内容是<div id=\"se-knowledge\"><p>原始文本</p><link rel=\"stylesheet\" href=\"https://g.alicdn.com/isipfe/docs/rich.css?\"></div>，假如渲染时不需要这些内容，可以手动过滤掉。

常见问题

1. 如何支持Post请求

   1. requests.send方法中写请求处理，返回Promise结果，Promise结果要求将对话机器人的返回结果原样返回，注意首字母要保持大写。

2. 对头像等样式不满意，如何自定义样式

   1. 通过css选择器对头像等进行样式覆盖

3. 头像没有展示

   1. ChatSDK的config.avatarWhiteList参数需要配置下要展示头像的卡片列表

4. 点赞点踩没有展示

   1. ChatSDK需要配置requests.evaluate请求方法，并且检查下答案经过isvParser转换后的数据的meta.evaluable是否为true

      

4. 假如返回结果经过后端处理，将首字母改为了小写，则isvParser处理前需要先将首字母改为大写，处理代码参考

   function upperCaseBotMsg(msg) {
     let newMsg = msg;
     if (msg instanceof Array) {
       newMsg = msg.map((item) => {
         return upperCaseBotMsg(item);
       });
     } else if (typeof msg == 'object' && msg) {
       newMsg = {};
       for (const key in msg) {
         newMsg[key.substring(0, 1).toUpperCase() + key.substring(1)] = upperCaseBotMsg(msg[key]);
       }
     }
     return newMsg;
   }