Message Bubble - CometChat Docs

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 } 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`

​Where It Fits

​Shared Chrome Elements

​GlobalConfig Integration

​Props

​message

​alignment

​contentView

​group

​hideAvatar / hideSenderName / hideTimestamp / hideThreadView

​hideReceipts

​showError

​disableInteraction

​CSS Selectors

Where It Fits

Shared Chrome Elements

GlobalConfig Integration

Props

message

alignment

contentView

group

hideAvatar / hideSenderName / hideTimestamp / hideThreadView

hideReceipts

showError

disableInteraction

CSS Selectors