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

src/app/hooks/useRoomReadPositions.ts

@@ -0,0 +1,33 @@
+import { Room, RoomEvent } from 'matrix-js-sdk';
+import { useEffect, useState } from 'react';
+import { useMatrixClient } from './useMatrixClient';
+
+function computePositions(room: Room, myUserId: string): Map<string, string[]> {
+  const map = new Map<string, string[]>();
+  for (const member of room.getJoinedMembers()) {
+    if (member.userId === myUserId) continue;
+    const evtId = room.getEventReadUpTo(member.userId);
+    if (!evtId) continue;
+    const arr = map.get(evtId);
+    if (arr) arr.push(member.userId);
+    else map.set(evtId, [member.userId]);
+  }
+  return map;
+}
+
+export function useRoomReadPositions(room: Room): Map<string, string[]> {
+  const mx = useMatrixClient();
+  const myUserId = mx.getUserId() ?? '';
+  const [positions, setPositions] = useState(() => computePositions(room, myUserId));
+
+  useEffect(() => {
+    setPositions(computePositions(room, myUserId));
+    const onReceipt = () => setPositions(computePositions(room, myUserId));
+    room.on(RoomEvent.Receipt, onReceipt);
+    return () => {
+      room.removeListener(RoomEvent.Receipt, onReceipt);
+    };
+  }, [room, myUserId]);
+
+  return positions;
+}