Image Bubble

A self-extracting bubble that renders one or more image attachments with grid layouts, a caption, and a fullscreen viewer.

AI Integration Quick Reference

{
  "component": "CometChatImageBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatImageBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting image bubble. Extracts image attachments and caption from a MediaMessage; supports single/grid layouts and a fullscreen viewer.",
  "cssRootClass": ".cometchat-image-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of attachments and caption." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "textFormatters": { "type": "CometChatTextFormatter[]" },
      "placeholderImage": { "type": "string" },
      "onImageClicked": { "type": "(attachment, index) => void" },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatImageBubble renders the image attachment(s) of a media message. It is self-extracting: pass the SDK message and the bubble derives its attachments, caption, and alignment itself, so it works standalone.

It supports multiple images with automatic layouts (single, grid, 2×2, and an overflow tile for extra images) and opens a fullscreen viewer when an image is clicked.

Live Preview — interact with the image bubble.

Open in Storybook ↗

---

Usage

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatImageBubble } from "@cometchat/chat-uikit-react";

function ImageMessage({ message }: { message: CometChat.MediaMessage }) {
  return <CometChatImageBubble message={message} />;
}

---

Props

message

The image message. The bubble extracts its attachments and caption. Required.

Type	CometChat.MediaMessage
Required	Yes

---

alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.

Type	"left" | "right"
Default	derived

---

textFormatters

Text formatters for caption rendering (mentions, URLs).

Type	CometChatTextFormatter[]
Default	undefined

---

placeholderImage

Custom placeholder image URL shown while the image loads. Falls back to a default photo icon.

Type	string
Default	undefined

---

onImageClicked

Fires when an image is clicked (in addition to opening the fullscreen viewer).

Type	(attachment: CometChatImageBubbleAttachment, index: number) => void
Default	undefined

---

className

Additional CSS class applied to the root element.

Type	string
Default	undefined

---

CSS Selectors

Target	Selector
Root	.cometchat-image-bubble
Incoming / outgoing	.cometchat-image-bubble--incoming / .cometchat-image-bubble--outgoing
Single image	.cometchat-image-bubble--single
Container	.cometchat-image-bubble__container
Grid	.cometchat-image-bubble__grid
Image	.cometchat-image-bubble__image
Overflow overlay	.cometchat-image-bubble__overflow-overlay
Placeholder	.cometchat-image-bubble__placeholder
Caption	.cometchat-image-bubble__caption

---

Next Steps

Image Plugin

Plugin behavior, context menu, and conversation preview

Video Bubble

Render video attachments

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing