> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.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.

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

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

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