react chat widget

react chat widget

Características

• Interfaz de usuario de mensajes de texto sin formato
• Estilo de fragmento para enlaces (solo como respuestas por ahora)
• Totalmente personalizable
• Fácil de usar

Instalación

npm

npm install --save react-chat-widget

hilo

yarn add react-chat-widget

Uso

1- Agregue el componente Widget a su componente raíz

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  return (
    < div className = "App" >
      < Widget />
    </ div >
  ) ;
}

export default App ;

2- El único accesorio obligatorio que debe utilizar es handleNewUserMessage , que recibirá la entrada del usuario.

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

3- Importa los métodos para agregar mensajes en el Widget. (Ver mensajes)

 import React from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this awesome chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
    addResponseMessage ( response ) ;
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

4- ¡Personaliza el widget para que coincida con el diseño de tu aplicación! Puedes agregar ambos accesorios para administrar el título del widget y el avatar que usará. Por supuesto, siéntete libre de cambiar los estilos que tendrá el widget en el CSS.

 import React , { useEffect } from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

import logo from './logo.svg' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this **awesome** chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

    return (
      < div className = "App" >
        < Widget
          handleNewUserMessage = { handleNewUserMessage }
          profileAvatar = { logo }
          title = "My new awesome title"
          subtitle = "And my cool subtitle"
        />
      </ div >
    ) ;
}

export default App ; 

API

Accesorios

apuntalar	tipo	requerido	valor predeterminado	descripción
manejarNuevoMensajedeUsuario	(...argumentos: cualquiera[]) => cualquiera	SÍ		Función para manejar la entrada del usuario, recibirá el mensaje de texto completo cuando se envíe
título	cadena	NO	'Bienvenido'	Título del widget
subtitular	cadena	NO	'Este es el subtítulo de tu chat'	Subtítulo del widget
remitenteLugarHolder	cadena	NO	'Escribe un mensaje...'	El marcador de posición de la entrada del mensaje.
perfilAvatar	cadena	NO		La imagen de perfil que se establecerá en las respuestas.
perfilClienteAvatar	cadena	NO		La imagen de perfil que se configurará en los mensajes del cliente.
títuloAvatar	cadena	NO		La imagen que se mostrará junto al título del chat.
mostrar botón cerrar	booleano	NO	FALSO	Mostrar u ocultar el botón de cerrar en modo de pantalla completa
Modo de pantalla completa	booleano	NO	FALSO	Permitir el uso de pantalla completa en modo de escritorio completo
enfoque automático	booleano	NO	verdadero	Enfoque automático o no la entrada del usuario
lanzacohetes	(handleToggle) => Tipo de elemento	NO		Componente de iniciador personalizado para usar en lugar del predeterminado
manejarQuickButtonClicked	(...argumentos: cualquiera[]) => cualquiera	NO		La función para manejar que el usuario haga clic en un botón rápido recibirá el 'valor' cuando haga clic.
Mostrar marca de tiempo	booleano	NO	verdadero	Mostrar marca de tiempo en los mensajes
ID de chat	cadena	NO	'contenedor-de-chat-rcw'	ID del contenedor de chat para a11y
manejarAlternar	(...argumentos: cualquiera[]) => cualquiera	NO	'contenedor-de-chat-rcw'	Función para manejar cuando se alterna el widget, recibirá el estado de alternancia
lanzadorOpenLabel	cadena	NO	'Chat abierto'	Valor alternativo para el lanzador cuando está cerrado
lanzadorCerrarEtiqueta	cadena	NO	'Cerrar chat'	Valor alternativo para el iniciador cuando está abierto
lanzadorOpenImg	cadena	NO	''	URL de imagen local o remota; si no se proporciona, mostrará la imagen predeterminada
lanzadorCerrarImg	cadena	NO	''	URL de imagen local o remota; si no se proporciona, mostrará la imagen predeterminada
enviarBotónAlt	cadena	NO	'Enviar'	Botón de envío alternativo para todos los fines
manejarTextInputChange	(evento) => cualquiera	NO		Prop que se activa al cambiar la entrada
manejarEnviar	(evento) => cualquiera	NO		Prop que se activa cuando se envía un mensaje, usado para validación personalizada
redimensionable	booleano	NO	FALSO	Prop que permite cambiar el tamaño del widget arrastrando su borde izquierdo
emojis	booleano	NO	FALSO	habilitar el selector de emojis
mostrar insignia	booleano	NO	verdadero	Prop que permite mostrar u ocultar la insignia de mensaje no leído

Estilos

Para cambiar los estilos que necesita que tenga el widget, simplemente anule las clases CSS que las envuelven dentro de los contenedores y agrégueles su propio estilo. Todas las clases tienen el prefijo rcw- para que no anulen las otras clases en caso de que no las tenga. Para anular, puede hacer, por ejemplo:

. rcw-conversation-container > . rcw-header {
  background-color : red;
}

. rcw-message > . rcw-response {
  background-color : black;
  color : white;
}

De esa manera, puedes dejar el JS limpio y mantener los estilos dentro del CSS.

Mensajes

A partir de la versión 3.0, los mensajes ahora tienen una ID opcional que se puede agregar al crearlos. Si desea agregar mensajes nuevos, puede utilizar los siguientes métodos:

• agregar mensaje de respuesta

  • parámetros:
    • texto: cadena (admite rebajas)
    • id: cadena (opcional)
  • Método para agregar un nuevo mensaje escrito como respuesta a una entrada del usuario.

• agregar mensaje de usuario

  • parámetros:
    • texto: cadena (admite rebajas)
    • id: cadena (opcional)
  • Este método agregará un nuevo mensaje escrito como usuario. Tenga en cuenta que no activará la propiedad handleNewUserMessage()

• agregarLinkSnippet

  • parámetros:
    • enlace
  • Método para agregar un fragmento de enlace. Debe proporcionar a este método un objeto de enlace, que debe tener la forma:

     {
      title : 'My awesome link' ,
      link : 'https://github.com/Wolox/react-chat-widget' ,
      target : '_blank'
    }

  • De forma predeterminada, el valor target es _blank , lo que abrirá el enlace en una nueva ventana.

• renderizar componente personalizado

  • parámetros:
    • componente: Componente a renderizar,
    • props: accesorios que el componente necesita,
    • showAvatar: booleano, valor predeterminado: falso; el componente se representará con el avatar como los mensajes
  • Método para representar un componente personalizado dentro del contenedor de mensajes. Con este método, puede agregar cualquier componente que necesite que tenga el widget.

• establecer botones rápidos

  • parámetros:
    • botones: una matriz de objetos con la label y value de las claves.

Markdown es compatible tanto con las respuestas como con los mensajes de los usuarios.

Comportamiento de los widgets

También puedes controlar ciertas acciones del widget:

• alternarWidget

  • parámetros: No se esperan parámetros
  • Este método consiste en alternar el widget a voluntad sin la necesidad de activar el evento de clic en el iniciador.

• alternar entrada deshabilitada

  • parámetros: No se esperan parámetros
  • Método para alternar la disponibilidad de la entrada del mensaje para que el usuario escriba en él

• alternarMsgLoader

  • Alterna el cargador de mensajes que se muestra como un estilo "escribiendo...".

• eliminar mensajes *

  • parámetros:
    • contar: mensajes para eliminar contando del último al primero
    • id: id del mensaje a eliminar
  • Elimine los mensajes que tengan una identificación que configuró previamente con addResponseMessage o elimínelos según la posición o ambos. Por ejemplo, deleteMessages(2, 'myId') eliminará el mensaje que tiene la identificación myId y el mensaje anterior.

• marcar todo como leído

  • Marca todos los mensajes de respuesta como leídos. Los mensajes del usuario no tienen la propiedad leído/no leído.

• establecerBadgeCount

  • parámetros:
    • contar: número
  • A partir de la versión 3.0, el accesorio badge se cambiará para que se administre desde el widget. Este método consiste en configurar manualmente el número de placa.

Componentes de widgets

Lanzador personalizado

Puede usar un componente personalizado para el Iniciador si necesita uno que no sea el predeterminado, simplemente use el accesorio del iniciador :

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

...

function MyApp ( ) {
  const getCustomLauncher = ( handleToggle ) =>
    < button onClick = { handleToggle } > This is my launcher component! </ button >

  return (
    < Widget
      . . .
      launcher = { handleToggle => getCustomLauncher ( handleToggle ) }
    />
  )
}

getCustomLauncher() es un método que devolverá el componente Launcher como se ve en el ejemplo. De forma predeterminada, la función pasada por ese accesorio recibirá el parámetro handleToggle , que es el método que alternará el widget.

Acerca de

Este proyecto es mantenido por Martín Callegari y fue escrito por Wolox.