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

# Image Plugin

> Renders image messages with multi-image grid, captions, and fullscreen gallery viewer.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                                                                               |
  | -------------------- | ----------------------------------------------------------------------------------- |
  | Plugin ID            | `image`                                                                             |
  | Package              | `@cometchat/chat-uikit-react`                                                       |
  | Message Types        | `image`                                                                             |
  | Message Categories   | `message`                                                                           |
  | Included by Default  | Yes                                                                                 |
  | Bubble Component     | `CometChatImageBubble`                                                              |
  | Conversation Preview | Photo                                                                               |
  | Context Menu         | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately |
</Accordion>

## Overview

The Image plugin handles messages of type `image` in category `message`. It renders images in a responsive grid layout with optional captions. Clicking an image opens a fullscreen gallery viewer.

<Info>
  **Live Preview** — interact with the image message bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-image--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-image--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "600px", border: "1px solid #e0e0e0"}} title="Image Message Bubble — Default" allow="clipboard-write" />

***

## Bubble Rendering

* **Single image** — full-width image with rounded corners
* **Multiple images** — responsive grid (2 images side-by-side, 3+ in a masonry-style layout)
* **Caption** — rendered below the image grid, formatted with text formatters (mentions, URLs, markdown)
* **Pending state** — shows a placeholder while the image uploads

Clicking any image opens the `CometChatFullScreenViewer` gallery with swipe navigation between images.

***

## Context Menu Options

| Option            | Condition            | Action                     |
| ----------------- | -------------------- | -------------------------- |
| React             | Always               | Opens emoji picker         |
| Reply             | Always               | Sets reply-to in composer  |
| Reply in Thread   | Not in thread        | Opens thread view          |
| Info              | Sender only          | Opens message info panel   |
| Delete            | Sender only          | Shows delete confirmation  |
| Report            | Receiver only        | Opens flag/report dialog   |
| Mark Unread       | Receiver only        | Marks message as unread    |
| Message Privately | Receiver, group only | Opens 1:1 chat with sender |

***

## Conversation Preview

Returns: `Photo` (localized via `conversation_subtitle_image` key)

***

## CSS Selectors

| Target       | Selector                           |
| ------------ | ---------------------------------- |
| Bubble root  | `.cometchat-image-bubble`          |
| Image grid   | `.cometchat-image-bubble__grid`    |
| Single image | `.cometchat-image-bubble__image`   |
| Caption      | `.cometchat-image-bubble__caption` |