Documentation Index
Fetch the complete documentation index at: https://cometchat-22654f5b-react-uikit-v7.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
AI Integration Quick Reference
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 typeimage in category message. It renders images in a responsive grid layout with optional captions. Clicking an image opens a fullscreen gallery viewer.
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
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 |