Skip to content
master
Switch branches/tags
Code

ChatUI

The UI design language and React library for Conversational UI

Website:https://chatui.io

LICENSE NPM version NPM downloads Gzip Size Jsdelivr Hits

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

Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Android WebView
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}
    />
  );
};

DEMO

Development

cd storybook
npm i
npm run storybook

Theme

Visit Customize Theme for detail

Internationalization

Visit i18n for detail

Discussion

License

MIT

About

The UI design language and React library for Conversational UI

Topics

Resources

License

Contributors 4

  •  
  •  
  •  
  •