react chat window

ventana react-chat

react-chat-window proporciona una ventana de chat de intercomunicación que se puede incluir fácilmente en cualquier proyecto de forma gratuita. No proporciona instalaciones de mensajería, solo el componente de vista.

Características

• Personalizado
• Backend agnóstico
• Gratis

Manifestación

Tabla de contenido

• Instalación
• Ejemplo
• Componentes

Instalación

 $ npm install react-chat-window

Ejemplo

 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 ejemplos más detallados, consulte la carpeta de demostración.

Componentes

Lanzacohetes

Launcher es el único componente necesario para usar React-Chat-Window. Reaccionará dinámicamente a los cambios en los mensajes. Todos los mensajes nuevos deben agregarse a través de un cambio en los accesorios como se muestra en el ejemplo.

Propiedades del lanzador:

apuntalar	tipo	requerido	descripción
agente	objeto	Sí	Representa el agente de servicio al cliente de su producto o servicio. Campos: ImageUrl (String), TeamName (String).
huelle	función	Sí	Intercepe el evento de clic en el lanzador. No se envía ningún argumento cuando se llama a la función.
isopener	booleano	Sí	Forzar el estado abierto/cerrado de la ventana de chat. Si esto no está configurado, se abrirá y cerrará cuando se haga clic.
mensajería	[mensaje]	Sí	Una variedad de objetos de mensajes se realizarán como una conversación.
silenciar	booleano	No	No reproduzcas el sonido para los mensajes entrantes. El valor predeterminado es false .
NewMessageScount	número	No	El número de mensajes nuevos. Si es superior a 0, este número se mostrará en una insignia en el lanzador. El valor predeterminado es 0 .
elegido	función (filelista)	No	Llamado después del archivo ha sido seleccionado del diálogo en la ventana de chat.
OnMessageWassent	función (mensaje)	Sí	Llamado cuando se envía un mensaje, con un objeto de mensaje como argumento.
showemoji	booleano	No	Si mostrar o no el botón emoji en la barra de entrada. El valor predeterminado es true .

Objetos de mensaje

Los objetos de mensaje se representan de manera diferente dependiendo de su tipo. Actualmente, solo son compatibles con el texto, el archivo y los tipos de emoji. Cada objeto de mensaje tiene un campo author que puede tener el valor 'yo' o 'ellos'.

 {
  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 de perfil de agente

Se ve así:

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