The UI design language and React library for Conversational UI

Website：https://chatui.io

English | 简体中文

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)
• Internet Explorer 11 (with polyfills and CSS Variables Polyfill / css-vars-ponyfill)

Edge	Firefox	Chrome	Safari	iOS Safari	Android WebView
16+	31+	49+	9.1+	9.3+	6+

Install

npm install @chatui/core --save

yarn add @chatui/core

Usage

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(<Chatnavbar={{title: 'Assistant'}}messages={messages}renderMessageContent={renderMessageContent}onSend={handleSend}/>);};

Development

cd demo
npm i
npm run dev

Theme

Visit Customize Theme for detail

Internationalization

Visit i18n for detail

License

MIT