react beautiful chat

reagir-bonito-bate-papo

react-beautiful-chat fornece uma janela de bate-papo semelhante a um intercomunicador que pode ser facilmente incluída em qualquer projeto gratuitamente. Ele não fornece recursos de mensagens, apenas o componente de visualização.

react-beautiful-chat é uma versão melhorada do react-chat-window (que você pode encontrar aqui)

Características

• Personalizável
• Agnóstico de back-end
• Livre

Demonstração

Índice

• Instalação
• Exemplo
• Componentes

Instalação

 $ npm install react-beautiful-chat

Exemplo

 import React , { Component } from 'react'
import { render } from 'react-dom'
import { Launcher } from '../../src'

class Demo extends Component {

  constructor ( ) {
    super ( ) ;
    this . state = {
      messageList : messageHistory
    } ;
  }

  _onMessageWasSent ( message ) {
    this . setState ( {
      messageList : [ ... this . state . messageList , message ]
    } )
  }

  _sendMessage ( text ) {
    if ( text . length > 0 ) {
      this . setState ( {
        messageList : [ ... this . state . messageList , {
          author : 'them' ,
          type : 'text' ,
          data : { text }
        } ]
      } )
    }
  }

  render ( ) {
    return ( < div >
      < Launcher
        agentProfile = { {
          teamName : 'react-beautiful-chat' ,
          imageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
        } }
        onMessageWasSent = { this . _onMessageWasSent . bind ( this ) }
        messageList = { this . state . messageList }
        showEmoji
      />
    </ div > )
  }
}

Para exemplos mais detalhados, consulte a pasta demo.

Componentes

Lançador

Launcher é o único componente necessário para usar o react-beautiful-chat. Ele reagirá dinamicamente às mudanças nas mensagens. Todas as novas mensagens devem ser adicionadas através de uma alteração nos adereços conforme mostrado no exemplo.

Adereços do lançador:

adereço	tipo	descrição
*perfil do agente	objeto	Representa o agente de atendimento ao cliente do seu produto ou serviço. Campos: teamName, imageUrl
onMessageWasSent	função (mensagem)	Chamado quando uma mensagem é enviada com um objeto de mensagem como argumento.
lista de mensagens	[mensagem]	Uma matriz de objetos de mensagem a serem renderizados como uma conversa.
mostrarEmoji	bool	Um bool indicando se deve ou não mostrar o botão emoji
mostrarArquivo	bool	Um bool indicando se deve ou não mostrar o botão de seleção de arquivos
onKeyPress	função	Uma função (userInput) => console.log(userInput) usada para fazer algo com a entrada do usuário. A função é invocada com rejeição em 300ms
onDelete	função	Uma função (msg) => console.log(msg) usada para excluir uma mensagem enviada. Se esta propriedade estiver definida, um botão de exclusão será mostrado no canto superior direito de cada mensagem enviada pelo usuário a um parceiro. Você pode definir qualquer propriedade no objeto de mensagem (uma propriedade id , por exemplo) e então usar essa propriedade para chamar alguma API de back-end para excluir a mensagem.

Objetos de mensagem

Os objetos de mensagem são renderizados de forma diferente dependendo do seu tipo. Atualmente, apenas os tipos de texto e emoji são suportados. Cada objeto de mensagem possui um campo author que pode ter o valor 'eu' ou 'eles'.

 {
  author : 'them' ,
  type : 'text' ,
  data : {
    text : 'some text'
  }
}

{
  author : 'me' ,
  type : 'emoji' ,
  data : {
    code : 'someCode'
  }
}

{
  author : 'me' ,
  type : 'file' ,
  data : {
    name : 'file.mp3' ,
    url : 'https:123.rf/file.mp3'
  }
}