Message Information

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

AI Integration Quick Reference

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

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:

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";
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-Component	Purpose
Root	Context provider. Accepts message, onClose, onError, dateTimeFormat, textFormatters, showScrollbar, mockReceipts. 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.
dateTimeFormat	CometChatMessageInformationCalendarObject	{ today: 'hh:mm A', ... }	Custom date format for receipt timestamps.
textFormatters	CometChatTextFormatter[]	[]	Text formatters for the message bubble preview.
showScrollbar	boolean	false	Whether to show the scrollbar in the content area.
mockReceipts	CometChatUserReceiptInfo[]	—	Mock receipts for testing. Skips SDK fetch when provided.
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