\n\n## Features\n\n- Compatible with all Javascript frameworks (Vue, Angular, React, etc.) or no framework at all\n- Customizeable realtime chat messaging\n- Backend agnostic\n- Images, videos, files, voice messages & emojis\n- Edit messages & reply to other messages\n- Tag users & emojis shortcut suggestions\n- UI elements for seen, new, deleted, typing and system messages\n- Text formatting - bold, italic, strikethrough, underline, code, multiline\n- Online / Offline users status\n- Flexible options and slots\n- Light and dark theme modes\n- Firestore example\n- Typescript, PWA, Web Component support\n\n## [Demo](https://advanced-chat.github.io/vue-advanced-chat)\n\nEnjoy :smile:\n\n## [Real World Example](https://vue-advanced-chat-app.netlify.app/)\n\nA Progressive Web Application showcasing all the features of `vue-advanced-chat` component. \nBuilt with Firestore, Vuetify, and Push Notifications.\n\nIf you wish to get premium access to the real world example source code, please contact me by email.\n\nYou will get a fully working chat application for web and mobile:\n\n- UI and backend integration\n- Email, Facebook and Google authentication\n- Real-time messaging, browser push notifications, images optimization (Firebase Cloud Functions to compress avatars)\n- UI/UX components for alerts (errors, information), dialogs, etc.\n- Add existing users to a room using their email\n- Send email invitations to non-existing users\n- Edition of profile and rooms\n- Addition and deletion of room users\n- Optimised firestore implementation to reduce bandwidth and costs as much as possible\n- State management using vuex\n- Internationalisation (i18n)\n- Google Analytics\n- Support to help you get the chat up and running\n\n \n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#example)\n- [Props API](#props-api)\n- [Props data structure](#props-data-structure)\n- [Events API](#events-api)\n- [Named Slots](#named-slots)\n- [Using with Firestore](#using-with-firestore)\n\n \n\n## Installation\n\n```bash\n# Using npm\nnpm install --save vue-advanced-chat\n\n# Using yarn\nyarn add vue-advanced-chat\n\n# Using CDN\n\n```\n\n### Vue\n\nRegister `vue-advanced-chat` and `emoji-picker` as web components in your [config file](https://vuejs.org/guide/extras/web-components.html#example-vite-config):\n\n```javascript\ncompilerOptions: {\n isCustomElement: tagName => {\n return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'\n }\n}\n```\n\nDemo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/main\n\n### React\n\nDemo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/react\n\n### Angular / Ionic\n\nDemo: https://github.com/advanced-chat/vue-advanced-chat-sandbox/tree/angular\n\n \n\n## Usage\n\n#### You can import it as a custom component:\n\n```javascript\n\n \n\n\n\n```\n\n### Important notes\n\n`vue-advanced-chat` component is performance oriented, hence you have to follow specific rules to make it work properly.\n\n- Use array assignement instead of `push` method\n\n```javascript\n// DO THIS\nconst rooms = []\nfor (let i = 0; i < res.length; i++) {\n rooms.push(res)\n}\nthis.rooms = rooms\n\n// DON'T DO THIS\nfor (let i = 0; i < res.length; i++) {\n this.rooms.push(res)\n}\n```\n\n```javascript\n// DO THIS\nthis.rooms[i].typingUsers = [...this.rooms[i].typingUsers, typingUserId]\n\n// DON'T DO THIS\nthis.rooms[i].typingUsers.push(typingUserId)\n```\n\n- To add or replace an item inside an array, use spread operator\n\n```javascript\n// DO THIS\nthis.rooms[roomIndex] = room\nthis.rooms = [...this.rooms]\n\n// DON'T DO THIS\nthis.rooms[roomIndex] = room\n\n// AND DON'T DO THIS\nthis.rooms.push(room)\n```\n\n- Follow the UI loading pattern by updating `messagesLoaded` prop every time a new room is fetched\n\n```javascript\nfetchMessages({ room, options }) {\n this.messagesLoaded = false\n\n // use timeout to imitate async server fetched data\n setTimeout(() => {\n this.messages = []\n this.messagesLoaded = true\n })\n}\n```\n\n \n\n## Props API\n\n### Important notes\n\nIf you are using Vue 3, you can pass Array and Object props normally: [Passing DOM Properties in Vue 3](https://vuejs.org/guide/extras/web-components.html#passing-dom-properties)\n \nOtherwise, you need to pass those props as strings. For example: `[messages]=\"JSON.stringify(messages)\"`\n\n|
Prop
| Type | Required | Default |\n| ----------------------------------- | ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------- |\n| `height` | String | - | `600px` |\n| `current-user-id`(1) | String | `true` | - |\n| `rooms` | [String, Array] | - | `[]` |\n| `rooms-order` | `desc` / `asc` | - | `desc` |\n| `loading-rooms`(2) | Boolean | - | `false` |\n| `rooms-loaded`(3) | Boolean | - | `false` |\n| `room-id`(4) | String | - | `null` |\n| `load-first-room`(5) | Boolean | - | `true` |\n| `rooms-list-opened` | Boolean | - | `true` |\n| `custom-search-room-enabled` (6) | Boolean | - | `false` |\n| `messages` | [String, Array] | - | `[]` |\n| `room-message`(7) | String | - | `null` |\n| `username-options` (8) | [String, Object] | - | `{minUsers: 3, currentUser: false}` |\n| `messages-loaded`(9) | Boolean | - | `false` |\n| `room-actions`(10) | [String, Array] | - | `[]` |\n| `menu-actions`(11) | [String, Array] | - | `[]` |\n| `message-actions`(12) | [String, Array] | - | (11) |\n| `message-selection-actions`(13) | [String, Array] | - | (13) |\n| `templates-text`(14) | [String, Array] | - | `null` |\n| `auto-scroll`(15) | [String, Object] | - | `{ send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } }` |\n| `show-search` | Boolean | - | `true` |\n| `show-add-room` | Boolean | - | `true` |\n| `show-send-icon` | Boolean | - | `true` |\n| `show-files` | Boolean | - | `true` |\n| `show-audio` | Boolean | - | `true` |\n| `audio-bit-rate` | Number | - | `128` |\n| `audio-sample-rate` | Number | - | `44100` |\n| `show-emojis` | Boolean | - | `true` |\n| `show-reaction-emojis` | Boolean | - | `true` |\n| `show-new-messages-divider`(16) | Boolean | - | `true` |\n| `show-footer`(17) | Boolean | - | `true` |\n| `text-messages`(18) | [String, Object] | - | `null` |\n| `text-formatting`(19) | [String, Object] | - | ` {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' `'}` |\n| `link-options`(20) | [String, Object] | - | `{ disabled: false, target: '_blank', rel: null }` |\n| `room-info-enabled` (21) | Boolean | - | `false` |\n| `textarea-action-enabled`(22) | Boolean | - | `false` |\n| `textarea-auto-focus` | Boolean | - | `true` |\n| `user-tags-enabled` | Boolean | - | `true` |\n| `emojis-suggestion-enabled` | Boolean | - | `true` |\n| `media-preview-enabled` | Boolean | - | `true` |\n| `responsive-breakpoint`(23) | Number | - | `900` |\n| `single-room`(24) | Boolean | - | `false` |\n| `scroll-distance`(25) | Number | - | `60` |\n| `theme`(26) | `light` / `dark` | - | `light` |\n| `accepted-files`(27) | String | - | `*` |\n| `capture-files`(28) | String | - | `''` |\n| `multiple-files`(29) | Boolean | - | `true` |\n| `styles`(30) | [String, Object] | - | (26) |\n| `show-audio`(31) | Boolean | - | `true` |\n| `emoji-data-source` | String | - | `https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json` |\n\n**(1)** `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)\n\n**(2)** `loading-rooms` can be used to show/hide a spinner icon while rooms are loading\n\n**(3)** `rooms-loaded` must be set to `true` when all rooms have been loaded. Meaning the user cannot scroll to load more paginated rooms\n\n**(4)** `room-id` can be used to load a specific room at any time\n\n**(5)** `load-first-room` can be used to remove the default behaviour of opening the first room at initialization\n\n**(6)** `custom-search-room-enabled` can be used to use the [search-room](#events-api) event to call your own method to filter out rooms\n\n**(7)** `room-message` can be used to add a default textarea value\n\n**(8)** `username-options` can be used to show/hide room messages username according to the minimum number of users `minUsers` inside a room, and if the message user is the current user `currentUser`\n\n**(9)** `messages-loaded` must be set to `true` when all messages of a conversation have been loaded. Meaning the user cannot scroll on top to load more paginated messages\n\n**(10)** `room-actions` can be used to display your own buttons when clicking the dropdown icon of each room inside the rooms list. \nYou can then use the [room-action-handler](#events-api) event to call your own action after clicking a button. Ex:\n\n```javascript\nroom-actions=\"[\n {\n name: 'archiveRoom',\n title: 'Archive Room'\n }\n]\"\n```\n\n**(11)** `menu-actions` can be used to display your own buttons when clicking the vertical dots icon inside a room. \nYou can then use the [menu-action-handler](#events-api) event to call your own action after clicking a button. Ex:\n\n```javascript\nmenu-actions=\"[\n {\n name: 'inviteUser',\n title: 'Invite User'\n },\n {\n name: 'removeUser',\n title: 'Remove User'\n },\n {\n name: 'deleteRoom',\n title: 'Delete Room'\n }\n]\"\n```\n\n**(12)** `message-actions` can be used to display your own buttons when clicking the dropdown icon inside a message. \nYou can then use the [message-action-handler](#events-api) event to call your own action after clicking a button. Ex:\n\n```javascript\nmessage-actions=\"[\n {\n name: 'addMessageToFavorite',\n title: 'Add To Favorite'\n },\n {\n name: 'shareMessage',\n title: 'Share Message'\n }\n]\"\n```\n\nYou can use built-in `message-actions` names to trigger specific UI modifications when clicked. \nCurrently, `replyMessage`, `editMessage` and `deleteMessage` action names are available. \nIf `messageActions` is not set, it will use the default values below. \nIf you don't want to display this `messageActions` menu, you can pass it an empty array.\n\n```javascript\nmessageActions=\"[\n {\n name: 'replyMessage',\n title: 'Reply'\n },\n {\n name: 'editMessage',\n title: 'Edit Message',\n onlyMe: true\n },\n {\n name: 'deleteMessage',\n title: 'Delete Message',\n onlyMe: true\n },\n {\n name: 'selectMessages',\n title: 'Select'\n }\n]\"\n```\n\n**(13)** `message-selection-actions` is related to the above `selectMessages` message action. You can use it to display custom action buttons in the room header when selecting a message. Ex:\n\n```\nmessageActions=\"[\n {\n name: 'deleteMessages',\n title: 'Delete'\n },\n {\n name: 'forwardMessages',\n title: 'Forward'\n }\n]\"\n```\n\n**(14)** `templates-text` can be used to add autocomplete templates text when typing `/` in the room textarea. Ex:\n\n```javascript\ntemplatesText=\"[\n {\n tag: 'help',\n text: 'This is the help'\n },\n {\n tag: 'action',\n text: 'This is the action'\n }\n]\"\n```\n\n**(15)** `auto-scroll` can be used to change the auto scroll behaviour when sending/receiving a message. Ex:\n\n```javascript\nauto-scroll=\"{\n send: {\n new: true, // will scroll down after sending a message\n newAfterScrollUp: false // will not scroll down after sending a message when scrolled up\n },\n receive: {\n new: false, // will not scroll down when receiving a message\n newAfterScrollUp: true // will scroll down when receiving a message when scrolled up\n }\n}\"\n```\n\n**(16)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.\n\n**(17)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.\n\n**(18)** `text-messages` can be used to replace default i18n texts. Ex:\n\n```javascript\ntext-messages=\"{\n ROOMS_EMPTY: 'Aucune conversation',\n ROOM_EMPTY: 'Aucune conversation sélectionnée',\n NEW_MESSAGES: 'Nouveaux messages',\n MESSAGE_DELETED: 'Ce message a été supprimé',\n MESSAGES_EMPTY: 'Aucun message',\n CONVERSATION_STARTED: 'La conversation a commencée le :',\n TYPE_MESSAGE: 'Tapez votre message',\n SEARCH: 'Rechercher',\n IS_ONLINE: 'est en ligne',\n LAST_SEEN: 'dernière connexion ',\n IS_TYPING: 'est en train de taper...',\n CANCEL_SELECT_MESSAGE: 'Annuler Sélection'\n}\"\n```\n\n**(19)** `text-formatting` can be used to add text formatting. Bold, italic, strikethrough, underline, inline code and multiline code formatting are currently available and can be used in conjonction.\n\n- You can disable text formatting by passing the prop `:text-formatting=\"{disabled: true}\"`.\n- You can change markdown characters, for example: `:text-formatting=\"{italic: '^'}\"`\n- You can disable a specific markdown character, for example: `:text-formatting=\"{bold: null}\"`\n\n| Style | Syntax | Example | Output |\n| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |\n| Bold | `* *` | `*This is bold text*` | **This is bold text** |\n| Italic | `_ _` | `_This text is italicized_` | _This text is italicized_ |\n| Strikethrough | `~ ~` | `~This was mistaken text~` | ~~This was mistaken text~~ |\n| Underline | `° °` | `°This text is underlined°` | This text is underlined |\n| Nested formatting | `* *` and `_ _` | `*This text is _extremely_ important*` | **This text is _extremely_ important** |\n\n**Inline Code**\n\nExample: \\`This is inline code\\`\n\nOutput: `This is inline code`\n\n**Multiline Code**\n\nExample: \\```This is multiline code\\```\n\nOutput:\n\n```bash\nThis is\nmultiline code\n```\n\n**(20)** `link-options` can be used to disable url links in messages, or change urls target. Ex:\n\n```javascript\n:link-options=\"{ disabled: true, target: '_self', rel: null }\"\n```\n\n**(21)** `room-info-enabled` can be used to trigger an event after clicking the room header component. \nYou can then use the [room-info](#events-api) event to call your own action after clicking the header.\n\n**(22)** `textarea-action-enabled` can be used to add an extra icon on the right of the textarea \nYou can then use the [textarea-action-handler](#events-api) event to call your own action after clicking the icon.\n\n**(23)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.\n\n**(24)** `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.\n\n**(25)** `scroll-distance` can be used to change the number of pixels before `fetchMessages` event is triggered when scrolling up to load more messages, or `fetchMoreRooms` event is triggered when scrolling down to load more rooms.\n\n**(26)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.\n\n**(27)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `\"*\"`.\n\nExample: set `accepted-files=\"image/png, image/jpeg, application/pdf\"` to allow `JPG` `PNG` and `PDF` files only\n\n**(28)** `capture-files` can be used to enable direct capturing of photos and videos on mobile browsers, as opposed to just uploading existing photos and videos which are already on the device. See [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture) for more information and recognized values. By default, the attribute is omitted and mobile browsers will only offer the gallery to choose photos and videos. Note: this only affects file attachments. Audio messages are always recorded using the device's microphone.\n\n**(29)** `multiple-files` can be used to define whether multiple file selections will be accepted. By default this is true.\n\n**(30)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)\n\n**(31)** `show-audio` can be used to enable or disable audio icon \n\n```javascript\nstyles=\"{\n general: {\n color: '#0a0a0a',\n colorSpinner: '#333',\n borderStyle: '1px solid #e1e4e8'\n },\n\n footer: {\n background: '#f8f9fa',\n backgroundReply: 'rgba(0, 0, 0, 0.08)'\n },\n\n icons: {\n search: '#9ca6af'\n }\n}\"\n```\n\n## Props data structure\n\nYour props must follow a specific structure to display rooms and messages correctly:\n\n### Rooms prop\n\n```javascript\nrooms=\"[\n {\n roomId: '1',\n roomName: 'Room 1',\n avatar: 'assets/imgs/people.png',\n unreadCount: 4,\n index: 3,\n lastMessage: {\n _id: 'xyz',\n content: 'Last message received',\n senderId: '1234',\n username: 'John Doe',\n timestamp: '10:20',\n saved: true,\n distributed: false,\n seen: false,\n new: true\n },\n users: [\n {\n _id: '1234',\n username: 'John Doe',\n avatar: 'assets/imgs/doe.png',\n status: {\n state: 'online',\n lastChanged: 'today, 14:30'\n }\n },\n {\n _id: '4321',\n username: 'John Snow',\n avatar: 'assets/imgs/snow.png',\n status: {\n state: 'offline',\n lastChanged: '14 July, 20:00'\n }\n }\n ],\n typingUsers: [ 4321 ]\n }\n]\"\n```\n\n- If you add the `index` property, your rooms will be ordered using this value.\n `index` can be any sortable value, like a `string`, `datetime`, `timestamp`, etc.\n\n- For each room user, you can add the `status` property, which can hold the `state` and `lastChanged` properties:\n\n - `state` can be `'online'` or `'offline'`\n - `lastChanged` is the date when `state` was last modified.\n\n- `typingUsers` is an array of all the users who are currently writing a message\n\n### Messages prop\n\nMessage objects are rendered differently depending on their type. Text, emoji, image, video and file types are supported.
\nEach message object has a `senderId` field which holds the id of the corresponding agent. If `senderId` matches the `currentUserId` prop, specific UI and actions will be implemented.
\nNotes:\n\n- `username` will be displayed on each message of corresponding agents if at least 3 users are in the room\n- `system` is used to show messages with a specific centered display\n- `indexId` can be used if you need to change a message ID that is already displayed in a room, this preventing an animation glitch. For example, when you don't know in advance the message ID your backend will create.\n\nMessage states:\n\n- `saved: true` one checkmark\n- `distributed: true` two checkmarks\n- `seen: true` two blue checkmarks\n- `deleted: true` grey background with deleted message text\n- `failure: true` red clickable failure icon\n\n```javascript\nmessages=\"[\n {\n _id: '7890',\n indexId: 12092,\n content: 'Message 1',\n senderId: '1234',\n username: 'John Doe',\n avatar: 'assets/imgs/doe.png',\n date: '13 November',\n timestamp: '10:20',\n system: false,\n saved: true,\n distributed: true,\n seen: true,\n deleted: false,\n failure: true,\n disableActions: false,\n disableReactions: false,\n files: [\n {\n name: 'My File',\n size: 67351,\n type: 'png',\n audio: true,\n duration: 14.4,\n url: 'https://firebasestorage.googleapis.com/...',\n preview: 'data:image/png;base64,iVBORw0KGgoAA...',\n progress: 88\n }\n ],\n reactions: {\n 😁: [\n '1234', // USER_ID\n '4321'\n ],\n 🥰: [\n '1234'\n ]\n },\n replyMessage: {\n content: 'Reply Message',\n senderId: '4321',\n files: [\n {\n name: 'My Replied File',\n size: 67351,\n type: 'png',\n audio: true,\n duration: 14.4,\n url: 'https://firebasestorage.googleapis.com/...',\n preview: 'data:image/png;base64,iVBORw0KGgoAA...'\n }\n ]\n },\n }\n]\"\n```\n\n \n\n## Events API\n\n|
Event
| Params | Fires when a user |\n| ------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------- |\n| `fetch-messages`(1) | `{ room, options }` | Scrolled on top to load more messages |\n| `fetch-more-rooms`(2) | - | Scrolled to load more rooms |\n| `send-message` | `{ roomId, content, files(11), replyMessage(12), usersTag }` | Sent a message |\n| `edit-message` | `{ roomId, messageId, newContent, files(11), replyMessage(12) ,usersTag }` | Edited a message |\n| `delete-message` | `{ roomId, message }` | Deleted a message |\n| `open-file` | `{ message, file }` | Clicked to view or download a file |\n| `open-user-tag`(3) | `{ user }` | Clicked on a user tag inside a message |\n| `open-failed-message` | `{ roomId, message }` | Clicked on the failure icon next to a message |\n| `add-room` | - | Clicked on the plus icon next to searchbar |\n| `search-room`(4) | `{ roomId, value }` | Typed a character in the room search input |\n| `room-action-handler`(5) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |\n| `menu-action-handler`(6) | `{ roomId, action }` | Clicked on the vertical dots icon inside a room |\n| `message-action-handler`(7) | `{ roomId, action, message }` | Clicked on the dropdown icon inside a message |\n| `message-selection-action-handler`(8) | `{ roomId, action, messages }` | Clicked on the select button inside a message |\n| `send-message-reaction` | `{ roomId, messageId, reaction, remove }` | Clicked on the emoji icon inside a message |\n| `room-info` (9) | `room` | Clicked the room header bar |\n| `toggle-rooms-list` | `{ opened }` | Clicked on the toggle icon inside a room header |\n| `textarea-action-handler`(10) | `{ roomId, message }` | Clicked on custom icon inside the footer |\n| `typing-message` | `{ roomId, message }` | Started typing a message |\n\n**(1)** `fetch-messages` is triggered every time a room is opened. If the room is opened for the first time, the `options` param will hold `reset: true`. \n**(1)** `fetch-messages` should be a method implementing a pagination system. Its purpose is to load older messages of a conversation when the user scroll on top.\n\n**(2)** `fetch-more-rooms` is triggered when scrolling down the rooms list, and should be a method implementing a pagination system.\n\n**(3)** `open-user-tag` is triggered when clicking a user tag inside a message. When creating a user tag by typing `@` in the footer textarea and sending the message, the tag will be identified with the below pattern:\n\n```javascript\nTAGGED_USER_ID\n```\n\nThis will make the tag clickable inside a message. Ex: [message tag content](#messages-collection-inside-a-room-document) \n`send-message` and `edit-message` events will handle that pattern for you and pass it in the `content` param.\n\n**(4)** `room-action-handler` is the result of the [`room-actions`](#props-api) prop. \nWhen clicking a button from your `room-actions` array, `room-action-handler` will give you the name of the button that was click.\nThen you can do anything you want with it. Ex:\n\n```javascript\nmenuActionHandler({ roomId, action }) {\n switch (action.name) {\n case 'archiveRoom':\n // call a method to archive the room\n }\n}\n```\n\n**(5)** `menu-action-handler` is the result of the [`menu-actions`](#props-api) prop. \nWhen clicking a button from your `menu-actions` array, `menu-action-handler` will give you the name of the button that was click.\nThen you can do anything you want with it. Ex:\n\n```javascript\nmenuActionHandler({ roomId, action }) {\n switch (action.name) {\n case 'inviteUser':\n // call a method to invite a user to the room\n case 'removeUser':\n // call a method to remove a user from the room\n case 'deleteRoom':\n // call a method to delete the room\n }\n}\n```\n\n**(6)** `search-room` can be enabled by using [`custom-search-room-enabled`](#props-api) prop. This will allow you to call your own method to filter out searched rooms.\n\n**(7)** `message-action-handler` is the result of the [`message-actions`](#props-api) prop. \nWhen clicking a button from your `message-actions` array, `message-action-handler` will give you the name of the button that was click and the corresponding message data.\nThen you can do anything you want with it. Ex:\n\n```javascript\nmessageActionHandler({ roomId, action, message }) {\n switch (action.name) {\n case 'addMessageToFavorite':\n // call a method to add a message to the favorite list\n case 'shareMessage':\n // call a method to share the message with another user\n }\n}\n```\n\n**(8)** `message-selection-action-handler` is the result of the [`message-selection-actions`](#props-api) prop. \nWhen clicking a button from your `message-selection-actions` array, `message-selection-action-handler` will give you the name of the button that was click and the corresponding selected messages data.\nThen you can do anything you want with it. Ex:\n\n```javascript\nmessageSelectionActionHandler({ roomId, action, message }) {\n switch (action.name) {\n case 'deleteMessages':\n // call a method to delete selected messaged\n case 'shareMessage':\n // call a method to share selected messaged with another user\n }\n}\n```\n\n**(9)** `room-info` is the result of the [`room-info-enabled`](#props-api) prop. \n\n**(10)** `textarea-action-handler` is the result of the [`textarea-action-enabled`](#props-api) prop. \n\n**(11)** Array of files where each file contain: `{ blob, localUrl, name, size, type, extension }`\n\n**(12)** `replyMessage` object is available when the user replied to another message by clicking the corresponding icon, and contains the message information that was clicked.\n\n \n\n## Named Slots\n\nExample:\n\n```javascript\n\n
\n This is a new room header\n
\n\n
\n
\n System message: {{ message.content }}\n
\n
\n Normal message: {{ message.content }}\n
\n
\n\n
\n New Avatar\n
\n\n```\n\n|
Slot
| Action |\n| ------------------------------------------- | ----------------------------------------------------------------- |\n| `custom-action-icon` | Add a custom icon inside the footer |\n| `rooms-header` | Add a template on top of rooms list (above the search bar) |\n| `room-list-item_{{ROOM_ID}}` | Replace the template of the room list items |\n| `room-list-info_{{ROOM_ID}}` | Replace the info of room list items |\n| `room-list-avatar_{{ROOM_ID}}` | Replace the avatar of room list items |\n| `room-list-options_{{ROOM_ID}}` | Replace the template of the list room options |\n| `room-list-options-icon_{{ROOM_ID}}` | Replace the room list options dropdown icon |\n| `rooms-header` | Replace the content above the search bar |\n| `rooms-list-search` | Replace the search bar |\n| `room-header` | Replace the template of the room header |\n| `room-header-avatar` | Replace the template of the room header avatar |\n| `room-header-info` | Replace the template of the room header text |\n| `room-options` | Replace the template of the room options |\n| `message_{{MESSAGE_ID}}` | Replace the template of the message (and system message) box |\n| `message-avatar_{{MESSAGE_ID}}` | Replace the template of the message avatar |\n| `message-failure_{{MESSAGE_ID}}` | Replace the message failure icon |\n| `messages-empty` | Replace the empty message template |\n| `rooms-empty` | Replace the empty rooms template |\n| `no-room-selected` | Replace the no room selected template |\n| `menu-icon` | Replace the room menu icon |\n| `toggle-icon` | Replace the toggle room list icon |\n| `spinner-icon-rooms` | Replace the loading spinner icon in the rooms list |\n| `spinner-icon-infinite-rooms` | Replace the loading spinner icon to load more rooms |\n| `spinner-icon-messages` | Replace the loading spinner icon in a room |\n| `spinner-icon-infinite-messages` | Replace the loading spinner icon to load more messages |\n| `spinner-icon-room-file` | Replace the loading spinner icon to load heavy files |\n| `spinner-icon-message-file_{{MESSAGE_ID}}` | Replace the loading spinner icon in a message containing an image |\n| `scroll-icon` | Replace the scroll to newest message icon |\n| `reply-close-icon` | Replace the reply close icon |\n| `image-close-icon` | Replace the image close icon |\n| `file-icon` | Replace the file icon |\n| `files-close-icon` | Replace the file close icon |\n| `edit-close-icon` | Replace the edit close icon |\n| `preview-close-icon` | Replace the media preview close icon |\n| `emoji-picker-icon` | Replace the emoji picker icon |\n| `emoji-picker-reaction-icon_{{MESSAGE_ID}}` | Replace the emoji picker reaction icon (in the message box) |\n| `paperclip-icon` | Replace the paperclip icon |\n| `send-icon` | Replace the message send icon |\n| `eye-icon_{{MESSAGE_ID}}` | Replace the eye icon (image message) |\n| `document-icon_{{MESSAGE_ID}}` | Replace the document icon |\n| `pencil-icon_{{MESSAGE_ID}}` | Replace the pencil icon |\n| `checkmark-icon_{{MESSAGE_ID}}` | Replace the checkmark icon of a message |\n| `checkmark-icon_{{ROOM_ID}}` | Replace the checkmark icon of a message from the rooms list |\n| `deleted-icon_{{MESSAGE_ID}}` | Replace the deleted icon of a message |\n| `deleted-icon_{{ROOM_ID}}` | Replace the deleted icon of a message from the rooms list |\n| `microphone-icon_{{ROOM_ID}}` | Replace the microphone icon |\n| `dropdown-icon_{{MESSAGE_ID}}` | Replace the dropdown icon |\n| `search-icon` | Replace the search icon |\n| `add-icon` | Replace the add room icon |\n| `audio-stop-icon` | Replace the audio recorder stop icon |\n| `audio-check-icon` | Replace the audio recorder confirm icon |\n| `audio-pause-icon_{{MESSAGE_ID}}` | Replace the message audio pause icon |\n| `audio-play-icon_{{MESSAGE_ID}}` | Replace the message audio play icon |\n\n \n\n## Using with Firestore\n\n### Source code\n\nYou can find the source code to implement a full featured chat app using Firebase/Firestore inside the `demo` folder.\n \nTo test it using your own Firebase project:\n\n- Setup Cloud Firestore (to store users and rooms) and Realtime Database (to store users online status)\n- Clone this repository: `git clone https://github.com/advanced-chat/vue-advanced-chat.git`\n- Inside `demo/src/database/index.js` file, replace the line `const config = ...` by your own Firebase config\n- Go inside `demo` folder and run `npm run serve`\n\n### Data structure\n\nIf you decide to use the same code as in the `demo` folder to create your chat app, you need to have a specific Firestore data structure. \nTo help you get started, I added in `demo/src/App.vue` a method `addData` to initialize some data on your Firestore database.\n\n#### Users collection\n\n```javascript\nusers: {\n USER_ID_1: {\n _id: '1',\n username: 'User 1'\n },\n USER_ID_2: {\n _id: '2',\n username: 'User 2'\n },\n USER_ID_3: {\n _id: '3',\n username: 'User 2'\n }\n}\n```\n\n#### Rooms collection\n\n```javascript\nchatRooms: {\n ROOM_ID_1: {\n users: ['1', '3']\n },\n ROOM_ID_2: {\n users: ['1', '2', '3']\n }\n}\n```\n\n#### Messages collection inside a room document\n\n```javascript\nmessages: {\n MESSAGE_ID_1: {\n content: 'My first message to John',\n senderId: '2',\n timestamp: 'December 11, 2019 at 4:00:00 PM',\n seen: true\n }\n}\n```\n\n#### Notes\n\n- You need to create a composite index to order rooms by last message received.\n The easiest way to do it is to create a room, then click the error message url in the browser debugging console.\n\n \n\n## [Contributing](https://github.com/advanced-chat/vue-advanced-chat/blob/master/.github/CONTRIBUTING.md)\n\nYour help is always appreciated :rocket:\n\n## License\n\nThis project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)\n","readmeFilename":"README.md"}
![](\"https://img.shields.io/github/actions/workflow/status/advanced-chat/vue-advanced-chat/release.yml?branch=main\")
\n ![](\"https://img.shields.io/npm/dm/vue-advanced-chat.svg\")
\n ![](\"https://img.shields.io/bundlephobia/minzip/vue-advanced-chat\")
\n ![](\"https://img.shields.io/npm/v/vue-advanced-chat.svg\")
\n ![](\"https://img.shields.io/npm/l/vue-advanced-chat.svg\")
\n![\"ChatKitty](\"demo/src/assets/sponsors/chatkitty.png\")
\n \n