Send read receipts

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -140,4 +140,14 @@ export class MatrixApiEvent {
       uri: `/matrix/room/${room.id}/event/${event_id}`,
     });
   }
+
+  /**
+   * Send event receipt
+   */
+  static async SendReceipt(room: Room, event_id: string): Promise<void> {
+    await APIClient.exec({
+      method: "POST",
+      uri: `/matrix/room/${room.id}/event/${event_id}/receipt`,
+    });
+  }
 }

matrixgw_frontend/src/widgets/messages/RoomWidget.tsx

@@ -4,14 +4,37 @@ import type { Room } from "../../api/matrix/MatrixApiRoom";
 import { RoomEventsManager } from "../../utils/RoomEventsManager";
 import { RoomMessagesList } from "./RoomMessagesList";
 import { SendMessageForm } from "./SendMessageForm";
+import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
+import { useSnackbar } from "../../hooks/contexts_provider/SnackbarProvider";
 
 export function RoomWidget(p: {
   room: Room;
   users: UsersMap;
   manager: RoomEventsManager;
 }): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const receiptId = React.useRef<string | undefined>(undefined);
+
+  const handleRoomClick = async () => {
+    if (p.manager.messages.length === 0) return;
+    const latest = p.manager.messages[p.manager.messages.length - 1];
+    if (latest.event_id === receiptId.current) return;
+
+    receiptId.current = latest.event_id;
+    try {
+      await MatrixApiEvent.SendReceipt(p.room, latest.event_id);
+    } catch (e) {
+      console.error("Failed to send read receipt!", e);
+      snackbar(`Failed to send read receipt! ${e}`);
+    }
+  };
+
   return (
-    <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
+    <div
+      style={{ display: "flex", flexDirection: "column", flex: 1 }}
+      onClick={handleRoomClick}
+    >
       <RoomMessagesList {...p} />
       <SendMessageForm {...p} />
     </div>