react chat widget

react chat widget

Características

• IU de mensagem de texto simples
• Estilo de snippet para links (apenas como respostas por enquanto)
• Totalmente personalizável
• Fácil de usar

Instalação

npm

npm install --save react-chat-widget

fio

yarn add react-chat-widget

Uso

1- Adicione o componente Widget ao seu componente raiz

 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- O único suporte obrigatório que você precisa usar é o handleNewUserMessage , que receberá a entrada do usuário.

 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- Importe os métodos para você adicionar mensagens no Widget. (Ver mensagens)

 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- Personalize o widget para combinar com o design do seu aplicativo! Você pode adicionar ambos os adereços para gerenciar o título do widget e o avatar que ele usará. Claro, fique à vontade para alterar os estilos que o widget terá no 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

Adereços

adereço	tipo	obrigatório	valor padrão	descrição
lidarNewUserMessage	(...args: qualquer[]) => qualquer	SIM		Função para lidar com a entrada do usuário, receberá a mensagem de texto completa quando enviada
título	corda	NÃO	'Bem-vindo'	Título do widget
legenda	corda	NÃO	'Esta é a legenda do seu bate-papo'	Legenda do widget
remetentePlaceHolder	corda	NÃO	'Digite uma mensagem...'	O espaço reservado da entrada da mensagem
perfilAvatar	corda	NÃO		A imagem do perfil que será definida nas respostas
perfilClienteAvatar	corda	NÃO		A imagem do perfil que será definida nas mensagens do cliente
títuloAvatar	corda	NÃO		A imagem que será mostrada ao lado do título do chat
showCloseButton	booleano	NÃO	falso	Mostrar ou ocultar o botão Fechar no modo de tela inteira
modo tela cheia	booleano	NÃO	falso	Permitir o uso de tela inteira no modo desktop completo
foco automático	booleano	NÃO	verdadeiro	Foco automático ou não a entrada do usuário
lançador	(handleToggle) => ElementType	NÃO		Componente Launcher personalizado para usar em vez do padrão
identificadorQuickButtonClicked	(...args: qualquer[]) => qualquer	NÃO		Função para manipular o usuário ao clicar em um botão rápido, receberá o 'valor' quando clicado.
showTimeStamp	booleano	NÃO	verdadeiro	Mostrar carimbo de data/hora nas mensagens
ID do chat	corda	NÃO	'rcw-chat-contêiner'	ID do contêiner de bate-papo para a11y
identificadorToggle	(...args: qualquer[]) => qualquer	NÃO	'rcw-chat-contêiner'	Função a ser tratada quando o widget é alternado receberá o status de alternância
launcherOpenLabel	corda	NÃO	'Bate-papo aberto'	Valor Alt para o inicializador quando fechado
launcherCloseLabel	corda	NÃO	'Fechar bate-papo'	Valor Alt para o inicializador quando aberto
launcherOpenImg	corda	NÃO	''	URL da imagem local ou remota, se não for fornecido, mostrará a imagem padrão
launcherCloseImg	corda	NÃO	''	URL da imagem local ou remota, se não for fornecido, mostrará a imagem padrão
enviarButtonAlt	corda	NÃO	'Enviar'	Enviar botão alt para fins a11y
identificadorTextInputChange	(evento) => qualquer	NÃO		Suporte que é acionado na mudança de entrada
identificadorSubmit	(evento) => qualquer	NÃO		Prop que é acionado quando uma mensagem é enviada, usada para validação personalizada
redimensionável	booleano	NÃO	falso	Prop que permite redimensionar o widget arrastando sua borda esquerda
emoticons	booleano	NÃO	falso	ativar seletor de emojis
showBadge	booleano	NÃO	verdadeiro	Prop que permite mostrar ou ocultar o selo de mensagem não lida

Estilos

Para alterar os estilos que você precisa que o widget tenha, simplesmente substitua as classes CSS que os envolvem nos contêineres e adicione seu próprio estilo a eles! Todas as classes são prefixadas com rcw- para que não substituam suas outras classes caso você não as tenha. Para substituir, você pode fazer, por exemplo:

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

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

Dessa forma, você consegue deixar o JS limpo e manter os estilos dentro do CSS.

Mensagens

A partir da v3.0, as mensagens agora possuem um ID opcional que pode ser adicionado na criação. Se desejar adicionar novas mensagens, você pode usar os seguintes métodos:

• addResponseMessage

  • parâmetros:
    • texto: string (suporta remarcação)
    • id: string (opcional)
  • Método para adicionar uma nova mensagem escrita como resposta a uma entrada do usuário.

• addUserMessage

  • parâmetros:
    • texto: string (suporta remarcação)
    • id: string (opcional)
  • Este método adicionará uma nova mensagem escrita como usuário. Lembre-se de que isso não acionará a propriedade handleNewUserMessage()

• addLinkSnippet

  • parâmetros:
    • link
  • Método para adicionar um snippet de link. Você precisa fornecer a este método um objeto de link, que deve ter o formato de:

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

  • Por padrão, o valor target é _blank , o que abrirá o link em uma nova janela.

• renderCustomComponent

  • parâmetros:
    • componente: Componente a ser renderizado,
    • adereços: adereços que o componente precisa,
    • showAvatar: booleano, valor padrão: falso; o componente será renderizado com o avatar como as mensagens
  • Método para renderizar um componente personalizado dentro do contêiner de mensagens. Com este método, você pode adicionar qualquer componente que precise que o widget tenha.

• definirQuickButtons

  • parâmetros:
    • botões: uma matriz de objetos com o label e value das chaves

Markdown é compatível com respostas e mensagens do usuário.

Comportamento do widget

Você também pode controlar determinadas ações do widget:

• alternarWidget

  • parâmetros: Nenhum parâmetro esperado
  • Este método serve para alternar o widget à vontade, sem a necessidade de acionar o evento de clique no inicializador

• toggleInputDisabled

  • parâmetros: Nenhum parâmetro esperado
  • Método para alternar a disponibilidade da entrada de mensagem para o usuário escrever

• toggleMsgLoader

  • Alterna o carregador de mensagens que aparece como um estilo "digitando...".

• excluir mensagens *

  • parâmetros:
    • contagem: mensagens para excluir contando da última para a primeira
    • id: ID da mensagem a ser excluída
  • Exclua mensagens que tenham um ID definido anteriormente com addResponseMessage ou exclua com base na posição ou em ambos. Por exemplo deleteMessages(2, 'myId') irá deletar a mensagem que possui o id myId e a mensagem anterior.

• marcarAllAsRead

  • Marca todas as mensagens de resposta como lidas. As mensagens do usuário não possuem a propriedade lida/não lida.

• setBadgeCount

  • parâmetros:
    • contagem: número
  • A partir da v3.0, o suporte badge está sendo alterado para ser gerenciado de dentro do widget. Este método define manualmente o número do crachá.

Componentes de widget

Lançador personalizado

Você pode usar um componente personalizado para o Launcher se precisar de um que não seja o padrão, basta usar o launcher prop:

 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() é um método que retornará o componente Launcher conforme visto no exemplo. Por padrão, a função passada por aquela prop receberá o parâmetro handleToggle que é o método que irá alternar o widget.

Sobre

Este projeto é mantido por Martín Callegari e foi escrito por Wolox.