https://github.com/alibaba/chatui

The UI design language and React library for Conversational UI
https://github.com/alibaba/chatui

chat chatbot react ui

Last synced: 30 days ago
JSON representation

The UI design language and React library for Conversational UI

• Host: GitHub
• URL: https://github.com/alibaba/chatui
• Owner: alibaba
• License: mit
• Created: 2020-08-04T03:09:19.000Z (over 4 years ago)
• Default Branch: next
• Last Pushed: 2023-12-30T07:18:04.000Z (11 months ago)
• Last Synced: 2024-10-14T17:43:03.897Z (30 days ago)
• Topics: chat, chatbot, react, ui
• Language: TypeScript
• Homepage: https://chatui.io
• Size: 666 KB
• Stars: 2,637
• Watchers: 38
• Forks: 281
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  



The UI design language and React library for Conversational UI


Website：https://chatui.io




[![LICENSE](https://img.shields.io/npm/l/@chatui/core?style=flat-square)](https://github.com/alibaba/ChatUI/blob/master/LICENSE)

[![NPM version](https://img.shields.io/npm/v/@chatui/core?style=flat-square)](https://www.npmjs.com/package/@chatui/core)

[![NPM downloads](https://img.shields.io/npm/dm/@chatui/core?style=flat-square)](https://www.npmjs.com/package/@chatui/core)

[![Gzip Size](https://img.badgesize.io/https://unpkg.com/@chatui/[email protected]/dist/index.js?compression=gzip)](https://unpkg.com/@chatui/[email protected]/dist/index.js)

[![Jsdelivr Hits](https://img.shields.io/jsdelivr/npm/hm/@chatui/core?style=flat-square)](https://cdn.jsdelivr.net/npm/@chatui/core)





  



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

- Modern browsers (support [CSS Variables](https://caniuse.com/css-variables))

- Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11) and [CSS Variables Polyfill](https://github.com/nuxodin/ie11CustomProperties) / [css-vars-ponyfill](https://github.com/jhildenbiddle/css-vars-ponyfill))

| 
Edge | 
Firefox | 
Chrome | 
Safari | 
iOS Safari | 
Android WebView |

| --- | --- | --- | --- | --- | --- |

| 16+ | 31+ | 49+ | 9.1+ | 9.3+ | 6+ |

## Install

```bash

npm install @chatui/core --save

```

```bash

yarn add @chatui/core

```

## Usage

```jsx

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 ;

  }

  return (

    

  );

};

```

[![DEMO](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chatui-demo-o6n3z?fontsize=14&hidenavigation=1&theme=dark)

### Development

```bash

cd demo

npm i

npm run dev

```

## Theme

Visit [Customize Theme](https://chatui.io/docs/customize-theme) for detail

## Internationalization

Visit [i18n](https://chatui.io/docs/i18n) for detail

## Discussion



## License

MIT