Skip to content

The UI design language and React library for Conversational UI

License

Notifications You must be signed in to change notification settings

samagra-comms/ChatUI

 
 

Repository files navigation

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 81.8%
  • Less 17.1%
  • JavaScript 1.1%