Wondering what’s next for npm?Check out our public roadmap! »

    @chatui/core
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.2 • Public • Published

    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

    Install

    npm i @chatui/core

    DownloadsWeekly Downloads

    177

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    785 kB

    Total Files

    520

    Homepage

    chatui.io/

    Last publish

    Collaborators

    • avatar