阿里 ChatUI 开源：让对话美而简单

作者 | 孙辉

背景

对话式交互一直存在于我们的日常生活中，工作时使用的钉钉，联系朋友使用的微信，都属于对话式交互应用。

随着技术的发展，我们正在经历从「移动互联网时代」走向「人工智能时代」的过程中，人工智能扩大了对话式交互的使用场景，我们可以通过文字或语音的方式与机器对话来完成某些任务，这类机器人我们称之为Chatbot。

近年来，越来越多的公司推出了对话式智能服务软件，比如 Apple 的 Siri、Mircosoft 的 Cortana 以及 Google 的 Google Assistant。

而在阿里巴巴，智能对话助理应用场景也非常广泛，智能服务助理「阿里小蜜」就是其中一员，阿里小蜜经过几年的发展，在阿里经济体生态圈，支撑了阿里集团超过80个BU的智能服务业务；在企业生态圈，依托于钉钉以及阿里云的企业开放生态，通过 SaaS 和 PaaS的模式赋能外部企业。

ChatUI 则是阿里小蜜团队经过多年真实业务场景打磨和沉淀的对话式 UI 体系，致力于打造对话领域的设计和开发标准。

在云上企业生态小范围内测半年之后，ChatUI 现已正式开源，期望与开发者共建和完善 ChatUI 体系，共同打造「让对话美而简单」的愿景。

ChatUI 简介46秒短视频：https://v.qq.com/x/page/m3149lcizaz.html

介绍

经过共创和大量竞品分析及思辨，ChatUI 最终选择了四个关键体验目标作为设计原则，以有效促进用户对话的意愿：

主动：用户还没想起，机器能预知用户所需；
高效：用户使用流顺，符合自然预期, 有效进行互动；
情感：用户有情感引导，情感互动，产生心理偏好或习惯，达至自然回访；
沉浸：用户能通过视觉，互动及物理传感器等触点，感受智能的新鲜感，引发交互意愿。

ChatUI 组件库基于以上设计原则进行设计，提供了50+组件，满足多样的对话场景需求，用户可基于基础组件搭建自己的对话界面，适合有深度定制需求的用户。

对于已经有对话接口，想开箱即用的用户，我们也贴心的提供了 ChatUI Pro，只需要在初始化的时候传入配置数据，即可快速生成可进行对话交互的界面。

除了对话界面的框架，对话中消息是重要的组成部分，除去基础的文本、图片、语音等消息，ChatUI 还提供了丰富的富交互卡片（ChatUI Card），这些卡片是基于阿里经济体业务沉淀下来的，经过大量业务场景验证的优质卡片。

*ChatUI SDK *则是可二次开发的脚手架，包含工程套件，此功能还未上线，敬请期待。

ChatUI 组件库

作为一个 UI 组件库，最主要的部分当然是提供的组件了。ChatUI 刚开源就提供了 50 多个组件，涉及“基础”、“表单”、“展示”、“反馈”、“业务”、“对话”等6大类。这些组件都是我们在做阿里小蜜项目过程中持续迭代，不断总结，精心挑选和打磨后作为通用组件沉淀到组件库里的。后面我们依然会不断新增组件，同时对现有组件也会不断打磨和维护。大家要是对现有组件有什么疑问，或者对其它通用组件的有需求的话也可以反馈给我们。

对话容器

ChatUI 提供的组件中，比较有特色的是 Chat 对话容器组件。一开始是因为目前聊天应用大同小异的界面，我们为了方便把这种布局抽象成一个组件，上中下结构，集成多个基础组件，这样就不用每次重新布局了。

后来又发现，由于各手机系统/机型的差异，还会有各种问题，比如：

刘海屏高度：全屏的时候需要处理刘海屏的高度，否则会被遮挡；
输入框定位：出软键盘后，输入框会被键盘挡住的问题；
响应式设计：PC 和移动端交互的差异，需要适配。

这些问题解决起来比较繁琐，又几乎和业务无关，所以我们把根据这些问题总结出来的最佳实践也整合到了 Chat 组件中。基于此，开发者通过一个组件即可实现一个对话界面，然后把重心放到业务开发上，而不再需要关心机型差异或者整体的布局设计，提高开发效率：

importReact, { useState } from 'react';
importChat from '@chatui/core';
functionApp() {
const[messages] = useState([]);
const[quickReplies] = useState([]);
const renderMessageContent = () => {};
const handleQuickReplyClick = () => {};
const handleSend = () => {};
return(
<Chatnavbar={{ title: '智能助理'}}quickReplies={quickReplies}onQuickReplyClick={handleQuickReplyClick}messages={messages}renderMessageContent={renderMessageContent}onSend={handleSend}
/>
);
}

响应式

ChatUI 是同时支持移动端和 PC 端的，而且采用了响应式设计，可以简单的通过配置一个断点来支持：

functionApp() {
return(
<Chat wideBreakpoint="600px"/>
);
}

配置了 wideBreakpoint 后，在超过 600px 宽度时 ChatUI 将以宽屏模式展示，内部的组件也将改变交互形式，比如：

工具栏从加号里拿出来放到输入框旁边
工具栏内部渲染改成浮层中渲染
上拉弹窗会改成居中显示

同时会给 body 加一个 class：S--wide，方便开发者编写对应样式。

下面是小蜜中使用的效果：

无障碍支持

无障碍方面，ChatUI 已经做到了组件级别支持可访问性，开发者不需要特别关心组件层面的无障碍属性，默认对障碍人群友好，在某些场景可能需要唯一元素 id 来实现无障碍能力，比如 aria-labelledby 属性，如果没传 id ChatUI 也会自动生成。

基于 ChatUI 开发的阿里小蜜就已经通过了信息无障碍研究会的认证：

定制主题

ChatUI 使用了 Less.js 对样式进行预处理，并内置了一系列全局/组件样式变量，使用者可以根据自身需求进行相应调整。同时，ChatUI 还通过 CSS Variables 定义了一系列通用的主题色，可以用来实现一键切换主题。

:root {
--brand-1: #ffb300;
--brand-2: #ffc233;
--brand-3: #ffe48c;
--black: #000;
--white: #fff;
--gray-1: rgba(0,0,0,0.87);
--gray-2: rgba(0,0,0,0.54);
--gray-3: rgba(0,0,0,0.4);
--gray-4: rgba(0,0,0,0.26);
--gray-5: rgba(0,0,0,0.2);
--gray-6: rgba(0,0,0,0.1);
--gray-7: rgba(0,0,0,0.05);
--gray-8: rgba(0,0,0,0.03);
--light-1: #f2f4f5;
--light-2: #fafafa;
--blue: #39f;
--gray-dark: #333;
--green: #62d957;
--orange: #f70;
--red: #f56262;
--yellow: #ffc233;
--yellow-light: #fff9db;
}

另外，为了进一步降低定制主题的成本，我们还开发了在线主题编辑器，支持可视化编辑主题，提供了基础配置和高级配置，甚至也可以直接写 CSS 代码，可以满足不同用户的各种要求。<br/> <br/>除了上述特色，ChatUI 还完全使用 TypeScript 开发，提供完整的类型定义文件，支持多语言，有完善的文档和代码示例，有单元测试加持，等等。

ChatUI Pro

ChatUI 组件库是基于 React 开发的，对开发者有一定的要求，需要掌握必要的 React 及 CSS 技术，这对于某些场景来说还是有点重。另外在和阿里云小蜜及政务部门的合作中，我们也了解到通过简单配置就能搭建出一个对话应用确实是一个痛点需求。

为此，我们在 ChatUI 设计规范和基础组件的基础上，继续向上构建，以阿里小蜜为原型，整合小蜜典型卡片模板和业务组件，加入各业务场景的最佳实践，以配置化的接口的形式封装成一套开箱即用的解决方案 —— ChatUI Pro。

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

<linkrel="stylesheet"href="//g.alicdn.com/chatui/sdk-v2/0.0.8/sdk.css">
<scriptsrc="//g.alicdn.com/chatui/sdk-v2/0.0.8/sdk.js"></script>
<divid="root"></div>
<script>
var bot = newChatSDK({config: {navbar: {title: '智能助理'
},robot: {avatar: '//gw.alicdn.com/tfs/TB1U7FBiAT2gK0jSZPcXXcKkpXa-108-108.jpg'
},messages: [
{type: 'text',content: {text: '智能助理为您服务，请问有什么可以帮您？'
}
}
]
},requests: {send: function(msg) {
return{url: '/api/ask',data: {q: msg.content.text
}
};
}
}
});bot.run();
</script>

同时，我们还提供了云小蜜的消息解析器，可以配合云小蜜搭建出一个具备智能问答、多轮对话等能力的会话机器人，更多内容请查看官网的 ChatUI Pro 板块。

ChatUI Card

在对话式交互中，卡片是对话消息的重要组成部分，卡片将消息数据进行结构化展示、提供操作行动点，以提升和机器人对话的效率和体验。ChatUI 将基于阿里经济体业务沉淀下来的，较为通用的卡片进行输出。

卡片本质上是一个 React 组件，底层依赖 ChatUI 组件库，传入到组件的 props 有3个：data 、 ctx、 meta

exportdefaultfunctionMyCard({ data, ctx, meta }) {console.log(data, ctx, meta);
return<div>{...}</div>;
}

data 是传入卡片的数据，不同的卡片需要的数据格式不同

ctx 是卡片依赖的上下文，包括通用函数和全局配置信息

meta 是辅助信息，比如卡片是否在历史消息中等

如果是基于 ChatUI Pro，这些卡片的使用非常简单，props 的传入以及卡片的调用已经默认处理好了，开发者无需自己实现。

举个例子，如果想在自己的产品里使用「图文按钮卡片」，只需要在配置数据里这样设置：

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

components 配置的 key 是卡片的 code，value 是卡片代码的 CDN 地址。此外，只需要后端问答接口，返回对应的 code，以及卡片需要的数据即可。

如果未使用 ChatUI Pro，而是基于 ChatUI 组件库自行实现的业务逻辑层，则需要自行构造需要的3个 props，详情可在官网查看卡片部分的介绍。

后续规划

ChatUI 组件库开源是 ChatUI 体系中的一环，我们会持续不断的增加新组件、新功能，不断打磨完善。另外，我们也会不断探索和创新，比如尝试 ChatUI 语音版，以全新的界面通过语音进行问答交互，提供更好的人机交互体验；比如增加虚拟形象，让 B 端客户拥有自己的品牌形象，可以表达自己的情绪、表情，把交互体验提到新的高度，让用户感受更加情切友好。

大家可以收藏下面的链接，关注 ChatUI 的最新动态。