Home
Other
Realtime Conversation Chat – vue-advanced-chat

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.2.1 (10/02/2021)

  • (fix) nested text formatting

v1.2.0 (09/11/2021)

  • When typing /, custom autocomplete templates text list is displayed above the room footer
  • Fix room infinite loading broken after room refresh
  • Fix room infinite loading not disappearing on Nuxt projects
  • Disable swipe back in single-room mode

v1.1.2 (09/08/2021)

  • Fix rooms infinite loading

v1.1.1 (09/08/2021)

  • Add room-list-avatar slot
  • Fix message edit with files when text is unchanged
  • Fix message edit with user tags
  • Add rooms-order prop
  • Improve swipe back behaviour
  • Refactor rooms infinite loading using intersection api

v1.1.0 (08/12/2021)

  • Add multiple files support
  • file: {} is now files: [{}]
  • replyMessage.file: {} is now replyMessage.files: [{}]
  • send-message event is now returning files instead of file
  • edit-message event is now returning files instead of file

v1.0.0 (08/11/2021)

  • Refactors to improve Vue 3 compatibility
  • Add new emoji picker with more emojis and skin tones
  • Fix lamejs dependency
  • Emoji reaction name was replaced by unicode in the messages prop.

v0.9.0 (07/31/2021)

  • Add props and fix lamjs import

v0.8.9 (07/27/2021)

  • Prepare code for vue 3 migration
  • Revert remove message animation when updating message _id

v0.8.8 (07/25/2021)

  • Add image copy paste (using Ctrl + V)*
  • Add swipe back touch event to go back to rooms list on mobile devices
  • Remove message animation when updating message _id

v0.8.7 (07/17/2021)

  • Improve typing performance when lots of messages are displayed
  • Refactor SCSS files to improve web component compatibility

v0.8.6 (06/28/2021)

  • Add rooms-list-search slot to replace the search bar
  • Add show-search prop to hide the search bar header
  • Add system message formatting

v0.8.5 (05/02/2021)

  • Fix infinite rooms scroll not working
  • Fix message file icon position
  • Fix image options backg color
  • Add missing video message content
  • Add missing audio/video file in reply message

v0.8.4 (04/05/2021)

  • Fix Vuetify compatibility (upgrade sass-loader)
  • Remove SCSS scoped attributes for better Web Component compatibility
  • Fix infinite loading when messages are empty

v0.8.3 (03/17/2021)

  • Fix compatibility when importing the chat in an Angular project as a web component
  • Fix new message divider not show in some cases

v0.8.2 (03/14/2021)

  • Add message image placeholder while loading an image*
  • Fix scroll behaviour
  • Prevent typing-message event trigger after room is loaded
  • Do not show loading spinner if no room is selected

v0.8.1 (03/07/2021)

  • Fix auto scroll when sending or receiving a new message
  • Add message avatar by passing avatar in messages prop

v0.8.0 (03/03/2021)

  • Fix room-info and textarea-action-handler events

v0.7.9 (03/02/2021)

  • Fix scroll behaviour when adding messages
  • Add link-options prop to disable url links or change urls target
  • Fix missing text-formatting prop in some components

v0.7.8 (02/25/2021)

  • Fix new message divider and scroll behaviour

v0.7.7 (02/22/2021)

  • Add type declarations file to improve typescript support

v0.7.6 (02/22/2021)

  • Extract css build file
  • Add support for audio types: ogg, wav, mpeg
  • Add support for audio type quicktime
  • Fix markdown bug

v0.7.5 (02/20/2021)

  • Remove css import + Add unpkg entry

v0.7.4 (02/19/2021)

  • Set lamejs as optional dependency

v0.7.3 (02/19/2021)

  • Improve audio recorder UI
  • Improve audio player UI
  • Add mp3 audio encoder with lamejs (optional dependency)
  • Add new message indicator when user scrolled up
  • Fix missing slots params
  • Focus textarea after removing file

v0.7.2 (02/13/2021)

  • Fix rooms name overflow
  • Fix room-id initialisation with single-room prop
  • Clean markdown logic
  • Replace messageId param by message in @delete-message event

v0.7.1 (02/12/2021)

  • Components refactoring to improve performance and maintainability
  • Do not reset draft message when replying to a message
  • Improve Electron compatibility
  • Clean, bug and UI fixes

v0.7.0 (01/30/2021)

  • Add gif and WebP images support
  • Add image url preview
  • Add video files preview
  • Bug fixes

v0.6.9 (01/24/2021)

  • Add dropdown icon in the rooms list to handle custom room actions
  • Check room-actions prop

v0.6.8 (01/24/2021)

  • When typing @ in the textarea, a list of room users will appear and can be clicked to tag a specific user
  • Check open-user-tag event

v0.6.7 (01/20/2021)

  • Do not auto-generate types files causing duplicate identifier error

v0.6.6 (01/16/2021)

  • Revert eslint dependencies to fix package installation error with typescript
  • Fix checkmark icon position on iOS

v0.6.5 (01/10/2021)

  • Fix jumpy scroll when loading more messages
  • Update dependencies

v0.6.4 (01/10/2021)

  • Add toggle-rooms-list event when clicking the toggle icon to open/hide rooms list
  • Separate file type and extension when uploading a file
  • Fix reaction emojis not displayed on iOS devices

v0.6.3 (01/03/2021)

  • Keep device keyboard opened after sending message
  • Add paginated rooms on scroll: Listen to fetch-more-rooms event to load more rooms. Use rooms-loaded to stop pagination when all rooms are loaded
  • Add rooms and messages DOM ID: can be used to manipulate a specific room or message using its ID

v0.6.2 (01/01/2021)

  • Add show-footer prop to show/hide room footer

v0.6.1 (12/26/2020)

  • Fixes not applied in previous npm release

v0.6.0 (12/26/2020)

  • Fix missing kebab-case events
  • Fix image type with multiple dots in file name

v0.5.7 (12/20/2020)

  • Replace format-links by linkify to avoid travis build failure

v0.5.7 (12/19/2020)

  • Add acceptedFiles prop to restrict file types that can be uploaded*
  • Improve typescript compatibility*
  • Fix scroll icon appearance behaviour
  • Fix roomMessage prop at init
  • Improve textarea image resizing
  • Add deleted message in rooms list for audio files

v0.5.6 (12/01/2020)

  • Improve Firestore DB usage in demo
  • Show typing users in rooms list
  • Hide searchbar when rooms are loading
  • Add loadFirstRoom prop to remove the default behaviour of opening the first room at initialization
  • Add no-room-selected slot to add UI when right side panel is empty

v0.5.5 (11/29/2020)

  • Feature: voice messages
  • Feature: system messages
  • Event: textareaActionHandler to add a custom icon in textarea footer
  • Slot: room-header-info
  • Prop: showSendIcon
  • Add dist file to allow npm installs

v0.5.4 (11/21/2020)

  • Add saved and distributed properties to messages props to display double checkmark icon
  • Add named slots for better customization

v0.5.3 (11/11/2020)

  • Fix error when the lastMessage user has left the room
  • Add ellipsis to last message and room header title

v0.5.2 (11/07/2020)

  • Fix scroll issue that was not going at the bottom of the component
  • Fix infinite messages spinner when navigating between rooms

v0.5.1 (10/29/2020)

  • Fix loading issue when loadingRooms and messagesLoaded were not initialised and then reassigned

v0.5.0 (10/07/2020)

  • Unread messages badge counter can be displayed by adding the unreadCount property to each room object
  • backgroundCounterBadge and colorCounterBadge colors can be changed using the theme prop

v0.4.9 (10/06/2020)

  • Fix css issue on Firefox that would overlap search input with the plus icon

v0.4.8 (10/03/2020)

  • Fix issue that would split urls when adding text formatting shortcut characters inside the url

v0.4.7 (09/26/2020)

  • Add action param to openFile function. Available options are download and preview

v0.4.6 (09/14/2020)

  • Add roomMessage prop – show/hide the blue line divider between seen and unseen messages

v0.4.5 (09/03/2020)

  • Fix undefined roomTextarea ref on Quasar Framework

v0.4.4 (08/17/2020)

  • Add roomMessage prop – default textarea value

v0.4.3 (07/05/2020)

  • Add inline & multiline code formatting
  • Prevent roomId watcher to trigger fetchRoom if null
  • UI fixes

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:

Related Posts

Tags:

Add Comment