阿里 ChatUI 开源：让对话美而简单-CSDN博客
阿里 ChatUI 开源：让对话美而简单
最新推荐文章于 2024-03-31 09:39:00 发布
web前端开发V 阅读量4.4k 收藏 11 点赞数 1 文章标签： 大数据 编程语言 人工智能 java 区块链 作者 | 孙辉 背景
对话式交互一直存在于我们的日常生活中，工作时使用的钉钉，联系朋友使用的微信，都属于对话式交互应用。
随着技术的发展，我们正在经历从「移动互联网时代」走向「人工智能时代」的过程中，人工智能扩大了对话式交互的使用场景，我们可以通过文字或语音的方式与机器对话来完成某些任务，这类机器人我们称之为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 *则是可二次开发的脚手架，包含工程套件，此功能还未上线，敬请期待。
作为一个 UI 组件库，最主要的部分当然是提供的组件了。ChatUI 刚开源就提供了 50 多个组件，涉及“基础”、“表单”、“展示”、“反馈”、“业务”、“对话”等6大类。这些组件都是我们在做阿里小蜜项目过程中持续迭代，不断总结，精心挑选和打磨后作为通用组件沉淀到组件库里的。后面我们依然会不断新增组件，同时对现有组件也会不断打磨和维护。大家要是对现有组件有什么疑问，或者对其它通用组件的有需求的话也可以反馈给我们。
对话容器
ChatUI 提供的组件中，比较有特色的是
Chat
对话容器组件。一开始是因为目前聊天应用大同小异的界面，我们为了方便把这种布局抽象成一个组件，上中下结构，集成多个基础组件，这样就不用每次重新布局了。
后来又发现，由于各手机系统/机型的差异，还会有各种问题，比如：
刘海屏高度：全屏的时候需要处理刘海屏的高度，否则会被遮挡；
输入框定位：出软键盘后，输入框会被键盘挡住的问题；
响应式设计：PC 和移动端交互的差异，需要适配。
这些问题解决起来比较繁琐，又几乎和业务无关，所以我们把根据这些问题总结出来的最佳实践也整合到了
组件中。基于此，开发者通过一个组件即可实现一个对话界面，然后把重心放到业务开发上，而不再需要关心机型差异或者整体的布局设计，提高开发效率：
importReact, { useState } from 'react';
importChat from '@chatui/core';
functionApp() {
const[messages] = useState([]);
const[quickReplies] = useState([]);
const renderMessageContent = () => {};
const handleQuickReplyClick = () => {};
const handleSend = () => {};
return(
<Chat
navbar={
{ title: '智能助理'}}
quickReplies={quickReplies}
onQuickReplyClick={handleQuickReplyClick}
messages={messages}
renderMessageContent={renderMessageContent}
onSend={handleSend}
/>
);
响应式
ChatUI 是同时支持移动端和 PC 端的，而且采用了响应式设计，可以简单的通过配置一个断点来支持：
<Chat wideBreakpoint="600px"/>
配置了
wideBreakpoint
后，在超过 600px 宽度时 ChatUI 将以宽屏模式展示，内部的组件也将改变交互形式，比如：
工具栏从加号里拿出来放到输入框旁边
工具栏内部渲染改成浮层中渲染
上拉弹窗会改成居中显示
同时会给
body
加一个 class：
S--wide
，方便开发者编写对应样式。
下面是小蜜中使用的效果：
无障碍支持
无障碍方面，ChatUI 已经做到了组件级别支持可访问性，开发者不需要特别关心组件层面的无障碍属性，默认对障碍人群友好，在某些场景可能需要唯一元素
id
来实现无障碍能力，比如
aria-labelledby
属性，如果没传
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/>
除了上述特色，ChatUI 还完全使用 TypeScript 开发，提供完整的类型定义文件，支持多语言，有完善的文档和代码示例，有单元测试加持，等等。
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 将基于阿里经济体业务沉淀下来的，较为通用的卡片进行输出。
卡片本质上是一个 React 组件，底层依赖 ChatUI 组件库，传入到组件的 props 有3个：
data
ctx
meta
exportdefaultfunctionMyCard({ data, ctx, meta }) {
console.log(data, ctx, meta);
return<div>{...}</div>;
是传入卡片的数据，不同的卡片需要的数据格式不同
是卡片依赖的上下文，包括通用函数和全局配置信息
是辅助信息，比如卡片是否在历史消息中等
如果是基于 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 的最新动态。
链接
官网链接：https://chatui.io/
GitHub 仓库：https://github.com/alibaba/ChatUI
反馈建议：https://github.com/alibaba/ChatUI/issues
优惠劵
关注
点赞
觉得还不错?
一键收藏
知道了
评论
作者 |孙辉背景对话式交互一直存在于我们的日常生活中，工作时使用的钉钉，联系朋友使用的微信，都属于对话式交互应用。随着技术的发展，我们正在经历从「移动互联网时代」走向「人工智能时代」的...
复制链接
扫一扫
UI
:会话式
设计
语言
和React库
03-16
会话式
网址：
English |
特征
:smiling_face_with_sunglasses: 最佳实践：根据我们对Alime
bot的经验，进行聊天交互的最佳实践
:shield: TypeScript ：用具有可预测的静态类型的TypeScript编写
:mobile_phone: 响应式：响应式设计可自​​动适应任何设备
:wheelchair_symbol: 可访问性：可访问性支持并获得可访问性研究协会的认证
:artist_palette: 主题化：强大的主题定制的每一个细节
:globe_showing_Europe-Africa: 国际：对数十种
的国际化支持
环境支援
现代浏览器（支持）
Internet Explorer 11（带有和 /
边缘
火狐浏览器
Chrome合金
苹果浏览器
iOS Safari
Android WebView
16岁以上
31岁以上
49岁以上
9.1+
9.3+
6+
安装
npm install @
chat
ui
/core --save
快速构建聊天 机器人为例：
最新发布
zhihuishuxia__的博客
04-07
973
本框架接触时间较早！如有疑问可留言一起讨论！
参与评论
您还未登录，请先
登录
后发表或查看评论
探索创新：
—— 构建现代聊天应用的理想框架
gitblog_00066的博客
03-27
270
项目地址:https://gitcode.com/Rance935/
是一个
开源
的、轻量级的前端组件库，专为快速
开发
实时通讯和聊天应用程序而设计。它以现代化的界面和灵活的可定制性为
者提供了强大的工具，帮助他们构建出互动性强且用户体验优良的聊天应用。
技术分析
基于 React 框架，利用其虚拟DO...
搭建一个AI
对话
机器人——前端
使用纪录
qq_24357165的博客
05-31
7892
阿里
的接入使用经验整理。
是一个适用于 React 项目的聊天机器人前端解决方案，包含丰富的
组件，支持 PC/移动端样式响应式。使用
简单
，体积不算重，兼容性良好。不过文档及社区维护这块有提升的空间。
.Net Core使用MongoDB的详细教程
10-15
主要给大家介绍了关于.Net Core使用MongoDB的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
React AntDesign 聊天机器人
使用
runrun117的博客
06-25
6741
的antDesignPro
了前端项目，现在根据需求进行了客户
框的
，找了三个组件。
https://blog.csdn.net/yehuozhili/article/details/108552890
https://fredrikoseberg.github.io/react-
bot-kit-docs/#tutorials
最后发现
组件好看，有“比较”前的组件文档。所以就开始根据
。当然以上才材料也有很多借鉴的地方，三个组件可以根据需求自
关于可信的
风轻扬
08-12
232
前天在网易数帆北京峰会上，我们正式发布了可信
BI产品，就是通过
就可以看数（
即数据分析，网易数帆
BI做到了）。这种产品好几家都在做，我们也不算最早宣传的，但我感觉我们是把可信度做到最高的。大家都知道大模型将带来
交互范式，比尔说过这话。这当然是方向，我之前也写过专门的文章（
GPT让现在的软件都土掉渣了），但做起来并不容易，关键是要做到可信。大家知道大模型技术...
前端react如何引入
实现类似
gpt智能客服
m0_66288747的博客
01-03
655
gpt智能客服。
探索
：构建交互式聊天应用的高效框架
gitblog_00043的博客
03-31
420
项目地址:https://gitcode.com/stridercheng/
项目简介
是一个由前端
者stridercheng
项目，旨在为
者提供一个
、可扩展的聊天界面框架。它允许快速搭建各种类型的聊天应用程序，无论是实时通讯、社交平台还是企业级协作工具，
都能助你轻松实现。
...
出品的客服
领域的前端
组件库
那些免费的砖
05-26
2277
专为智能
客服设计的组件库和
套件，大厂出品，质量保证，还免费
关于
专门是为智能
领域的产品需求而生的设计和
解决方案，由
云达摩院下的
小蜜团队出品并维护，目前已经应用在
系80多个事业部的数千个
bot (
式机器人)。
帮助
者快速搭建体验友好的机器人
界面，部分独立软件
商已经在
内部内测使用，
周期从平均14天大大缩短到2天。
功能特色
基于 React 提供了 50+ 基础组件、覆盖各类.
.NET Core 3.0中WPF使用IOC的图文教程
01-02
前言
我们都知道.NET Core 3.0已经发布了第六个预览版，我们也知道.NET Core 3.0现在已经支持创建WPF项目了，刚好今天在写一个代码生成器的客户端的时候用到了WPF，所以就把WPF创建以及使用IOC的过程记录一下，希望能对大家有所帮助。当然文章实例我就以我曾阅读过的一篇文章的示例代码来进行演示了。
步骤
1、通过命令行创建wpf项目，当然你也可以通过vs2019来进行创建。具体的步骤就不演示了，当然，如果你还不会用vs2019创建项目，那么请你右上角关闭网页，省的烦心。
❯ mkdir WpfIoc
❯ cd WpfIoc
❯ dotnet.exe --version
:通过功能强大CSS库
轻松创建自己的聊天室！
05-07
拥有许多
气泡，让你轻松建立一间聊天室的前端CSS 框架Create your own
room with ease through
, a powerful CSS Library!
Links
socket.io-android-
,一个
的socket.io和android聊天演示.zip
10-11
这是一个
的socket.io和android聊天演示。您可以使用此应用连接到https://socket-io-
.now.sh。
ASP.NET Core 3.1中文教程.pdf
ASP.NET Core3.1中文教程 完整版PDF,本文档是 .net core3.1 中文使用手册。使用最新vs2019编辑器,
跨平台web应用。
bot
02-02
大规模团队协同
利器：
Atlas正式
02-25
Atlas由
巴巴移动团队自研，以容器化思路解决大规模团队协作问题，实现并行
、快速迭代和动态部署，适用于Android4.x以上系统版本的大小型App
。Atlas特别适用于大规模团队的协同
。通过提供组件化、...
Virtual
:电脑
06-29
一个用C++搭建的基础项目，这个程序很
，你输入一个字符串，如果计算机识别出来，它就会回答，从而进行虚拟
Convman:
管理员-
05-03
Convman是一个多功能
管理器，它可以：清理Facebook
以进行存储。 将诺基亚/ Android SMS转换为mbox文件。 转换蒂姆的最后10个免费短信发送到mbox。 wip：从Tim的网站发送免费短信，然后将内容保存到eml文件中...
拥抱
集团的实践与经验
03-18
淘宝正明对
集团对
使用的提纲挈领的介绍。可以用作交流。
we
文件
09-15
We
Bot是
的一个文件，它是一个基于微信的聊天机器人项目。作为一个
项目，We
Bot可以让
者在自己的微信号上实现聊天机器人的功能。
Bot的特点主要有以下几个方面。首先，它支持多种消息类型的处理，如文本、图片、语音等。这意味着用户可以通过微信发送各种类型的消息给机器人，并获得相应的回复。
其次，We
Bot提供了灵活的自定义功能。
者可以根据自己的需要，通过编写插件来扩展机器人的功能。这使得We
Bot变得非常灵活，可以在各种场景下使用。
此外，We
Bot还支持多线程处理消息，从而提高了处理消息的效率。这对于处理大量消息的场景非常重要，可以保证机器人的响应速度和稳定性。
值得一提的是，We
Bot还支持
状态的管理。它可以保存用户的
历史，从而能够根据用户之前的回答或提问来作出更准确的回复。这使得机器人能够更好地理解用户的意图，并提供更个性化的服务。
最后，We
Bot是基于Python
的，使用了wxpy库作为微信接口的封装。Python是一种简洁而强大的
，拥有丰富的第三方库和工具。而wxpy库则提供了方便易用的微信接口，使得
者可以更加便捷地
和部署自己的聊天机器人。
总结来说，We
Bot是一个功能丰富、灵活可扩展的聊天机器人项目。它的
性使得
者可以根据自己的需求进行二次
和定制，为用户提供更好的聊天体验。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
普通网友
CSDN认证博客专家
CSDN认证企业博客
码龄7年
暂无认证
70
原创
周排名
总排名
318万+
访问
等级
1万+
积分
1223
粉丝
1840
获赞
276
私信
热门文章
3种CSS实现背景图片全屏铺满自适应的方式
115705
5种获取JavaScript时间戳函数的方法
65617
10款炫酷的HTML5动画特效，附源码
42341
6种JavaScript判断数组是否包含某个值的方法
40957
3种JavaScript 对象转数组的方法
37380
最新评论
【web素材】06—20款企业网站模板，帮助你快速学习构建企业项目
浮生若森:
文件丢失了，下载不了
3种JavaScript过滤数组中重复对象的方法
美酒没故事°:
[code=javascript]
Object.groupBy()
[/code]
新方法，还能分类重组
【免费赠书】6 种在 JavaScript 中清理代码的方法
蓝指缘:
完全写的与标题不服，挂羊头卖狗肉...骗点击
4种JavaScript实现千位分隔符的方法
// 数字千位符
export function toThousands(num) {
if (isNaN(num)) {
return num
num = parseFloat(num);
num = num.toFixed(2);
const reg = /\B(?=(\d{3})+(?!\d))/g; // 逢3位,
return num.replace(reg, ',');
用 JavaScript 实现一个简单的笔记应用程序
莉莉可:
能看看HTML结构吗
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
最新文章
【每日一练】147—实现一个滑动按钮动画组件效果
7 个非常实用的 Vue.js 库
【每日一书】03-前端程序员面试秘籍
2023年
64篇
2022年
476篇
2021年
800篇
2020年
686篇
2019年
663篇
2018年
36篇
2017年
5篇
目录
被折叠的 
 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额
3.43
前往充值 >
需支付：
10.00
取消
确定
下一步
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。
余额充值