ChatUI：阿里开源 智能对话式 UI 组件库

ChatUI 是一个由阿里团队开发的用于构建对话式用户界面 UI 组件库，支持多种功能，包括响应式设计、国际化、主题定制等。旨在帮助开发者快速构建高质量的聊天应用。ChatUI 提供了多个基础组件，覆盖各类场景，满足各种功能需求，简单搭建各种业务模板。

安装使用：

// npm
npm install @chatui/core --save
// import
importReactfrom'react';
importChat, { Bubble, useMessages }from'@chatui/core';
import'@chatui/core/dist/index.css';
constApp =()=>{
const{ messages, appendMsg, setTyping } = useMessages([]);
functionhandleSend(type, val){
 if(type ==='text'&& val.trim()) {
   appendMsg({
   type:'text',
   content: {text: val },
   position:'right',
   });
   setTyping(true);
   setTimeout(()=>{
    appendMsg({
    type:'text',
    content: {text:'Bala bala'},
    });
   },1000);
  }
 }
functionrenderMessageContent(msg){
 const{ content } = msg;
 return<Bubblecontent={content.text}/>;
 }
return(
 <Chat
  navbar={{title:'Assistant' }}
  messages={messages}
  renderMessageContent={renderMessageContent}
  onSend={handleSend}
  />
 );
};
exportdefaultApp;

部分组件预览：

环境支持：

ChatUI 支持现代浏览器（支持 CSS 变量）以及 Internet Explorer 11（需要 polyfills 和 CSS 变量 polyfill）。

浏览器：Edge16+、Firefox31+、Chrome49+、Safari9.1+、iOS Safari9.3+、Android WebView6+。

功能和特性：

1. 最佳实践

ChatUI 基于阿里巴巴 Alime Chatbot 的聊天交互最佳实践，提供了经过验证的交互模式和设计语言。这使得开发者能够快速构建符合用户习惯的聊天应用。

2. TypeScript 支持

ChatUI 使用 TypeScript 编写，提供了可预测的静态类型。这不仅有助于代码的可维护性，还能在开发过程中提供更好的类型检查和代码提示。

3. 响应式设计

ChatUI 采用响应式设计，能够自动适应各种设备，包括桌面浏览器、移动设备等。这确保了用户在不同设备上都能获得一致的体验。

4. 无障碍支持

ChatUI 获得了无障碍研究协会的认证，支持无障碍功能。这使得聊天应用能够更好地服务于残障用户，提升应用的包容性。

5. 主题定制

ChatUI 提供了强大的主题定制功能，开发者可以在每个细节上自定义界面的样式。这使得开发者能够根据品牌需求或用户偏好调整应用的外观。

6. 国际化支持

ChatUI 支持多种语言的国际化，能够满足不同地区用户的需求。开发者可以通过简单的配置，将应用翻译成多种语言，提升应用的全球适用性。