Handle read receipts on web ui

matrixgw_frontend/src/widgets/messages/AccountIcon.tsx

@@ -2,12 +2,16 @@ import { Avatar } from "@mui/material";
 import type { UserProfile } from "../../api/matrix/MatrixApiProfile";
 import { MatrixApiMedia } from "../../api/matrix/MatrixApiMedia";
 
-export function AccountIcon(p: { user: UserProfile }): React.ReactElement {
+export function AccountIcon(p: {
+  user: UserProfile;
+  size?: number;
+}): React.ReactElement {
   return (
     <Avatar
       src={
         p.user.avatar ? MatrixApiMedia.MediaURL(p.user.avatar, true) : undefined
       }
+      sx={{ width: p.size, height: p.size }}
     >
       {p.user.display_name?.slice(0, 1)}
     </Avatar>

matrixgw_frontend/src/widgets/messages/MainMessagesWidget.tsx

@@ -89,7 +89,8 @@ function _MainMessageWidget(p: {
       return;
     }
     const messages = await MatrixApiEvent.GetRoomEvents(currentRoom);
-    const mgr = new RoomEventsManager(currentRoom!, messages);
+    const receipts = await MatrixApiRoom.RoomReceipts(currentRoom);
+    const mgr = new RoomEventsManager(currentRoom!, messages, receipts);
     setRoomMgr(mgr);
   };
 

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -21,7 +21,7 @@ import EmojiPicker, { EmojiStyle, Theme } from "emoji-picker-react";
 import React from "react";
 import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
-import type { Room } from "../../api/matrix/MatrixApiRoom";
+import type { Receipt, Room } from "../../api/matrix/MatrixApiRoom";
 import { useAlert } from "../../hooks/contexts_provider/AlertDialogProvider";
 import { useConfirm } from "../../hooks/contexts_provider/ConfirmDialogProvider";
 import { useLoadingMessage } from "../../hooks/contexts_provider/LoadingMessageProvider";
@@ -73,6 +73,7 @@ export function RoomMessagesList(p: {
             m.time_sent_dayjs.startOf("day").unix() !=
               p.manager.messages[idx - 1].time_sent_dayjs.startOf("day").unix()
           }
+          receipts={p.manager.receiptsEventsMap.get(m.event_id)}
         />
       ))}
 
@@ -87,6 +88,7 @@ function RoomMessage(p: {
   message: Message;
   previousFromSamePerson: boolean;
   firstMessageOfDay: boolean;
+  receipts?: Receipt[];
 }): React.ReactElement {
   const theme = useTheme();
   const user = useUserInfo();
@@ -220,7 +222,7 @@ function RoomMessage(p: {
         </Typography>
 
         {/** Message itself */}
-        <div style={{ marginLeft: "15px", whiteSpace: "pre-wrap" }}>
+        <div style={{ marginLeft: "15px", whiteSpace: "pre-wrap", flex: 1 }}>
           {/* Image */}
           {p.message.type === "m.image" && (
             <img
@@ -284,6 +286,19 @@ function RoomMessage(p: {
             <div style={{ margin: "2px 0px" }}>{p.message.content}</div>
           )}
         </div>
+
+        {/* Read receipts */}
+        <div>
+          {(p.receipts ?? []).map((r) => {
+            const u = p.users.get(r.user);
+
+            if (!u || u.user_id === user.info.matrix_user_id) return <></>;
+
+            return <AccountIcon key={u.user_id} user={u} size={16} />;
+          })}
+        </div>
+
+        {/** Button bar */}
         <ButtonGroup
           className="buttons"
           size="small"
@@ -319,7 +334,7 @@ function RoomMessage(p: {
         </ButtonGroup>
       </Box>
 
-      {/* Reaction */}
+      {/* Reactions */}
       <Box sx={{ marginLeft: "50px" }}>
         {[...p.message.reactions.keys()].map((r) => {
           const reactions = p.message.reactions.get(r)!;