> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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">
  | Field | Value |
  | - | - |
  | Component | `CometChatMessageBubble` |
  | Package | `@cometchat/chat-uikit-react` |
  | Import | `import { CometChatMessageBubble } from "@cometchat/chat-uikit-react";` |
  | CSS root class | `.cometchat-message-bubble` |
  | Primary output | None — renders from the SDK message (it renders provided content; there is no single primary callback). |
  | Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user. |
  | Stitching | Feed `message`, `alignment`, and a plugin-rendered `contentView`; it supplies the surrounding chrome. |
  | Full props | See [Props](#props) |
</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 |
| 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.

<Info>
  **Live Preview** — a bubble carrying both the pinned and saved indicators.

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

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

To restyle or hide the indicators, target their selectors (see [CSS Selectors](#css-selectors)). To learn how users pin and save messages, see the [Pin & Save Messages guide](/ui-kit/react/guide-pin-and-save-messages).

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.