react chat window

React-Chat-Window

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

Características

• Personalizável
• Back -end Agnóstico
• Livre

Demonstração

Índice

• Instalação
• Exemplo
• Componentes

Instalação

 $ npm install react-chat-window

Exemplo

 import React , { Component } from 'react'
import { Launcher } from 'react-chat-window'

class Demo extends Component {

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

  _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-chat-window' ,
          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 de demonstração.

Componentes

Lançador

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

Props do lançador:

prop	tipo	obrigatório	descrição
agenteProfile	objeto	sim	Representa o agente de atendimento ao cliente do seu produto ou serviço. Campos: imageurl (string), TeamName (String).
Handleclick	função	sim	Intercepte o evento de clique no lançador. Nenhum argumento enviado quando a função é chamada.
isopen	booleano	sim	Força o estado aberto/próximo da janela de bate -papo. Se isso não estiver definido, ele será aberto e fechará quando clicado.
Messagelista	[mensagem]	sim	Uma variedade de objetos de mensagem a serem renderizados como uma conversa.
mudo	booleano	não	Não jogue som para mensagens recebidas. Padrões para false .
newMessagesCount	número	não	O número de novas mensagens. Se maior que 0, esse número será exibido em um crachá no lançador. Padrões para 0 .
OnFilesselected	Função (Filelist)	não	Chamado após o arquivo ser selecionado do diálogo na janela de bate -papo.
OnMessageWassent	função (mensagem)	sim	Chamado quando uma mensagem é enviada, com um objeto de mensagem como um argumento.
showemoji	booleano	não	Se deve ou não mostrar o botão Emoji na barra de entrada. Padrões para true .

Objetos de mensagem

Os objetos da mensagem são renderizados de maneira diferente, dependendo do seu tipo. Atualmente, apenas os tipos de texto, arquivo e emoji são suportados. Cada objeto de mensagem tem 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 : {
    url : 'somefile.mp3' ,
    fileName : 'Any old name'
  }
}

Objetos do perfil do agente

Parece isso:

 {
  imageUrl : 'https://somewhere.on/the_web.png' ,
  teamName : 'Da best'
}