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

​Where It Fits

​Shared Chrome Elements

​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

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