> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-angular-multimedia-attachments.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Files Bubble

> A batch-aware Angular bubble that renders one or more generic file attachments of a media message as a collapsible list of file cards with download and caption support.

The `CometChatFilesBubbleComponent` renders the generic file attachment(s) of a `CometChat.MediaMessage`. It is the **multi-attachment counterpart** to [`CometChatFileBubble`](/ui-kit/angular/components/cometchat-file-bubble): the message list routes file messages to this bubble so that a single message carrying several files renders as one grouped bubble.

Internally it **delegates rendering** to `cometchat-file-bubble` (expandable file list, download, caption) and only adds a shared batch width so every message in a multi-message batch lines up at the same size.

## Overview

* **File cards** — one card per file with name, size, and a download action (rendered by the underlying file bubble).
* **Collapsible list** — when a message carries many files, the list collapses with an expand/collapse control.
* **Caption support** — an optional caption is rendered below the files.
* **Batch-aware width** — all bubbles in a batch share one width via the `--cometchat-multi-attachment-width` token (default `400px`).

<Note>
  This bubble is selected only when **[`enableMultipleAttachments`](/ui-kit/angular/components/cometchat-message-composer)** is `true` (the default) on [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble). When it is `false`, file messages fall back to the deprecated single-attachment [`CometChatFileBubble`](/ui-kit/angular/components/cometchat-file-bubble). The legacy bubble remains available as a standalone component, but the list no longer routes to it by default.
</Note>

## Automatic Rendering

In the standard chat flow you do **not** instantiate this component yourself. [`CometChatMessageList`](/ui-kit/angular/components/cometchat-message-list) renders [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble), which routes any `file`-type message to `CometChatFilesBubbleComponent` when `enableMultipleAttachments` is on.

Use the component directly only when you are building a fully custom message renderer.

## Basic Usage

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatFilesBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-file-message',
  standalone: true,
  imports: [CometChatFilesBubbleComponent],
  template: `
    <cometchat-files-bubble
      [message]="fileMessage"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-files-bubble>
  `,
})
export class FileMessageComponent {
  fileMessage!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}
```

### Incoming vs Outgoing Messages

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatFilesBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-file-list',
  standalone: true,
  imports: [CometChatFilesBubbleComponent],
  template: `
    <!-- Incoming files (left-aligned) -->
    <cometchat-files-bubble
      [message]="incoming"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-files-bubble>

    <!-- Outgoing files (right-aligned) -->
    <cometchat-files-bubble
      [message]="outgoing"
      [alignment]="MessageBubbleAlignment.right"
    ></cometchat-files-bubble>
  `,
})
export class FileListComponent {
  incoming!: CometChat.MediaMessage;
  outgoing!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}
```

## Batch Grouping

When a user sends several media messages together, each message is stamped with a shared `metadata.batchId`. The message list groups consecutive messages that share a `batchId` and marks each one with `isFirstInBatch` / `isLastInBatch` flags, which control the avatar, spacing, and footer so the batch reads as a single visual block.

<Info>
  Angular expresses batch grouping as the two booleans `isFirstInBatch` / `isLastInBatch` (computed by [`CometChatMessageList`](/ui-kit/angular/components/cometchat-message-list)). There is no `batchPosition` input on the bubble. All four media batch bubbles share one width through the `--cometchat-multi-attachment-width` CSS token.
</Info>

## Properties

| Property             | Type                     | Default                       | Description                                                                                                                             |
| -------------------- | ------------------------ | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `message`            | `CometChat.MediaMessage` | **required**                  | The file message. Attachments and caption are read from it.                                                                             |
| `alignment`          | `MessageBubbleAlignment` | `MessageBubbleAlignment.left` | Bubble alignment. `left` for incoming/receiver, `right` for outgoing/sender.                                                            |
| `disableInteraction` | `boolean`                | `false`                       | Accepted for parity with the other media batch bubbles. The file bubble has no interaction toggle, so this input has no visible effect. |

This component emits no outputs.

## Relationship to the Legacy File Bubble

|                      | `CometChatFileBubble` (legacy)                   | `CometChatFilesBubble` (multi-attachment)  |
| -------------------- | ------------------------------------------------ | ------------------------------------------ |
| Routed by the list   | Only when `enableMultipleAttachments` is `false` | Default for file messages                  |
| Multiple attachments | Rendered directly                                | Rendered via delegation, batch-aware width |
| Batch grouping       | No                                               | Yes (`isFirstInBatch` / `isLastInBatch`)   |
| Availability         | Deprecated standalone                            | Public standalone component                |

## Customization

```css expandable theme={null}
cometchat-files-bubble {
  /* Shared width for every media bubble in a batch (default 400px). */
  --cometchat-multi-attachment-width: 400px;
}
```

<Note>
  `--cometchat-multi-attachment-width` is intentionally left **unset** in the kit's `css-variables.css`; the batch bubbles fall back to `400px`. Set it once to resize all four media batch bubbles — [Images](/ui-kit/angular/components/cometchat-images-bubble), [Videos](/ui-kit/angular/components/cometchat-videos-bubble), [Audios](/ui-kit/angular/components/cometchat-audios-bubble), and [Files](/ui-kit/angular/components/cometchat-files-bubble) — together.
</Note>

To restyle the file cards, use the [File Bubble styling reference](/ui-kit/angular/components/cometchat-file-bubble#styling-with-css-variables).

## Technical Details

* **Standalone component** — import and use independently; exported as `CometChatFilesBubbleComponent` from `@cometchat/chat-uikit-angular`.
* **Change detection** — `OnPush`.
* **Delegation** — renders through `cometchat-file-bubble`; adds only the shared batch width.
* **No outputs** — the component emits no events.

## Related

* **[File Bubble](/ui-kit/angular/components/cometchat-file-bubble)** — the single-attachment bubble this component delegates to.
* **[Images Bubble](/ui-kit/angular/components/cometchat-images-bubble)** — the multi-attachment bubble for images.
* **[Videos Bubble](/ui-kit/angular/components/cometchat-videos-bubble)** — the multi-attachment bubble for videos.
* **[Message Composer](/ui-kit/angular/components/cometchat-message-composer)** — stages multiple attachments and sends them as a batch.
* **[Message List](/ui-kit/angular/components/cometchat-message-list)** — routes messages to this bubble and computes batch grouping.