Collaborative Document Bubble

Renders collaborative document messages with a banner image, title, subtitle, and an action button to open the document.

AI Integration Quick Reference

{
  "component": "CometChatCollaborativeBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatCollaborativeBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Shared bubble for collaborative document and whiteboard messages.",
  "cssRootClass": ".cometchat-collaborative-bubble",
  "props": {
    "data": {
      "url": { "type": "string", "default": "required" },
      "title": { "type": "string", "default": "required" },
      "subtitle": { "type": "string", "default": "required" },
      "buttonText": { "type": "string", "default": "required" },
      "bannerImageUrl": { "type": "string", "default": "undefined" }
    },
    "behavior": {
      "variant": { "type": "'incoming' | 'outgoing'", "default": "required" },
      "iconType": { "type": "'document' | 'whiteboard'", "default": "'document'" },
      "disabled": { "type": "boolean", "default": "false" }
    },
    "callbacks": {
      "onButtonClick": { "type": "(url: string) => void", "default": "window.open" }
    }
  }
}

Where It Fits

CometChatCollaborativeBubble is a shared component used by both CometChatCollaborativeDocumentPlugin and CometChatCollaborativeWhiteboardPlugin. It renders inside the message list when a collaborative document (extension_document) or whiteboard (extension_whiteboard) message is displayed.

import { CometChatCollaborativeBubble } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";
import bannerLight from "./assets/Collaborative_Document_Light.png";

function DocumentMessage({ url }) {
  return (
    <CometChatCollaborativeBubble
      url={url}
      variant="outgoing"
      title="Collaborative Document"
      subtitle="Open document to edit content together"
      buttonText="Open Document"
      iconType="document"
      bannerImageUrl={bannerLight}
      onButtonClick={(docUrl) => window.open(docUrl, "", "fullscreen=yes")}
    />
  );
}

Minimal Render

import { CometChatCollaborativeBubble } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo() {
  return (
    <CometChatCollaborativeBubble
      url="https://example.com/document"
      variant="incoming"
      title="Collaborative Document"
      subtitle="Edit together"
      buttonText="Open Document"
    />
  );
}

Root CSS class: .cometchat-collaborative-bubble

Features

• Banner image with border-radius: 8px and error handling (hides on load failure)
• Body with 32px icon (CSS mask for document/whiteboard SVG) + title + subtitle
• Action button with border-top separator line
• Theme-aware: light/dark banner images, sender/receiver color variants
• Button disabled when URL is empty or disabled prop is true
• Native <button> element for keyboard accessibility
• Opens URL via window.open(url, '', 'fullscreen=yes, scrollbars=auto')

Props

---

url

The collaborative session URL. Required.

Type	string
Default	—

---

variant

Bubble variant based on sender/receiver.

Type	'incoming' | 'outgoing'
Default	—

---

iconType

Determines which icon SVG mask is used in the body.

Type	'document' | 'whiteboard'
Default	'document'

---

bannerImageUrl

Theme-aware banner image URL displayed at the top of the bubble.

Type	string
Default	undefined

---

disabled

Disables the action button. Used in thread header context.

Type	boolean
Default	false

---

onButtonClick

Callback when the action button is clicked. Receives the URL.

Type	(url: string) => void
Default	window.open(url, '', 'fullscreen=yes, scrollbars=auto')

CSS Selectors

Target	Selector
Root	.cometchat-collaborative-bubble
Incoming	.cometchat-collaborative-bubble--incoming
Outgoing	.cometchat-collaborative-bubble--outgoing
Document icon	.cometchat-collaborative-bubble--document .cometchat-collaborative-bubble__body-icon
Whiteboard icon	.cometchat-collaborative-bubble--whiteboard .cometchat-collaborative-bubble__body-icon
Banner image	.cometchat-collaborative-bubble__banner-image
Body	.cometchat-collaborative-bubble__body
Title	.cometchat-collaborative-bubble__body-content-name
Subtitle	.cometchat-collaborative-bubble__body-content-description
Action button	.cometchat-collaborative-bubble__button