feat: per-message read receipt avatars showing each user s last-read position

src/app/features/room/message/Message.tsx

@@ -63,6 +63,8 @@ import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import * as css from './styles.css';
 import { EventReaders } from '../../../components/event-readers';
+import { ReadReceiptAvatars } from '../../../components/read-receipt-avatars';
+import { useReadPositions } from '../ReadPositionsContext';
 import { TextViewer } from '../../../components/text-viewer';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { EmojiBoard } from '../../../components/emoji-board';
@@ -721,6 +723,10 @@ export const Message = as<'div', MessageProps>(
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
     const senderId = mEvent.getSender() ?? '';
+    const readPositions = useReadPositions();
+    const readReceiptUsers = hideReadReceipts
+      ? []
+      : (readPositions.get(mEvent.getId() ?? '') ?? []);
 
     const [hover, setHover] = useState(false);
     const { hoverProps } = useHover({ onHoverChange: setHover });
@@ -833,6 +839,13 @@ export const Message = as<'div', MessageProps>(
           children
         )}
         {reactions}
+        {readReceiptUsers.length > 0 && (
+          <ReadReceiptAvatars
+            room={room}
+            eventId={mEvent.getId() ?? ''}
+            userIds={readReceiptUsers}
+          />
+        )}
       </Box>
     );