Realtime Conversation Chat – vue-advanced-chat

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:

Realtime Conversation Chat - vue-advanced-chat

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
Tags:

Add Comment