l-min-components 1.6.1265 → 1.6.1267

package/package.json

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

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

@@ -326,6 +326,9 @@ const useMessageKit = (/*affiliatesActive*/) => {
     isProcessingQueue: false,
   });
 
+  // Ref for synchronous queue processing lock
+  const isCurrentlyProcessingRef = useRef(false);
+
   // State for rooms that should be automatically marked as read
   const [autoReadRoomIds, setAutoReadRoomIds] = useState(() => new Set());
 
@@ -828,28 +831,45 @@ const useMessageKit = (/*affiliatesActive*/) => {
     [setState]
   ); // Dependency: setState
 
-  // Effect to process the message queue sequentially
+  // Effect to process the message queue sequentially using a Ref lock
   useEffect(() => {
-    // Exit if already processing or queue is empty
-    if (state.isProcessingQueue || state.messageQueue.length === 0) {
+    // **Synchronous Check + Claim:**
+    // Use the ref for an immediate check. If already processing, bail out.
+    // Also check if the queue has items.
+    if (isCurrentlyProcessingRef.current || state.messageQueue.length === 0) {
       return;
     }
 
-    // --- Start Processing ---
+    // **Claim the processing slot synchronously**
+    isCurrentlyProcessingRef.current = true;
+
+    // Set the state flag as well (useful for potential UI indicators or triggering re-renders upon completion)
+    // Note: This state update is still async, but the ref prevents the race condition.
     setState((prevState) => ({ ...prevState, isProcessingQueue: true }));
 
-    // Get the next message from the front of the queue
+    // Get the next message details from the front of the queue.
+    // Reading state here is fine, as we've already claimed the slot.
     const messageToSend = state.messageQueue[0];
+
+    // Safety check: Ensure messageToSend exists (queue might have emptied)
+    if (!messageToSend) {
+      isCurrentlyProcessingRef.current = false; // Release the claim
+      setState((prevState) => ({ ...prevState, isProcessingQueue: false }));
+      console.warn(
+        "Queue Processor: Attempted to process but queue was empty."
+      );
+      return; // Nothing to process
+    }
+
     const { tempId, courseId, accountId, text, media } = messageToSend;
-    const pendingKey = `pending_${courseId}_${accountId}`; // Reconstruct key
+    const pendingKey = `pending_${courseId}_${accountId}`;
 
-    // Define the async task for sending this message
+    // Define the async task for sending this specific message.
     const processMessage = async () => {
       try {
         // --- Make API Call ---
         let response;
         // TODO: Handle media preparation (e.g., check if 'media' is File, create FormData)
-        // This example assumes 'media' is directly usable or requires minimal processing
         const requestData = { text, media };
         const requestParams = {
           account_id: accountId,
@@ -857,7 +877,6 @@ const useMessageKit = (/*affiliatesActive*/) => {
           _account: selectedAccount.id,
         };
 
-        // (Use the same API call logic as before)
         if (selectedAccount.type.toLowerCase() === "enterprise") {
           response = await request({
             url: "/notify/v1/enterprise/chats/",
@@ -916,11 +935,23 @@ const useMessageKit = (/*affiliatesActive*/) => {
           is_delivered: sentMessageData.is_delivered,
           created_at: sentMessageData.created_at,
           user_message: sentMessageData.user_message,
-          date: getLocalDateString(sentMessageData.created_at), // Still useful for basic date info if needed
+          date: getLocalDateString(sentMessageData.created_at), // Use existing helper
         };
 
         // Update state atomically after success
         setState((prevState) => {
+          // Safety check: Ensure the message we processed is still the first one
+          if (
+            prevState.messageQueue.length === 0 ||
+            prevState.messageQueue[0].tempId !== tempId
+          ) {
+            console.warn(
+              `Queue Processor: Mismatch processing successful message ${tempId}. Queue changed unexpectedly.`
+            );
+            // Don't modify state if the queue front doesn't match
+            return prevState;
+          }
+
           // 1. Remove optimistic message
           let updatedOptimisticMessages = { ...prevState.optimisticMessages };
           if (updatedOptimisticMessages[pendingKey]) {
@@ -965,12 +996,11 @@ const useMessageKit = (/*affiliatesActive*/) => {
               date: messageDateLabel,
               messages: [newChatMessage],
             });
-            // Sort groups using helper function
             updatedChatHistory.sort(
               (a, b) =>
                 getSortableTimestampForGroup(b) -
                 getSortableTimestampForGroup(a)
-            );
+            ); // Use helper
           }
           updatedChats[confirmedRoomId] = updatedChatHistory;
 
@@ -982,7 +1012,6 @@ const useMessageKit = (/*affiliatesActive*/) => {
             const roomIdx = cg.rooms.findIndex((r) => r.id === confirmedRoomId);
             if (roomIdx !== -1) {
               roomExists = true;
-              // Create a new room object to ensure immutability
               const updatedRoom = {
                 ...cg.rooms[roomIdx],
                 last_message: {
@@ -992,22 +1021,22 @@ const useMessageKit = (/*affiliatesActive*/) => {
                   created_at: newChatMessage.created_at,
                 },
               };
-              // Create a new rooms array for the course group
               const updatedRooms = [...cg.rooms];
               updatedRooms[roomIdx] = updatedRoom;
-              // Return a new course group object
               return { ...cg, rooms: updatedRooms };
             }
             return cg;
           });
-          // Trigger refetch if room metadata wasn't found (handled outside setState)
-          if (!roomExists) {
-            setTimeout(() => getMessageRoomsByCourses(null, true), 0);
-          }
 
           // 4. Remove processed item from queue (immutable update)
           const updatedQueue = prevState.messageQueue.slice(1);
 
+          // Trigger refetch if room metadata wasn't found (handled outside setState)
+          if (!roomExists && typeof getMessageRoomsByCourses === "function") {
+            // Check if function exists
+            setTimeout(() => getMessageRoomsByCourses(null, true), 0);
+          }
+
           // Return the combined state updates
           return {
             ...prevState,
@@ -1015,7 +1044,7 @@ const useMessageKit = (/*affiliatesActive*/) => {
             chats: updatedChats,
             roomsByCourses: updatedRoomsByCourses,
             messageQueue: updatedQueue,
-            // isProcessingQueue reset happens in 'finally' block
+            isProcessingQueue: true, // Keep true until finally block resets it below
           };
         });
       } catch (error) {
@@ -1025,25 +1054,33 @@ const useMessageKit = (/*affiliatesActive*/) => {
           error
         );
         setState((prevState) => {
+          // Safety check for queue consistency
+          if (
+            prevState.messageQueue.length === 0 ||
+            prevState.messageQueue[0].tempId !== tempId
+          ) {
+            console.warn(
+              `Queue Processor: Mismatch processing failed message ${tempId}. Queue changed unexpectedly.`
+            );
+            return prevState;
+          }
+
           // 1. Update optimistic message status to 'failed'
           let updatedOptimisticMessages = { ...prevState.optimisticMessages };
           if (updatedOptimisticMessages[pendingKey]) {
             const messageIndex = updatedOptimisticMessages[
               pendingKey
             ].findIndex((msg) => msg.tempId === tempId);
-            // Only update if found and still pending (might have been handled differently elsewhere?)
             if (
               messageIndex !== -1 &&
               updatedOptimisticMessages[pendingKey][messageIndex].status ===
                 "pending"
             ) {
-              // Create new message object for immutability
               const failedMessage = {
                 ...updatedOptimisticMessages[pendingKey][messageIndex],
                 status: "failed",
                 error: error?.message || "Unknown error",
               };
-              // Create new array for the pending key
               const updatedPendingList = [
                 ...updatedOptimisticMessages[pendingKey],
               ];
@@ -1062,33 +1099,39 @@ const useMessageKit = (/*affiliatesActive*/) => {
 
           // 2. Remove failed item from queue (immutable update)
           const updatedQueue = prevState.messageQueue.slice(1);
-
+          // Return the combined state updates
           return {
             ...prevState,
             optimisticMessages: updatedOptimisticMessages,
             messageQueue: updatedQueue,
-            // isProcessingQueue reset happens in 'finally' block
+            isProcessingQueue: true, // Keep true until finally block resets it below
           };
         });
       } finally {
         // --- Finish Processing ---
-        // Always ensure processing flag is reset, even on error
+        // **Crucial:** Release the synchronous lock first.
+        isCurrentlyProcessingRef.current = false;
+        // Then update the state flag. This state update will trigger a re-render.
+        // If the queue still has items, the effect will run again, see the ref is false,
+        // claim the lock, and start processing the next item.
         setState((prevState) => ({ ...prevState, isProcessingQueue: false }));
       }
     };
 
-    // Execute the async sending logic
+    // Execute the async sending logic for the current item.
     processMessage();
 
-    // Dependencies for the effect: react when queue or processing status changes
-    // Also depend on selectedAccount and affiliateAccount for API calls within the processor
+    // Dependencies:
+    // - `state.isProcessingQueue`: Triggers check when processing finishes.
+    // - `state.messageQueue`: Triggers check when queue content changes.
+    // - `request`, `selectedAccount`, `affiliateAccount`, `getMessageRoomsByCourses`:
+    //   Required by exhaustive-deps for use within the effect's scope.
   }, [
     state.isProcessingQueue,
     state.messageQueue,
     // request,
     selectedAccount,
     affiliateAccount,
-    // getMessageRoomsByCourses,
   ]);
 
   /**