Mark chat as read fix.

Author: maratal

Docs/APIREF-Chats.md

@@ -339,7 +339,7 @@ __Path__:
 ```
 PUT /chats/<id>/messages/<id>/read
 ```
-__Response__: `OK`
+__Response__: [`MessageInfo`](APIREF-JSON.md#messageinfo) object with updated read marks.
 _________________________________________________________________________________
 
 ### 24. Send notification

Public/app/js/chat.js

@@ -1181,7 +1181,7 @@ async function sendMessage(textOverride = null) {
     await addMessageToChat(message);
 
     // Update chat list with new message
-    updateChatListWithMessage(message);
+    await updateChatListWithMessage(message);
 
     // Send to server using the shared function
     const serverMessage = await sendMessageToServer(message);
@@ -1255,7 +1255,7 @@ async function updateMessage(message, newText, newAttachments) {
     replaceMessageElement(currentMessage.localId, serverMessage, false);
 
     // Update chat list with updated message
-    updateChatListWithMessage(serverMessage);
+    await updateChatListWithMessage(serverMessage);
 }
 
 // Add message to chat
@@ -1624,7 +1624,7 @@ async function deleteMessage(message) {
         replaceMessageElement(message.localId || message.id, serverMessage, false);
 
         // Update chat list
-        updateChatListWithMessage(serverMessage);
+        await updateChatListWithMessage(serverMessage);
     } catch (error) {
         console.error('Error deleting message:', error);
         alert('Failed to delete message');

Public/app/js/main.js

@@ -170,40 +170,40 @@ async function markChatAsRead(chatId) {
     const chat = chats.find(c => c.id === chatId);
     if (!chat) return;
 
-    if (resolveUnreadCount(chat) > 0) {
-        setStorageUnreadCount(chat.id, 0);
-        
-        // Update the DOM to remove badge and bold style
-        const chatItem = document.querySelector(`[data-chat-id="${chatId}"]`);
-        if (chatItem) {
-            const lastMessageElement = chatItem.querySelector('.chat-last-message');
-            if (lastMessageElement) {
-                lastMessageElement.classList.remove('unread');
-            }
-            
-            const badgeElement = chatItem.querySelector('.chat-badge');
-            if (badgeElement) {
-                badgeElement.remove();
-            }
+    const lastMessage = chat.lastMessage;
+    if (!lastMessage || !lastMessage.id || isMessageReadByCurrentUser(lastMessage)) return;
+    
+    setStorageUnreadCount(chat.id, 0);
+    
+    // Update the DOM to remove badge and bold style
+    const chatItem = document.querySelector(`[data-chat-id="${chatId}"]`);
+    if (chatItem) {
+        const lastMessageElement = chatItem.querySelector('.chat-last-message');
+        if (lastMessageElement) {
+            lastMessageElement.classList.remove('unread');
         }
 
-        // Update page title badge
-        updatePageTitleBadge();
+        const badgeElement = chatItem.querySelector('.chat-badge');
+        if (badgeElement) {
+            badgeElement.remove();
+        }
     }
 
-    // Mark messages as read on server
-    if (chat.lastMessage && chat.lastMessage.id && !isMessageReadByCurrentUser(chat.lastMessage)) {
-        try {
-            await apiMarkAsRead(chatId, chat.lastMessage.id);
-        } catch (error) {
-            console.error('Failed to mark messages as read:', error);
-        }
+    // Call API to mark messages as read
+    try {
+        const message = await apiMarkAsRead(chatId, lastMessage.id);
+        lastMessage.readMarks = message.readMarks; // Update readMarks for the last message
+    } catch (error) {
+        console.error('Failed to mark messages as read:', error);
     }
+
+    // Update page title badge
+    updatePageTitleBadge();
 }
 
 function updatePageTitleBadge() {
     // Count chats with unread messages
-    const unreadChatsCount = chats.filter(chat => resolveUnreadCount(chat) > 0).length;
+    const unreadChatsCount = chats.filter(chat => (getStorageUnreadCount(chat.id) || 0) > 0).length;
 
     if (unreadChatsCount > 0 && document.hidden) {
         document.title = `(${unreadChatsCount}) ${originalTitle}`;
@@ -228,7 +228,7 @@ function displayChats(restoreSelection = true) {
                 // Show all chats except blocked and archived
                 return !isBlocked && !isArchived;
             case 'unread':
-                return resolveUnreadCount(chat) > 0 && !isBlocked && !isArchived;
+                return (getStorageUnreadCount(chat.id) || 0) > 0 && !isBlocked && !isArchived;
             case 'archived':
                 return isArchived;
             case 'blocked':
@@ -589,7 +589,7 @@ function updateCurrentUserButton() {
 }
 
 // Update chat list when new message arrives
-function updateChatListWithMessage(message) {
+async function updateChatListWithMessage(message) {
     const chat = chats.find(c => c.id === message.chatId);
     if (!chat || !chat.id) {
         console.warn('Received message for unknown chat:', message.chatId);
@@ -617,8 +617,10 @@ function updateChatListWithMessage(message) {
 
     var unreadCount = getStorageUnreadCount(chat.id) || 0;
 
-    // If chat is not currently open or the page is hidden, increment the unread count
-    if (message.chatId !== currentChatId || document.hidden) {
+    // If the chat is currently open and the document is visible, mark it as read immediately
+    if (message.chatId === currentChatId && !document.hidden) {
+        await markChatAsRead(chat.id);
+    } else {
         setStorageUnreadCount(chat.id, ++unreadCount);
     }
 

Public/app/js/ws.js

@@ -80,7 +80,7 @@ function initializeWebSocket() {
 }
 
 // Handle WebSocket messages
-function handleWebSocketMessage(notification) {
+async function handleWebSocketMessage(notification) {
     if ((notification.event === 'message' || notification.event === 'messageUpdate') && notification.payload) {
         const message = notification.payload;
 
@@ -92,7 +92,7 @@ function handleWebSocketMessage(notification) {
         // Check if this is for the current chat
         if (message.chatId === currentChatId) {
             // Update chat list item with new message
-            updateChatListWithMessage(message);
+            await updateChatListWithMessage(message);
 
             // Check if we already have this message (by localId)
             const existingElement = document.querySelector(`[data-local-id="${message.localId}"]`);
@@ -111,7 +111,7 @@ function handleWebSocketMessage(notification) {
             loadChats();
         } else {
             // Update chat list item with new message
-            updateChatListWithMessage(message);
+            await updateChatListWithMessage(message);
             // Message for a different existing chat, re-sort chat list
             displayChats();
         }

Sources/App/Controllers/ChatController.swift

@@ -173,10 +173,9 @@ struct ChatController: RouteCollection {
                                                                  by: currentUser.requireID())
     }
 
-    func readMessage(_ req: Request) async throws -> HTTPStatus {
+    func readMessage(_ req: Request) async throws -> MessageInfo {
         let currentUser = try await req.requireCurrentUser()
-        try await service.with(currentUser).readMessage(req.messageID(), by: currentUser.requireID())
-        return .ok
+        return try await service.with(currentUser).readMessage(req.messageID(), by: currentUser.requireID())
     }
 
     func deleteMessage(_ req: Request) async throws -> MessageInfo {

Sources/App/Services/ChatService.swift

@@ -65,7 +65,7 @@ protocol ChatServiceProtocol: LoggedIn {
     func deleteMessage(_ id: MessageID, by userId: UserID) async throws -> MessageInfo
 
     /// Marks message with`id` as seen by the user with `userId`.
-    func readMessage(_ id: MessageID, by userId: UserID) async throws
+    func readMessage(_ id: MessageID, by userId: UserID) async throws -> MessageInfo
 
     /// Adds chat's profile picture (not to confuse with user's profile picture in personal chat).
     func addChatImage(_ chatId: ChatID, with info: UpdateChatRequest, by userId: UserID) async throws -> ChatInfo
@@ -562,7 +562,7 @@ actor ChatService: ChatServiceProtocol {
         return info
     }
 
-    func readMessage(_ id: MessageID, by userId: UserID) async throws {
+    func readMessage(_ id: MessageID, by userId: UserID) async throws -> MessageInfo {
         guard let message = try await repo.findMessage(id: id) else {
             throw ServiceError(.notFound)
         }
@@ -576,7 +576,9 @@ actor ChatService: ChatServiceProtocol {
             let readMarkinfo = readMark.info()
             messageInfo.readMarks = (messageInfo.readMarks ?? []) + [readMarkinfo]
             try await core.notificator.notify(chat: message.chat, in: repo, about: .messageRead, from: readerRelation.user, with: messageInfo.jsonObject())
+            return messageInfo
         }
+        return message.info()
     }
 
     func addChatImage(_ chatId: ChatID, with info: UpdateChatRequest, by userId: UserID) async throws -> ChatInfo {