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


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