Realtime Conversation Chat – vue-advanced-chat

Description:

vue-advanced-chat is a live chat library to create a flexible, customizable, realtime conversation chat on the Vue.js app.

Supports images, files, emojis, message editing, light/dark themes,

How to use it:

1. Install and import the necessary resources into your project.

import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'

2. Create a new chat window component in your template.

<template>
  <chat-window 
    :currentUserId="currentUserId" 
    :rooms="rooms" 
    :messages="messages" />
</template>

3. Full props to customize the conversation chat window.

height: { type: String, default: '600px' },
theme: { type: String, default: 'light' },
colors: { type: Object, default: null },
textMessages: { type: Object, default: null },
currentUserId: { type: String, default: '' },
rooms: { type: Array, default: () => [] },
loadingRooms: { type: Boolean, default: false },
messages: { type: Array, default: () => [] },
messagesLoaded: { type: Boolean, default: false },
menuActions: { type: Array, default: () => [] },
messageActions: {
  type: Array,
  default: () => [
    { name: 'replyMessage', title: 'Reply' },
    { name: 'editMessage', title: 'Edit Message', onlyMe: true },
    { name: 'deleteMessage', title: 'Delete Message', onlyMe: true }
  ]
},
showAddRoom: { type: Boolean, default: true },
showFiles: { type: Boolean, default: true },
showEmojis: { type: Boolean, default: true },
showReactionEmojis: { type: Boolean, default: true },
newMessage: { type: Object, default: null }

4. Full props to customize the chat messages.

currentUserId: { type: String, required: true },
textMessages: { type: Object, required: true },
index: { type: Number, required: true },
message: { type: Object, required: true },
messages: { type: Array, required: true },
editedMessage: { type: Object, required: true },
roomUsers: { type: Array, default: () => [] },
messageActions: { type: Array, required: true },
roomFooterRef: { type: HTMLDivElement },
newMessages: { type: Array },
showReactionEmojis: { type: Boolean, required: true },
emojisList: { type: Object, required: true },
hideOptions: { type: Boolean, required: true }

5. Full props to customize the chat rooms

rooms="[
  {
    roomId: 1,
    roomName: 'Room 1',
    lastMessage: {
      content: 'Last message received',
      sender_id: 1234,
      username: 'John Doe',
      timestamp: '10:20',
      seen: false,
      new: true
    },
    users: [
      {
        _id: 1234,
        username: 'John Doe'
      },
      {
        _id: 4321,
        username: 'John Snow'
      }
    ]
  }
]"

6. Event handlers.

fetchMessages({ room, options }) {
  // A user has scrolled on top to load more messages
} 
sendMessage ({ roomId, content, file, replyMessage }) { 
  // A user has sent a message
} 
editMessage ({ roomId, messageId, newContent, file, replyMessage }) { 
  // A user has edited a message
} 
deleteMessage ({ roomId, messageId }) { 
  // A user has deleted a message
} 
openFile ({ download, message }) { 
 // A user has clicked to view or download a file
} 
addRoom () {
  // A user clicks on the plus icon next to searchbar
} 
menuActionHandler ({ roomId, action }) {  
  // A user clicks on the vertical dots icon inside a room
} 
messageActionHandler ({ roomId, action }) {  
  // A user clicks on the dropdown icon inside a message
} 
sendMessageReaction ({ roomId, messageId, reaction, remove }) { 
  // A user clicks on the emoji icon inside a message
}

Preview:

Changelog:

v0.4.7 (09/26/2020)

• Add action param to openFile function. Available options are download and preview

v0.4.6 (09/14/2020)

• Add roomMessage prop – show/hide the blue line divider between seen and unseen messages

v0.4.5 (09/03/2020)

• Fix undefined roomTextarea ref on Quasar Framework

v0.4.4 (08/17/2020)

• Add roomMessage prop – default textarea value

v0.4.3 (07/05/2020)

• Add inline & multiline code formatting
• Prevent roomId watcher to trigger fetchRoom if null
• UI fixes

Download Details:

Author: antoine92190

Live Demo: https://antoine92190.github.io/vue-advanced-chat

Download Link: https://github.com/antoine92190/vue-advanced-chat/archive/master.zip

Official Website: https://github.com/antoine92190/vue-advanced-chat

Install & Download:

# Yarn
$ yarn add vue-advanced-chat

# NPM
$ npm install vue-advanced-chat --save

You Might Be Interested In: