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

文章插图

文章插图
后来又发现，由于各手机系统/机型的差异，还会有各种问题，比如：
这些问题解决起来比较繁琐，又几乎和业务无关，所以我们把根据这些问题总结出来的最佳实践也整合到了 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 ，方便开发者编写对应样式。
下面是小蜜中使用的效果：

文章插图
无障碍支持
【阿里 ChatUI 开源：让对话美而简单】无障碍方面，已经做到了组件级别支持可访问性，开发者不需要特别关心组件层面的无障碍属性，默认对障碍人群友好，在某些场景可能需要唯一元素 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 代码，可以满足不同用户的各种要求。
除了上述特色，还完全使用开发，提供完整的类型定义文件，支持多语言，有完善的文档和代码示例，有单元测试加持，等等。