Download chat ui react chat ui react

chat ui react

Código-Fonte de IA

1.0.0

Baixar

Chat-ui-react

Chat-ui-react é um pacote NPM para a criação de UIs da Web conversacional. Este pacote oferece o seguinte:

Componente de reação
- Mensagem de bate -papo
- Formulário de entrada da mensagem
Classe que controla a exibição de componentes

Você pode incorporar isso em seus bate -papos e chatbots on -line.

Atualmente, o componente usa o material da estrutura da UI do React-UI. Se você deseja um componente que não seja o material-ui, poderá substituí-lo pelo componente original e usá-lo.

Demonstração

Veja o site de demonstração.

Exemplo

Veja o diretório example .

eco-bot: um chatbot que ecoa a entrada do usuário.
CDN: Uma maneira fácil de começar rapidamente.

Instalação

Node.js

Com npm:

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

Com fios:

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 >

Uso

Este pacote consiste em um componente MuiChat que exibe o bate -papo e uma classe ChatController que controla a exibição do bate -papo. A figura abaixo mostra cada relacionamento.

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

Essa estrutura nos permite focar apenas em passar o display de bate -papo para o ChatController . Você não precisa se preocupar com o controle de exibição dos componentes.

Se você não gosta do que vê, pode substituir MuiChat por outro componente. Não há alteração no aplicativo devido à substituição.

Aqui está um exemplo simples para entender como usá -lo.

 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 } /> ;
}

A seguir, explicaremos como usar ChatController .

Mensagem

Para exibir a mensagem de bate -papo, use o método addMessage . Na opção self , especifique se é sua própria mensagem ou a mensagem de outra pessoa.

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

Ação

Use o método setActionRequest para solicitar ao usuário uma mensagem.

Número de ações

Existem duas maneiras de solicitar uma ação: ação única e sempre solicitar ações.

Ação única

Especifique false para a opção always solicitar uma ação única do usuário. O valor de retorno do método é uma Promise que retorna a entrada do usuário.

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

Sempre ação

Para sempre solicitar uma ação do usuário, especifique true na opção always . Especifique a função de retorno de chamada que recebe a entrada porque é entrada várias vezes pelo usuário. Para cancelar a solicitação de entrada do usuário, ligue para o método cancelActionRequest .

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

Tipo de ação

Existem vários tipos de ações, como texto e seleção.

Texto

Esta ação insere uma string.

Especifique text para type . O valor de retorno do método é a mensagem inserida pelo usuário.

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

Seleção única

Esta ação seleciona uma nas opções.

Especifique select para type . Especifique as opções nas options . value é usado para atributos HTML e text é usado para exibição da tela. O valor de retorno do método é o elemento das options selecionadas pelo usuário.

 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' }

Seleção múltipla

Esta ação seleciona várias opções.

Especifique multi-select para type . Especifique as opções nas options . value é usado para atributos HTML e text é usado para exibição. O valor de retorno do método são as options selecionadas.

 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' }]

Arquivo

Esta ação insere um arquivo.

Especifique file para type . Você pode especificar accept e multiple como atributos da tag input . O valor de retorno do método é uma matriz de arquivos inseridos pelo usuário.

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

Áudio

Esta ação insere áudio.

Especifique audio para type . O valor de retorno do método é o Blob da entrada de áudio do usuário. Se a entrada de áudio falhar, a Promise rejeitada Reject será retornada.

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

Personalizado

Esta ação usa seu componente personalizado como entrada. Especifique custom para type . Especifique seu componente no Component .

Os componentes personalizados seguem as convenções do React para criar formulários de entrada como de costume. Ele recebe chatController e actionRequest como propriedades. Isso é definido automaticamente pelo chat-ui-react. Em seguida, defina a entrada recebida do usuário para o método setActionResponse da classe ChatController . Isso pode ser recebido pelo aplicativo como o valor de retorno do 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 ) ;