vue advanced chat

Vue-Advanced-Chat

Patrocinadores

API/servidor de bate -papo fácil de usar com infraestrutura escalável

Características

• Compatível com todas as estruturas JavaScript (Vue, Angular, React, etc.) ou nenhuma estrutura
• Mensagens de bate -papo em tempo real personalizáveis
• Back -end Agnóstico
• Imagens, vídeos, arquivos, mensagens de voz e emojis
• Editar mensagens e responder a outras mensagens
• Tag Usuários e sugestões de atalho emojis
• Elementos da interface do usuário para vistos, novas mensagens excluídas, digitadas e do sistema
• Formatação de texto - negrito, itálico, strikethrough, sublinhado, código, multilina
• Status de usuários online / offline
• Opções e slots flexíveis
• Modos de temas claros e sombrios
• Exemplo de Firestore
• TypeScript, PWA, Suporte de componentes da Web

Demonstração

Aproveitar ?

Exemplo do mundo real

Um aplicativo da Web progressivo mostrando todos os recursos do componente vue-advanced-chat .
Construído com as notificações de Firestore, Vuetify e Push.

Se você deseja obter acesso premium ao código -fonte do Exemplo do Mundo Real, entre em contato comigo por e -mail.

Você receberá um aplicativo de bate -papo totalmente funcional para Web e Mobile:

• Interface do usuário e integração de back -end
• Email, Facebook e Autenticação do Google
• Mensagens em tempo real, notificações de push do navegador, otimização de imagens (funções da nuvem do Firebase para compactar avatares)
• Componentes UI/UX para alertas (erros, informações), diálogos, etc.
• Adicione os usuários existentes a uma sala usando seu e -mail
• Envie convites de e-mail para usuários inexistentes
• Edição de perfil e quartos
• Adição e exclusão de usuários de quarto
• Implementação otimizada de Firestore para reduzir a largura de banda e custos o máximo possível
• Gerenciamento de Estado usando Vuex
• Internacionalização (I18n)
• Google Analytics
• Suporte para ajudá -lo a colocar o bate -papo em funcionamento

Índice

• Instalação
• Uso
• API APS
• Estrutura de dados de adereços
• API de eventos
• Slots nomeados
• Usando com Firestore

Instalação

 # Using npm
npm install --save vue-advanced-chat

# Using yarn
yarn add vue-advanced-chat

# Using CDN
< script src= " https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-advanced-chat.umd.js " ></script >

Vue

Registre vue-advanced-chat e emoji-picker como componentes da web em seu arquivo de configuração:

compilerOptions: {
  isCustomElement : tagName => {
    return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
  }
}

Demo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/main

Reagir

Demo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/react

Angular / iônico

Demonstração: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/angular

Uso

Você pode importá -lo como um componente personalizado:

 < template >
  < vue-advanced-chat
    : current-user-id = "currentUserId"
    :rooms = "JSON.stringify(rooms)"
    : messages = "JSON.stringify(messages)"
    : room - actions = "JSON.stringify(roomActions)"
  / >
</ template >

< script >
  import { register } from 'vue-advanced-chat'
  register()

  // Or if you used CDN import
  // window['vue-advanced-chat'].register()

  export default {
    data ( ) {
      return {
        currentUserId : '1234' ,
        rooms : [ ] ,
        messages : [ ] ,
        roomActions : [
          { name : 'inviteUser' , title : 'Invite User' } ,
          { name : 'removeUser' , title : 'Remove User' } ,
          { name : 'deleteRoom' , title : 'Delete Room' }
        ]
      }
    }
  }
</ script >

Notas importantes

O componente vue-advanced-chat é orientado para o desempenho, portanto, você deve seguir regras específicas para fazê-lo funcionar corretamente.

• Use atribuição de matriz em vez de método push

 // DO THIS
const rooms = [ ]
for ( let i = 0 ; i < res . length ; i ++ ) {
  rooms . push ( res )
}
this . rooms = rooms

// DON'T DO THIS
for ( let i = 0 ; i < res . length ; i ++ ) {
  this . rooms . push ( res )
} 

 // DO THIS
this . rooms [ i ] . typingUsers = [ ... this . rooms [ i ] . typingUsers , typingUserId ]

// DON'T DO THIS
this . rooms [ i ] . typingUsers . push ( typingUserId )

• Para adicionar ou substituir um item dentro de uma matriz, use o operador de espalhamento

 // DO THIS
this . rooms [ roomIndex ] = room
this . rooms = [ ... this . rooms ]

// DON'T DO THIS
this . rooms [ roomIndex ] = room

// AND DON'T DO THIS
this . rooms . push ( room )

• Siga o padrão de carregamento da interface do usuário, atualizando o suporte messagesLoaded toda vez que uma nova sala é buscada

 fetchMessages ( { room , options } ) {
  this . messagesLoaded = false

  // use timeout to imitate async server fetched data
  setTimeout ( ( ) => {
    this . messages = [ ]
    this . messagesLoaded = true
  } )
} 

API APS

Notas importantes

Se você estiver usando o Vue 3, pode passar os adereços de matriz e objetos normalmente: Passando as Propriedades DOM no Vue 3
Caso contrário, você precisa passar esses adereços como cordas. Por exemplo: [messages]="JSON.stringify(messages)"

Prop	Tipo	Obrigatório	Padrão
height	Corda	-	600px
current-user-id (1)	Corda	true	-
rooms	[String, Array]	-	[]
rooms-order	desc / asc	-	desc
loading-rooms (2)	Booleano	-	false
rooms-loaded (3)	Booleano	-	false
room-id (4)	Corda	-	null
load-first-room (5)	Booleano	-	true
rooms-list-opened	Booleano	-	true
custom-search-room-enabled (6)	Booleano	-	false
messages	[String, Array]	-	[]
room-message (7)	Corda	-	null
username-options (8)	[String, objeto]	-	{minUsers: 3, currentUser: false}
messages-loaded (9)	Booleano	-	false
room-actions (10)	[String, Array]	-	[]
menu-actions (11)	[String, Array]	-	[]
message-actions (12)	[String, Array]	-	(11)
message-selection-actions (13)	[String, Array]	-	(13)
templates-text (14)	[String, Array]	-	null
auto-scroll (15)	[String, objeto]	-	{ send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } }
show-search	Booleano	-	true
show-add-room	Booleano	-	true
show-send-icon	Booleano	-	true
show-files	Booleano	-	true
show-audio	Booleano	-	true
audio-bit-rate	Número	-	128
audio-sample-rate	Número	-	44100
show-emojis	Booleano	-	true
show-reaction-emojis	Booleano	-	true
show-new-messages-divider (16)	Booleano	-	true
show-footer (17)	Booleano	-	true
text-messages (18)	[String, objeto]	-	null
text-formatting (19)	[String, objeto]	-	{disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' '}` `
link-options (20)	[String, objeto]	-	{ disabled: false, target: '_blank', rel: null }
room-info-enabled (21)	Booleano	-	false
textarea-action-enabled (22)	Booleano	-	false
textarea-auto-focus	Booleano	-	true
user-tags-enabled	Booleano	-	true
emojis-suggestion-enabled	Booleano	-	true
media-preview-enabled	Booleano	-	true
responsive-breakpoint (23)	Número	-	900
single-room (24)	Booleano	-	false
scroll-distance (25)	Número	-	60
theme (26)	light / dark	-	light
accepted-files (27)	Corda	-	*
capture-files (28)	Corda	-	''
multiple-files (29)	Booleano	-	true
styles (30)	[String, objeto]	-	(26)
show-audio (31)	Booleano	-	true
emoji-data-source	Corda	-	https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json

(1) current-user-id é necessário para exibir as ações da interface do usuário e acionar as ações de acordo com o usuário usando o bate-papo (ex: posição das mensagens à direita, etc.)

(2) loading-rooms podem ser usadas para mostrar/ocultar um ícone giratório enquanto os quartos estão carregando

(3) rooms-loaded devem ser definidos como true quando todos os quartos forem carregados. O que significa que o usuário não pode rolar para carregar salas mais paginadas

(4) room-id pode ser usado para carregar uma sala específica a qualquer momento

(5) load-first-room pode ser usado para remover o comportamento padrão da abertura da primeira sala na inicialização

(6) custom-search-room-enabled pode ser usada para usar o evento da sala de pesquisa para ligar para o seu próprio método para filtrar as salas

(7) room-message pode ser usada para adicionar um valor padrão de textarea

(8) username-options podem ser usadas para mostrar/ocultar mensagens de sala de usuário de acordo com o número mínimo de usuários minUsers dentro de uma sala e se o usuário da mensagem for o usuário atual currentUser

(9) messages-loaded devem ser definidas como true quando todas as mensagens de uma conversa forem carregadas. Significando que o usuário não pode rolar por cima para carregar mensagens mais paginadas

(10) room-actions podem ser usadas para exibir seus próprios botões ao clicar no ícone suspenso de cada sala dentro da lista de quartos.
Em seguida, você pode usar o evento de manipulador de ação para chamar sua própria ação depois de clicar em um botão. Ex:

 room - actions = "[
  {
    name : 'archiveRoom' ,
    title : 'Archive Room'
  }
] "

(11) menu-actions podem ser usadas para exibir seus próprios botões ao clicar no ícone de pontos verticais dentro de uma sala.
Em seguida, você pode usar o evento Menu-Aath-Mandler para ligar para sua própria ação depois de clicar em um botão. Ex:

 menu - actions = "[
  {
    name : 'inviteUser' ,
    title : 'Invite User'
  } ,
  {
    name : 'removeUser' ,
    title : 'Remove User'
  } ,
  {
    name : 'deleteRoom' ,
    title : 'Delete Room'
  }
] "

(12) message-actions podem ser usadas para exibir seus próprios botões ao clicar no ícone suspenso dentro de uma mensagem.
Em seguida, você pode usar o evento de manutenção de mensagens para chamar sua própria ação depois de clicar em um botão. Ex:

 message - actions = "[
  {
    name : 'addMessageToFavorite' ,
    title : 'Add To Favorite'
  } ,
  {
    name : 'shareMessage' ,
    title : 'Share Message'
  }
] "

Você pode usar nomes de message-actions interno para acionar modificações específicas da interface do usuário quando clicadas.
Atualmente, os nomes de ação replyMessage , editMessage e deleteMessage estão disponíveis.
Se messageActions não estiverem definidas, ele usará os valores padrão abaixo.
Se você não quiser exibir este menu messageActions , pode passar por uma matriz vazia.

 messageActions = "[
  {
    name : 'replyMessage' ,
    title : 'Reply'
  } ,
  {
    name : 'editMessage' ,
    title : 'Edit Message' ,
    onlyMe : true
  } ,
  {
    name : 'deleteMessage' ,
    title : 'Delete Message' ,
    onlyMe : true
  } ,
  {
    name : 'selectMessages' ,
    title : 'Select'
  }
] "

(13) message-selection-actions estão relacionadas à ação da mensagem selectMessages acima. Você pode usá -lo para exibir botões de ação personalizados no cabeçalho da sala ao selecionar uma mensagem. Ex:

 messageActions="[
  {
    name: 'deleteMessages',
    title: 'Delete'
  },
  {
    name: 'forwardMessages',
    title: 'Forward'
  }
]"

(14) templates-text podem ser usados para adicionar texto de modelos de preenchimento automático ao digitar / na sala Textarea. Ex:

 templatesText = "[
  {
    tag : 'help' ,
    text : 'This is the help'
  } ,
  {
    tag : 'action' ,
    text : 'This is the action'
  }
] "

(15) auto-scroll pode ser usada para alterar o comportamento de rolagem automática ao enviar/receber uma mensagem. Ex:

 auto - scroll = "{
  send : {
    new : true , // will scroll down after sending a message
    newAfterScrollUp : false // will not scroll down after sending a message when scrolled up
  } ,
  receive : {
    new : false , // will not scroll down when receiving a message
    newAfterScrollUp : true // will scroll down when receiving a message when scrolled up
  }
} "

(16) show-new-messages-divider pode ser usado para mostrar/ocultar o divisor da linha azul entre as mensagens vistas e invisíveis.

(17) show-footer pode ser usado para esconder o rodapé da sala. Por exemplo, para impedir que os usuários enviem qualquer mensagem ou mídia.

(18) text-messages podem ser usadas para substituir textos I18N padrão. Ex:

 text - messages = "{
  ROOMS_EMPTY : 'Aucune conversation' ,
  ROOM_EMPTY : 'Aucune conversation sélectionnée' ,
  NEW_MESSAGES : 'Nouveaux messages' ,
  MESSAGE_DELETED : 'Ce message a été supprimé' ,
  MESSAGES_EMPTY : 'Aucun message' ,
  CONVERSATION_STARTED : 'La conversation a commencée le :' ,
  TYPE_MESSAGE : 'Tapez votre message' ,
  SEARCH : 'Rechercher' ,
  IS_ONLINE : 'est en ligne' ,
  LAST_SEEN : 'dernière connexion ' ,
  IS_TYPING : 'est en train de taper...' ,
  CANCEL_SELECT_MESSAGE : 'Annuler Sélection'
} "

(19) text-formatting pode ser usada para adicionar formatação de texto. Atualmente, em negrito, itálico, atingindo a formatação do código em linha e o código multilina e podem ser usados em conjunto.

• Você pode desativar a formatação de texto passando o prop :text-formatting="{disabled: true}" .
• Você pode alterar os caracteres de marcação, por exemplo :: :text-formatting="{italic: '^'}"
• Você pode desativar um caractere de marcação específico, por exemplo :: :text-formatting="{bold: null}"

Estilo	Sintaxe	Exemplo	Saída
Audacioso	* *	*This is bold text*	Este é um texto ousado
itálico	_ _	_This text is italicized_	Este texto está em itálico
Strikethrough	~ ~	~This was mistaken text~	Este foi um texto equivocado
Sublinhado	° °	°This text is underlined°	Este texto está sublinhado
Formatação aninhada	* * e _ _	*This text is _extremely_ important*	Este texto é extremamente importante

Código embutido

Exemplo: `Este é o código em linha`

Saída: This is inline code

Código multilina

Exemplo: `` `Este é o código multilina`` '

Saída:

This is
multiline code

(20) link-options podem ser usadas para desativar links de URL em mensagens ou alterar o destino dos URLs. Ex:

: link - options = "{ disabled: true, target: '_self', rel: null }"

(21) room-info-enabled pode ser usado para acionar um evento depois de clicar no componente do cabeçalho da sala.
Em seguida, você pode usar o evento da sala de quarto para chamar sua própria ação depois de clicar no cabeçalho.

(22) textarea-action-enabled pode ser usado para adicionar um ícone extra à direita da textarea
Em seguida, você pode usar o evento de manutenção da textarea-ação para chamar sua própria ação depois de clicar no ícone.

(23) responsive-breakpoint pode ser usado para colapsar a lista de salas à esquerda, quando o tamanho da viewport fica abaixo da largura especificada.

(24) Pode ser usado single-room se você nunca quiser mostrar a lista de quartos à esquerda. Você ainda precisa passar no suporte rooms como uma matriz com um único elemento.

(25) scroll-distance pode ser usada para alterar o número de pixels antes que o evento fetchMessages seja acionado ao rolar para cima para carregar mais mensagens ou o evento fetchMoreRooms é acionado ao rolar para baixo para carregar mais quartos.

(26) theme pode ser usado para alterar o tema do bate -papo. Atualmente, apenas light e dark estão disponíveis.

(27) accepted-files podem ser usados para definir tipos de arquivos específicos permitidos no bate-papo. Por padrão, todos os tipos de arquivos são permitidos: "*" .

Exemplo: Set accepted-files="image/png, image/jpeg, application/pdf" para permitir apenas arquivos JPG PNG e PDF

(28) capture-files podem ser usados para permitir a captura direta de fotos e vídeos em navegadores móveis, em vez de fazer upload de fotos e vídeos existentes que já estão no dispositivo. Veja aqui para obter mais informações e valores reconhecidos. Por padrão, o atributo é omitido e os navegadores móveis oferecem apenas a galeria para escolher fotos e vídeos. Nota: Isso afeta apenas os anexos de arquivo. As mensagens de áudio são sempre gravadas usando o microfone do dispositivo.

(29) multiple-files podem ser usados para definir se várias seleções de arquivos serão aceitas. Por padrão, isso é verdade.

(30) styles podem ser usados para personalizar seu próprio tema. Você pode encontrar a lista completa aqui

(31) show-audio pode ser usado para ativar ou desativar o ícone de áudio

styles = "{
  general : {
    color : '#0a0a0a' ,
    colorSpinner : '#333' ,
    borderStyle : '1px solid #e1e4e8'
  } ,

  footer : {
    background : '#f8f9fa' ,
    backgroundReply : 'rgba(0, 0, 0, 0.08)'
  } ,

  icons : {
    search: '#9ca6af'
  }
} "

Estrutura de dados de adereços

Seus adereços devem seguir uma estrutura específica para exibir salas e mensagens corretamente:

Salas Prop

 rooms = "[
  {
    roomId : '1' ,
    roomName : 'Room 1' ,
    avatar : 'assets/imgs/people.png' ,
    unreadCount : 4 ,
    index : 3 ,
    lastMessage : {
      _id : 'xyz' ,
      content : 'Last message received' ,
      senderId : '1234' ,
      username : 'John Doe' ,
      timestamp : '10:20' ,
      saved : true ,
      distributed : false ,
      seen : false ,
      new : true
    } ,
    users : [
      {
        _id : '1234' ,
        username : 'John Doe' ,
        avatar : 'assets/imgs/doe.png' ,
        status : {
          state : 'online' ,
          lastChanged : 'today, 14:30'
        }
      } ,
      {
        _id : '4321' ,
        username : 'John Snow' ,
        avatar : 'assets/imgs/snow.png' ,
        status : {
          state : 'offline' ,
          lastChanged : '14 July, 20:00'
        }
      }
    ] ,
    typingUsers : [ 4321 ]
  }
] "

• Se você adicionar a propriedade index , seus quartos serão encomendados usando esse valor. index pode ser qualquer valor classificável, como uma string , datetime , timestamp , etc.

• Para cada usuário da sala, você pode adicionar a propriedade status , que pode conter as propriedades state e lastChanged :

  • state pode estar 'online' ou 'offline'
  • lastChanged é a data em que state foi modificado pela última vez.

• typingUsers é uma variedade de todos os usuários que estão escrevendo uma mensagem

Mensagens prop

Os objetos da mensagem são renderizados de maneira diferente, dependendo do seu tipo. Os tipos de texto, emoji, imagem, vídeo e arquivo são suportados.

Cada objeto de mensagem possui um campo senderId que mantém o ID do agente correspondente. Se senderId corresponder ao suporte currentUserId , a interface do usuário específica e as ações serão implementadas.

Notas:

• username será exibido em cada mensagem dos agentes correspondentes se pelo menos 3 usuários estiverem na sala
• system é usado para mostrar mensagens com uma tela centrada específica
• indexId pode ser usado se você precisar alterar um ID da mensagem que já está exibido em uma sala, isso impedindo uma falha de animação. Por exemplo, quando você não conhece com antecedência o ID da mensagem, seu back -end criará.

Mensagem estados:

• saved: true One Check Mark
• distributed: true Duas marcas de verificação
• seen: true Duas marcas de verificação azuis
• deleted: true com texto excluído
• failure: true Vermelho

 messages = "[
  {
    _id : '7890' ,
    indexId : 12092 ,
    content : 'Message 1' ,
    senderId : '1234' ,
    username : 'John Doe' ,
    avatar : 'assets/imgs/doe.png' ,
    date : '13 November' ,
    timestamp : '10:20' ,
    system : false ,
    saved : true ,
    distributed : true ,
    seen : true ,
    deleted : false ,
    failure : true ,
    disableActions : false ,
    disableReactions : false ,
    files : [
      {
        name : 'My File' ,
        size : 67351 ,
        type : 'png' ,
        audio : true ,
        duration : 14.4 ,
        url : 'https://firebasestorage.googleapis.com/...' ,
        preview : 'data:image/png;base64,iVBORw0KGgoAA...' ,
        progress : 88
      }
    ] ,
    reactions : {
      ? : [
        '1234' , // USER_ID
        '4321'
      ] ,
      ? : [
        '1234'
      ]
    } ,
    replyMessage : {
      content : 'Reply Message' ,
      senderId : '4321' ,
      files : [
        {
          name : 'My Replied File' ,
          size : 67351 ,
          type : 'png' ,
          audio : true ,
          duration : 14.4 ,
          url : 'https://firebasestorage.googleapis.com/...' ,
          preview : 'data:image/png;base64,iVBORw0KGgoAA...'
        }
      ]
    } ,
  }
] "

API de eventos

Evento	Params	Dispara quando um usuário
fetch-messages (1)	{ room, options }	Rolado por cima para carregar mais mensagens
fetch-more-rooms (2)	-	Rolado para carregar mais quartos
send-message	{ roomId, content, files(11), replyMessage(12), usersTag }	Enviou uma mensagem
edit-message	{ roomId, messageId, newContent, files(11), replyMessage(12) ,usersTag }	Editou uma mensagem
delete-message	{ roomId, message }	Excluiu uma mensagem
open-file	{ message, file }	Clicou para ver ou baixar um arquivo
open-user-tag (3)	{ user }	Clicou em uma tag de usuário dentro de uma mensagem
open-failed-message	{ roomId, message }	Clicou no ícone de falha ao lado de uma mensagem
add-room	-	Clicou no ícone Plus ao lado de SearchBar
search-room (4)	{ roomId, value }	Digitou um personagem na entrada da sala de busca
room-action-handler (5)	{ roomId, action }	Clicou no ícone de pontos verticais dentro de uma sala
menu-action-handler (6)	{ roomId, action }	Clicou no ícone de pontos verticais dentro de uma sala
message-action-handler (7)	{ roomId, action, message }	Clicou no ícone suspenso dentro de uma mensagem
message-selection-action-handler (8)	{ roomId, action, messages }	Clicou no botão Selecionar dentro de uma mensagem
send-message-reaction	{ roomId, messageId, reaction, remove }	Clicou no ícone emoji dentro de uma mensagem
room-info (9)	room	Clicou na barra de cabeçalho da sala
toggle-rooms-list	{ opened }	Clicou no ícone de alternância dentro de um cabeçalho de quarto
textarea-action-handler (10)	{ roomId, message }	Clicou no ícone personalizado dentro do rodapé
typing-message	{ roomId, message }	Começou a digitar uma mensagem

(1) fetch-messages são acionadas toda vez que uma sala é aberta. Se a sala for aberta pela primeira vez, o parâmetro options manterá reset: true .
(1) fetch-messages devem ser um método implementando um sistema de paginação. Seu objetivo é carregar mensagens mais antigas de uma conversa quando o usuário rola na parte superior.

(2) fetch-more-rooms é acionado ao rolar a lista de quartos e deve ser um método que implemente um sistema de paginação.

(3) open-user-tag é acionada ao clicar em uma tag de usuário dentro de uma mensagem. Ao criar uma etiqueta de usuário digitando @ na textarea do rodapé e enviando a mensagem, a tag será identificada com o padrão abaixo:

 < usertag > TAGGED_USER_ID </ usertag >

Isso tornará a tag clicável dentro de uma mensagem. Ex: conteúdo da tag de mensagem
send-message e edit-message Eventos lidarão com esse padrão para você e o passarão no parâmetro content .

(4) room-action-handler é o resultado do suporte room-actions .
Ao clicar em um botão da sua matriz room-actions , room-action-handler fornecerá o nome do botão que foi clique. Então você pode fazer o que quiser com ele. Ex:

 menuActionHandler ( { roomId , action } ) {
  switch ( action . name ) {
    case 'archiveRoom' :
      // call a method to archive the room
  }
}

(5) menu-action-handler é o resultado do suporte menu-actions .
Ao clicar em um botão da sua matriz menu-actions , menu-action-handler fornecerá o nome do botão que foi clicar. Então você pode fazer o que quiser com ele. Ex:

 menuActionHandler ( { roomId , action } ) {
  switch ( action . name ) {
    case 'inviteUser' :
      // call a method to invite a user to the room
    case 'removeUser' :
      // call a method to remove a user from the room
    case 'deleteRoom' :
      // call a method to delete the room
  }
}

(6) search-room pode ser ativada usando o ProP custom-search-room-enabled . Isso permitirá que você ligue para o seu próprio método para filtrar os quartos pesquisados.

(7) message-action-handler é o resultado do suporte de message-actions .
Ao clicar em um botão da sua matriz message-actions , message-action-handler fornecerá o nome do botão que foi clique e os dados correspondentes da mensagem. Então você pode fazer o que quiser com ele. Ex:

 messageActionHandler ( { roomId , action , message } ) {
  switch ( action . name ) {
    case 'addMessageToFavorite' :
      // call a method to add a message to the favorite list
    case 'shareMessage' :
      // call a method to share the message with another user
  }
}

(8) message-selection-action-handler é o resultado do suporte de message-selection-actions .
Ao clicar em um botão da sua matriz message-selection-actions , message-selection-action-handler fornecerá o nome do botão que foi clique e os dados de mensagens selecionadas correspondentes. Então você pode fazer o que quiser com ele. Ex:

 messageSelectionActionHandler ( { roomId , action , message } ) {
  switch ( action . name ) {
    case 'deleteMessages' :
      // call a method to delete selected messaged
    case 'shareMessage' :
      // call a method to share selected messaged with another user
  }
}

(9) room-info é o resultado do suporte room-info-enabled .

(10) textarea-action-handler é o resultado do Prop de Ação textarea-action-enabled .

(11) Matriz de arquivos onde cada arquivo contém: { blob, localUrl, name, size, type, extension }

(12) O objeto replyMessage está disponível quando o usuário respondeu a outra mensagem clicando no ícone correspondente e contém as informações da mensagem clicadas.

Slots nomeados

Exemplo:

 < vue-advanced-chat >
  < div slot = "room-header" >
    This is a new room header
  </ div >

  < div v-for = "message in messages" : slot = "'message_' + message._id" >
    < div v-if = "message.system" >
      System message: { { message . content } }
    </ div >
    < div v-else >
      Normal message: { { message . content } }
    </ div >
  </ div >

  < div v-for = "message in messages" : slot = "'message-avatar_' + message._id" >
    New Avatar
  </ div >
</ vue-advanced-chat >

Slot	Ação
custom-action-icon	Adicione um ícone personalizado dentro do rodapé
rooms-header	Adicione um modelo na lista dos quartos (acima da barra de pesquisa)
room-list-item_{{ROOM_ID}}	Substitua o modelo dos itens da lista de quartos
room-list-info_{{ROOM_ID}}	Substitua as informações dos itens da lista de salas
room-list-avatar_{{ROOM_ID}}	Substitua o avatar dos itens da lista de salas
room-list-options_{{ROOM_ID}}	Substitua o modelo das opções da sala de listagem
room-list-options-icon_{{ROOM_ID}}	Substitua o ícone suspenso Opções da lista de quartos
rooms-header	Substitua o conteúdo acima da barra de pesquisa
rooms-list-search	Substitua a barra de pesquisa
room-header	Substitua o modelo do cabeçalho da sala
room-header-avatar	Substitua o modelo do avatar do cabeçalho da sala
room-header-info	Substitua o modelo do texto do cabeçalho da sala
room-options	Substitua o modelo das opções da sala
message_{{MESSAGE_ID}}	Substitua o modelo da caixa da mensagem (e mensagem do sistema)
message-avatar_{{MESSAGE_ID}}	Substitua o modelo da mensagem avatar
message-failure_{{MESSAGE_ID}}	Substitua o ícone de falha da mensagem
messages-empty	Substitua o modelo de mensagem vazio
rooms-empty	Substitua o modelo de quartos vazios
no-room-selected	Substitua o modelo selecionado sem sala
menu-icon	Substitua o ícone do menu da sala
toggle-icon	Substitua o ícone da lista de salas de alternância
spinner-icon-rooms	Substitua o ícone do girador de carregamento na lista de quartos
spinner-icon-infinite-rooms	Substitua o ícone do girador de carregamento para carregar mais quartos
spinner-icon-messages	Substitua o ícone do girador de carregamento em uma sala
spinner-icon-infinite-messages	Substitua o ícone do girador de carregamento para carregar mais mensagens
spinner-icon-room-file	Substitua o ícone do girador de carregamento para carregar arquivos pesados
spinner-icon-message-file_{{MESSAGE_ID}}	Substitua o ícone do girador de carregamento em uma mensagem que contém uma imagem
scroll-icon	Substitua o role pelo ícone de mensagem mais recente
reply-close-icon	Substitua a resposta Fechar o ícone
image-close-icon	Substitua a imagem Fechar o ícone
file-icon	Substitua o ícone do arquivo
files-close-icon	Substitua o ícone Fechar o arquivo
edit-close-icon	Substitua o ícone de edição fechada
preview-close-icon	Substitua o ícone Fechar de pré -visualização da mídia
emoji-picker-icon	Substitua o ícone do pegajador emoji
emoji-picker-reaction-icon_{{MESSAGE_ID}}	Substitua o ícone de reação do pegajador emoji (na caixa de mensagem)
paperclip-icon	Substitua o ícone de papel -clipe
send-icon	Substitua a mensagem Enviar ícone
eye-icon_{{MESSAGE_ID}}	Substitua o ícone ocular (mensagem de imagem)
document-icon_{{MESSAGE_ID}}	Substitua o ícone do documento
pencil-icon_{{MESSAGE_ID}}	Substitua o ícone de lápis
checkmark-icon_{{MESSAGE_ID}}	Substitua o ícone da marca de seleção de uma mensagem
checkmark-icon_{{ROOM_ID}}	Substitua o ícone da marca de seleção de uma mensagem da lista de quartos
deleted-icon_{{MESSAGE_ID}}	Substitua o ícone excluído de uma mensagem
deleted-icon_{{ROOM_ID}}	Substitua o ícone excluído de uma mensagem da lista de quartos
microphone-icon_{{ROOM_ID}}	Substitua o ícone do microfone
dropdown-icon_{{MESSAGE_ID}}	Substitua o ícone suspenso
search-icon	Substitua o ícone de pesquisa
add-icon	Substitua o ícone Add Room
audio-stop-icon	Substitua o ícone de parada do gravador de áudio
audio-check-icon	Substitua o gravador de áudio Confirmar ícone
audio-pause-icon_{{MESSAGE_ID}}	Substitua o ícone de pausa de áudio da mensagem
audio-play-icon_{{MESSAGE_ID}}	Substitua o ícone de reprodução de áudio da mensagem

Usando com Firestore

Código -fonte

Você pode encontrar o código -fonte para implementar um aplicativo de bate -papo completo usando o FireBase/Firestore dentro da pasta demo .
Para testá -lo usando seu próprio projeto Firebase:

• Configurar o Cloud Firestore (para armazenar usuários e quartos) e banco de dados em tempo real (para armazenar o status online dos usuários)
• Clone este repositório: git clone https://github.com/advanced-chat/vue-advanced-chat.git
• Inside demo/src/database/index.js File, substitua a linha const config = ... por sua própria configuração de Firebase
• Vá para dentro da pasta demo e execute npm run serve

Estrutura de dados

Se você decidir usar o mesmo código da pasta demo para criar seu aplicativo de bate -papo, precisará ter uma estrutura de dados específica do Firestore.
Para ajudá -lo a começar, adicionei o demo/src/App.vue um método addData para inicializar alguns dados no banco de dados do Firestore.

Coleção de usuários

users: {
  USER_ID_1 : {
    _id : '1' ,
    username : 'User 1'
  } ,
  USER_ID_2 : {
    _id : '2' ,
    username : 'User 2'
  } ,
  USER_ID_3 : {
    _id : '3' ,
    username : 'User 2'
  }
} 

Coleção de quartos

chatRooms: {
  ROOM_ID_1 : {
    users : [ '1' , '3' ]
  } ,
  ROOM_ID_2 : {
    users : [ '1' , '2' , '3' ]
  }
} 

Coleção de mensagens dentro de um documento da sala

messages: {
  MESSAGE_ID_1 : {
    content : 'My first message to <usertag>John</usertag>' ,
    senderId : '2' ,
    timestamp : 'December 11, 2019 at 4:00:00 PM' ,
    seen : true
  }
} 

Notas

• Você precisa criar um índice composto para pedir salas por última mensagem recebida. A maneira mais fácil de fazer isso é criar uma sala e clicar no URL da mensagem de erro no console de depuração do navegador.

Contribuindo

Sua ajuda é sempre apreciada

Licença

Este projeto está licenciado sob licença do MIT