Images Bubble - CometChat Docs

The CometChatImagesBubbleComponent renders the image attachment(s) of a CometChat.MediaMessage. It is the multi-attachment counterpart to CometChatImageBubble: the message list routes image messages to this bubble so that a single message carrying several images renders as one grouped bubble. Internally it delegates rendering to cometchat-image-bubble (grid/overflow layout, fullscreen gallery, caption) and only adds a shared batch width so every message in a multi-message batch lines up at the same size.

Overview

Adaptive grid layouts — single image, multi-image grid, 2×2, and a +N overflow tile, selected automatically from the attachment count (rendered by the underlying image bubble).
Fullscreen gallery viewer — click any image to open the paginated fullscreen viewer.
Caption support — an optional caption is rendered below the images.
Batch-aware width — all bubbles in a batch share one width via the --cometchat-multi-attachment-width token (default 400px).

This bubble is selected only when enableMultipleAttachments is true (the default) on CometChatMessageBubble. When it is false, image messages fall back to the deprecated single-attachment CometChatImageBubble. The legacy bubble remains available as a standalone component, but the list no longer routes to it by default.

Automatic Rendering

In the standard chat flow you do not instantiate this component yourself. CometChatMessageList renders CometChatMessageBubble, which routes any image-type message to CometChatImagesBubbleComponent when enableMultipleAttachments is on. Use the component directly only when you are building a fully custom message renderer.

Basic Usage

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatImagesBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-image-message',
  standalone: true,
  imports: [CometChatImagesBubbleComponent],
  template: `
    <cometchat-images-bubble
      [message]="imageMessage"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-images-bubble>
  `,
})
export class ImageMessageComponent {
  imageMessage!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}

Incoming vs Outgoing Messages

Alignment is a MessageBubbleAlignment enum value — left for incoming/receiver messages, right for outgoing/sender messages.

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatImagesBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

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

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

Grid Layouts

The underlying image bubble selects a layout from the number of image attachments:

Attachments	Layout
1	Full-width single image
2–4	Adaptive grid (side-by-side / 2×2)
5+	2×2 grid with the last tile showing a `+N` overflow overlay

The grid classes (.cometchat-image-bubble__*, including __overflow-overlay and __overflow-text) belong to the underlying image bubble — see its styling reference; this bubble adds no selectors of its own.

Batch Grouping

When a user sends several media messages together (for example three images and two files staged in the composer), 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.

Angular expresses batch grouping as the two booleans isFirstInBatch / isLastInBatch (computed by CometChatMessageList). There is no batchPosition input on the bubble. All four media batch bubbles share one width through the --cometchat-multi-attachment-width CSS token so every message in a batch renders at the same width.

Properties

Property	Type	Default	Description
`message`	`CometChat.MediaMessage`	required	The image 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`	When `true`, disables click-to-open / fullscreen interaction on the images.

This component emits no outputs.

Relationship to the Legacy Image Bubble

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

Customization

The bubble exposes one batch-width token; the actual image styling comes from the underlying image bubble.

cometchat-images-bubble {
  /* Shared width for every media bubble in a batch (default 400px). */
  --cometchat-multi-attachment-width: 400px;
}

--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 (for example to 100%) to resize all four media batch bubbles — Images, Videos, Audios, and Files — together.

To restyle the images themselves (grid gaps, overflow overlay, gallery), use the Image Bubble styling reference.

Technical Details

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

Image Bubble — the single-attachment bubble this component delegates to.
Videos Bubble — the multi-attachment bubble for videos.
Files Bubble — the multi-attachment bubble for files.
Message Composer — stages multiple attachments and sends them as a batch.
Message List — routes messages to this bubble and computes batch grouping.

​Overview

​Automatic Rendering

​Basic Usage

​Incoming vs Outgoing Messages

​Grid Layouts

​Batch Grouping

​Properties

​Relationship to the Legacy Image Bubble

​Customization

​Technical Details

​Related

Overview

Automatic Rendering

Basic Usage

Incoming vs Outgoing Messages

Grid Layouts

Batch Grouping

Properties

Relationship to the Legacy Image Bubble

Customization

Technical Details

Related