File Bubble

A self-extracting bubble that renders a file attachment with its name, size, type icon, and a download action.

AI Integration Quick Reference

{
  "component": "CometChatFileBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatFileBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting file bubble. Extracts the file attachment (url, name, size, extension) and caption from a MediaMessage.",
  "cssRootClass": ".cometchat-file-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of the file attachment and caption." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "textFormatters": { "type": "CometChatTextFormatter[]" },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatFileBubble renders a file attachment. It is self-extracting: pass the SDK message and the bubble derives the file’s URL, name, size, and extension (plus any caption) itself, so it works standalone. It shows a type icon, the file name and size, and a download control.

Live Preview — interact with the file bubble.

Open in Storybook ↗

---

Usage

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

function FileMessage({ message }: { message: CometChat.MediaMessage }) {
  return <CometChatFileBubble message={message} />;
}

---

Props

message

The file message. The bubble extracts the attachment (url, name, size, extension) and caption from it. Required.

Type	CometChat.MediaMessage
Required	Yes

---

alignment

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

Type	"left" | "right"
Default	derived

---

textFormatters

Text formatters applied to the extracted caption.

Type	CometChatTextFormatter[]
Default	undefined

---

className

Additional CSS class applied to the root element.

Type	string
Default	undefined

---

CSS Selectors

Target	Selector
Root	.cometchat-file-bubble
Sender / receiver	.cometchat-file-bubble--sender / .cometchat-file-bubble--receiver
Type icon	.cometchat-file-bubble__icon
File name	.cometchat-file-bubble__filename
File size	.cometchat-file-bubble__filesize
Download	.cometchat-file-bubble__download
Caption	.cometchat-file-bubble__caption

---

Next Steps

File Plugin

Plugin behavior, context menu, and conversation preview

Audio Bubble

Render audio attachments

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing