服务于对话领域的设计和开发体系
官网：https://chatui.io
[](https://github.com/alibaba/ChatUI/blob/master/LICENSE)
[](https://www.npmjs.com/package/@chatui/core)
[](https://www.npmjs.com/package/@chatui/core)
[](https://unpkg.com/@chatui/core@0.1.0/dist/index.js)
[](https://cdn.jsdelivr.net/npm/@chatui/core)
[English](./README.md) | 简体中文
## 特性
- 😎 **最佳实践**：基于阿里小蜜业务积累和打磨的对话式交互最佳实践
- 🛡 **TypeScript**：使用 TypeScript 开发，提供完整的类型定义文件
- 📱 **响应式**：响应式布局，在无线和 PC 端都可以友好展现
- ♿ **障碍**：支持无障碍，已通过深圳市无障碍研究会的认证
- 🎨 **主题**：支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求
- 🌍 **国际化**：支持多语言和本土化特性
## 兼容环境
- 现代浏览器 (支持 [CSS Variables](https://caniuse.com/css-variables))
- IE 11 (需要 [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11) 和 [CSS Variables Polyfill](https://github.com/nuxodin/ie11CustomProperties) / [css-vars-ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill))
| 
Edge | 
Firefox | 
Chrome | 
Safari | 
iOS Safari | 
Android WebView |
| --- | --- | --- | --- | --- | --- |
| 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |
## 安装
```bash
npm install @chatui/core --save
```
```bash
yarn add @chatui/core
```
## 示例
```jsx
import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/dist/index.css';
const App = () => {
const { messages, appendMsg, setTyping } = useMessages([]);
function handleSend(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);
}
}
function renderMessageContent(msg) {
const { content } = msg;
return ;
}
return (
);
};
```
[](https://codesandbox.io/s/chatui-demo-o6n3z?fontsize=14&hidenavigation=1&theme=dark)
### 本地开发
```bash
cd storybook
npm i
npm run storybook
```
### 定制主题
参考 [定制主题](https://chatui.io/docs/customize-theme) 文档。
## 国际化
参考 [国际化](https://chatui.io/docs/i18n) 文档。
## 交流讨论
## License
MIT