Message Information - CometChat Docs

AI Integration Quick Reference

{
  "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"
  }
}

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.

Live Preview — interact with the message information panel.Open in Storybook ↗

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)

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)

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

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:

<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

​Where It Fits

​Flat API (Simple)

​Flat API Convenience Props

​Compound API (Advanced)

​Minimal Render

​Sub-Components

​Custom Layout

​Props

​Root

​Keyboard Accessibility

​CSS Variables

Where It Fits

Flat API (Simple)

Flat API Convenience Props

Compound API (Advanced)

Minimal Render

Sub-Components

Custom Layout

Props

Root

Keyboard Accessibility

CSS Variables