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

# Message Information

> Displays detailed message information including delivery and read receipts for 1-on-1 and group conversations.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                            |
  | -------------- | ---------------------------------------------------------------------------------------------------------------- |
  | Component      | `CometChatMessageInformation`                                                                                    |
  | Package        | `@cometchat/chat-uikit-react`                                                                                    |
  | Import         | `import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";`                                     |
  | CSS root class | `.cometchat-message-information`                                                                                 |
  | Primary output | `onClose: () => void` — closes the information panel                                                             |
  | Prerequisites  | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
  | Stitching      | Pass the target `message`; wire `onClose` to dismiss the panel                                                   |
  | Full props     | See [Props](#props)                                                                                              |
</Accordion>

## Where It Fits

`CometChatMessageInformation` is typically opened from the message context menu ("Message Information" option). It renders as a side panel showing the message preview and delivery/read receipt details.

<Info>
  **Live Preview** — interact with the message information panel.

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

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

For 1-on-1 chats, it shows simple Read and Delivered timestamps. For group chats, it shows a scrollable list of users with their individual read and delivered timestamps.

It offers **two usage modes**:

* **Flat API** — pass convenience props directly to `<CometChatMessageInformation />` for quick customization
* **Compound API** — use `<CometChatMessageInformation.Root>` with sub-components for full layout control

### Flat API (Simple)

```tsx theme={null}
import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";

function MessageInfoPanel({ message, onClose }) {
  return (
    <CometChatMessageInformation
      message={message}
      onClose={onClose}
      headerView={<CustomHeader />}
    />
  );
}
```

### Flat API Convenience Props

When using `<CometChatMessageInformation />` directly (without `.Root`), these additional props are available:

| Prop              | Type        | Description                             |
| ----------------- | ----------- | --------------------------------------- |
| `headerView`      | `ReactNode` | Custom header (replaces default).       |
| `receiptListView` | `ReactNode` | Custom receipt list (replaces default). |
| `loadingView`     | `ReactNode` | Custom loading content.                 |
| `errorView`       | `ReactNode` | Custom error content.                   |
| `emptyView`       | `ReactNode` | Custom empty content.                   |

### Compound API (Advanced)

```tsx theme={null}
import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";

function MessageInfoPanel({ message, onClose }) {
  return (
    <CometChatMessageInformation.Root
      message={message}
      onClose={onClose}
      onError={(err) => console.error(err)}
    >
      <CometChatMessageInformation.Header />
      <CometChatMessageInformation.MessagePreview />
      <CometChatMessageInformation.ReceiptList />
    </CometChatMessageInformation.Root>
  );
}
```

## Minimal Render

```tsx theme={null}
import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";

function Demo({ message }) {
  return <CometChatMessageInformation.Root message={message} />;
}
```

Root CSS class: `.cometchat-message-information`

## Sub-Components

`CometChatMessageInformation` is a compound component with these sub-components:

| Sub-Component    | Purpose                                                                                                                                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `Root`           | Context provider. Accepts `message`, `onClose`, `onError`, `messageInfoDateTimeFormat`, `messageSentAtDateTimeFormat`, `textFormatters`, `showScrollbar`, `className`. Renders default layout when no children provided. |
| `Header`         | Title ("Message Information") and close button.                                                                                                                                                                          |
| `MessagePreview` | Message bubble preview area.                                                                                                                                                                                             |
| `ReceiptList`    | Receipt display. Group: user list with avatars and timestamps. 1-on-1: Read/Delivered sections.                                                                                                                          |
| `LoadingState`   | Spinner loading indicator.                                                                                                                                                                                               |
| `ErrorState`     | Error message with retry button.                                                                                                                                                                                         |
| `EmptyState`     | Empty state for group messages with no receipts.                                                                                                                                                                         |

## Custom Layout

Compose only the sub-components you need:

```tsx theme={null}
<CometChatMessageInformation.Root message={message} onClose={handleClose}>
  <CometChatMessageInformation.Header />
  <CometChatMessageInformation.ReceiptList />
</CometChatMessageInformation.Root>
```

## Props

### Root

| Prop                          | Type                                        | Default                     | Description                                                     |
| ----------------------------- | ------------------------------------------- | --------------------------- | --------------------------------------------------------------- |
| `message`                     | `CometChat.BaseMessage`                     | —                           | **Required.** The message to show information for.              |
| `onClose`                     | `() => void`                                | —                           | Called when the close button is clicked.                        |
| `onError`                     | `(error: unknown) => void`                  | —                           | Called when an SDK error occurs.                                |
| `messageInfoDateTimeFormat`   | `CometChatMessageInformationCalendarObject` | `{ today: 'hh:mm A', ... }` | Custom date format for receipt timestamps (read/delivered).     |
| `messageSentAtDateTimeFormat` | `CometChatMessageInformationCalendarObject` | —                           | Format for the sent-at timestamp on the message bubble preview. |
| `textFormatters`              | `CometChatTextFormatter[]`                  | `[]`                        | Text formatters for the message bubble preview.                 |
| `showScrollbar`               | `boolean`                                   | `false`                     | Whether to show the scrollbar in the content area.              |
| `className`                   | `string`                                    | —                           | Additional CSS class.                                           |

## Keyboard Accessibility

| Key                 | Behavior                                            |
| ------------------- | --------------------------------------------------- |
| `Escape`            | Closes the panel, returns focus to trigger element. |
| `Tab` / `Shift+Tab` | Cycles focus within the panel (focus trap).         |
| `Enter` / `Space`   | Activates close button or retry button.             |

## CSS Variables

| Variable                           | Default   | Description                   |
| ---------------------------------- | --------- | ----------------------------- |
| `--cometchat-background-color-01`  | `#fff`    | Panel background              |
| `--cometchat-background-color-02`  | `#fafafa` | Message preview background    |
| `--cometchat-border-color-light`   | `#f5f5f5` | Border color                  |
| `--cometchat-text-color-primary`   | `#141414` | Title and name text           |
| `--cometchat-text-color-secondary` | `#666666` | Receipt labels and timestamps |
| `--cometchat-primary-color`        | `#6852D6` | Focus ring and retry button   |
| `--cometchat-icon-color-primary`   | `#141414` | Close icon color              |