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