chat implemented, testing needed

frontend/src/pages/social/chat/ChatRoomPage.tsx

@@ -3,7 +3,8 @@ import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
 import type { Message as MessageModel } from "@/api/generated/private/models/message";
-import { useApiSocialChatsRetrieve } from "@/api/generated/private/chat/chat";
+import { getApiSocialChatsListQueryKey, useApiSocialChatsRetrieve } from "@/api/generated/private/chat/chat";
+import { useAuth } from "@/hooks/useAuth";
 import { useInfiniteMessages } from "@/hooks/useInfiniteMessages";
 import { useChatSocket, type ChatSocketEvent } from "@/hooks/useChatSocket";
 import { useIntersectionLoader } from "@/hooks/useIntersectionLoader";
@@ -20,6 +21,7 @@ export default function ChatRoomPage() {
   const chatId = Number(chatIdParam);
   const queryClient = useQueryClient();
 
+  const { user } = useAuth();
   const { data: chat } = useApiSocialChatsRetrieve(String(chatId));
   const {
     messages,
@@ -98,6 +100,10 @@ export default function ChatRoomPage() {
         });
       } else if (event.type === "delete_chat_message") {
         removeMessage(event.message_id);
+      } else if (event.type === "read_status") {
+        if (event.user === user?.username) {
+          queryClient.invalidateQueries({ queryKey: getApiSocialChatsListQueryKey() });
+        }
       } else if (event.type === "typing") {
         setTypingUsers((prev) =>
           event.is_typing
@@ -108,17 +114,24 @@ export default function ChatRoomPage() {
         setTypingUsers((prev) => prev.filter((u) => u !== event.user));
       }
     },
-    [appendMessage, removeMessage, chatId],
+    [appendMessage, removeMessage, chatId, user, queryClient],
   );
 
-  const { status, sendMessage, sendReply, sendReaction, sendTyping } = useChatSocket({
+  const { status, sendMessage, sendReply, sendReaction, sendTyping, sendMarkRead } = useChatSocket({
     chatId: Number.isFinite(chatId) ? chatId : null,
     onEvent: handleSocketEvent,
   });
 
-  // Auto-scroll to bottom when new messages arrive.
+  // Mark the chat as read as soon as the socket opens.
+  useEffect(() => {
+    if (status === "open") sendMarkRead();
+  }, [status, sendMarkRead]);
+
+  // Auto-scroll to bottom and mark chat as read when new messages arrive.
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "auto" });
+    if (status === "open") sendMarkRead();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messages.length]);
 
   function handleSend(text: string, replyToId?: number): boolean {