> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-card-builder.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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"
      }
    }
  }
  ```
</Accordion>

## 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.

<Info>
  **Live Preview** — interact with the message bubble component.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "250px", border: "1px solid #e0e0e0"}} title="CometChat Message Bubble — Default" allow="clipboard-write" />

```tsx lines theme={null}
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"} />
      }
    />
  );
}
```

<Note>
  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.
</Note>

## 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:

```tsx lines theme={null}
<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`         |