react beautiful chat

reaccionar-hermosa-chat

react-beautiful-chat proporciona una ventana de chat similar a un intercomunicador que se puede incluir fácilmente en cualquier proyecto de forma gratuita. No proporciona funciones de mensajería, sólo el componente de visualización.

react-beautiful-chat es una versión mejorada de react-chat-window (que puedes encontrar aquí)

Características

• Personalizable
• Agnóstico del backend
• Gratis

Manifestación

Tabla de contenido

• Instalación
• Ejemplo
• Componentes

Instalación

 $ npm install react-beautiful-chat

Ejemplo

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

Componentes

Lanzacohetes

Launcher es el único componente necesario para usar reaccionar-beautiful-chat. Reaccionará dinámicamente a los cambios en los mensajes. Todos los mensajes nuevos deben agregarse mediante un cambio en los accesorios como se muestra en el ejemplo.

Accesorios del lanzador:

apuntalar	tipo	descripción
*perfil del agente	objeto	Representa al agente de atención al cliente de su producto o servicio. Campos: nombre del equipo, URL de la imagen
el mensaje fue enviado	función (mensaje)	Se llama cuando se envía un mensaje con un objeto de mensaje como argumento.
lista de mensajes	[mensaje]	Una matriz de objetos de mensaje que se representarán como una conversación.
mostrarEmoji	booleano	Un bool que indica si se muestra o no el botón emoji
mostrar archivo	booleano	Un bool que indica si se muestra o no el botón de selección de archivos.
onKeyPress	función	Una función (userInput) => console.log(userInput) solía hacer algo con la entrada del usuario. La función se invoca sin rebote a 300 ms.
en eliminar	función	Una función (msg) => console.log(msg) utilizada para eliminar un mensaje enviado. Si se configuran estos accesorios, se mostrará un botón de eliminación en la esquina superior derecha de cada mensaje enviado por el usuario a un socio. Puede establecer cualquier propiedad en el objeto del mensaje (una propiedad id , por ejemplo) y luego usar esta propiedad para llamar a alguna API de backend para eliminar el mensaje.

Objetos de mensaje

Los objetos de mensaje se representan de forma diferente según su tipo. Actualmente, sólo se admiten tipos de texto y 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 : {
    name : 'file.mp3' ,
    url : 'https:123.rf/file.mp3'
  }
}