l-min-components 1.6.1222 → 1.6.1224

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.6.1222",
+  "version": "1.6.1224",
   "type": "module",
   "files": [
     "src/assets",

package/src/hooks/messaging-kit/index.jsx

@@ -1,5 +1,6 @@
 import useAxios from "axios-hooks";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import sound from "./new-notification-7-210334.mp3";
 
 /**
  * Represents the details of the last message in a chat room overview.
@@ -268,6 +269,20 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
     chats: {},
   });
 
+  // Memoize the notification sound object
+  const notificationSound = useMemo(() => {
+    if (typeof window !== "undefined" && typeof Audio !== "undefined") {
+      try {
+        // Assuming the sound file is in the public folder
+        return new Audio(sound);
+      } catch (e) {
+        console.error("Error creating notification Audio object:", e);
+        return null;
+      }
+    }
+    return null;
+  }, []); // Empty dependency array ensures it's created only once
+
   // get room grouped by course list
   const getMessageRoomsByCourses = async (nextPage, once = false) => {
     if (!selectedAccount) return;
@@ -348,48 +363,9 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
     // --- End Find latest message ID ---
 
     setState((prevState) => {
-      let unreadCountToSubtract = 0;
-
-      // --- Update roomsByCourses ---
-      const updatedRoomsByCourses = prevState.roomsByCourses.map(
-        (courseGroup) => {
-          // Find the room within this course group
-          const roomIndex = courseGroup.rooms.findIndex(
-            (room) => room.id === roomId
-          );
-
-          if (roomIndex !== -1) {
-            // Found the room in this course group
-            const targetRoom = courseGroup.rooms[roomIndex];
-            unreadCountToSubtract = targetRoom.unread_count; // Store the count before resetting
-
-            // Create a new rooms array with the updated room
-            const updatedRooms = [
-              ...courseGroup.rooms.slice(0, roomIndex),
-              { ...targetRoom, unread_count: 0 }, // Reset unread count for the specific room
-              ...courseGroup.rooms.slice(roomIndex + 1),
-            ];
-
-            // Return a new course group object with updated total count and rooms
-            return {
-              ...courseGroup,
-              // Ensure total_unread_count doesn't go below zero
-              total_unread_count: Math.max(
-                0,
-                courseGroup.total_unread_count - unreadCountToSubtract
-              ),
-              rooms: updatedRooms,
-            };
-          }
-
-          // If the room wasn't in this group, return the group unchanged
-          return courseGroup;
-        }
-      );
-      // --- End Update roomsByCourses ---
-
-      // --- Update chats ---
+      // --- Update chats ONLY ---
       // Retrieve existing date groups directly from the array mapped to roomId
+      // Count updates are now handled by readRoomMessages
       const existingDateGroups = prevState.chats[roomId] || [];
       const allDateGroups = [...existingDateGroups, ...newDateGroups];
 
@@ -425,10 +401,10 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
       // Optional: Sort the date groups themselves if needed (e.g., chronologically)
       // finalDateGroups.sort((a, b) => /* comparison logic based on date */);
 
-      // --- Return combined state update ---
+      // --- Return combined state update (only updating chats here) ---
       return {
         ...prevState,
-        roomsByCourses: updatedRoomsByCourses, // Include the updated course/room list
+        // roomsByCourses is NOT updated here anymore
         chats: {
           ...prevState.chats,
           // Update the structure: Map roomId directly to the array of finalDateGroups
@@ -443,19 +419,79 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
       latestMessageIdFromFetch?.id && // Optional chaining for safety
       !latestMessageIdFromFetch?.is_read // Optional chaining for safety
     ) {
-      await readRoomMessages(latestMessageIdFromFetch.id); // Pass only the ID
+      // Pass both message ID and room ID to readRoomMessages
+      await readRoomMessages({
+        latestMessageId: latestMessageIdFromFetch.id,
+        roomId: roomId,
+      });
     }
 
     // Pass roomId correctly in the recursive call
     if (responseData.next) getIndividualChats(responseData.next, roomId);
   };
 
-  // read messages (using the latest message ID passed)
-  const readRoomMessages = async (latestMessageId) => {
-    // Assuming the API uses the latest message ID directly in the path as defined
-    return await request({
-      url: `/notify/v1/enterprise/chats/${latestMessageId}/read_message/`,
-    });
+  // read messages (using the latest message ID passed) and update counts
+  const readRoomMessages = async ({ latestMessageId, roomId }) => {
+    // 1. Make the API call to mark as read
+    try {
+      await request({
+        url: `/notify/v1/enterprise/chats/${latestMessageId}/read_message/`,
+      });
+
+      // 2. If API call is successful, update the local state counts
+      setState((prevState) => {
+        let unreadCountToSubtract = 0;
+
+        const updatedRoomsByCourses = prevState.roomsByCourses.map(
+          (courseGroup) => {
+            const roomIndex = courseGroup.rooms.findIndex(
+              (room) => room.id === roomId
+            );
+
+            if (roomIndex !== -1) {
+              const targetRoom = courseGroup.rooms[roomIndex];
+              // Store the count *before* resetting, only if it's positive
+              unreadCountToSubtract = Math.max(0, targetRoom.unread_count);
+
+              if (unreadCountToSubtract > 0) {
+                // Only update if there were unread messages
+                const updatedRooms = [
+                  ...courseGroup.rooms.slice(0, roomIndex),
+                  { ...targetRoom, unread_count: 0 }, // Reset count
+                  ...courseGroup.rooms.slice(roomIndex + 1),
+                ];
+
+                return {
+                  ...courseGroup,
+                  total_unread_count: Math.max(
+                    0, // Ensure total doesn't go below zero
+                    courseGroup.total_unread_count - unreadCountToSubtract
+                  ),
+                  rooms: updatedRooms,
+                };
+              }
+            }
+            // If room not found or no unread messages, return group unchanged
+            return courseGroup;
+          }
+        );
+
+        // Only return updated state if changes were actually made
+        if (unreadCountToSubtract > 0) {
+          return {
+            ...prevState,
+            roomsByCourses: updatedRoomsByCourses,
+          };
+        } else {
+          // No change needed, return previous state
+          return prevState;
+        }
+      });
+    } catch (error) {
+      console.error("Failed to mark messages as read:", error);
+      // Optionally handle the error (e.g., show a notification)
+      // We don't update the state counts if the API call fails
+    }
   };
 
   // sending messages
@@ -598,7 +634,11 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
     (async () => {
       await getMessageRoomsByCourses();
       // Example: Fetch initial chat for a specific room if needed on load
-      // await getIndividualChats(null, "some-initial-room-id");
+      // await getIndividualChats(null, "5be9b48281ac4c2885d3b719654ed59d");
+      // await readRoomMessages({
+      //   latestMessageId: "57e31128214a4269be8b9e3bb18495c4",
+      //   roomId: "5be9b48281ac4c2885d3b719654ed59d",
+      // });
     })();
   }, [selectedAccount?.id]); // Rerun when selectedAccount changes
 
@@ -664,8 +704,10 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
           date: getLocalDateString(webSocketData.created_at),
         };
 
-        // --- Update State ---
+        // --- Update State & Play Sound ---
         setState((prevState) => {
+          let messageWasAdded = false; // Flag to track if the message is actually added
+
           // --- Update chats state ---
           const currentChatHistory = prevState.chats[roomId] || [];
           let updatedChatHistory = [...currentChatHistory];
@@ -679,14 +721,16 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
             // "today" group exists
             const todayGroup = updatedChatHistory[todayGroupIndex];
             // Avoid adding duplicate messages if WS sends what we already added via sendMessage response
-            if (
-              !todayGroup.messages.some((msg) => msg.id === newChatMessage.id)
-            ) {
+            const isDuplicate = todayGroup.messages.some(
+              (msg) => msg.id === newChatMessage.id
+            );
+            if (!isDuplicate) {
               const updatedTodayGroup = {
                 ...todayGroup,
                 messages: [...todayGroup.messages, newChatMessage], // Add message
               };
               updatedChatHistory.splice(todayGroupIndex, 1, updatedTodayGroup); // Replace group
+              messageWasAdded = true; // Mark as added
             }
           } else {
             // "today" group doesn't exist, create it and prepend
@@ -696,8 +740,30 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
             };
             // Prepend to maintain reverse chronological order of groups
             updatedChatHistory = [newTodayGroup, ...updatedChatHistory];
+            messageWasAdded = true; // Mark as added (since it's a new group)
           }
 
+          // --- Play sound if a new message from another user was added ---
+          // --- Play sound if a new message from another user was added ---
+          if (
+            messageWasAdded &&
+            !newChatMessage.user_message &&
+            notificationSound
+          ) {
+            // Reset playback time in case it's played again quickly
+            notificationSound.currentTime = 0;
+            notificationSound.play().catch((e) => {
+              // Log error only if it's not the expected NotAllowedError
+              if (e.name !== "NotAllowedError") {
+                console.error("Error playing notification sound:", e);
+              } else {
+                // Optionally log that playback was blocked initially
+                // console.log("Audio playback blocked until user interaction.");
+              }
+            });
+          }
+          // --- End Play Sound ---
+
           const updatedChats = {
             ...prevState.chats,
             [roomId]: updatedChatHistory,
@@ -750,6 +816,7 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
         });
       }
     });
+
     return () => socket.close();
   }, [selectedAccount?.id]);
 
@@ -757,7 +824,13 @@ const useMessageKit = (affiliatesActive, selectedAccount, affiliateAccount) => {
   // send messages to account based on account type
 
   // Return the state and potentially the functions if they need to be called externally
-  return { state, getIndividualChats, getMessageRoomsByCourses, sendMessage }; // Ensure sendMessage is returned
+  return {
+    state,
+    getIndividualChats,
+    getMessageRoomsByCourses,
+    sendMessage,
+    readRoomMessages,
+  };
 };
 
 export default useMessageKit;