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:
v2.0.3 (09/14/2022)
- Fix message reply not visible
v2.0.2 (09/13/2022)
- Fix initial room loading
v2.0.1 (09/03/2022)
- Fix video height issue
- Fix toggle-rooms-listevent not overriding default behaviou
v2.0.0 (08/26/2022)
- Fully migrate the library to web component, so it can be used the same way on Vue 2, Vue 3, React, Angular and any other framework, or with not framework at all.
v1.5.8 (08/13/2022)
- Fix templates and hashtags selection
v1.5.7 (07/18/2022)
- Fix release issue
v1.5.6 (07/07/2022)
- Upgrade emoji picker version
- Add textarea-auto-focus prop to disable autofocus when opening a room for the first time
- Add system-message slot
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