Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 months 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 (12 months ago)
Last Synced: 2024-10-25T04:17:04.511Z (about 2 months ago)
Topics: chat, chatbot, react, ui
Language: TypeScript
Homepage: https://chatui.io
Size: 666 KB
Stars: 2,651
Watchers: 38
Forks: 281
Open Issues: 27
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome - alibaba/ChatUI - The UI design language and React library for Conversational UI (TypeScript)
awesome-react-components - ChatUI - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI (UI Frameworks / Responsive)
awesome-react - ChatUI - The UI design language and React library for Conversational UI. ![](https://img.shields.io/github/stars/alibaba/ChatUI.svg?style=social&label=Star) (UI Frameworks / style)
awesome-fe-utils - ChatUI
awesome-github-star - ChatUI
awesome-react-components - ChatUI - [demo/docs](https://chatui.io/) - The UI design language and React library for Conversational UI (UI Frameworks / Responsive)
best-of-react - GitHub - 27% open · ⏱️ 05.07.2023): (UI Frameworks & Libraries)
fucking-awesome-react-components - ChatUI - 🌎 [demo/docs](chatui.io/) - The UI design language and React library for Conversational UI (UI Frameworks / Responsive)
awesome-react-cn - ChatUI

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