Follow unread messages

matrixgw_frontend/src/widgets/messages/MainMessagesWidget.tsx

@@ -6,7 +6,10 @@ import {
 } from "../../api/matrix/MatrixApiProfile";
 import { MatrixApiRoom, type Room } from "../../api/matrix/MatrixApiRoom";
 import { MatrixSyncApi } from "../../api/MatrixSyncApi";
+import type { WsMessage } from "../../api/WsApi";
 import { AsyncWidget } from "../AsyncWidget";
+import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
+import { MatrixWS } from "./MatrixWS";
 import { RoomSelector } from "./RoomSelector";
 import { RoomWidget } from "./RoomWidget";
 import { SpaceSelector } from "./SpaceSelector";
@@ -14,6 +17,7 @@ import { SpaceSelector } from "./SpaceSelector";
 export function MainMessageWidget(): React.ReactElement {
   const [rooms, setRooms] = React.useState<Room[] | undefined>();
   const [users, setUsers] = React.useState<UsersMap | undefined>();
+  const user = useUserInfo();
 
   const load = async () => {
     await MatrixSyncApi.Start();
@@ -30,13 +34,39 @@ export function MainMessageWidget(): React.ReactElement {
     setUsers(await MatrixApiProfile.GetMultiple([...users]));
   };
 
+  const handleEvent = (m: WsMessage) => {
+    // Add a new unread message
+    if (
+      m.type === "RoomMessageEvent" &&
+      !m.data["m.new_content"] &&
+      m.sender !== user.info.matrix_user_id
+    ) {
+      setRooms((r) => {
+        const n = r ? [...r] : undefined;
+        const idx = n?.findIndex((el) => el.id === m.room_id);
+        if (idx)
+          n![idx] = {
+            ...n![idx],
+            number_unread_messages: n![idx].number_unread_messages + 1,
+          };
+        return n;
+      });
+    }
+  };
+
   return (
     <AsyncWidget
       loadKey={1}
       load={load}
       ready={!!rooms && !!users}
       errMsg="Failed to initialize messaging component!"
-      build={() => <_MainMessageWidget rooms={rooms!} users={users!} />}
+      build={() => (
+        <_MainMessageWidget
+          rooms={rooms!}
+          users={users!}
+          onEvent={handleEvent}
+        />
+      )}
     />
   );
 }
@@ -44,6 +74,7 @@ export function MainMessageWidget(): React.ReactElement {
 function _MainMessageWidget(p: {
   rooms: Room[];
   users: UsersMap;
+  onEvent: (m: WsMessage) => void;
 }): React.ReactElement {
   const [space, setSpace] = React.useState<string | undefined>();
   const [room, setRoom] = React.useState<Room | undefined>();
@@ -68,16 +99,19 @@ function _MainMessageWidget(p: {
       />
       <Divider orientation="vertical" />
       {room === undefined && (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            flex: 1,
-          }}
-        >
-          No room selected.
-        </div>
+        <>
+          <MatrixWS onMessage={p.onEvent} />
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flex: 1,
+            }}
+          >
+            No room selected.
+          </div>
+        </>
       )}
       {room && <RoomWidget {...p} room={room} />}
     </div>