Popularity
6.3
Growing
Activity
8.8
Growing
1,169
33
93

Programming language: TypeScript
License: MIT License
Tags: UI Frameworks     Responsive    
Latest version: v1.2.1

ChatUI alternatives and similar libraries

Based on the "Responsive" category.
Alternatively, view ChatUI alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of ChatUI or a related project?

Add another 'Responsive' Library

README

The UI design language and React library for Conversational UI

Website:https://chatui.io

LICENSE NPM version NPM downloads Gzip Size Jsdelivr Hits

English | [简体中文](./README.zh-CN.md)

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 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

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


*Note that all licence references and agreements mentioned in the ChatUI README section above are relevant to that project's source code only.