阿里 ChatUI 开源：让对话美而简单( 三 ) _组件

文章插图
Pro
组件库是基于 React 开发的，对开发者有一定的要求，需要掌握必要的 React 及 CSS 技术，这对于某些场景来说还是有点重。另外在和阿里云小蜜及政务部门的合作中，我们也了解到通过简单配置就能搭建出一个对话应用确实是一个痛点需求。
为此，我们在设计规范和基础组件的基础上，继续向上构建，以阿里小蜜为原型，整合小蜜典型卡片模板和业务组件，加入各业务场景的最佳实践，以配置化的接口的形式封装成一套开箱即用的解决方案 ——Pro 。

文章插图
通过Pro 你甚至都不需要前端知识就能配置出一个对话应用来，如果有前端基础的话也可以通过它强大的配置接口实现各种定制化需求。

同时，我们还提供了云小蜜的消息解析器，可以配合云小蜜搭建出一个具备智能问答、多轮对话等能力的会话机器人，更多内容请查看官网的Pro 板块。
Card
在对话式交互中，卡片是对话消息的重要组成部分，卡片将消息数据进行结构化展示、提供操作行动点，以提升和机器人对话的效率和体验。将基于阿里经济体业务沉淀下来的，较为通用的卡片进行输出。

文章插图
卡片本质上是一个 React 组件，底层依赖组件库，传入到组件的 props 有3个：data 、 ctx、 meta
exportdefaultfunctionMyCard({ data, ctx, meta }) {console.log(data, ctx, meta);return{...};}
data 是传入卡片的数据，不同的卡片需要的数据格式不同
ctx 是卡片依赖的上下文，包括通用函数和全局配置信息
meta 是辅助信息，比如卡片是否在历史消息中等
如果是基于Pro ，这些卡片的使用非常简单， props 的传入以及卡片的调用已经默认处理好了，开发者无需自己实现。
举个例子，如果想在自己的产品里使用「图文按钮卡片」，只需要在配置数据里这样设置：

newChatSDK({components: {'adaptable-action-card': '//g.alicdn.com/alime-components/adaptable-action-card/0.1.7/index.js'}}

配置的 key 是卡片的 code ， value 是卡片代码的 CDN 地址。此外，只需要后端问答接口，返回对应的 code ，以及卡片需要的数据即可。
如果未使用Pro ，而是基于组件库自行实现的业务逻辑层，则需要自行构造需要的3个 props ，详情可在官网查看卡片部分的介绍。
后续规划
组件库开源是体系中的一环，我们会持续不断的增加新组件、新功能，不断打磨完善。另外，我们也会不断探索和创新，比如尝试语音版，以全新的界面通过语音进行问答交互，提供更好的人机交互体验；比如增加虚拟形象，让 B 端客户拥有自己的品牌形象，可以表达自己的情绪、表情，把交互体验提到新的高度，让用户感受更加情切友好。