Collaborative Document Bubble

AI Integration Quick Reference

{
  "component": "CometChatCollaborativeDocumentBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatCollaborativeDocumentBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting collaborative document bubble. Extracts the document URL from the message metadata and opens it on click.",
  "cssRootClass": ".cometchat-collaborative-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true, "note": "Drives extraction of the document URL." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "onButtonClick": { "type": "(url: string) => void", "note": "Defaults to window.open." },
      "disabled": { "type": "boolean", "default": false },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatCollaborativeDocumentBubble renders a collaborative document card — a banner image, a title, a subtitle, and an “Open Document” button. It is self-extracting: pass the SDK message and the bubble reads the document URL from the message’s extension metadata (@injected.extensions.document.document_url), so it works standalone. Clicking the button opens the document (by default in a new window).

Live Preview — interact with the collaborative document bubble.Open in Storybook ↗

Usage

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCollaborativeDocumentBubble } from "@cometchat/chat-uikit-react";

function DocumentMessage({ message }: { message: CometChat.BaseMessage }) {
  return <CometChatCollaborativeDocumentBubble message={message} />;
}

Props

message

The collaborative-document message. The bubble extracts the URL from its metadata. Required.


Type	`CometChat.BaseMessage`
Required	Yes

alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.


Type	`"left" \| "right"`
Default	derived

onButtonClick

Click handler for the action button. Receives the document URL. Defaults to window.open.


Type	`(url: string) => void`
Default	`window.open`

disabled

Disable the action button (e.g. for a thread header preview).


Type	`boolean`
Default	`false`

className

Additional CSS class applied to the root element.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
Root	`.cometchat-collaborative-bubble`
Document modifier	`.cometchat-collaborative-bubble--document`
Incoming / outgoing	`.cometchat-collaborative-bubble--incoming` / `.cometchat-collaborative-bubble--outgoing`
Banner image	`.cometchat-collaborative-bubble__banner-image`
Title	`.cometchat-collaborative-bubble__body-content-name`
Subtitle	`.cometchat-collaborative-bubble__body-content-description`
Open button	`.cometchat-collaborative-bubble__button`

Next Steps

Collaborative Document Plugin

Plugin behavior, context menu, and conversation preview

Collaborative Whiteboard Bubble

Render collaborative whiteboard messages

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing

​Overview

​Usage

​Props

​message

​alignment

​onButtonClick

​disabled

​className

​CSS Selectors

​Next Steps

Collaborative Document Plugin

Collaborative Whiteboard Bubble

Message Bubble

Theming

Overview

Usage

Props

message

alignment

onButtonClick

disabled

className

CSS Selectors

Next Steps