Home
Other
Realtime Conversation Chat – vue-advanced-chat

Realtime Conversation Chat – vue-advanced-chat

antoine92190 Last Updated: 4 days ago

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: '*' }
emojiDataSource: { type: String, default: 'https://cdn.jsdelivr.net/npm/[email protected]%5E1/en/emojibase/data.json' }

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.7 (02/01/2023)

  • Add option for specifying the capture attr on the file input

v2.0.6 (11/27/2022)

  • Add multiple chat support
  • Fix types
  • Add emoji-data-source prop to replace emojis data table
  • Fix roomTextarea up and down keys

v2.0.5 (11/26/2022)

  • Fix typings
  • Disable drag & drop if show-files is disabled

v2.0.4 (10/30/2022)

  • Add the possibility to drag & drop files
  • Export register function in TS definition
  • Fix multiple edit / reply actions
  • Add message-avatar_{{MESSAGE_ID}} slot
  • Add custom-search-room-enabled prop and search-room event to use custom room search event

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

Related Posts

Tags:

Add Comment