基于umi使用ChatUI Pro(3) 消息协议的格式和内置的消息协议

消息协议与相关配置

1.消息协议，约定的格式

    interface Message = { 
        // 类型 
        type: string; 
        // 内容 
        content: any; 
        // ID 
        _id?: string; 
        // 创建时间 
        createdAt?: number; 
        // 发送者信息 
        user?: { avatar: string; }; 
        // 显示位置 
        position?: 'left' | 'right' | 'center'; 
        // 是否显示时间 
        hasTime?: boolean; 
     }
   这里是对返回消息格式的定义，返回的格式必须是这样的，不然不会渲染出消息，带？的不是必须有

2.消息协议在Pro版本内置了许多类型，下面列举出来，方便记忆

    type的类型：                 content内容:
    
    text： '文本消息',           text为消息内容
    system: '系统消息',          text为消息内容
    image: '图片',               picurl为图片路径
    card: '卡片'                 code为卡片标识
    
    卡片内置code：
               promotion： 卡片内置的比较多样化，需要去官网查看
               knowledge： 知识点卡片，内容支持富文本
               slot： 点选卡片，相当于横着排列的列表，可以点击发送消息
               recommend： 推荐列表卡片
               quick-replies： 快捷短语卡片
    
   cmd: '指令消息'              code为指令标识
   
   指令内置code：
               agent_entrance_display： '展示人工入口'
               agent_join: '进入人工服务'
               agent_leave: '退出人工服务'

3.消息头像，一般卡片消息没有头像，可以配置

    new ChatSDK({ 
        config: { 
            //卡片头像白名单
            avatarWhiteList: ['knowledge', 'recommend'], 
            // 机器人头像 
            robot: { 
                  avatar: '//gw.alicdn.com/tfs/TB1U7FBiAT2gK0jSZPcXXcKkpXa-108-108.jpg',
                  },  
            // 用户头像 
            user: { 
                  avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg', 
                  }, 
        } 
   };

总结： 内置的消息协议满足不了项目的需求，所以需要更多的自定义卡片来实现自己想要的消息