render read receipts as inline status messages#1740
Conversation
Display read receipts as visible centered status messages in the conversation list, showing sender identity and timestamp. Also sends a read receipt when opening a conversation.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
ApprovabilityVerdict: Approved This PR adds simple UI rendering for read receipts in the xmtp.chat app. The changes are small and self-contained, and you own all three files being modified. This is suitable for approval. You can customize Macroscope's approvability policy. Learn more. |
Dismissing prior approval to re-evaluate 92fb7a3
| const { members } = useConversation(conversationId); | ||
| const senderMember = members.get(senderInboxId); | ||
| return ( | ||
| <Popover opened={opened} position="bottom" withArrow> |
There was a problem hiding this comment.
🟠 High Messages/ReadReceiptContent.tsx:25
Popover in controlled mode requires onChange={toggle} to handle dismissal events. Without it, clicking outside or pressing Escape leaves opened stuck as true, so the popover won't close until the user clicks the trigger again.
- <Popover opened={opened} position="bottom" withArrow>
+ <Popover opened={opened} onChange={toggle} position="bottom" withArrow>🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file apps/xmtp.chat/src/components/Messages/ReadReceiptContent.tsx around line 25:
`Popover` in controlled mode requires `onChange={toggle}` to handle dismissal events. Without it, clicking outside or pressing Escape leaves `opened` stuck as `true`, so the popover won't close until the user clicks the trigger again.
Evidence trail:
1. apps/xmtp.chat/src/components/Messages/ReadReceiptContent.tsx line 25 at REVIEWED_COMMIT shows `<Popover opened={opened} position="bottom" withArrow>` with no `onChange` or `onDismiss` prop
2. Mantine official documentation at https://mantine.dev/core/popover/ - 'Controlled' section shows `onChange={setOpened}` usage pattern
3. Mantine documentation 'onDismiss' section explicitly states: "If you need to control opened state, but still want to close popover on outside clicks and escape key presses, use `onDismiss` prop"
…s message" This reverts commit 92fb7a3.
Dismissing prior approval to re-evaluate 62c0042
| senderInboxId={senderInboxId} | ||
| /> | ||
| ); | ||
| } |
There was a problem hiding this comment.
i don't recommend putting anything into the message feed. in the past, it has become so noisy that it's hard to read the messages. not sure how best to incorporate them for developers, but in the UI, it's best to use the lastReadTimes() method and attach an addendum to the last message read as is common in other messengers.
| ); | ||
| } | ||
|
|
||
| if (message.contentType.typeId === "readReceipt") { |
There was a problem hiding this comment.
read receipts are filtered out of the messages list by default
Summary
IntentContent/GroupUpdatedContentpattern), showing sender identity and timestampTest plan
Note
Render read receipts as inline status messages in xmtp.chat conversations
ReadReceiptContentcomponent that displays a date label and a centered "received read receipt" indicator for read receipt messages.MessageContentWithWrappernow routes messages withcontentType.typeId === "readReceipt"to this new component instead of the default renderer.Conversationcallsconversation.sendReadReceipt()after the initial sync completes when a conversation is opened.Macroscope summarized 62c0042.