### Install Project Dependencies

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/demo/chatkitty/README.md

Run this command to install all the necessary packages for the project.

```sh
npm install
```

--------------------------------

### Start Development Server

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/demo/chatkitty/README.md

Use this command to compile and launch the development server with hot-reloading enabled.

```sh
npm run dev
```

--------------------------------

### Install Vue Advanced Chat via npm or yarn

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Install the package using your preferred package manager.

```bash
# npm
npm install --save vue-advanced-chat

# yarn
yarn add vue-advanced-chat
```

--------------------------------

### Inline Code Formatting Example

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Demonstrates how to format text as inline code using backticks.

```text
`This is inline code`
```

--------------------------------

### Multiline Code Formatting Example

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Shows how to format multiline code blocks using triple backticks.

```bash
```This is multiline code```
```

--------------------------------

### Basic Vue Advanced Chat Component Setup

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Mount the component with essential props like `current-user-id`, `rooms`, and `messages`. Handle `fetch-messages` and `send-message` events.

```vue
<template>
  <vue-advanced-chat
    height="600px"
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :messages-loaded="messagesLoaded"
    :rooms-loaded="roomsLoaded"
    @fetch-messages="fetchMessages"
    @send-message="sendMessage"
  />
</template>

<script>
import { register } from 'vue-advanced-chat'
register()

export default {
  data() {
    return {
      currentUserId: 'user-001',
      roomsLoaded: false,
      messagesLoaded: false,
      rooms: [
        {
          roomId: 'room-1',
          roomName: 'General',
          avatar: 'https://example.com/group.png',
          unreadCount: 2,
          lastMessage: {
            _id: 'msg-99',
            content: 'Hello!',
            senderId: 'user-002',
            username: 'Alice',
            timestamp: '14:32',
            seen: false,
            new: true
          },
          users: [
            { _id: 'user-001', username: 'Bob', avatar: 'https://example.com/bob.png', status: { state: 'online', lastChanged: 'today' } },
            { _id: 'user-002', username: 'Alice', avatar: 'https://example.com/alice.png', status: { state: 'offline', lastChanged: 'yesterday' } }
          ]
        }
      ],
      messages: []
    }
  },
  methods: {
    fetchMessages({ detail: [{ room, options }] }) {
      this.messagesLoaded = false
      // options.reset === true when the room is opened for the first time
      this.messages = [
        {
          _id: 'msg-1',
          content: 'Welcome to General!',
          senderId: 'user-002',
          username: 'Alice',
          date: '13 November',
          timestamp: '09:00',
          seen: true,
          saved: true,
          distributed: true
        }
      ]
      this.messagesLoaded = true
    },
    sendMessage({ detail: [{ roomId, content, files, replyMessage }] }) {
      const newMessage = {
        _id: `msg-${Date.now()}`,
        content,
        senderId: this.currentUserId,
        username: 'Bob',
        date: new Date().toLocaleDateString(),
        timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
        saved: true
      }
      this.messages = [...this.messages, newMessage]
    }
  }
}
</script>
```

--------------------------------

### typing-message

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user starts typing a message in a room.

```APIDOC
## typing-message

### Description
Fired when a user starts typing a message in a room.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **message** (object) - Required - The message object representing the typed content.
```

--------------------------------

### Implement Paginated Room Loading with `fetch-more-rooms` Event

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Fired when the user scrolls to the bottom of the room list, enabling paginated room loading. Set `rooms-loaded` to `true` when all pages have been fetched to remove the loading spinner. This example demonstrates fetching and appending more rooms.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :rooms-loaded="roomsLoaded"
    :loading-rooms="loadingRooms"
    @fetch-more-rooms="onFetchMoreRooms"
  />
</template>

<script>
export default {
  data() {
    return { rooms: [], roomsLoaded: false, loadingRooms: true, page: 1 }
  },
  async created() {
    const initial = await myApi.getRooms(1)
    this.rooms = initial
    this.loadingRooms = false
    if (initial.length < 20) this.roomsLoaded = true
  },
  methods: {
    async onFetchMoreRooms() {
      this.page++
      const more = await myApi.getRooms(this.page)
      this.rooms = [...this.rooms, ...more]   // spread — never push directly
      if (more.length < 20) this.roomsLoaded = true
    }
  }
}
</script>
```

--------------------------------

### Handle Message Reactions with `send-message-reaction` Event

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Fired when a user clicks an emoji reaction on a message. The payload includes the reaction emoji character and a boolean indicating whether to add or remove it. This example shows how to update the UI and call an API to persist the reaction.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :show-reaction-emojis="true"
    @send-message-reaction="onReaction"
  />
</template>

<script>
export default {
  methods: {
    async onReaction({ detail: [{ roomId, messageId, reaction, remove }] }) {
      await myApi.updateReaction(roomId, messageId, reaction, remove)

      this.messages = this.messages.map(m => {
        if (m._id !== messageId) return m
        const reactions = { ...m.reactions }
        if (remove) {
          reactions[reaction] = reactions[reaction].filter(id => id !== this.currentUserId)
          if (!reactions[reaction].length) delete reactions[reaction]
        } else {
          reactions[reaction] = [...(reactions[reaction] || []), this.currentUserId]
        }
        return { ...m, reactions }
      })
    }
  }
}
</script>
```

--------------------------------

### Internationalize UI Strings with `text-messages` Prop

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Override any or all of the component's built-in UI strings for localization. Provide only the keys you want to change; unspecified keys fall back to the English defaults. This example shows how to set French UI strings.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :text-messages="JSON.stringify(i18n)"
  />
</template>

<script>
export default {
  data() {
    return {
      i18n: {
        ROOMS_EMPTY: 'Aucune conversation',
        ROOM_EMPTY: 'Aucune conversation sélectionnée',
        NEW_MESSAGES: 'Nouveaux messages',
        MESSAGE_DELETED: 'Ce message a été supprimé',
        MESSAGES_EMPTY: 'Aucun message',
        CONVERSATION_STARTED: 'La conversation a commencée le :',
        TYPE_MESSAGE: 'Tapez votre message',
        SEARCH: 'Rechercher',
        IS_ONLINE: 'est en ligne',
        LAST_SEEN: 'dernière connexion ',
        IS_TYPING: 'est en train de taper...',
        CANCEL_SELECT_MESSAGE: 'Annuler Sélection'
      }
    }
  }
}
</script>
```

--------------------------------

### Build for Production

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/demo/chatkitty/README.md

Execute this command to compile and minify the project for production deployment.

```sh
npm run build
```

--------------------------------

### Customize Markdown Characters for Text Formatting

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Modify markdown characters for text formatting by passing an object to the `:text-formatting` prop. For example, use '^' for italics.

```javascript
:text-formatting="{italic: '^'}"
```

--------------------------------

### room-info

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks the room header bar to view room information.

```APIDOC
## room-info

### Description
Fired when a user clicks the room header bar to view room information.

### Method
Event

### Parameters
#### Path Parameters
- **room** (object) - Required - The room object.
```

--------------------------------

### Configure Autocomplete Templates

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use the `templates-text` prop to add autocomplete suggestions when typing '/' in the room textarea. Each template has a `tag` for triggering and `text` for the suggestion.

```javascript
templatesText="[
  {
    tag: 'help',
    text: 'This is the help'
  },
  {
    tag: 'action',
    text: 'This is the action'
  }
]"
```

--------------------------------

### open-file

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on a file attached to a message, to view or download it.

```APIDOC
## open-file

### Description
Fired when a user clicks on a file attached to a message, to view or download it.

### Method
Event

### Parameters
#### Path Parameters
- **message** (object) - Required - The message object containing the file.
- **file** (object) - Required - The file object that was clicked.
```

--------------------------------

### UI Loading Pattern for Messages

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Implement the UI loading pattern by updating the `messagesLoaded` prop. Set it to `false` before fetching new messages and `true` once they are loaded.

```javascript
fetchMessages({ room, options }) {
  this.messagesLoaded = false

  // use timeout to imitate async server fetched data
  setTimeout(() => {
    this.messages = []
    this.messagesLoaded = true
  })
}
```

--------------------------------

### send-message

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user sends a message in a room.

```APIDOC
## send-message

### Description
Fired when a user sends a message in a room. Handles user tag patterns like `<usertag>TAGGED_USER_ID</usertag>`.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **content** (string) - Required - The message content.
- **files** (array) - Optional - An array of files attached to the message.
- **replyMessage** (object) - Optional - The message this message is replying to.
- **usersTag** (array) - Optional - An array of users tagged in the message.
```

--------------------------------

### Specify Accepted File Types

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use the `accepted-files` prop to restrict allowed file types in the chat. By default, all types ('*') are permitted.

```javascript
accepted-files="image/png, image/jpeg, application/pdf"
```

--------------------------------

### Set Chat Theme

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

The `theme` prop allows switching between 'light' and 'dark' themes for the chat interface.

```javascript
theme
```

--------------------------------

### add-room

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on the plus icon next to the search bar to add a new room.

```APIDOC
## add-room

### Description
Fired when a user clicks on the plus icon next to the search bar to add a new room.

### Method
Event

### Parameters
- None

### Response
(No specific response documented, implies data is handled by the event listener)
```

--------------------------------

### Handling Room Actions

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Demonstrates how to handle custom room actions defined in the `room-actions` prop. The `room-action-handler` event provides the `roomId` and the `action` object, allowing you to implement specific logic for each action, such as archiving a room.

```javascript
menuActionHandler({ roomId, action }) {
  switch (action.name) {
    case 'archiveRoom':
      // call a method to archive the room
  }
}
```

--------------------------------

### Enable or Disable Audio Icon

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use the `show-audio` prop to control the visibility of the audio icon within the chat interface.

```javascript
show-audio
```

--------------------------------

### Configure Message Templates with `templates-text` Prop

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Define pre-defined message templates that appear as autocomplete suggestions when the user types `/` in the message textarea.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :templates-text="JSON.stringify(templates)"
  />
</template>

<script>
export default {
  data() {
    return {
      templates: [
        { tag: 'hello',   text: 'Hello! How can I help you today?' },
        { tag: 'thanks',  text: 'Thank you for reaching out!' },
        { tag: 'wait',    text: 'Please hold on, I am looking into this for you.' },
        { tag: 'resolve', text: 'Your issue has been resolved. Let us know if you need anything else.' }
      ]
    }
  }
}
</script>
```

--------------------------------

### toggle-rooms-list

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on the toggle icon inside a room header to show or hide the rooms list.

```APIDOC
## toggle-rooms-list

### Description
Fired when a user clicks on the toggle icon inside a room header to show or hide the rooms list.

### Method
Event

### Parameters
#### Path Parameters
- **opened** (boolean) - Required - Indicates whether the rooms list is opened.
```

--------------------------------

### Listen to real-time messages with Firestore

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

This pattern demonstrates how to listen for real-time updates to messages within a specific chat room using Firestore. It orders messages by timestamp in descending order and limits the results.

```javascript
// demo/firebase/src/database/firestore.js pattern

// Collection paths
// users/{userId}          → { _id, username, avatar }
// chatRooms/{roomId}      → { users: [userId, ...], lastUpdated }
// chatRooms/{roomId}/messages/{msgId} → message object

import { onSnapshot, query, collection, orderBy, limit } from 'firebase/firestore'

// Listen to real-time messages for a room
function listenToMessages(roomId, callback) {
  const messagesRef = collection(db, `chatRooms/${roomId}/messages`)
  const q = query(messagesRef, orderBy('timestamp', 'desc'), limit(30))

  return onSnapshot(q, snapshot => {
    const msgs = snapshot.docs.map(doc => ({
      _id: doc.id,
      ...doc.data(),
      timestamp: doc.data().timestamp?.toDate().toLocaleTimeString()
    })).reverse()
    callback(msgs)
  })
}
```

--------------------------------

### fetch-messages

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user scrolls to the top of the chat to load more messages. It should implement a pagination system. If the room is opened for the first time, the `options` param will hold `reset: true`.

```APIDOC
## fetch-messages

### Description
Fired when a user scrolls to the top of the chat to load more messages. It should implement a pagination system. If the room is opened for the first time, the `options` param will hold `reset: true`.

### Method
Event

### Parameters
#### Path Parameters
- **room** (string) - Required - The ID of the room.
- **options** (object) - Optional - Options for fetching messages. Contains `reset: true` if the room is opened for the first time.

### Request Example
```json
{
  "roomId": "room123",
  "options": {
    "reset": true
  }
}
```

### Response
(No specific response documented, implies data is handled by the event listener)
```

--------------------------------

### Configure Multiple File Selection

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Set the `multiple-files` prop to `false` to disable multiple file selections. The default behavior allows multiple selections.

```javascript
multiple-files
```

--------------------------------

### Handle Room and Menu Action Events

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Responds to custom actions defined in `room-actions` (room list) and `menu-actions` (in-room menu). Both events provide the room ID and the selected action object, allowing for custom backend integrations.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :room-actions="JSON.stringify(roomActions)"
    :menu-actions="JSON.stringify(menuActions)"
    @room-action-handler="onRoomAction"
    @menu-action-handler="onMenuAction"
  />
</template>

<script>
export default {
  data() {
    return {
      roomActions: [
        { name: 'archiveRoom', title: 'Archive' },
        { name: 'pinRoom',     title: 'Pin' }
      ],
      menuActions: [
        { name: 'inviteUser',  title: 'Invite User' },
        { name: 'removeUser',  title: 'Remove User' },
        { name: 'deleteRoom',  title: 'Delete Room' }
      ]
    }
  },
  methods: {
    onRoomAction({ detail: [{ roomId, action }] }) {
      switch (action.name) {
        case 'archiveRoom': myApi.archiveRoom(roomId); break
        case 'pinRoom':     myApi.pinRoom(roomId);     break
      }
    },
    onMenuAction({ detail: [{ roomId, action }] }) {
      switch (action.name) {
        case 'inviteUser': this.openInviteDialog(roomId); break
        case 'removeUser': this.openRemoveDialog(roomId); break
        case 'deleteRoom': myApi.deleteRoom(roomId);      break
      }
    }
  }
}
</script>
```

--------------------------------

### fetch-more-rooms

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Triggered when scrolling down the rooms list, and should implement a pagination system to load more rooms.

```APIDOC
## fetch-more-rooms

### Description
Triggered when scrolling down the rooms list, and should implement a pagination system to load more rooms.

### Method
Event

### Parameters
- None

### Response
(No specific response documented, implies data is handled by the event listener)
```

--------------------------------

### Customize Chat Appearance with `theme` and `styles` Props

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Switch between built-in `light` and `dark` themes via the `theme` prop. Fine-grained overrides are applied through the `styles` prop, which deep-merges into the default theme's CSS variable map. Every visual token is individually overridable.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    theme="dark"
    :styles="JSON.stringify(customStyles)"
  />
</template>

<script>
export default {
  data() {
    return {
      customStyles: {
        general: {
          color: '#e8eaed',
          colorButtonClear: '#8ab4f8',
          backgroundColorButton: '#1a73e8',
          borderStyle: '1px solid #3c4043'
        },
        header: {
          background: '#1f1f1f',
          colorRoomName: '#e8eaed'
        },
        message: {
          background: '#2d2d2d',
          backgroundMe: '#0d47a1',
          colorTag: '#8ab4f8'
        },
        sidemenu: {
          background: '#1f1f1f',
          backgroundActive: '#2d2d2d',
          colorActive: '#8ab4f8'
        },
        icons: {
          send: '#8ab4f8',
          emoji: '#8ab4f8',
          paperclip: '#8ab4f8'
        }
      }
    }
  }
}
</script>
```

--------------------------------

### Enable Room Info Event Trigger

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use the `room-info-enabled` prop to trigger an event after clicking the room header. This allows custom actions via the `room-info` event.

```javascript
room-info-enabled
```

--------------------------------

### Configure Single Room Display

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use the `single-room` prop to always hide the room list and display only a single room. Ensure the `rooms` prop is an array with one element.

```javascript
single-room
```

--------------------------------

### room-action-handler and menu-action-handler Events

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

`room-action-handler` is triggered by buttons defined in the `room-actions` prop (room list dropdown). `menu-action-handler` is triggered by buttons defined in `menu-actions` (in-room menu). Both return the room ID and the action object.

```APIDOC
## Events: room-action-handler, menu-action-handler

### Description
`room-action-handler` is triggered by buttons defined in the `room-actions` prop (room list dropdown). `menu-action-handler` is triggered by buttons defined in `menu-actions` (in-room menu). Both return the room ID and the action object.

### room-action-handler Parameters
- **roomId** (string) - The ID of the room associated with the action.
- **action** (object) - The action object that was triggered. Contains at least a `name` property.

### menu-action-handler Parameters
- **roomId** (string) - The ID of the room associated with the action.
- **action** (object) - The action object that was triggered. Contains at least a `name` property.
```

--------------------------------

### message-action-handler

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on the dropdown icon inside a message.

```APIDOC
## message-action-handler

### Description
Fired when a user clicks on the dropdown icon inside a message.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **action** (object) - Required - An object containing details about the action.
- **message** (object) - Required - The message object.
```

--------------------------------

### Customize Chat Theme Styles

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

The `styles` prop allows deep customization of the chat's appearance, including general, footer, and icon styles. Refer to `src/themes/index.js` for a full list of customizable properties.

```javascript
styles="{
  general: {
    color: '#0a0a0a',
    colorSpinner: '#333',
    borderStyle: '1px solid #e1e4e8'
  },

  footer: {
    background: '#f8f9fa',
    backgroundReply: 'rgba(0, 0, 0, 0.08)'
  },

  icons: {
    search: '#9ca6af'
  }
}"
```

--------------------------------

### Enable Direct File Capture on Mobile

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

The `capture-files` prop enables direct photo and video capture on mobile browsers, enhancing the file attachment experience.

```javascript
capture-files
```

--------------------------------

### Fetch Messages Event

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Handles the `fetch-messages` event, which is triggered when a user opens a room or scrolls to load older messages. It includes logic for initial loading and pagination, requiring updates to the `messages-loaded` prop.

```APIDOC
## Events API — `fetch-messages`

Fired every time a room is opened or the user scrolls to load older messages. Use `options.reset` to distinguish initial load from pagination. Must update `messages-loaded` to `false` before the fetch and `true` when done to control the infinite-scroll spinner.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :messages-loaded="messagesLoaded"
    @fetch-messages="onFetchMessages"
  />
</template>

<script>
export default {
  data() {
    return { messages: [], messagesLoaded: false, currentUserId: 'u1', rooms: [] }
  },
  methods: {
    async onFetchMessages({ detail: [{ room, options }] }) {
      this.messagesLoaded = false

      const isFirstLoad = options?.reset

      // Fetch page of messages from your API
      const page = isFirstLoad ? 1 : this.currentPage + 1
      const fetched = await myApi.getMessages(room.roomId, page)

      if (isFirstLoad) {
        this.messages = fetched
      } else {
        // Prepend older messages (do NOT use .push — assign new array)
        this.messages = [...fetched, ...this.messages]
      }

      // Signal no more pages
      if (fetched.length < 20) this.messagesLoaded = true
      else this.currentPage = page
    }
  }
}
</script>
```
```

--------------------------------

### Handling Fetch Messages Event in Vue Advanced Chat

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Demonstrates how to implement the `fetch-messages` event handler to load older messages when a user opens a room or scrolls. It distinguishes between initial load and pagination, and manages the `messagesLoaded` state.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :messages-loaded="messagesLoaded"
    @fetch-messages="onFetchMessages"
  />
</template>

<script>
export default {
  data() {
    return { messages: [], messagesLoaded: false, currentUserId: 'u1', rooms: [] }
  },
  methods: {
    async onFetchMessages({ detail: [{ room, options }] }) {
      this.messagesLoaded = false

      const isFirstLoad = options?.reset

      const page = isFirstLoad ? 1 : this.currentPage + 1
      const fetched = await myApi.getMessages(room.roomId, page)

      if (isFirstLoad) {
        this.messages = fetched
      } else {
        this.messages = [...fetched, ...this.messages]
      }

      if (fetched.length < 20) this.messagesLoaded = true
      else this.currentPage = page
    }
  }
}
</script>
```

--------------------------------

### Define Custom Message Actions

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use the `message-actions` prop to display custom buttons in the message dropdown. Built-in actions like `replyMessage`, `editMessage`, and `deleteMessage` are available. If not provided, default actions are used. Pass an empty array to hide the menu.

```javascript
message-actions="[
  {
    name: 'addMessageToFavorite',
    title: 'Add To Favorite'
  },
  {
    name: 'shareMessage',
    title: 'Share Message'
  }
]"
```

```javascript
messageActions="[
  {
    name: 'replyMessage',
    title: 'Reply'
  },
  {
    name: 'editMessage',
    title: 'Edit Message',
    onlyMe: true
  },
  {
    name: 'deleteMessage',
    title: 'Delete Message',
    onlyMe: true
  },
  {
    name: 'selectMessages',
    title: 'Select'
  }
]"
```

--------------------------------

### room-action-handler

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on the vertical dots icon inside a room, triggering an action defined in the `room-actions` prop.

```APIDOC
## room-action-handler

### Description
Fired when a user clicks on the vertical dots icon inside a room, triggering an action defined in the `room-actions` prop. The `action` parameter contains the name of the button that was clicked.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **action** (object) - Required - An object containing details about the action, typically with a `name` property.
```

--------------------------------

### search-room

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user types a character in the room search input.

```APIDOC
## search-room

### Description
Fired when a user types a character in the room search input.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **value** (string) - Required - The search query value.
```

--------------------------------

### open-user-tag

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on a user tag within a message.

```APIDOC
## open-user-tag

### Description
Fired when a user clicks on a user tag within a message. User tags are created using the `<usertag>TAGGED_USER_ID</usertag>` pattern.

### Method
Event

### Parameters
#### Path Parameters
- **user** (object) - Required - The user object associated with the tag.
```

--------------------------------

### send-message-reaction

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on the emoji icon inside a message to send a reaction.

```APIDOC
## send-message-reaction

### Description
Fired when a user clicks on the emoji icon inside a message to send a reaction.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **messageId** (string) - Required - The ID of the message to react to.
- **reaction** (string) - Required - The reaction emoji.
- **remove** (boolean) - Optional - Whether to remove the reaction.
```

--------------------------------

### menu-action-handler

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on the vertical dots icon inside a room, triggering an action defined in the `room-actions` prop. This is an alias for `room-action-handler`.

```APIDOC
## menu-action-handler

### Description
Fired when a user clicks on the vertical dots icon inside a room, triggering an action defined in the `room-actions` prop. This is an alias for `room-action-handler`.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **action** (object) - Required - An object containing details about the action, typically with a `name` property.
```

--------------------------------

### message-selection-action-handler

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on the select button inside a message, allowing for message selection actions.

```APIDOC
## message-selection-action-handler

### Description
Fired when a user clicks on the select button inside a message, allowing for message selection actions.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **action** (object) - Required - An object containing details about the action.
- **messages** (array) - Required - An array of selected message objects.
```

--------------------------------

### Set Responsive Breakpoint for Room List Collapse

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

The `responsive-breakpoint` prop collapses the left room list when the viewport width falls below the specified value.

```javascript
responsive-breakpoint
```

--------------------------------

### send-message Event

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Fired when the user submits a message. The event payload includes the target room ID, message content string, any attached files, a potential reply-message reference, and an array of tagged users.

```APIDOC
## Event: send-message

### Description
Fired when the user submits a message. The event payload includes the target room ID, message content string, any attached files, a potential reply-message reference, and an array of tagged users.

### Parameters
- **roomId** (string) - The ID of the room where the message is sent.
- **content** (string) - The text content of the message.
- **files** (array) - An array of attached files. Each file object may contain properties like `name`, `type`, and `localUrl`.
- **replyMessage** (object) - Optional. An object representing the message being replied to.
- **usersTag** (array) - An array of users tagged in the message.
```

--------------------------------

### Handle Menu Actions in Vue Chat

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use this handler when clicking buttons defined in the `menu-actions` prop. It provides the room ID and the action name, allowing custom logic for actions like inviting or removing users.

```javascript
menuActionHandler({ roomId, action }) {
  switch (action.name) {
    case 'inviteUser':
      // call a method to invite a user to the room
    case 'removeUser':
      // call a method to remove a user from the room
    case 'deleteRoom':
      // call a method to delete the room
  }
}
```

--------------------------------

### Configure Text Formatting with `text-formatting` Prop

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Control markdown-like inline formatting characters. Characters can be reassigned or disabled per token. Set `disabled: true` to turn off all formatting.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    :text-formatting="JSON.stringify(formatting)"
  />
</template>

<script>
// Rendered output examples:
// *bold text*         → <strong>bold text</strong>
// _italic text_       → <em>italic text</em>
// ~strikethrough~     → <s>strikethrough</s>
// °underlined°        → <u>underlined</u>
// `inline code`       → <code>inline code</code>
// ```multiline```     → <pre><code>multiline</code></pre>

export default {
  data() {
    return {
      formatting: {
        disabled: false,      // set true to turn off all formatting
        bold: '*',            // change or set null to disable
        italic: '_',
        strike: '~',
        underline: '°',
        inlineCode: '`',
        multilineCode: '```'
      }
    }
  }
}
</script>
```

--------------------------------

### Include Vue Advanced Chat via CDN

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Include the component via CDN for use without a bundler. Ensure to call the register function.

```html
<!-- CDN (no bundler needed) -->
<script src="https://cdn.jsdelivr.net/npm/vue-advanced-chat@2.0.9/dist/vue-advanced-chat.umd.js"></script>
<script>
  window['vue-advanced-chat'].register()
</script>
```

--------------------------------

### open-failed-message

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on the failure icon next to a message that failed to send.

```APIDOC
## open-failed-message

### Description
Fired when a user clicks on the failure icon next to a message that failed to send.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **message** (object) - Required - The failed message object.
```

--------------------------------

### Define Custom Message Selection Actions

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use `message-selection-actions` to display custom action buttons in the room header when messages are selected. This is related to the `selectMessages` message action.

```javascript
messageActions="[
  {
    name: 'deleteMessages',
    title: 'Delete'
  },
  {
    name: 'forwardMessages',
    title: 'Forward'
  }
]"
```

--------------------------------

### Configure Link Options in Vue Advanced Chat

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Control link behavior by passing the `:link-options` prop. Options include disabling links, changing the target, and modifying the 'rel' attribute.

```javascript
:link-options="{ disabled: true, target: '_self', rel: null }"
```

--------------------------------

### Define Custom Menu Actions

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use the `menu-actions` prop to display custom buttons in the room's vertical dots menu. The `menu-action-handler` event is triggered when a custom action is clicked.

```javascript
menu-actions="[
  {
    name: 'inviteUser',
    title: 'Invite User'
  },
  {
    name: 'removeUser',
    title: 'Remove User'
  },
  {
    name: 'deleteRoom',
    title: 'Delete Room'
  }
]"
```

--------------------------------

### textarea-action-handler

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user clicks on a custom icon inside the footer textarea.

```APIDOC
## textarea-action-handler

### Description
Fired when a user clicks on a custom icon inside the footer textarea.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **message** (object) - Required - The current message object in the textarea.
```

--------------------------------

### Array Assignment vs. Push Method

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

When updating arrays, use array assignment with the spread operator for performance. Avoid directly using the push method.

```javascript
// DO THIS
const rooms = []
for (let i = 0; i < res.length; i++) {
  rooms.push(res)
}
this.rooms = rooms

// DON'T DO THIS
for (let i = 0; i < res.length; i++) {
  this.rooms.push(res)
}
```

```javascript
// DO THIS
this.rooms[i].typingUsers = [...this.rooms[i].typingUsers, typingUserId]

// DON'T DO THIS
this.rooms[i].typingUsers.push(typingUserId)
```

--------------------------------

### Define Custom Room Actions

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Use the `room-actions` prop to display custom buttons in the rooms list dropdown. The `room-action-handler` event is triggered when a custom action is clicked.

```javascript
room-actions="[
  {
    name: 'archiveRoom',
    title: 'Archive Room'
  }
]"
```

--------------------------------

### Fetch paginated rooms with Firestore

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

This function fetches chat rooms for a given user, ordered by 'lastUpdated' in descending order and limited to 20 results. It supports pagination by accepting an optional 'lastDoc' parameter.

```javascript
// demo/firebase/src/database/firestore.js pattern

// Collection paths
// users/{userId}          → { _id, username, avatar }
// chatRooms/{roomId}      → { users: [userId, ...], lastUpdated }
// chatRooms/{roomId}/messages/{msgId} → message object

import { onSnapshot, query, collection, orderBy, limit } from 'firebase/firestore'

// Fetch paginated rooms
async function getRooms(userId, lastDoc = null) {
  const roomsRef = collection(db, 'chatRooms')
  let q = query(
    roomsRef,
    where('users', 'array-contains', userId),
    orderBy('lastUpdated', 'desc'),
    limit(20)
  )
  if (lastDoc) q = query(q, startAfter(lastDoc))
  const snap = await getDocs(q)
  return snap.docs.map(d => ({ roomId: d.id, ...d.data() }))
}
```

--------------------------------

### edit-message

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Fired when a user edits an existing message in a room.

```APIDOC
## edit-message

### Description
Fired when a user edits an existing message in a room. Handles user tag patterns like `<usertag>TAGGED_USER_ID</usertag>`.

### Method
Event

### Parameters
#### Path Parameters
- **roomId** (string) - Required - The ID of the room.
- **messageId** (string) - Required - The ID of the message to edit.
- **newContent** (string) - Required - The new content for the message.
- **files** (array) - Optional - An array of files attached to the message.
- **replyMessage** (object) - Optional - The message this message is replying to.
- **usersTag** (array) - Optional - An array of users tagged in the message.
```

--------------------------------

### Integrate Vue-Advanced-Chat in React

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Use Vue-Advanced-Chat in a React application by passing props as JSON strings and listening for custom events. Ensure the component is loaded via CDN or imported correctly.

```jsx
import { useEffect, useRef, useState } from 'react'

// Load from CDN or: import { register } from 'vue-advanced-chat'; register()
// <script src="https://cdn.jsdelivr.net/npm/vue-advanced-chat@2.0.9/dist/vue-advanced-chat.umd.js"></script>

export default function Chat() {
  const chatRef = useRef(null)
  const [messages, setMessages] = useState([])

  const rooms = [
    {
      roomId: '1', roomName: 'Support',
      users: [
        { _id: 'me', username: 'You' },
        { _id: 'agent', username: 'Support Agent' }
      ]
    }
  ]

  useEffect(() => {
    const el = chatRef.current
    if (!el) return

    const handleSend = ({ detail: [{ roomId, content }] }) => {
      setMessages(prev => [
        ...prev,
        { _id: Date.now().toString(), content, senderId: 'me', timestamp: new Date().toLocaleTimeString() }
      ])
    }

    const handleFetch = ({ detail: [{ room }] }) => {
      setMessages([
        { _id: '1', content: 'Hi, how can I help?', senderId: 'agent', timestamp: '09:00' }
      ])
    }

    el.addEventListener('send-message', handleSend)
    el.addEventListener('fetch-messages', handleFetch)
    return () => {
      el.removeEventListener('send-message', handleSend)
      el.removeEventListener('fetch-messages', handleFetch)
    }
  }, [])

  return (
    <vue-advanced-chat
      ref={chatRef}
      height="600px"
      current-user-id="me"
      rooms={JSON.stringify(rooms)}
      messages={JSON.stringify(messages)}
      messages-loaded="true"
    />
  )
}
```

--------------------------------

### Firestore Data Structure for Chat Rooms

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Defines the structure for the 'chatRooms' collection in Firestore, mapping room IDs to arrays of participating user IDs.

```javascript
chatRooms: {
  ROOM_ID_1: {
    users: ['1', '3']
  },
  ROOM_ID_2: {
    users: ['1', '2', '3']
  }
}
```

--------------------------------

### Handle Send Message Event

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Fired when the user submits a message. The event payload includes room ID, message content, attached files, reply reference, and tagged users. This snippet shows optimistic UI updates and error handling.

```vue
<template>
  <vue-advanced-chat
    :current-user-id="currentUserId"
    :rooms="JSON.stringify(rooms)"
    :messages="JSON.stringify(messages)"
    @send-message="onSendMessage"
  />
</template>

<script>
export default {
  methods: {
    async onSendMessage({ detail: [{ roomId, content, files, replyMessage, usersTag }] }) {
      // Optimistically add to UI first
      const tempId = `temp-${Date.now()}`
      this.messages = [
        ...this.messages,
        {
          _id: tempId,
          content,
          senderId: this.currentUserId,
          date: new Date().toLocaleDateString(),
          timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
          saved: false,
          files: files?.map(f => ({ name: f.name, size: f.size, type: f.type, url: f.localUrl }))
        }
      ]

      try {
        const saved = await myApi.postMessage({ roomId, content, files, replyMessage })
        // Replace temp message with confirmed one from server
        this.messages = this.messages.map(m =>
          m._id === tempId ? { ...saved, saved: true } : m
        )
      } catch (e) {
        // Mark as failed so user can retry
        this.messages = this.messages.map(m =>
          m._id === tempId ? { ...m, failure: true } : m
        )
      }
    }
  }
}
</script>
```

--------------------------------

### Vue Advanced Chat - Rooms Prop Structure

Source: https://github.com/advanced-chat/vue-advanced-chat/blob/main/README.md

Defines the structure for the 'rooms' prop, including room details, last message, user information, and typing users. The 'index' property can be used for custom room ordering.

```javascript
rooms="[
  {
    roomId: '1',
    roomName: 'Room 1',
    avatar: 'assets/imgs/people.png',
    unreadCount: 4,
    index: 3,
    lastMessage: {
      _id: 'xyz',
      content: 'Last message received',
      senderId: '1234',
      username: 'John Doe',
      timestamp: '10:20',
      saved: true,
      distributed: false,
      seen: false,
      new: true
    },
    users: [
      {
        _id: '1234',
        username: 'John Doe',
        avatar: 'assets/imgs/doe.png',
        status: {
          state: 'online',
          lastChanged: 'today, 14:30'
        }
      },
      {
        _id: '4321',
        username: 'John Snow',
        avatar: 'assets/imgs/snow.png',
        status: {
          state: 'offline',
          lastChanged: '14 July, 20:00'
        }
      }
    ],
    typingUsers: [ 4321 ]
  }
]"
```

--------------------------------

### Room Data Structure

Source: https://context7.com/advanced-chat/vue-advanced-chat/llms.txt

Defines the structure of a room object, including required fields like roomId, roomName, and users, as well as optional fields for avatar, unread counts, and last message previews.

```APIDOC
## `rooms` Prop — Room Data Structure

The `rooms` prop accepts an array of room objects (or a JSON-stringified array for non-Vue 3 environments). Each room must include `roomId`, `roomName`, and `users`. Optional fields control ordering, unread badges, last-message preview, and typing indicators.

```javascript
// Full room object structure
const rooms = [
  {
    roomId: 'room-42',            // required: String | Number
    roomName: 'Engineering',      // required: String
    avatar: '/img/eng.png',       // optional: URL for the room avatar
    unreadCount: 5,               // optional: badge count shown in room list
    index: Date.now(),            // optional: sort key (string, number, datetime)
    lastMessage: {
      _id: 'msg-last',
      content: 'Deploying now...',
      senderId: 'user-003',
      username: 'Carol',
      timestamp: '17:45',
      saved: true,
      distributed: true,
      seen: false,
      new: true
    },
    users: [
      {
        _id: 'user-001',
        username: 'Bob',
        avatar: '/img/bob.png',
        status: { state: 'online', lastChanged: 'today, 17:00' }
      },
      {
        _id: 'user-003',
        username: 'Carol',
        avatar: '/img/carol.png',
        status: { state: 'offline', lastChanged: '12 Nov, 09:30' }
      }
    ],
    typingUsers: ['user-003']     // array of user _id values currently typing
  }
]
```
```