vue beautiful chat
v2.5.0
vue-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.
vue-beautiful-chat se está trasladando a vue de react-beautiful-chat (que puede encontrar aquí)
Ir a preguntas frecuentes
$ yarn add vue-beautiful-chat
import Chat from 'vue-beautiful-chat'
Vue . use ( Chat ) < template >
< div >
< beautiful-chat
:participants = " participants "
:titleImageUrl = " titleImageUrl "
:onMessageWasSent = " onMessageWasSent "
:messageList = " messageList "
:newMessagesCount = " newMessagesCount "
:isOpen = " isChatOpen "
:close = " closeChat "
:icons = " icons "
:open = " openChat "
:showEmoji = " true "
:showFile = " true "
:showEdition = " true "
:showDeletion = " true "
:showTypingIndicator = " showTypingIndicator "
:showLauncher = " true "
:showCloseButton = " true "
:colors = " colors "
:alwaysScrollToBottom = " alwaysScrollToBottom "
:disableUserListToggle = " false "
:messageStyling = " messageStyling "
@onType = " handleOnType "
@edit = " editMessage " />
</ div >
</ template > export default {
name : 'app' ,
data ( ) {
return {
participants : [
{
id : 'user1' ,
name : 'Matteo' ,
imageUrl : 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
} ,
{
id : 'user2' ,
name : 'Support' ,
imageUrl : 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
}
] , // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
titleImageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png' ,
messageList : [
{ type : 'text' , author : `me` , data : { text : `Say yes!` } } ,
{ type : 'text' , author : `user1` , data : { text : `No.` } }
] , // the list of the messages to show, can be paginated and adjusted dynamically
newMessagesCount : 0 ,
isChatOpen : false , // to determine whether the chat window should be open or closed
showTypingIndicator : '' , // when set to a value matching the participant.id it shows the typing indicator for the specific user
colors : {
header : {
bg : '#4e8cff' ,
text : '#ffffff'
} ,
launcher : {
bg : '#4e8cff'
} ,
messageList : {
bg : '#ffffff'
} ,
sentMessage : {
bg : '#4e8cff' ,
text : '#ffffff'
} ,
receivedMessage : {
bg : '#eaeaea' ,
text : '#222222'
} ,
userInput : {
bg : '#f4f7f9' ,
text : '#565867'
}
} , // specifies the color scheme for the component
alwaysScrollToBottom : false , // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
messageStyling : true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
}
} ,
methods : {
sendMessage ( text ) {
if ( text . length > 0 ) {
this . newMessagesCount = this . isChatOpen ? this . newMessagesCount : this . newMessagesCount + 1
this . onMessageWasSent ( { author : 'support' , type : 'text' , data : { text } } )
}
} ,
onMessageWasSent ( message ) {
// called when the user sends a message
this . messageList = [ ... this . messageList , message ]
} ,
openChat ( ) {
// called when the user clicks on the fab button to open the chat
this . isChatOpen = true
this . newMessagesCount = 0
} ,
closeChat ( ) {
// called when the user clicks on the botton to close the chat
this . isChatOpen = false
} ,
handleScrollToTop ( ) {
// called when the user scrolls message list to top
// leverage pagination for loading another page of messages
} ,
handleOnType ( ) {
console . log ( 'Emit typing event' )
} ,
editMessage ( message ) {
const m = this . messageList . find ( m => m . id === message . id ) ;
m . isEdited = true ;
m . data . text = message . data . text ;
}
}
}Para obtener ejemplos más detallados, consulte la carpeta de demostración.
Launcher es el único componente necesario para utilizar vue-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.
| apuntalar | tipo | descripción |
|---|---|---|
| *participantes | [perfil del agente] | Representa a los agentes de atención al cliente de su producto o servicio. Campos para cada agente: id, nombre, imageUrl |
| *en el mensaje se envió | función (mensaje) | Se llama cuando se envía un mensaje con el objeto del mensaje como argumento. |
| *está abierto | Booleano | El bool que indica si la ventana de chat debe estar abierta o no. |
| *abierto | Función | La función pasada al componente que muta el bool mencionado anteriormente para abrir el chat. |
| *cerca | Función | La función pasada al componente que muta el bool mencionado anteriormente para cerrar el chat. |
| 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. |
| mostrar eliminación | Booleano | Un bool que indica si se muestra o no el botón de edición de un mensaje |
| mostrarEdición | booleano | Un bool que indica si se muestra o no el botón de eliminar para un mensaje |
| Mostrar indicador de escritura | Cadena | Una cadena que se puede configurar en el participante.id de un usuario para mostrarle un indicador typing . |
| mostrar encabezado | booleano | Un bool que indica si se muestra o no el encabezado de la ventana de chat. |
| desactivarUserListToggle | Booleano | Un bool que indica si se permite o no al usuario alternar entre la lista de mensajes y la lista de participantes. |
| bandera | Objeto | Un objeto que contiene las especificaciones de los colores utilizados para pintar el componente. ver aquí |
| mensajeEstilo | Booleano | Un bool que indica si se habilita o no la compatibilidad con msgdown para formatear mensajes en el chat. ver aquí |
| evento | parámetros | descripción |
|---|---|---|
| en tipo | indefinido | Se activa cuando el usuario escribe en la entrada del mensaje |
| editar | message | Se activa después de que el usuario edite el mensaje |
Reemplazo del encabezado predeterminado.
< template v-slot : header >
? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template > Reemplazo del avatar del usuario. Parámetros: message , user
< template v-slot : user-avatar = " { message , user } " >
< div style = " border-radius : 50 % ; color : pink ; font-size : 15 px ; line-height : 25 px ; text-align : center ; background : tomato ; width : 25 px !important ; height : 25 px !important ; min-width : 30 px ; min-height : 30 px ; margin : 5 px ; font-weight : bold " v-if = " message.type === 'text' && user && user.name " >
{{user.name.toUpperCase()[0]}}
</ div >
</ template > Cambiar la rebaja para mensajes de texto. Parámetros: message
< template v-slot : text-message-body = " { message } " >
< small style = " background : red " v-if = " message.meta " >
{{message.meta}}
</ small >
{{message.text}}
</ template > Cambiar la rebaja del mensaje del sistema. Parámetros: message
< template v-slot : system-message-body = " { message } " >
[System]: {{message.text}}
</ template > Los objetos de mensaje se representan de forma diferente según su tipo. Actualmente, sólo se admiten texto, emoji y tipos de archivos. Cada objeto de mensaje tiene un campo author que puede tener el valor 'yo' o la identificación del agente correspondiente.
{
author : 'support' ,
type : 'text' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
text : 'some text' ,
meta : '06-16-2019 12:43'
}
}
{
author : 'me' ,
type : 'emoji' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
code : 'someCode'
}
}
{
author : 'me' ,
type : 'file' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
file : {
name : 'file.mp3' ,
url : 'https:123.rf/file.mp3'
}
}
} Al enviar un mensaje, puedes proporcionar un conjunto de frases que se mostrarán en el chat del usuario como respuestas rápidas. Agregar en el objeto de mensaje un campo suggestions con el valor de una matriz de cadenas activará esta funcionalidad
{
author : 'support' ,
type : 'text' ,
id : 1 , // or text '1'
data : {
text : 'some text' ,
meta : '06-16-2019 12:43'
} ,
suggestions : [ 'some quick reply' , ... , 'another one' ]
} git clone [email protected]:mattmezza/vue-beautiful-chat.git
cd vue-beautiful-chat
yarn install # this installs the package dependencies
yarn watch # this watches files to continuously compile them
Abra un nuevo shell en la misma carpeta
cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080
yarn build en la raíz para compilar la biblioteca con los últimos cambios. let redColors = {
header : {
bg : '#D32F2F' ,
text : '#fff'
} ,
launcher : {
bg : '#D32F2F'
} ,
messageList : {
bg : '#fff'
} ,
sentMessage : {
bg : '#F44336' ,
text : '#fff'
} ,
receivedMessage : {
bg : '#eaeaea' ,
text : '#222222'
} ,
userInput : {
bg : '#fff' ,
text : '#212121'
}
} < beautiful-chat
...
: colors = " redColors " />Esta es la variante roja. Consulte este archivo para ver la lista de variantes que se muestran en la página de demostración en línea.
Tenga en cuenta que debe pasar un Objeto que contenga cada una de las propiedades de color, de lo contrario la validación fallará.
Buenas noticias, el formato de mensaje ya está agregado. Puede habilitarlo configurando messageStyling en true y utilizará la biblioteca msgdown. Puede habilitar/deshabilitar la compatibilidad con el formato en cualquier momento, o puede dejar que los usuarios lo hagan cuando lo prefieran.
@a-kriya, @mattmezza
Por favor contáctenos si desea unirse como colaborador .
