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' },
styles: { type: Object, default: () => ({}) },
responsiveBreakpoint: { type: Number, default: 900 },
singleRoom: { type: Boolean, default: false },
roomsListOpened: { type: Boolean, default: true },
textMessages: { type: Object, default: null },
currentUserId: { type: [String, Number], default: '' },
rooms: { type: Array, default: () => [] },
loadingRooms: { type: Boolean, default: false },
roomsLoaded: { type: Boolean, default: false },
roomId: { type: [String, Number], default: null },
loadFirstRoom: { type: Boolean, default: true },
messages: { type: Array, default: () => [] },
messagesLoaded: { type: Boolean, default: false },
roomActions: { type: Array, default: () => [] },
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 }
]
},
showSearch: { type: Boolean, default: true },
showAddRoom: { type: Boolean, default: true },
showSendIcon: { type: Boolean, default: true },
showFiles: { type: Boolean, default: true },
showAudio: { type: Boolean, default: true },
showEmojis: { type: Boolean, default: true },
showReactionEmojis: { type: Boolean, default: true },
showNewMessagesDivider: { type: Boolean, default: true },
showFooter: { type: Boolean, default: true },
textFormatting: { type: Boolean, default: true },
linkOptions: {
type: Object,
default: () => ({ disabled: false, target: '_blank' })
},
roomInfoEnabled: { type: Boolean, default: false },
textareaActionEnabled: { type: Boolean, default: false },
roomMessage: { type: String, default: '' },
acceptedFiles: { type: String, default: '*' }
5. Full props to customize the chat rooms.
currentUserId: { type: [String, Number], required: true },
textMessages: { type: Object, required: true },
singleRoom: { type: Boolean, required: true },
showRoomsList: { type: Boolean, required: true },
isMobile: { type: Boolean, required: true },
rooms: { type: Array, required: true },
roomId: { type: [String, Number], required: true },
loadFirstRoom: { type: Boolean, required: true },
messages: { type: Array, required: true },
roomMessage: { type: String, default: null },
messagesLoaded: { type: Boolean, required: true },
menuActions: { type: Array, required: true },
messageActions: { type: Array, required: true },
showSendIcon: { type: Boolean, required: true },
showFiles: { type: Boolean, required: true },
showAudio: { type: Boolean, required: true },
showEmojis: { type: Boolean, required: true },
showReactionEmojis: { type: Boolean, required: true },
showNewMessagesDivider: { type: Boolean, required: true },
showFooter: { type: Boolean, required: true },
acceptedFiles: { type: String, required: true },
textFormatting: { type: Boolean, required: true },
linkOptions: { type: Object, required: true },
loadingRooms: { type: Boolean, required: true },
roomInfoEnabled: { type: Boolean, required: true },
textareaActionEnabled: { type: Boolean, required: true }
6. Full props to customize the room list.
currentUserId: { type: [String, Number], required: true },
textMessages: { type: Object, required: true },
showRoomsList: { type: Boolean, required: true },
showSearch: { type: Boolean, required: true },
showAddRoom: { type: Boolean, required: true },
textFormatting: { type: Boolean, required: true },
linkOptions: { type: Object, required: true },
isMobile: { type: Boolean, required: true },
rooms: { type: Array, required: true },
loadingRooms: { type: Boolean, required: true },
roomsLoaded: { type: Boolean, required: true },
room: { type: Object, required: true },
roomActions: { type: Array, required: true }
7. Full props to customize the message.
currentUserId: { type: [String, Number], 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, default: null },
newMessages: { type: Array, default: () => [] },
showReactionEmojis: { type: Boolean, required: true },
showNewMessagesDivider: { type: Boolean, required: true },
textFormatting: { type: Boolean, required: true },
linkOptions: { type: Object, required: true },
emojisList: { type: Object, required: true },
hideOptions: { type: Boolean, required: true }
7. 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:
v1.5.5 (05/21/2022)
- Fix emojis size on message which is too small
- Fix emoji picker animation when opened for the first time
v1.5.4 (04/12/2022)
- Add emoji-picker slot to replace use custom emoji picker in room footer or message actions
v1.5.3 (02/22/2022)
- Fix viewport overflow on mobile
- Fix usertags not opening with image message
- Fix media preview position when scrolling
- Fix missing footer slots
v1.5.2 (01/22/2022)
- Extract room footer to its own component to avoid messages re-renders
- Fix files progress bar position
v1.5.1 (01/09/2022)
- Fix audio player due to an issue introduced in lamejs version 1.2.1
v1.5.0 (01/09/2022)
- Add message selection feature using message-selection-actions prop and message-selection-action-handler event
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