Message Bubble - CometChat Docs

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
Pinned indicator	`message.getPinnedAt()` is set	Pin icon in the status-info area
Saved indicator	`message.getSavedAt()` is set	Bookmark icon in the status-info area
Context menu	`options.length > 0` + `!disableInteraction`	Hover/click

Pinned and Saved Indicators

When a message is pinned (visible to everyone in the conversation) or saved (personal to the current user), the bubble shows a small indicator in its status-info area alongside the timestamp — a pin icon for pinned, a bookmark icon for saved. A message can carry both at once. This is automatic: the bubble derives each indicator from the message’s own state (getPinnedAt() / getSavedAt()), and it updates live as messages are pinned, unpinned, saved, and unsaved. No props are required.

Live Preview — a bubble carrying both the pinned and saved indicators.Open in Storybook ↗

To restyle or hide the indicators, target their selectors (see CSS Selectors). To learn how users pin and save messages, see the Pin & Save Messages guide.

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`
Pin/save indicator (base)	`.cometchat-message-bubble__status-info-view-indicator`
Pinned indicator	`.cometchat-message-bubble__status-info-view-indicator--pinned`
Saved indicator	`.cometchat-message-bubble__status-info-view-indicator--saved`
Receipts	`.cometchat-receipts`
Thread button	`.cometchat-message-bubble__thread-button`

​Where It Fits

​Shared Chrome Elements

​Pinned and Saved Indicators

​GlobalConfig Integration

​Props

​message

​alignment

​contentView

​group

​hideAvatar / hideSenderName / hideTimestamp / hideThreadView

​hideReceipts

​showError

​disableInteraction

​options

​quickOptionsCount

​forceShowAvatar

​messageSentAtDateTimeFormat

​View override props

​Callback props

​Accessibility & advanced props

​CSS Selectors

Where It Fits

Shared Chrome Elements

Pinned and Saved Indicators

GlobalConfig Integration

Props

message

alignment

contentView

group

hideAvatar / hideSenderName / hideTimestamp / hideThreadView

hideReceipts

showError

disableInteraction

options

quickOptionsCount

forceShowAvatar

messageSentAtDateTimeFormat

View override props

Callback props

Accessibility & advanced props

CSS Selectors