The UI design language and React library for Conversational UI

Related tags

react chat ui chatbot
Overview

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

Issues
  • syntax error

    syntax error

    What problem does this feature solve? (这个功能解决了什么问题) In 0.3.3, the text on the primary type button is white. but on the latest beta, it's black and there is no where you can change it unless you set gray-1=white or something

    Describe the solution you'd like (描述您想要的解决方案) some option to change the text colour on the buttons

    invalid 
    opened by MarcM0 17
  • Build failed: @chatui/core/dist/index.css ParserError: Syntax Error at line: 1, column 22

    Build failed: @chatui/core/dist/index.css ParserError: Syntax Error at line: 1, column 22

    Version information (版本信息)

    • ChatUI or ChatUI Pro? ChatUI
    • ChatUI Version: 1.0.0
    • React Version: 17.0.2
    • OS Version: Ubuntu 20.04
    • Browser Version:

    Describe the bug (描述问题) Trying to build a reactjs project and it failed with this error:

    $ npm run build
    
    > [email protected] build /media/winstonfan/Workspace/MyDoc/Interviews/DigitalVictoria/code/frontend/covid-chat
    > react-scripts build
    
    Creating an optimized production build...
    Failed to compile.
    
    ./node_modules/@chatui/core/dist/index.css
    ParserError: Syntax Error at line: 1, column 22
    
    
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] build: `react-scripts build`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the [email protected] build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/winstonfan/.npm/_logs/2021-06-29T13_57_45_400Z-debug.log
    
    

    Steps To Reproduce (重现步骤)

    1. create a reactjs project with create-react-app
    2. add @ChatUI
    3. npm run build

    Link to minimal reproduction (最小化重现链接)

    Here is the content of 2021-06-29T13_57_45_400Z-debug.log

    0 info it worked if it ends with ok
    1 verbose cli [
    1 verbose cli   '/home/winstonfan/.nvm/versions/node/v14.16.0/bin/node',
    1 verbose cli   '/home/winstonfan/.nvm/versions/node/v14.16.0/bin/npm',
    1 verbose cli   'run',
    1 verbose cli   'build'
    1 verbose cli ]
    2 info using [email protected]
    3 info using [email protected]
    4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
    5 info lifecycle [email protected]~prebuild: [email protected]
    6 info lifecycle [email protected]~build: [email protected]
    7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
    8 verbose lifecycle [email protected]~build: PATH: /home/winstonfan/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/media/winstonfan/Workspace/MyDoc/code/frontend/covid-chat/node_modules/.bin:/home/winstonfan/.deta/bin:/home/winstonfan/.nvm/versions/node/v14.16.0/bin:/home/winstonfan/anaconda3/bin:/home/winstonfan/anaconda3/condabin:/home/winstonfan/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/local/cuda-11.1/bin
    9 verbose lifecycle [email protected]~build: CWD: /media/winstonfan/Workspace/MyDoc/code/frontend/covid-chat
    10 silly lifecycle [email protected]~build: Args: [ '-c', 'react-scripts build' ]
    11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
    12 info lifecycle [email protected]~build: Failed to exec build script
    13 verbose stack Error: [email protected] build: `react-scripts build`
    13 verbose stack Exit status 1
    13 verbose stack     at EventEmitter.<anonymous> (/home/winstonfan/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
    13 verbose stack     at EventEmitter.emit (events.js:315:20)
    13 verbose stack     at ChildProcess.<anonymous> (/home/winstonfan/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
    13 verbose stack     at ChildProcess.emit (events.js:315:20)
    13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
    13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
    14 verbose pkgid [email protected]
    15 verbose cwd /media/winstonfan/Workspace/MyDoc/code/frontend/covid-chat
    16 verbose Linux 5.8.0-59-generic
    17 verbose argv "/home/winstonfan/.nvm/versions/node/v14.16.0/bin/node" "/home/winstonfan/.nvm/versions/node/v14.16.0/bin/npm" "run" "build"
    18 verbose node v14.16.0
    19 verbose npm  v6.14.11
    20 error code ELIFECYCLE
    21 error errno 1
    22 error [email protected] build: `react-scripts build`
    22 error Exit status 1
    23 error Failed at the [email protected] build script.
    23 error This is probably not a problem with npm. There is likely additional logging output above.
    24 verbose exit [ 1, true ]
    
    

    Expected behavior (期望的结果是什么) Generated a built project

    opened by franva 8
  • Popover 只展示了一次

    Popover 只展示了一次

    Version information

    • ChatUI
    • ChatUI Version: 0.3.2
    • React Version: laetst
    • OS Version: Big Sur
    • Browser Version: Chrome 90

    Describe the bug

    配置了Action和 wideBreakpoint 之后所有 action 改成了 Popover 的形式展示,但是点击第一次可以展示,之后就再也不能展示了。通过debug发现 useClickOutside 会在 didmout 之后也触发了。

    实际上是有添加到body的,但是又立马被删除了。

    Steps To Reproduce 1. 2.

    Link to minimal reproduction

    Expected behavior

    opened by zqjimlove 8
  • 请更新下文档

    请更新下文档

    谢谢

    documentation 
    opened by PERSISTENC 7
  • [Bug] 接收消息时提示错误 TypeError: Cannot read property 'call' of undefined

    [Bug] 接收消息时提示错误 TypeError: Cannot read property 'call' of undefined

    此时后端已正常响应,并返回了消息内容,但错误提示如下: issue3

    setup.js - ChatSDK - requests中的代码如下: issue2

    对应SDK中的报错位置如图: issue1

    opened by georgefeng 5
  • chatui pro文档未更新

    chatui pro文档未更新

    • 最新0.1.1中疑似已废弃brand配置,而该页面配置实例中仍出现brand相关配置 https://chatui.io/sdk/config-ui

    • 建议保留以下示例功能,并提供相应卡片模版,挺实用的!

    documentation 
    opened by Exrick 5
  • 需求:根据消息ID,定位到某一个消息的位置。 模仿查看历史消息,点击定位到消息所在位置。

    需求:根据消息ID,定位到某一个消息的位置。 模仿查看历史消息,点击定位到消息所在位置。

    此功能可以解决什么问题?(这个功能解决了什么问题) 通过消息id或其他方式定位到聊天框内消息所在位置,最好有一个选中状态

    描述您想要的解决方案?(描述您想要的解决方案) 给出一方法,传值定位消息列表到消息所在位置

    拟议的API是什么样的?(您期望的API是怎样的) 怎么方便怎么来,无要求

    enhancement 
    opened by xie-rgb 3
  • 官网中的demo显示请求无响应,开启或关闭我的梯子都不能访问,请问是内部的网站吗?

    官网中的demo显示请求无响应,开启或关闭我的梯子都不能访问,请问是内部的网站吗?

    显示的内容是 market.wapa.taobao.com 的响应时间过长。,我ping了一下,显示hosts错误,请问这是阿里内部的网站吗?

    image

    image

    opened by dumplings 3
  • 样式文件与antd有冲突

    样式文件与antd有冲突

    opened by DerekHQ 3
  • 文档中的效果图无法显示

    文档中的效果图无法显示

    image

    随便找个图片路径 https://intranetproxy.alipay.com/skylark/lark/0/2020/png/83084/1584339068897-147dd4dd-aa5f-4d12-ba71-57ffbca0ec77.png ,应该是使用了ali内部的地址吧

    documentation 
    opened by tourze 3
  • 需要能够自定义发送按钮

    需要能够自定义发送按钮

    What problem does this feature solve? (这个功能解决了什么问题) 需要自定义发送按钮的样式和内容(比如现在是纯文本,而之前可以是Icon)

    Describe the solution you'd like (描述您想要的解决方案) 加一个prop,可以让我自定义发送按钮的组件

    What does the proposed API look like? (你期望的 API 是怎样的) 加个prop,只要能自定义组件并绑上默认点击事件啥的就行:

    enhancement 
    opened by locktongue 0
  • Turkish locale added

    Turkish locale added

    Added to LocaleProvider/locales/tr_TR.ts.

    opened by cemalgnlts 1
  • English docs

    English docs

    What problem does this feature solve? (这个功能解决了什么问题) Make the component library more accessible to English-speaking people.

    Describe the solution you'd like (描述您想要的解决方案) Provide an English version of https://chatui.io/. Currently, I can sort of work around this using Google Translate but the translations are often far from perfect.

    What does the proposed API look like? (你期望的 API 是怎样的) N/A

    enhancement 
    opened by NMinhNguyen 0
  • appendMsg或resetList更新消息列表时如何不让滚动条自动滚动到底部

    appendMsg或resetList更新消息列表时如何不让滚动条自动滚动到底部

    What problem does this feature solve? (这个功能解决了什么问题)

    通过socket或其他方式接收到后端数据,然后通过appendMsg渲染消息列表时,滚动条会自动滚动到底部。如果此时我正在阅读前面的消息,会直接跳走,体验不好。

    Describe the solution you'd like (描述您想要的解决方案) 执行appendMsg时,如果通过某种方式判断到正在阅读前面的消息记录,则不要让滚动条自动跳转到底部

    What does the proposed API look like? (你期望的 API 是怎样的) 暂时没深入了解相关API,不做评论

    enhancement 
    opened by vaseala 1
Releases(0.1.0)
Owner
Alibaba
Alibaba Open Source
Alibaba
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website:https://chatui.io English | 简体中文 Features ?? Best Practices: The best practice

Alibaba 1.2k Oct 19, 2021
EBS Design System - A React-based UI toolkit for enterprise grade applications

EBS Design System - A React-based UI toolkit for enterprise grade applications

EBS Integrator 114 Oct 9, 2021
A UI Design Language and React UI library powered by Synerise team https://design.synerise.com

A UI Design Language and React UI library powered by Synerise team https://design.synerise.com

Synerise 83 Oct 8, 2021
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 21.1k Oct 14, 2021
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 11.2k Oct 14, 2021
React UI is a react UI library that uses the latest design language

coming-ui React UI is a react UI library that uses the latest design language Documentation

jantongCode 13 Oct 12, 2021
A set of React UI components that supports Pinterest’s design language

Gestalt Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and

Pinterest 3.9k Oct 14, 2021
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion 192 Oct 12, 2021
Configurable React Components with great UX

Belle Configurable React Components with great UX. Website & Documentation: http://nikgraf.github.io/belle/ Getting Started Belle is available as npm

Nik Graf 2.5k Oct 5, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI 72.3k Oct 17, 2021
Atomic Layout is a physical representation of layout composition to create declarative responsive layouts in React.

Atomic Layout is a spatial distribution library for React. It uses CSS Grid to define layout areas and render them as React components.

Artem Zakharchenko 1k Oct 16, 2021
Typesafe, declarative, and composable UI engine on top of React and Focal

Typesafe, declarative, and composable UI engine on top of React and Focal

Grammarly 34 Oct 10, 2021
Paperclip - Build UIs at the speed of thought

Build UIs at the speed of thought. Paperclip is a template engine that comes with tools for building presentational components in realtime, all within your existing IDE:

Craig Condon 171 Sep 24, 2021
Modern and minimalist React UI library.

Modern and minimalist React UI library, originating from Vercel's design. Quick Start run yarn add @geist-ui/react or npm i @geist-ui/react install it

Geist 2.4k Oct 14, 2021
Modern and minimalist React UI library.

Modern and minimalist React UI library.

Geist 2.4k Oct 19, 2021
Modern and minimalist React UI library.

Modern and minimalist React UI library.

Geist 1.5k Mar 1, 2021
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.5k Oct 18, 2021
Contrast Design Bootstrap Free : Elegant UI Kit and reusable components for building mobile-first, responsive websites and web apps

Contrast Bootstrap React Elegant UI Kit and reusable components for building mobile-first, responsive webistes and web apps Install npm install --save

Devwares 22 Sep 22, 2021
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience.

Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

Radix 1.7k Oct 18, 2021