Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alibaba/ChatUI
The UI design language and React library for Conversational UI
https://github.com/alibaba/ChatUI
chat chatbot react ui
Last synced: 4 months ago
JSON representation
The UI design language and React library for Conversational UI
- Host: GitHub
- URL: https://github.com/alibaba/ChatUI
- Owner: alibaba
- License: mit
- Created: 2020-08-04T03:09:19.000Z (over 4 years ago)
- Default Branch: next
- Last Pushed: 2023-12-30T07:18:04.000Z (about 1 year ago)
- Last Synced: 2024-10-25T04:17:04.511Z (4 months ago)
- Topics: chat, chatbot, react, ui
- Language: TypeScript
- Homepage: https://chatui.io
- Size: 666 KB
- Stars: 2,651
- Watchers: 38
- Forks: 281
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome - alibaba/ChatUI - The UI design language and React library for Conversational UI (TypeScript)
- awesome-react-components - ChatUI - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI (UI Frameworks / Responsive)
- awesome-react - ChatUI - The UI design language and React library for Conversational UI.  (UI Frameworks / style)
- awesome-fe-utils - ChatUI
- awesome-github-star - ChatUI
- awesome-react-components - ChatUI - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI (UI Frameworks / Responsive)
- best-of-react - GitHub - 27% open ยท โฑ๏ธ 05.07.2023): (UI Frameworks & Libraries)
- fucking-awesome-react-components - ChatUI - ๐ [demo/docs](chatui.io/) - The UI design language and React library for Conversational UI (UI Frameworks / Responsive)
- awesome-react-cn - ChatUI
- awesome-react-components - ChatUI - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI (UI Frameworks / Responsive)
- awesome-react-components - ChatUI - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI (UI Frameworks / Responsive)
README
![]()
The UI design language and React library for Conversational UI
Website๏ผ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/[email protected]/dist/index.js)
[](https://cdn.jsdelivr.net/npm/@chatui/core)
![]()
English | [็ฎไฝไธญๆ](./README.zh-CN.md)
## Features
- ๐ **Best Practices**: The best practice for chat interaction based on our experience of Alime Chatbot
- ๐ก **TypeScript**: Written in TypeScript with predictable static types
- ๐ฑ **Responsive**: Responsive design to adapt automatically to whatever device
- โฟ **Accessibility**: Accessibility support and get the certification from Accessibility Research Association
- ๐จ **Theming**: Powerful theme customization in every detail
- ๐ **International**: Internationalization support for dozens of languages## Environment Support
- Modern browsers (support [CSS Variables](https://caniuse.com/css-variables))
- Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11) and [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+ |## Install
```bash
npm install @chatui/core --save
``````bash
yarn add @chatui/core
```## Usage
```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)
### Development
```bash
cd demo
npm i
npm run dev
```## Theme
Visit [Customize Theme](https://chatui.io/docs/customize-theme) for detail
## Internationalization
Visit [i18n](https://chatui.io/docs/i18n) for detail
## Discussion
## License
MIT