vue beautiful chat
v2.5.0
vue-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.
vue-beautiful-chat está sendo portado para vue do react-beautiful-chat (que você pode encontrar aqui)
Vá para perguntas frequentes
$ 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 exemplos mais detalhados, consulte a pasta demo.
Launcher é o único componente necessário para usar o vue-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ço | tipo | descrição |
|---|---|---|
| *participantes | [perfil do agente] | Representa os agentes de atendimento ao cliente do seu produto ou serviço. Campos para cada agente: id, nome, imageUrl |
| *onMessageWasSent | função (mensagem) | Chamado quando uma mensagem é enviada com o objeto de mensagem como argumento. |
| *está aberto | Booleano | O bool que indica se a janela de chat deve ou não ser aberta. |
| *abrir | Função | A função passada para o componente que altera o bool toggle mencionado acima para abrir o chat |
| *fechar | Função | A função passada para o componente que altera o bool toggle mencionado acima para fechar o chat |
| lista de mensagens | [mensagem] | Uma matriz de objetos de mensagem a serem renderizados como uma conversa. |
| mostrarEmoji | Booleano | Um bool indicando se deve ou não mostrar o botão emoji |
| mostrarArquivo | Booleano | Um bool indicando se deve ou não mostrar o botão de seleção de arquivos |
| mostrarDeleção | Booleano | Um bool indicando se deve ou não mostrar o botão de edição de uma mensagem |
| mostrarEdição | Booleano | Um bool indicando se deve ou não mostrar o botão excluir para uma mensagem |
| showTypingIndicator | Corda | Uma string que pode ser definida como participante.id de um usuário para mostrar o indicador typing para ele |
| showHeader | Booleano | Um bool indicando se deve ou não mostrar o cabeçalho da janela de chat |
| desativarUserListToggle | Booleano | Um bool indicando se deve ou não permitir que o usuário alterne entre a lista de mensagens e a lista de participantes |
| cores | Objeto | Um objeto que contém as especificações das cores usadas para pintar o componente. Veja aqui |
| mensagemStyling | Booleano | Um bool que indica se deve ou não ativar o suporte msgdown para formatação de mensagens no chat. Veja aqui |
| evento | parâmetros | descrição |
|---|---|---|
| onType | indefinido | Dispara quando o usuário digita na entrada da mensagem |
| editar | message | Dispara após mensagem editada pelo usuário |
Substituindo o cabeçalho padrão.
< template v-slot : header >
? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template > Substituindo o avatar do usuário. 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 > Alterar marcação para mensagem 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 > Alterar marcação para mensagem do sistema. Parâmetros: message
< template v-slot : system-message-body = " { message } " >
[System]: {{message.text}}
</ template > Os objetos de mensagem são renderizados de forma diferente dependendo do seu tipo. Atualmente, apenas os tipos de texto, emoji e arquivo são suportados. Cada objeto de mensagem possui um campo author que pode ter o valor 'me' ou o id do agente correspondente.
{
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'
}
}
} Ao enviar uma mensagem, você pode fornecer um conjunto de frases que serão exibidas no chat do usuário como respostas rápidas. Adicionar no objeto de mensagem um campo suggestions com o valor de uma matriz de strings irá acionar esta funcionalidade
{
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 um novo shell na mesma pasta
cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080
yarn build na raiz para que a biblioteca seja compilada com suas alterações mais recentes 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 é a variante vermelha. Verifique este arquivo para obter a lista de variantes mostradas na página de demonstração online.
Observe que você precisa passar um Objeto contendo cada uma das propriedades de cor, caso contrário a validação falhará.
Boas notícias, a formatação da mensagem já foi adicionada para você. Você pode habilitá-lo definindo messageStyling como true e usará a biblioteca msgdown. Você pode ativar/desativar o suporte de formatação a qualquer momento ou permitir que os usuários façam isso quando preferirem.
@a-kriya, @mattmezza
Entre em contato conosco se desejar participar como colaborador .
