{"id":13602148,"url":"https://github.com/advanced-chat/vue-advanced-chat","last_synced_at":"2026-02-14T01:06:36.348Z","repository":{"id":38325241,"uuid":"227475713","full_name":"advanced-chat/vue-advanced-chat","owner":"advanced-chat","description":"A beautiful chat rooms web component compatible with all Javascript frameworks","archived":false,"fork":false,"pushed_at":"2025-12-19T14:14:25.000Z","size":54098,"stargazers_count":2006,"open_issues_count":88,"forks_count":508,"subscribers_count":26,"default_branch":"main","last_synced_at":"2025-12-27T23:31:58.090Z","etag":null,"topics":["angular","chat","chat-application","chatrooms","firestore","groups","javascript","react","vue","vue2","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://advanced-chat.github.io/vue-advanced-chat/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/advanced-chat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"ko_fi":"antoinedupont"}},"created_at":"2019-12-11T22:54:54.000Z","updated_at":"2025-12-27T18:07:48.000Z","dependencies_parsed_at":"2023-02-17T11:55:16.591Z","dependency_job_id":"f4a80fcc-d5aa-46f1-bd30-c61d8593a95b","html_url":"https://github.com/advanced-chat/vue-advanced-chat","commit_stats":{"total_commits":1292,"total_committers":34,"mean_commits":38.0,"dds":"0.056501547987616085","last_synced_commit":"87b7ee8790c9b4803e98a1702c841cd4e4abcf0d"},"previous_names":["advanced-chat/vue-advanced-chat","antoine92190/vue-advanced-chat"],"tags_count":115,"template":false,"template_full_name":null,"purl":"pkg:github/advanced-chat/vue-advanced-chat","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-chat%2Fvue-advanced-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-chat%2Fvue-advanced-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-chat%2Fvue-advanced-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-chat%2Fvue-advanced-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/advanced-chat","download_url":"https://codeload.github.com/advanced-chat/vue-advanced-chat/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/advanced-chat%2Fvue-advanced-chat/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29427780,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T22:20:51.549Z","status":"ssl_error","status_checked_at":"2026-02-13T22:20:49.838Z","response_time":78,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","chat","chat-application","chatrooms","firestore","groups","javascript","react","vue","vue2","vue3","vuejs"],"created_at":"2024-08-01T18:01:15.282Z","updated_at":"2026-02-14T01:06:36.334Z","avatar_url":"https://github.com/advanced-chat.png","language":"JavaScript","funding_links":["https://ko-fi.com/antoinedupont"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/advanced-chat/vue-advanced-chat/actions/workflows/release.yml\"\u003e\u003cimg src=\"https://img.shields.io/github/actions/workflow/status/advanced-chat/vue-advanced-chat/release.yml?branch=main\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-advanced-chat\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-advanced-chat.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-advanced-chat\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/vue-advanced-chat\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-advanced-chat\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-advanced-chat.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-advanced-chat\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-advanced-chat.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# vue-advanced-chat\n\n![Demo Image](demo/firebase/src/assets/web_mobile.png)\n\n## Sponsors\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca target=\"_blank\" href=\"https://chatkitty.com/docs\"\u003e\n    \u003cimg alt=\"ChatKitty sponsor\" src=\"demo/firebase/src/assets/sponsors/chatkitty.png\" width=\"220\"\u003e\n  \u003c/a\u003e\n  \u003cdiv\u003eEasy to use \u003ca target=\"_blank\" href=\"https://chatkitty.com/docs\"\u003eChat API\u003c/a\u003e with scalable infrastructure\u003c/div\u003e\n\u003c/div\u003e\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 \u0026 emojis\n- Edit messages \u0026 reply to other messages\n- Tag users \u0026 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.\u003cbr\u003e\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\u003cbr\u003e\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 ChatKitty](#using-with-chatkitty)\n- [Using with Firestore](#using-with-firestore)\n\n\u003cbr\u003e\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\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-advanced-chat@2.0.4/dist/vue-advanced-chat.umd.js\"\u003e\u003c/script\u003e\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 =\u003e {\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\u003cbr\u003e\n\n## Usage\n\n#### You can import it as a custom component:\n\n```javascript\n\u003ctemplate\u003e\n  \u003cvue-advanced-chat\n    :current-user-id=\"currentUserId\"\n    :rooms=\"JSON.stringify(rooms)\"\n    :messages=\"JSON.stringify(messages)\"\n    :room-actions=\"JSON.stringify(roomActions)\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { register } from 'vue-advanced-chat'\n  register()\n\n  // Or if you used CDN import\n  // window['vue-advanced-chat'].register()\n\n  export default {\n    data() {\n      return {\n        currentUserId: '1234',\n        rooms: [],\n        messages: [],\n        roomActions: [\n          { name: 'inviteUser', title: 'Invite User' },\n          { name: 'removeUser', title: 'Remove User' },\n          { name: 'deleteRoom', title: 'Delete Room' }\n        ]\n      }\n    }\n  }\n\u003c/script\u003e\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 \u003c res.length; i++) {\n  rooms.push(res)\n}\nthis.rooms = rooms\n\n// DON'T DO THIS\nfor (let i = 0; i \u003c 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(() =\u003e {\n    this.messages = []\n    this.messagesLoaded = true\n  })\n}\n```\n\n\u003cbr\u003e\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\u003cbr\u003e\nOtherwise, you need to pass those props as strings. For example: `[messages]=\"JSON.stringify(messages)\"`\n\n| \u003cdiv style=\"width:230px\"\u003eProp\u003c/div\u003e | 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.\u003cbr\u003e\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.\u003cbr\u003e\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.\u003cbr\u003e\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.\u003cbr\u003e\nCurrently, `replyMessage`, `editMessage` and `deleteMessage` action names are available.\u003cbr\u003e\nIf `messageActions` is not set, it will use the default values below.\u003cbr\u003e\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°`            | \u003cins\u003eThis text is underlined\u003c/ins\u003e     |\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.\u003cbr\u003e\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\u003cbr\u003e\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.\u003cbr\u003e\u003cbr\u003e\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.\u003cbr\u003e\u003cbr\u003e\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\u003cbr\u003e\n\n## Events API\n\n| \u003cdiv style=\"width:230px\"\u003eEvent\u003c/div\u003e  | 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`.\u003cbr\u003e\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\n\u003cusertag\u003eTAGGED_USER_ID\u003c/usertag\u003e\n```\n\nThis will make the tag clickable inside a message. Ex: [message tag content](#messages-collection-inside-a-room-document)\u003cbr\u003e\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.\u003cbr\u003e\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.\u003cbr\u003e\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.\u003cbr\u003e\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.\u003cbr\u003e\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.\u003cbr\u003e\n\n**(10)** `textarea-action-handler` is the result of the [`textarea-action-enabled`](#props-api) prop.\u003cbr\u003e\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\u003cbr\u003e\n\n## Named Slots\n\nExample:\n\n```javascript\n\u003cvue-advanced-chat\u003e\n  \u003cdiv slot=\"room-header\"\u003e\n    This is a new room header\n  \u003c/div\u003e\n\n  \u003cdiv v-for=\"message in messages\" :slot=\"'message_' + message._id\"\u003e\n    \u003cdiv v-if=\"message.system\"\u003e\n      System message: {{ message.content }}\n    \u003c/div\u003e\n    \u003cdiv v-else\u003e\n      Normal message: {{ message.content }}\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv v-for=\"message in messages\" :slot=\"'message-avatar_' + message._id\"\u003e\n    New Avatar\n  \u003c/div\u003e\n\u003c/vue-advanced-chat\u003e\n```\n\n| \u003cdiv style=\"width:230px\"\u003eSlot\u003c/div\u003e         | 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\u003cbr\u003e\n\n## Using with ChatKitty\nChatKitty provides a full-featured UI to customize vue-advanced-chat easily without having to write or manage any chat code — frontend or backend. You can find more information on how to use ChatKitty with vue-advanced-chat in the [ChatKitty documentation](https://chatkitty.com/docs).\n\n- Create a free ChatKitty account here [https://console.chatkitty.com](https://console.chatkitty.com)\n- Create a project and get your widget ID\n- Install the ChatKitty Vue package: `npm install @chatkitty/vue`\n- Import and use the ChatKitty Vue component in your Vue app:\n\n```vue\n\u003cscript setup\u003e\nimport {ChatUi} from '@chatkitty/vue'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv style=\"width: 100vw; height: 100svh\"\u003e\n    \u003c!-- Replace widgetId with your widget ID from console.chatkitty.com --\u003e\n\t\u003c!-- Set username to the current user's username --\u003e\n    \u003c!-- Remove mode=\"sandbox\" in production environment --\u003e\n    \u003cChatUi\n      widgetId=\"5IKgX7UHsLr1cWJ5\"\n      username=username\n      mode=\"sandbox\"/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nYou can find a full example in the `demo/chatkitty` folder.\n\nCustomize your vue-advanced-chat theme and features using the ChatKitty console, setting the feature schema version to `vue-advanced-chat@2` in your project settings:\n![ChatKitty Console](demo/chatkitty/assets/chatkitty-console.png)\n\n### Styling via ChatKitty\nYou can customize the vue-advanced-chat theme directly from the ChatKitty console without having to write any code.\n\n- Go to the ChatKitty console [https://console.chatkitty.com](https://console.chatkitty.com)\n- In the code editor, setting the styles schema version to `vue-advanced-chat@2` and change the styles under the `styles` key to customize your chat theme.\n- You can find the full options [here](src/themes/index.js)\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/firebase` folder.\n\u003cbr\u003e\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/firebase/src/database/index.js` file, replace the line `const config = ...` by your own Firebase config\n- Go inside `demo/firebase` folder and run `npm run serve`\n\n### Data structure\n\nIf you decide to use the same code as in the `demo/firebase` folder to create your chat app, you need to have a specific Firestore data structure.\u003cbr\u003e\nTo help you get started, I added in `demo/firebase/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 \u003cusertag\u003eJohn\u003c/usertag\u003e',\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\u003cbr\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadvanced-chat%2Fvue-advanced-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadvanced-chat%2Fvue-advanced-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadvanced-chat%2Fvue-advanced-chat/lists"}