Support read receipts in your app built with XMTP

Use the read receipt content type to support read receipts in your app. 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're welcome to provide feedback by commenting on the Proposal for read receipts content type XIP idea.

Configure the read receipt content type

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

Import and register

import {
  ContentTypeReadReceipt,
  ReadReceiptCodec,
} from "@xmtp/content-type-read-receipt";
// Create the XMTP client
const xmtp = await Client.create(signer, { env: "dev" });
xmtp.registerCodec(new ReadReceiptCodec());

The React SDK supports all current standards-track content types, but only text messages are enabled out of the box. Adding support for other standards-track content types requires a bit of configuration.

import {
  XMTPProvider,
  readReceiptContentTypeConfig,
} from "@xmtp/react-sdk";

const contentTypeConfigs = [
  readReceiptContentTypeConfig,
  // other content type configs...
];

createRoot(document.getElementById("root") as HTMLElement).render(
  <StrictMode>
    <XMTPProvider contentTypeConfigs={contentTypeConfigs}>
      <App />
    </XMTPProvider>
  </StrictMode>,
);

Client.register(codec = ReadReceiptCodec())

Send a read receipt

messageId: ID of the message that was read
timestamp: Timestamp the read receipt sent, in ISO 8601 format

const readReceipt: ReadReceipt = {};

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

await conversation.messages.send({}, ContentTypeReadReceipt);

import { useSendMessage } from "@xmtp/react-sdk";
import { ContentTypeReadReceipt } from "@xmtp/content-type-read-receipt";

const sendMessage = useSendMessage();
const readReceiptContent = {};

sendMessage(conversation, readReceiptContent, ContentTypeReadReceipt);

val readReceipt = ReadReceipt(timestamp = "2019-09-26T07:58:30.996+0200")
conversation.send(
    content = readReceipt,
    options = SendOptions(contentType = ContentTypeReadReceipt),
)

Receive a read receipt

Here's how you can receive a read receipt:

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

import { ContentTypeReadReceipt } from "@xmtp/content-type-read-receipt";

if (ContentTypeReadReceipt.sameAs(message.contentType)) {
  // The message is a read receipt
  const readReceiptContent = message.content;
  const timestamp = readReceiptContent.timestamp;
}

getReadReceipt

Use to retrieve the read receipt from a cached conversation. It takes a CachedConversation object as a parameter and returns the read receipt date, or undefined, if the conversation has no read receipt.

import { getReadReceipt } from "@xmtp/react-sdk";

const readReceiptDate = getReadReceipt(conversation);

hasReadReceipt

Use to check if a cached conversation has a read receipt. It takes a CachedConversation object as a parameter and returns true if the conversation has a read receipt and false if otherwise.

import { hasReadReceipt } from "@xmtp/react-sdk";

const hasReceipt = hasReadReceipt(conversation);

val message: DecodedMessage = conversation.messages().first()
if (message.encodedContent.type == ContentTypeReadReceipt) {
    // The message is a ReadReceipt
    val readReceipt: ReadReceipt? = message.content()
    if (readReceipt != null) {
      println("Message read at: ${readReceipt.timestamp}")
    }
}

Use a read receipt

A read receipt timestamp shouldn't be displayed. Instead, use it 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 of the date is lower.

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

Support read receipts in your app built with XMTP

Configure the read receipt content type​

Send a read receipt​

Receive a read receipt​

Use a read receipt​

Configure the read receipt content type

Send a read receipt

Receive a read receipt

Use a read receipt