前端集成说明

使用背景

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

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

接入步骤

1. 根据使用场景，选择使用ChatSSE浏览器端SSE消息获取或者ChatUI IMSDK（V2）使用说明对接对话机器人

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

3. 配置自定义卡片参数"components"为下面对话机器人的内置卡片

   // 支持的卡片列表
   const SupportCards = [
     'foundation-model', // 大模型卡片
     'knowledge', // 小模型知识卡片
     'databot-card', // 数据引擎答案
     'qa-list',
     'qa-collapse-list',
     'qa-tabs',
     'qa-table',
     'qa-progress',
     'alime-table', // 表格卡片
     'typography',
     'promotion', // 技能卡片
     'adaptable-action-card', // 图文按钮卡片
     'slot', // 横向平铺点选
     'list-v2',
     'form-card', // 表单卡片
   ];
   
   const components = SupportCards.reduce((pre, name) => {
     pre[name] = {
       name,
       // 卡片的地址计算，其中版本号会随着迭代升级变更
       url: 'https://g.alicdn.com/ume/chatbot/6.0.10/' + name + '.js'
     };
     return pre;
   }, {});
   
   const bot = new ChatSDK({
     components,
     // 其他参数
   });
   
   window.bot = bot; // 方便调试
   

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

5. 接收到消息后，假如使用ChatSSE对接的，则需要使用isvParser方法将对话机器人消息转换为ChatUI-Pro消息的消息格式，注意isvParser使用格式是`isvParser({data: res})`

常见问题

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;
   }

重要更新记录

1. 6.0.7(2024.04.09)

   1. 大模型高频问答直出时增加sip协议支持