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 ({ 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:
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