Read Receipt Content Type

A read receipt is a timestamp that indicates when a message was read. It is sent as a message and can be used to calculate the time since the last message was read.

Open for feedback

You are welcome to provide feedback on this implementation by commenting on the Read Receipts content type proposal.

Read receipts with React

To learn how to use the read receipt content type with the React SDK, see Handle content types with the React SDK.

Install the package

JavaScript

npm i @xmtp/content-type-read-receipt

Import and register

JavaScript

import {
  ContentTypeReadReceipt,
  ReadReceiptCodec,
} from "@xmtp/content-type-read-receipt";
// Create the XMTP client
const xmtp = await Client.create(signer, { env: "dev" });
// Register the codecs, AttachmentCodec is for handling local attachments under 1MB
xmtp.registerCodec(new ReadReceiptCodec());

Create a Read Receipt

• timestamp: The timestamp the read receipt was sent, in ISO 8601 format

JavaScript

const readReceipt: ReadReceipt = {
  /**
   * The timestamp the read receipt was sent, in ISO 8601 format
   */
  timestamp: dateString,
};

Sending a Read Receipt

Once you've created a read receipt, you can send it:

JavaScript

await conversation.send(readReceipt, {
  contentType: ContentTypeReadReceipt,
});

Receiving a Read Receipt

Here's how you can receive a reply:

JavaScript

if (message.contentType.sameAs(ContentTypeReadReceipt)) {
  // We've got a reply.
  const timestamp = message.content.timestamp;
}

Displaying the Read Receipt

A read receipt timestamp should be not display but instead used to calculate the time since the last message was read. While iterating through messages you can be sure that the last message was read at the timestamp of the read receipt if the string if the date is lower.

JavaScript

function checkReadMessages(messages, readReceipt) {
  return messages.map((message) => {
    return {
      ...message,
      isRead: message.timestamp <= readTimestamp,
    };
  });
}