Image Plugin - CometChat Docs

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

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.

Live Preview — interact with the image message bubble.Open in Storybook ↗

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.

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`

Text Plugin

Video Plugin

⌘I

​Overview

​Bubble Rendering

​Context Menu Options

​Conversation Preview

​CSS Selectors

Overview

Bubble Rendering

Context Menu Options

Conversation Preview

CSS Selectors