AI Integration Quick Reference
AI Integration Quick Reference
| Field | Value |
|---|---|
| Plugin ID | video |
| Package | @cometchat/chat-uikit-react |
| Message Types | video |
| Message Categories | message |
| Included by Default | Yes |
| Bubble Component | CometChatVideoBubble |
| Conversation Preview | Video |
| Context Menu | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately |
Overview
The Video plugin handles messages of typevideo in category message. Single videos render with an inline HTML5 player. Multiple videos display as a thumbnail grid with play overlays.
Live Preview — interact with the video message bubble.Open in Storybook ↗
Bubble Rendering
- Single video — inline
<video>element with native controls, poster thumbnail - Multiple videos — thumbnail grid with play button overlays, click opens fullscreen viewer
- Caption — rendered below the video, formatted with text formatters
- Pending state — shows a placeholder from the local file blob while uploading
- Thumbnail — extracted from SDK attachment metadata or the
thumbnail-generationextension
Context Menu Options
Same as Image Plugin — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately).Conversation Preview
Returns:Video (localized via conversation_subtitle_video key)
CSS Selectors
| Target | Selector |
|---|---|
| Bubble root | .cometchat-video-bubble |
| Video element | .cometchat-video-bubble__video |
| Thumbnail grid | .cometchat-video-bubble__grid |
| Play overlay | .cometchat-video-bubble__play-overlay |
| Caption | .cometchat-video-bubble__caption |