chat ui react Descargar - Descargar el código fuente chat ui react

chat ui react

Código Fuente de IA

1.0.0

Descargar

chat-ui-react

Chat-UI-React es un paquete NPM para construir UIS de web conversaciones. Este paquete ofrece lo siguiente:

Componente reaccionar
- Mensaje de chat
- Formulario de entrada de mensaje
Clase que controla la visualización de componentes

Puede incorporar esto a sus chats y chatbots en línea.

Actualmente, el componente utiliza el material de marco UI de React-UI. Si desea un componente que no sea material-UI, puede reemplazarlo con el componente original y usarlo.

Manifestación

Ver el sitio de demostración.

Ejemplo

Vea el directorio example .

Echo-Bot: un chatbot que se hace eco de la entrada del usuario.
CDN: Una manera fácil de comenzar rápidamente.

Instalación

Nodo.js

Con npm:

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

Con hilo:

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 paquete consiste en un componente MuiChat que muestra el chat y una clase ChatController que controla la visualización del chat. La siguiente figura muestra cada relación.

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

Esta estructura nos permite centrarnos únicamente en pasar la pantalla de chat al ChatController . No tiene que preocuparse por el control de la visualización de los componentes.

Si no le gusta lo que ve, puede reemplazar MuiChat con otro componente. No hay cambios en la aplicación debido al reemplazo.

Aquí hay un ejemplo simple para comprender cómo usarlo.

 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 continuación, explicaremos cómo usar ChatController .

Mensaje

Para mostrar el mensaje de chat, use el método addMessage . En la opción self , especifique si es su propio mensaje o el mensaje de otra persona.

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

Acción

Use el método setActionRequest para solicitar al usuario un mensaje.

Número de acciones

Hay dos formas de solicitar una acción: acción única y siempre solicitar acción.

Acción única

Especifique false para la opción always solicitar una acción única del usuario. El valor de retorno del método es una Promise que devuelve la entrada del usuario.

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

Siempre acción

Para solicitar siempre una acción del usuario, especifique true en la opción always . Especifique la función de devolución de llamada que recibe la entrada porque el usuario la ingresa varias veces. Para cancelar la solicitud de entrada del usuario, llame al método cancelActionRequest .

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

Tipo de acción

Existen varios tipos de acciones, como texto y selección.

Texto

Esta acción ingresa una cadena.

Especifique text para type . El valor de retorno del método es el mensaje ingresado por el usuario.

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

Selección única

Esta acción selecciona uno de las opciones.

Especifique select type . Especifique las opciones en options . value se utiliza para los atributos HTML y text se utiliza para la pantalla de pantalla. El valor de retorno del método es el elemento de las options seleccionadas por el usuario.

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

Selección múltiple

Esta acción selecciona múltiples opciones.

Especifique multi-select para type . Especifique las opciones en options . value se usa para los atributos HTML y text se utiliza para la visualización. El valor de retorno del método son las options seleccionadas.

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

Archivo

Esta acción ingresa un archivo.

Especifique file para type . Puede especificar accept y multiple como atributos de la etiqueta input . El valor de retorno del método es una matriz de archivos ingresados por el usuario.

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

Audio

Esta acción ingresa el audio.

Especificar audio para type . El valor de retorno del método es el Blob de la entrada de audio por parte del usuario. Si la entrada de audio falla, se devuelve la Promise Reject .

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

Costumbre

Esta acción utiliza su componente personalizado como entrada. Especifique custom para type . Especifique su componente en Component .

Los componentes personalizados siguen las convenciones React para crear formularios de entrada como de costumbre. Recibe chatController y actionRequest como propiedades. Esto se establece automáticamente por Chat-UI-React. Luego, establezca la entrada recibida del usuario al método setActionResponse de la clase ChatController . La aplicación puede recibir esto como el valor de retorno de 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 ) ;