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' },
colors: { type: Object, default: null },
textMessages: { type: Object, default: null },
currentUserId: { type: String, default: '' },
rooms: { type: Array, default: () => [] },
loadingRooms: { type: Boolean, default: false },
messages: { type: Array, default: () => [] },
messagesLoaded: { type: Boolean, default: false },
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 }
  ]
},
showAddRoom: { type: Boolean, default: true },
showFiles: { type: Boolean, default: true },
showEmojis: { type: Boolean, default: true },
showReactionEmojis: { type: Boolean, default: true },
newMessage: { type: Object, default: null }

4. Full props to customize the chat messages.

currentUserId: { type: String, 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 },
newMessages: { type: Array },
showReactionEmojis: { type: Boolean, required: true },
emojisList: { type: Object, required: true },
hideOptions: { type: Boolean, required: true }

5. Full props to customize the chat rooms

rooms="[
  {
    roomId: 1,
    roomName: 'Room 1',
    lastMessage: {
      content: 'Last message received',
      sender_id: 1234,
      username: 'John Doe',
      timestamp: '10:20',
      seen: false,
      new: true
    },
    users: [
      {
        _id: 1234,
        username: 'John Doe'
      },
      {
        _id: 4321,
        username: 'John Snow'
      }
    ]
  }
]"

6. 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:

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: