Message Bubble

A shared wrapper component that renders all message types with common chrome — avatar, sender name, bubble background, timestamp, receipts, thread replies, and context menu.

AI Integration Quick Reference

{
  "component": "CometChatMessageBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatMessageBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Layout shell that wraps plugin-rendered bubble content with shared chrome — avatar, sender name, bubble background, timestamp, receipts, thread replies, reactions, and context menu.",
  "cssRootClass": ".cometchat-message-bubble",
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true },
      "alignment": { "type": "'left' | 'right' | 'center'", "required": true },
      "contentView": { "type": "ReactNode", "required": true, "note": "Inner content from the plugin's renderBubble()." },
      "group": { "type": "CometChat.Group" },
      "options": { "type": "CometChatMessageOption[]" },
      "quickOptionsCount": { "type": "number", "default": 2 }
    },
    "visibility": {
      "hideAvatar": { "type": "boolean", "default": false },
      "forceShowAvatar": { "type": "boolean", "default": false },
      "hideSenderName": { "type": "boolean", "default": false },
      "hideTimestamp": { "type": "boolean", "default": false },
      "hideThreadView": { "type": "boolean", "default": false },
      "hideReceipts": { "type": "boolean", "note": "Reads from GlobalConfig if not set." },
      "showError": { "type": "boolean", "default": false },
      "disableInteraction": { "type": "boolean", "default": false }
    },
    "config": {
      "messageSentAtDateTimeFormat": { "type": "CometChatDateFormatConfig" },
      "isSelected": { "type": "boolean" },
      "ariaPosinset": { "type": "number" },
      "ariaSetsize": { "type": "number" },
      "className": { "type": "string" },
      "setRef": { "type": "Ref<HTMLDivElement>" },
      "includeBottomViewHeight": { "type": "boolean", "default": false },
      "toggleOptionsVisibility": { "type": "boolean" }
    },
    "viewSlots": {
      "leadingView": "((message) => ReactNode) | null",
      "headerView": "((message) => ReactNode) | null",
      "statusInfoView": "((message) => ReactNode) | null",
      "footerView": "((message) => ReactNode) | null",
      "threadView": "((message) => ReactNode) | null",
      "replyView": "ReactNode | null",
      "bottomView": "((message) => ReactNode) | null"
    },
    "callbacks": {
      "onAvatarClick": "(user: CometChat.User) => void",
      "onThreadRepliesClick": "(message: CometChat.BaseMessage) => void",
      "onOptionClick": "(option: CometChatMessageOption, message: CometChat.BaseMessage) => void",
      "onReactionChipClick": "(messageId: number, emoji: string) => void",
      "onReactorClick": "(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void"
    }
  }
}

Where It Fits

CometChatMessageBubble is the layout shell for every message in the message list. The plugin system’s renderBubble() produces the inner content (text, image, video, etc.), and the bubble wraps it with shared chrome.

Live Preview — interact with the message bubble component.

Open in Storybook ↗

import {
  CometChatMessageBubble,
  CometChatTextBubble,
} from "@cometchat/chat-uikit-react";

function MessageItem({ message, alignment }) {
  return (
    <CometChatMessageBubble
      message={message}
      alignment={alignment}
      contentView={
        <CometChatTextBubble message={message} isSentByMe={alignment === "right"} />
      }
    />
  );
}

Message bubbles are self-extracting: each bubble takes the SDK message and derives its own content (text, attachments, caption, poll data, call info, action text), reading the logged-in user, theme, and locale from hooks. Pass just message to render a bubble standalone — no plugin or pre-extracted props required. CometChatTextBubble also accepts an optional text override so media bubbles can render captions through it.

Shared Chrome Elements

Element	When Shown	Source
Avatar	Incoming + group + !hideAvatar	message.getSender().getAvatar()
Sender name	Incoming + group + !hideSenderName	message.getSender().getName()
Bubble background	Always	Type-specific: primary for outgoing, neutral for incoming
Timestamp	!hideTimestamp	message.getSentAt() via CometChatDate
Receipts	Outgoing + !hideReceipts	message.getReadAt() / getDeliveredAt()
Edited indicator	message.getEditedAt() truthy	”(edited)” text
Thread replies	message.getReplyCount() > 0 + !hideThreadView	Reply count button
Context menu	options.length > 0 + !disableInteraction	Hover/click

GlobalConfig Integration

hideReceipts reads from GlobalConfigContext when the prop is not explicitly set:

<GlobalConfigProvider config={{ hideReceipts: true }}>
  {/* All bubbles hide receipts unless overridden */}
  <CometChatMessageBubble hideReceipts={false} ... />  {/* This one shows receipts */}
</GlobalConfigProvider>

Props

message

The SDK message object. Required.

Type	CometChat.BaseMessage

---

alignment

Bubble alignment: 'left' (incoming), 'right' (outgoing), 'center' (action).

Type	'left' | 'right' | 'center'

---

contentView

The inner content from the plugin’s renderBubble(). Required.

Type	ReactNode

---

group

Group context. Enables avatar and sender name display.

Type	CometChat.Group
Default	undefined

---

hideAvatar / hideSenderName / hideTimestamp / hideThreadView

Per-bubble display controls. Not in GlobalConfig.

Type	boolean
Default	false

---

hideReceipts

Hide receipt indicators. Reads from GlobalConfig if not set.

Type	boolean
Default	undefined (falls back to GlobalConfig, then false)

---

showError

Show error receipt icon instead of normal receipts.

Type	boolean
Default	false

---

disableInteraction

Disable hover options and keyboard interactions.

Type	boolean
Default	false

---

options

Context menu options for this message (the hover/overflow actions).

Type	CometChatMessageOption[]
Default	undefined

---

quickOptionsCount

Number of quick options shown directly; the rest move to the overflow menu.

Type	number
Default	2

---

forceShowAvatar

Force-show the avatar for incoming messages even in 1:1 chats (used by agent chat).

Type	boolean
Default	false

---

messageSentAtDateTimeFormat

Override the date format for the sent-at timestamp shown beside the bubble.

Type	CometChatDateFormatConfig
Default	undefined

---

View override props

Render-prop overrides for each region of the bubble. Semantics for all of them: omit (undefined) to use the built-in default, pass null to suppress the region, or pass a function/node to override it.

Prop	Type	Overrides
leadingView	((message) => ReactNode) | null	Leading view (avatar area)
headerView	((message) => ReactNode) | null	Header view (sender name area)
statusInfoView	((message) => ReactNode) | null	Status info (timestamp + receipts)
footerView	((message) => ReactNode) | null	Footer (reactions area)
threadView	((message) => ReactNode) | null	Thread reply view
replyView	ReactNode | null	Reply preview (quoted message) above content
bottomView	((message) => ReactNode) | null	View below the bubble (e.g. moderation footer)

---

Callback props

Prop	Signature	Fires when
onAvatarClick	(user: CometChat.User) => void	The avatar is clicked
onThreadRepliesClick	(message: CometChat.BaseMessage) => void	The thread view is clicked
onOptionClick	(option: CometChatMessageOption, message: CometChat.BaseMessage) => void	A context menu option is clicked
onReactionChipClick	(messageId: number, emoji: string) => void	A reaction chip is clicked (toggle add/remove)
onReactorClick	(reaction: CometChat.Reaction, message: CometChat.BaseMessage) => void	A reactor in the reaction list is clicked

---

Accessibility & advanced props

Prop	Type	Default	Description
isSelected	boolean	false	Whether this message is selected
ariaPosinset	number	—	Position in the message list (1-indexed)
ariaSetsize	number	—	Total messages in the list
className	string	—	Additional CSS class on the root element
setRef	Ref<HTMLDivElement>	—	Ref to the outermost wrapper div (role="article")
includeBottomViewHeight	boolean	false	Use fit-content height for the options toolbar (useful with a bottomView)
toggleOptionsVisibility	boolean	undefined	Explicitly control options toolbar visibility (true = always, false = never, undefined = hover-based)

CSS Selectors

Target	Selector
Wrapper	.cometchat-message-bubble__wrapper
Outgoing wrapper	.cometchat-message-bubble__wrapper--outgoing
Avatar area	.cometchat-message-bubble__leading-view
Bubble container	.cometchat-message-bubble
Incoming	.cometchat-message-bubble-incoming
Outgoing	.cometchat-message-bubble-outgoing
Action (center)	.cometchat-message-bubble-action
Sender name	.cometchat-message-bubble__sender-name
Body	.cometchat-message-bubble__body
Content	.cometchat-message-bubble__body-content-view
Status info	.cometchat-message-bubble__body-status-info-view
Receipts	.cometchat-receipts
Thread button	.cometchat-message-bubble__thread-button