chat ui react скачать - chat ui react source -код скачать

chat ui react

AI Исходный код

1.0.0

Скачать

чат-UI-реакт

CHAT-UI-React-это пакет NPM для создания беседы. Этот пакет предлагает следующее:

Реагировать компонент
- Чат сообщения
- Форма ввода сообщения
Класс, который управляет отображением компонентов

Вы можете включить это в свои онлайн -чаты и чат -ботов.

В настоящее время компонент использует материал пользовательского интерфейса React. Если вам нужен компонент, отличный от материала-UI, вы можете заменить его исходным компонентом и использовать его.

Демо

Смотрите демо -сайт.

Пример

См. example каталог.

Эхо-бот: чат-бот, который повторяет пользовательский ввод.
CDN: простой способ начать быстро.

Установка

Node.js

С NPM:

npm install chat-ui-react react react-dom @material-ui/core

С пряжей:

yarn add chat-ui-react react react-dom @material-ui/core

CDN

 < script crossorigin =" anonymous " src =" https://unpkg.com/react@16/umd/react.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/react-dom@16/umd/react-dom.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/@material-ui/core@4/umd/material-ui.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/chat-ui-react@latest/dist/browser/chat-ui-react.umd.polyfill.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/@babel/standalone@7/babel.min.js " > </ script >

Использование

Этот пакет состоит из компонента MuiChat , который отображает чат и класс ChatController , который управляет отображением чата. На рисунке ниже показано каждую связь.

 +------------+           +------------------+           +-----------+
|            |   Call    |                  |   Call    |           |
|            |           |                  |           |           |
|  Your App  |  +----->  |  ChatController  |  +----->  |  MuiChat  |
|            |           |                  |           |           |
|            |           |                  |           |           |
+------------+           +------------------+           +-----------+

Эта структура позволяет нам сосредоточиться исключительно на передаче дисплея чата в ChatController . Вам не нужно беспокоиться о управлении дисплеем компонентов.

Если вам не нравится то, что вы видите, вы можете заменить MuiChat другим компонентом. В приложении нет изменений из -за замены.

Вот простой пример, чтобы понять, как его использовать.

 function App ( ) : React . ReactElement {
  const [ chatCtl ] = React . useState ( new ChatController ( ) ) ;

  React . useMemo ( async ( ) => {
    // Chat content is displayed using ChatController
    await chatCtl . addMessage ( {
      type : 'text' ,
      content : `Hello, What's your name.` ,
      self : false ,
    } ) ;
    const name = await chatCtl . setActionRequest ( { type : 'text' } ) ;
  } , [ chatCtl ] ) ;

  // Only one component used for display
  return < MuiChat chatController = { chatCtl } /> ;
}

Далее мы объясним, как использовать ChatController .

Сообщение

Чтобы отобразить сообщение чата, используйте метод addMessage . В опции self укажите, является ли это собственным сообщением или чужой сообщением.

 await chatCtl . addMessage ( {
  type : 'text' ,
  content : `Hello, What's your name.` ,
  self : false ,
} ) ;

Действие

Используйте метод setActionRequest , чтобы предложить пользователю для сообщения.

Количество действий

Есть два способа запросить действие: одноразовое действие и всегда запросить действия.

Единственное действие

Укажите false для опции always запросить одноразовое действие у пользователя. Возвращаемое значение метода - это Promise , которое возвращает пользовательский ввод.

 const response = await chatCtl . setActionRequest ( {
  type : 'text' ,
  always : false ,
} ) ;
console . log ( response . value ) ;

Всегда действие

Чтобы всегда запрашивать действие у пользователя, укажите true в опции always . Укажите функцию обратного вызова, которая получает вход, потому что он несколько раз вводится пользователем. Чтобы отменить запрос ввода от пользователя, вызовите метод cancelActionRequest .

 chatCtl . setActionRequest (
  { type : 'text' , always : true } ,
  ( response ) => {
    console . log ( response . value ) ;
  }
) ;
chatCtl . cancelActionRequest ( ) ;

Тип действия

Существует несколько типов действий, таких как текст и выбор.

Текст

Это действие вводит строку.

Укажите text для type . Возвращаемое значение метода - это сообщение, введенное пользователем.

 const response = await chatCtl . setActionRequest ( { type : 'text' } ) ;
console . log ( response . value ) ;

Один выбор

Это действие выбирает один из параметров.

Укажите select для type . Укажите параметры в options . value используется для атрибутов HTML, а text используется для отображения экрана. Возвращаемое значение метода является элементом options выбранных пользователем.

 const response = await chatCtl . setActionRequest ( {
  type : 'select' ,
  options : [
    {
      value : 'a' ,
      text : 'A' ,
    } ,
    {
      value : 'b' ,
      text : 'B' ,
    } ,
  ] ,
} ) ;
console . log ( response . option ) ;
// If A is selected
// { value: 'a', text: 'A' }

Множественный выбор

Это действие выбирает несколько параметров.

Укажите multi-select для type . Укажите параметры в options . value используется для атрибутов HTML, а text используется для отображения. Возвращаемое значение метода - выбранные options .

 const response = await chatCtl . setActionRequest ( {
  type : 'multi-select' ,
  options : [
    {
      value : 'a' ,
      text : 'A' ,
    } ,
    {
      value : 'b' ,
      text : 'B' ,
    } ,
  ] ,
} ) ;
console . log ( response . options ) ;
//  If A and B are selected
// [{ value: 'a', text: 'A' }, { value: 'b', text: 'B' }]

Файл

Это действие вводит файл.

Укажите file для type . Вы можете указать accept и multiple атрибутов input тега. Возвращаемое значение метода представляет собой массив файлов, введенных пользователем.

 const response = await chatCtl . setActionRequest ( {
  type : 'file' ,
  accept : 'image/*' ,
  multiple : true ,
} ) ;
console . log ( response . files ) ;

Аудио

Это действие вводит аудио.

Укажите audio для type . Возвращаемое значение метода - это Blob аудио ввода пользователем. Если аудио вход не выполняется, Reject отклонено, Promise возвращается.

 try {
  const response = await chatCtl . setActionRequest ( {
    type : 'audio' ,
  } ) ;
  console . log ( response . audio ) ;
} catch ( e ) {
  console . log ( e ) ;
}

Обычай

Это действие использует ваш пользовательский компонент в качестве входного. Укажите custom для type . Укажите свой компонент в Component .

Пользовательские компоненты следуют конвенциям React для создания входных форм, как обычно. Он получает chatController и actionRequest в качестве свойств. Это автоматически устанавливается CHAT-UI-React. Затем установите ввод, полученный от пользователя, на метод setActionResponse класса ChatController . Это может быть получено приложением как возвращаемое значение setActionRequest .

 function GoodInput ( {
  chatController ,
  actionRequest ,
} : {
  chatController : ChatController ;
  actionRequest : ActionRequest ;
} ) {
  const chatCtl = chatController ;

  const setResponse = React . useCallback ( ( ) : void => {
    const res = { type : 'custom' , value : 'Good!' } ;
    chatCtl . setActionResponse ( actionRequest , res ) ;
  } , [ actionRequest , chatCtl ] ) ;

  return (
    < Button
      type = "button"
      onClick = { setResponse }
      variant = "contained"
      color = "primary"
    >
      Good!
    </ Button >
  ) ;
}

const custom = await chatCtl . setActionRequest ( {
  type : 'custom' ,
  Component : GoodInput ,
} ) ;
console . log ( custom . value ) ;