Display Message Information

Show delivery and read receipts for messages with detailed recipient status.

AI Agent Component Spec

{
  "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 delivery and read receipt information, showing which recipients have received and read a message.",
  "cssRootClass": ".cometchat-message-information",
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true },
      "template": { "type": "CometChatMessageTemplate", "default": "undefined" }
    },
    "callbacks": {
      "onClose": "() => void",
      "onError": "((error: CometChat.CometChatException) => void) | null"
    },
    "visibility": {
      "hideReceipt": { "type": "boolean", "default": false }
    },
    "viewSlots": {
      "bubbleView": "(message: CometChat.BaseMessage) => JSX.Element",
      "listItemView": "(receipt: MessageReceipt) => JSX.Element",
      "subtitleView": "(receipt: MessageReceipt) => JSX.Element",
      "receiptDatePattern": "(timestamp: number) => string"
    }
  }
}

Overview

This guide shows you how to display message delivery and read receipt information using CometChatMessageInformation. This component is useful for showing users who has received and read their messages in group conversations.

Time estimate: 10 minutes
Difficulty: Intermediate

Prerequisites

• React.js setup complete
• Messaging configured
• Read receipts enabled in CometChat Dashboard

Steps

Step 1: Import the Component

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

Step 2: Fetch a Message

Get the message you want to show information for:

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function useMessage(messageId: string) {
  const [message, setMessage] = useState<CometChat.BaseMessage | null>(null);

  useEffect(() => {
    CometChat.getMessageDetails(messageId).then(setMessage);
  }, [messageId]);

  return message;
}

Step 3: Render Message Information

Display the receipt details:

import { useEffect, useState } from "react";
import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessageInfoPanel({ messageId }: { messageId: string }) {
  const [message, setMessage] = useState<CometChat.BaseMessage | null>(null);

  useEffect(() => {
    CometChat.getMessageDetails(messageId).then(setMessage);
  }, [messageId]);

  if (!message) return <div>Loading...</div>;

  return (
    <CometChatMessageInformation
      message={message}
      onClose={() => console.log("Panel closed")}
    />
  );
}

export default MessageInfoPanel;

Step 4: Handle Close Action

Integrate with your UI to show/hide the panel:

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

function MessageInfoWithToggle({ message }: { message: CometChat.BaseMessage }) {
  const [showInfo, setShowInfo] = useState(false);

  return (
    <div>
      <button onClick={() => setShowInfo(true)}>Show Info</button>
      
      {showInfo && (
        <div className="info-panel">
          <CometChatMessageInformation
            message={message}
            onClose={() => setShowInfo(false)}
            onError={(error) => console.error("Error:", error)}
          />
        </div>
      )}
    </div>
  );
}

Complete Example

Full implementation with message list integration:

import { useState, useEffect } from "react";
import {
  CometChatMessageList,
  CometChatMessageInformation,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessagesWithInfo({ group }: { group: CometChat.Group }) {
  const [selectedMessage, setSelectedMessage] = useState<CometChat.BaseMessage | null>(null);

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      {/* Message List */}
      <div style={{ flex: 1 }}>
        <CometChatMessageList
          group={group}
          onMessageClick={(message) => setSelectedMessage(message)}
        />
      </div>

      {/* Message Information Panel */}
      {selectedMessage && (
        <div style={{ width: "320px", borderLeft: "1px solid #e0e0e0" }}>
          <CometChatMessageInformation
            message={selectedMessage}
            onClose={() => setSelectedMessage(null)}
            onError={(error) => console.error("Error loading receipts:", error)}
          />
        </div>
      )}
    </div>
  );
}

export default MessagesWithInfo;

Advanced Configuration

Custom Bubble View

Replace the message preview bubble:

import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CustomBubbleInfo({ message }: { message: CometChat.BaseMessage }) {
  return (
    <CometChatMessageInformation
      message={message}
      bubbleView={(msg) => (
        <div className="custom-bubble">
          <p>{(msg as CometChat.TextMessage).getText?.() || "Media message"}</p>
          <span>{new Date(msg.getSentAt() * 1000).toLocaleString()}</span>
        </div>
      )}
    />
  );
}

Custom Receipt List Item

Customize how each recipient is displayed:

import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CustomReceiptInfo({ message }: { message: CometChat.BaseMessage }) {
  return (
    <CometChatMessageInformation
      message={message}
      listItemView={(receipt) => (
        <div className="receipt-item">
          <img src={receipt.getSender().getAvatar()} alt="" />
          <div>
            <strong>{receipt.getSender().getName()}</strong>
            <span>
              {receipt.getReadAt() ? "Read" : "Delivered"}
            </span>
          </div>
        </div>
      )}
    />
  );
}

Custom Date Format

Format receipt timestamps:

import { CometChatMessageInformation } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CustomDateInfo({ message }: { message: CometChat.BaseMessage }) {
  return (
    <CometChatMessageInformation
      message={message}
      receiptDatePattern={(timestamp) => {
        const date = new Date(timestamp * 1000);
        return date.toLocaleDateString("en-US", {
          month: "short",
          day: "numeric",
          hour: "2-digit",
          minute: "2-digit",
        });
      }}
    />
  );
}

Styling

Customize the appearance:

.cometchat-message-information {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cometchat-message-information__header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.cometchat-message-information__list-item {
  padding: 12px 16px;
}

.cometchat-message-information__list-item:hover {
  background: #f5f5f5;
}

Common Issues

Message information only shows receipts for group messages. For 1:1 chats, receipts are shown directly on the message bubble.

Issue	Solution
No receipts showing	Ensure read receipts are enabled in CometChat Dashboard
Empty list	The message may not have been delivered to any recipients yet
Error loading	Check that the message ID is valid and the user has permission to view it
Stale data	Receipts update in real-time; ensure SDK event listeners are active

Next Steps

Message List

Display messages with receipt indicators

Threaded Messages

Add threaded conversations

Related Guides

Messaging

Groups

Group Members