> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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">
  ```json theme={null}
  {
    "component": "CometChatMessageInformation",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatMessageInformation } from \"@cometchat/chat-uikit-react\";",
    "description": "Displays detailed message information including delivery and read receipts for 1-on-1 and group conversations.",
    "cssRootClass": ".cometchat-message-information",
    "primaryOutput": {
      "prop": "onClose",
      "type": "() => void"
    },
    "props": {
      "data": {
        "message": { "type": "CometChat.BaseMessage", "note": "Required. The message to show information for." },
        "messageInfoDateTimeFormat": { "type": "CometChatMessageInformationCalendarObject", "note": "Custom date format for receipt timestamps (read/delivered)." },
        "messageSentAtDateTimeFormat": { "type": "CometChatMessageInformationCalendarObject", "note": "Format for the sent-at timestamp on the message bubble preview." },
        "textFormatters": { "type": "CometChatTextFormatter[]", "note": "Text formatters for the message bubble preview." },
        "showScrollbar": { "type": "boolean", "default": false, "note": "Whether to show the scrollbar in the content area." },
        "className": { "type": "string", "note": "Optional custom className for the root element." }
      },
      "callbacks": {
        "onClose": { "type": "() => void", "note": "Called when the panel close button is clicked." },
        "onError": { "type": "(error: unknown) => void", "note": "Called when an SDK error occurs." }
      },
      "visibility": {
        "showScrollbar": { "type": "boolean", "default": "false", "note": "Whether to show the scrollbar in the content area." }
      }
    },
    "types": {
      "CometChatMessageInformationRootProps": "Root provider props",
      "CometChatMessageInformationHeaderProps": "Header sub-component props",
      "CometChatMessageInformationMessagePreviewProps": "Message preview sub-component props",
      "CometChatMessageInformationReceiptListProps": "Receipt list sub-component props",
      "CometChatUserReceiptInfo": "Combined user receipt info (user + readAt + deliveredAt)",
      "CometChatMessageInformationContextValue": "Context value for sub-components"
    }
  }
  ```
</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              |