Realtime Conversation Chat – vue-advanced-chat

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:

Realtime Conversation Chat - vue-advanced-chat

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

You Might Be Interested In:

Tags:

Add Comment