Skip to main content
{
  "component": "CometChatMessageInformation",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatMessageInformation } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "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." },
      "dateTimeFormat": { "type": "CometChatMessageInformationCalendarObject", "note": "Custom date format for receipt timestamps." },
      "textFormatters": { "type": "CometChatTextFormatter[]", "note": "Text formatters for the message bubble preview." },
      "mockReceipts": { "type": "CometChatUserReceiptInfo[]", "note": "Mock receipts for Storybook/testing. Skips SDK fetch." }
    },
    "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";
import "@cometchat/chat-uikit-react/css-variables.css";

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:
PropTypeDescription
headerViewReactNodeCustom header (replaces default).
receiptListViewReactNodeCustom receipt list (replaces default).
loadingViewReactNodeCustom loading content.
errorViewReactNodeCustom error content.
emptyViewReactNodeCustom empty content.

​
Compound API (Advanced)

import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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";
import "@cometchat/chat-uikit-react/css-variables.css";

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-ComponentPurpose
RootContext provider. Accepts message, onClose, onError, dateTimeFormat, textFormatters, showScrollbar, mockReceipts. Renders default layout when no children provided.
HeaderTitle (“Message Information”) and close button.
MessagePreviewMessage bubble preview area.
ReceiptListReceipt display. Group: user list with avatars and timestamps. 1-on-1: Read/Delivered sections.
LoadingStateSpinner loading indicator.
ErrorStateError message with retry button.
EmptyStateEmpty 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

PropTypeDefaultDescription
messageCometChat.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.
dateTimeFormatCometChatMessageInformationCalendarObject{ today: 'hh:mm A', ... }Custom date format for receipt timestamps.
textFormattersCometChatTextFormatter[][]Text formatters for the message bubble preview.
showScrollbarbooleanfalseWhether to show the scrollbar in the content area.
mockReceiptsCometChatUserReceiptInfo[]—Mock receipts for testing. Skips SDK fetch when provided.
classNamestring—Additional CSS class.

​
Keyboard Accessibility

KeyBehavior
EscapeCloses the panel, returns focus to trigger element.
Tab / Shift+TabCycles focus within the panel (focus trap).
Enter / SpaceActivates close button or retry button.

​
CSS Variables

VariableDefaultDescription
--cometchat-background-color-01#fffPanel background
--cometchat-background-color-02#fafafaMessage preview background
--cometchat-border-color-light#f5f5f5Border color
--cometchat-text-color-primary#141414Title and name text
--cometchat-text-color-secondary#666666Receipt labels and timestamps
--cometchat-primary-color#6852D6Focus ring and retry button
--cometchat-icon-color-primary#141414Close icon color