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.

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.

import { CometChatMessageBubble } from "@cometchat/chat-uikit-react";
import { CometChatTextBubble } from "@cometchat/chat-uikit-react/plugins/core/text";

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

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

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