<h1 align="center"> <a href="https://chatui.io/"> <img width="109" height="28" src="https://gw.alicdn.com/tfs/TB1uYH4QoY1gK0jSZFMXXaWcVXa-218-56.svg" alt="ChatUI"> </a> </h1> <p align="center">The UI design language and React library for Conversational UI</p> <p align="center">Website：<a href="https://chatui.io/" target="_blank">https://chatui.io</a></p> <div align="center">

</div> <p align="center"> <img width="750" src="https://gw.alicdn.com/tfs/TB1WTl.lQ9l0K4jSZFKXXXFjpXa-1500-833.jpg"> </p>

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)

| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /><br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br>Safari | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" /><br>iOS Safari | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/android-webview/android-webview_48x48.png" alt="Android WebView" width="24px" height="24px" /><br>Android WebView | | --- | --- | --- | --- | --- | --- | | 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |

Install

npm install @chatui/core --save

yarn add @chatui/core

Usage

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}
    />
  );
};

Development

cd demo
npm i
npm run dev

Theme

Visit Customize Theme for detail

Internationalization

Visit i18n for detail

License

MIT

ChatUI

Install / Use

README