The UI design language and React library for Conversational UI
Website:https://chatui.io
English | 简体中文
- 😎 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
- Modern browsers (support CSS Variables)
- Internet Explorer 11 (with polyfills and CSS Variables Polyfill / css-vars-ponyfill)
| Edge Edge |
Firefox Firefox |
Chrome Chrome |
Safari Safari |
iOS Safari iOS Safari |
Android WebView Android WebView |
|---|---|---|---|---|---|
| 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |
npm install @chatui/core --save
yarn add @chatui/core
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 <Bubble content={content.text} />; } return ( <Chat navbar={{ title: 'Assistant' }} messages={messages} renderMessageContent={renderMessageContent} onSend={handleSend} /> ); };
cd demo
npm i
npm run devVisit Customize Theme for detail
Visit i18n for detail
MIT