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

作者 |孙辉

背景

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

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

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

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

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

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

简介46秒短视频：

介绍

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

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

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

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

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

组件库

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

对话容器

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

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

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

importReact, { useState } from 'react';
importChat from '@chatui/core';
functionApp() {
const[messages] = useState([]);
const[quickReplies] = useState([]);
const renderMessageContent = () => {};
const handleQuickReplyClick = () => {};
const handleSend = () => {};
return(

);
}

响应式

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

functionApp() {
return(

);
}

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

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

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

无障碍支持

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

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

定制主题

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

: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 代码，可以满足不同用户的各种要求。

除了上述特色， 还完全使用 开发，提供完整的类型定义文件，支持多语言，有完善的文档和代码示例，有单元测试加持，等等。

Pro

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

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

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