l-min-components 1.6.1263 → 1.6.1267

package/package.json

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

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

@@ -226,6 +226,16 @@ import sound from "./new-notification-7-210334.mp3";
  * @property {any | null} error - Stores error info if status is 'failed'.
  */
 
+/**
+ * Represents an item waiting in the message sending queue.
+ * @typedef {object} QueueItem
+ * @property {string} tempId - The temporary ID linking to the optimistic message.
+ * @property {string} courseId - The course ID for the API call.
+ * @property {string} accountId - The account ID for the API call.
+ * @property {string | null} text - The message text content.
+ * @property {any | null} media - The media data (e.g., File object, FormData details). Needs proper handling before API call.
+ */
+
 const useMessageKit = (/*affiliatesActive*/) => {
   const cookieGrabber = (key = "") => {
     const cookies = document.cookie;
@@ -304,8 +314,21 @@ const useMessageKit = (/*affiliatesActive*/) => {
      * @type {Record<string, OptimisticMessage[]>}
      */
     optimisticMessages: {},
+    /**
+     * Queue of messages waiting to be sent via API.
+     * @type {QueueItem[]}
+     */
+    messageQueue: [],
+    /**
+     * Flag indicating if the queue processor is currently sending a message.
+     * @type {boolean}
+     */
+    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());
 
@@ -651,22 +674,18 @@ const useMessageKit = (/*affiliatesActive*/) => {
   }, []);
   // --- End functions to manage auto-read rooms ---
 
-  // Helper to get YYYY-MM-DD (ensure consistency)
+  // Helper to get YYYY-MM-DD - Useful for potential fallback or other date needs
   const getLocalDateString = (isoTimestamp) => {
     if (!isoTimestamp) return new Date().toISOString().split("T")[0];
     try {
       const date = new Date(isoTimestamp);
-      // Check if date is valid before formatting
-      if (isNaN(date.getTime())) {
-        throw new Error("Invalid date object");
-      }
+      if (isNaN(date.getTime())) throw new Error("Invalid date object");
       const year = date.getFullYear();
       const month = String(date.getMonth() + 1).padStart(2, "0");
       const day = String(date.getDate()).padStart(2, "0");
       return `${year}-${month}-${day}`;
     } catch (e) {
       console.error("Error parsing date:", isoTimestamp, e);
-      // Fallback to current date string
       const today = new Date();
       const year = today.getFullYear();
       const month = String(today.getMonth() + 1).padStart(2, "0");
@@ -675,321 +694,445 @@ const useMessageKit = (/*affiliatesActive*/) => {
     }
   };
 
-  // Helper to get the display label for a date group (like "Today", "Yesterday", "Apr 06")
-  const getDisplayDateLabel = (dateString) => {
-    // dateString is YYYY-MM-DD
-    if (!dateString) return "Unknown Date";
+  // *** UPDATED getDisplayDateLabel ***
+  // Now accepts the full ISO timestamp string
+  const getDisplayDateLabel = (createdAtISOString) => {
+    if (!createdAtISOString) return "Unknown Date";
 
-    const today = new Date();
-    const yesterday = new Date(today);
-    yesterday.setDate(today.getDate() - 1);
+    try {
+      const messageDate = new Date(createdAtISOString);
+      // Ensure the date parsed correctly
+      if (isNaN(messageDate.getTime())) {
+        console.warn(
+          "getDisplayDateLabel: Invalid date parsed from",
+          createdAtISOString
+        );
+        return createdAtISOString.split("T")[0] || "Invalid Date"; // Basic fallback
+      }
 
-    // Use UTC dates for comparison to avoid timezone issues affecting "Today"/"Yesterday" logic
-    const todayUtcString = getLocalDateString(today.toISOString());
-    const yesterdayUtcString = getLocalDateString(yesterday.toISOString());
+      const now = new Date();
 
-    if (dateString === todayUtcString) {
-      return "Today";
-    }
-    if (dateString === yesterdayUtcString) {
-      return "Yesterday";
+      // Get midnight today in the browser's local time
+      const todayStart = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate()
+      );
+      // Get midnight yesterday in the browser's local time
+      const yesterdayStart = new Date(todayStart);
+      yesterdayStart.setDate(todayStart.getDate() - 1);
+      // Get midnight tomorrow (needed for the upper bound of "today")
+      const tomorrowStart = new Date(todayStart);
+      tomorrowStart.setDate(todayStart.getDate() + 1);
+
+      // Compare the message's timestamp against local date boundaries
+      if (messageDate >= todayStart && messageDate < tomorrowStart) {
+        return "Today";
+      } else if (messageDate >= yesterdayStart && messageDate < todayStart) {
+        return "Yesterday";
+      } else {
+        // Format other dates using locale-specific representation
+        let options = { month: "short", day: "numeric" };
+        // Optionally add year if it's not the current year
+        if (messageDate.getFullYear() !== now.getFullYear()) {
+          options.year = "numeric";
+        }
+        // 'undefined' uses the browser's default locale
+        return messageDate.toLocaleDateString(undefined, options);
+      }
+    } catch (e) {
+      console.error(
+        "Error formatting display date label for:",
+        createdAtISOString,
+        e
+      );
+      return createdAtISOString.split("T")[0] || "Error Date"; // Basic fallback
     }
+  };
 
-    // Format other dates (e.g., "Apr 06")
-    try {
-      // Use the dateString directly which should be YYYY-MM-DD
-      // Create date object assuming UTC to avoid timezone shifts in formatting
-      const messageDate = new Date(dateString + "T00:00:00Z");
-      // Check for invalid date object again before formatting
-      if (isNaN(messageDate.getTime())) {
-        return dateString; // Fallback to YYYY-MM-DD if parsing failed
+  // *** NEW getSortableTimestampForGroup ***
+  // Helper to get a reliable timestamp for sorting date groups
+  const getSortableTimestampForGroup = (group) => {
+    // Use the timestamp of the first message in the group for sorting
+    // Assumes messages within the group are sorted ascending by created_at
+    if (group?.messages?.length > 0 && group.messages[0]?.created_at) {
+      try {
+        const date = new Date(group.messages[0].created_at);
+        if (!isNaN(date.getTime())) {
+          // Return timestamp representing midnight of that day in local time for group sorting
+          const groupDateStart = new Date(
+            date.getFullYear(),
+            date.getMonth(),
+            date.getDate()
+          );
+          return groupDateStart.getTime(); // Use positive timestamp
+        }
+      } catch {
+        /* ignore errors, fallback below */
       }
-      return messageDate.toLocaleDateString("en-US", {
-        timeZone: "UTC",
-        month: "short",
-        day: "numeric",
-      });
-    } catch (e) {
-      console.error("Error formatting date label for:", dateString, e);
-      return dateString; // Fallback
     }
+    // Fallback if no valid message/timestamp found
+    return 0;
   };
 
-  //sendMessage function inside useMessageKit:
-  const sendMessage = async ({ text, media, courseId, accountId }) => {
-    const clientTimestamp = new Date().toISOString();
-    // Ensure crypto API is available, provide fallback
-    const tempId =
-      typeof crypto !== "undefined" && crypto.randomUUID
-        ? crypto.randomUUID()
-        : `temp_${Date.now()}_${Math.random()}`;
-    const pendingKey = `pending_${courseId}_${accountId}`; // ALWAYS use this key for optimistic storage
-
-    // --- Prepare Optimistic Message ---
-    const optimisticMessage = {
-      tempId,
-      status: "pending",
-      courseId, // Keep for identification within pendingKey if needed
-      accountId, // Keep for identification within pendingKey if needed
-      text,
-      media,
-      created_at: clientTimestamp,
-      user_message: true, // Always true for optimistic messages
-      error: null,
-    };
+  // This function now adds the message optimistically and places it in the queue.
+  const sendMessage = useCallback(
+    ({ text, media, courseId, accountId }) => {
+      const clientTimestamp = new Date().toISOString();
+      const tempId =
+        typeof crypto !== "undefined" && crypto.randomUUID
+          ? crypto.randomUUID()
+          : `temp_${Date.now()}_${Math.random()}`;
+      const pendingKey = `pending_${courseId}_${accountId}`;
+
+      // --- Prepare Optimistic Message ---
+      const optimisticMessage = {
+        tempId,
+        status: "pending", // Initially pending
+        courseId,
+        accountId,
+        text,
+        media, // Store original media reference for potential UI display needs
+        created_at: clientTimestamp,
+        user_message: true, // Always true
+        error: null,
+      };
 
-    // --- Store Optimistic Message using pendingKey ---
-    setState((prevState) => {
-      const currentOptimistic = prevState.optimisticMessages[pendingKey] || [];
-      return {
-        ...prevState,
-        optimisticMessages: {
+      // --- Prepare Queue Item ---
+      const queueItem = {
+        tempId,
+        courseId,
+        accountId,
+        text,
+        media, // Pass the media data to the queue item for sending
+      };
+
+      // --- Add Optimistic Message AND Queue Item to State ---
+      setState((prevState) => {
+        // Add optimistic message for UI update
+        const currentOptimistic =
+          prevState.optimisticMessages[pendingKey] || [];
+        const updatedOptimistic = {
           ...prevState.optimisticMessages,
           [pendingKey]: [...currentOptimistic, optimisticMessage],
-        },
-      };
-    });
-    // --- End Optimistic Update ---
+        };
 
-    try {
-      // --- API Call ---
-      let response;
-      const requestData = { text, media };
-      const requestParams = {
-        account_id: accountId,
-        course_id: courseId,
-        _account: selectedAccount.id,
-      };
+        // Add item to the sending queue
+        const updatedQueue = [...prevState.messageQueue, queueItem];
 
-      if (selectedAccount.type.toLowerCase() === "enterprise") {
-        response = await request({
-          url: "/notify/v1/enterprise/chats/",
-          params: requestParams,
-          data: requestData,
-          method: "Post",
-        });
-      } else if (
-        String(selectedAccount.type).toLowerCase() === "instructor" &&
-        affiliateAccount
-      ) {
-        response = await request({
-          url: `/notify/v1/instructor/${affiliateAccount}/chats/`,
-          params: requestParams,
-          data: requestData,
-          method: "Post",
-        });
-      } else if (selectedAccount.type.toLowerCase() === "personal") {
-        response = await request({
-          url: `/notify/v1/chats/`,
-          params: requestParams,
-          data: requestData,
-          method: "Post",
-        });
-      } else {
-        throw new Error(
-          "Unsupported account type or configuration for sending messages."
-        );
-      }
-      // --- End API Call ---
+        return {
+          ...prevState,
+          optimisticMessages: updatedOptimistic,
+          messageQueue: updatedQueue,
+        };
+      });
+      // NOTE: The actual API call is deferred to the queue processor effect.
+    },
+    [setState]
+  ); // Dependency: setState
 
-      if (!response?.data) {
-        throw new Error("API request succeeded but returned no data.");
-      }
+  // Effect to process the message queue sequentially using a Ref lock
+  useEffect(() => {
+    // **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;
+    }
 
-      /** @type {SentMessageResponse} */
-      const sentMessageData = response.data;
-      const confirmedRoomId = sentMessageData.room; // The actual Room ID!
-      const confirmedMessageId = sentMessageData.id;
-
-      // --- Format Confirmed Message ---
-      /** @type {ChatMessage} */
-      const newChatMessage = {
-        id: confirmedMessageId,
-        text: sentMessageData.text,
-        media: sentMessageData.media, // Assuming structure compatibility
-        sender: {
-          // Sender info from server response
-          id: sentMessageData.sender.id,
-          first_name:
-            sentMessageData.sender.full_name || sentMessageData.sender.name,
-        },
-        is_read: sentMessageData.is_read,
-        is_delivered: sentMessageData.is_delivered,
-        created_at: sentMessageData.created_at,
-        user_message: sentMessageData.user_message, // Should be true from API
-        date: getLocalDateString(sentMessageData.created_at), // Use helper
-      };
+    // **Claim the processing slot synchronously**
+    isCurrentlyProcessingRef.current = true;
 
-      // --- Update State on Success ---
-      setState((prevState) => {
-        let updatedOptimisticMessages = { ...prevState.optimisticMessages };
-        const updatedChats = { ...prevState.chats };
-        let updatedRoomsByCourses = [...prevState.roomsByCourses];
-
-        // --- 1. Remove Optimistic Message from Pending List ---
-        let optimisticRemoved = false;
-        if (updatedOptimisticMessages[pendingKey]) {
-          const originalPendingList = updatedOptimisticMessages[pendingKey];
-          // Filter out the message by its temporary ID
-          const filteredList = originalPendingList.filter(
-            (msg) => msg.tempId !== tempId
-          );
+    // 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 }));
 
-          if (filteredList.length < originalPendingList.length) {
-            // Check if removal occurred
-            optimisticRemoved = true;
-            if (filteredList.length > 0) {
-              updatedOptimisticMessages[pendingKey] = filteredList; // Update the list
-            } else {
-              delete updatedOptimisticMessages[pendingKey]; // Remove the key if list is empty
-            }
-          }
+    // 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}`;
+
+    // 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)
+        const requestData = { text, media };
+        const requestParams = {
+          account_id: accountId,
+          course_id: courseId,
+          _account: selectedAccount.id,
+        };
+
+        if (selectedAccount.type.toLowerCase() === "enterprise") {
+          response = await request({
+            url: "/notify/v1/enterprise/chats/",
+            params: requestParams,
+            data: requestData,
+            method: "Post",
+          });
+        } else if (
+          String(selectedAccount.type).toLowerCase() === "instructor" &&
+          affiliateAccount
+        ) {
+          response = await request({
+            url: `/notify/v1/instructor/${affiliateAccount}/chats/`,
+            params: requestParams,
+            data: requestData,
+            method: "Post",
+          });
+        } else if (selectedAccount.type.toLowerCase() === "personal") {
+          response = await request({
+            url: `/notify/v1/chats/`,
+            params: requestParams,
+            data: requestData,
+            method: "Post",
+          });
+        } else {
+          throw new Error(
+            "Queue Processor: Unsupported account type or configuration."
+          );
         }
-        if (!optimisticRemoved) {
-          // Log if the message wasn't found (might indicate a race condition or logic issue)
-          console.warn(
-            `Optimistic message tempId ${tempId} not found in ${pendingKey} for removal upon success.`
+        // --- End API Call ---
+
+        if (!response?.data) {
+          throw new Error(
+            "Queue Processor: API request succeeded but returned no data."
           );
         }
 
-        // --- 2. Add Confirmed Message to Chats[roomId] ---
-        const messageDateLabel = getDisplayDateLabel(newChatMessage.date);
-        // Get current history for the confirmed room ID, default to empty array
-        const currentChatHistory = updatedChats[confirmedRoomId] || [];
-        let updatedChatHistory = [...currentChatHistory];
+        // --- Handle SUCCESS ---
+        /** @type {SentMessageResponse} */
+        const sentMessageData = response.data;
+        const confirmedRoomId = sentMessageData.room;
+        const confirmedMessageId = sentMessageData.id;
 
-        // Find if a group for this date already exists
-        let dateGroupIndex = updatedChatHistory.findIndex(
-          (group) => group.date === messageDateLabel
-        );
+        // Format confirmed message
+        /** @type {ChatMessage} */
+        const newChatMessage = {
+          id: confirmedMessageId,
+          text: sentMessageData.text,
+          media: sentMessageData.media,
+          sender: {
+            id: sentMessageData.sender.id,
+            first_name:
+              sentMessageData.sender.full_name || sentMessageData.sender.name,
+          },
+          is_read: sentMessageData.is_read,
+          is_delivered: sentMessageData.is_delivered,
+          created_at: sentMessageData.created_at,
+          user_message: sentMessageData.user_message,
+          date: getLocalDateString(sentMessageData.created_at), // Use existing helper
+        };
 
-        if (dateGroupIndex !== -1) {
-          // Group exists: Add message if it's not already there (e.g., from WebSocket echo)
-          const dateGroup = updatedChatHistory[dateGroupIndex];
-          if (!dateGroup.messages.some((msg) => msg.id === newChatMessage.id)) {
-            // Add and re-sort messages within the group
-            const updatedMessages = [
-              ...dateGroup.messages,
-              newChatMessage,
-            ].sort(
-              (a, b) =>
-                new Date(a.created_at).getTime() -
-                new Date(b.created_at).getTime()
+        // 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.`
             );
-            updatedChatHistory[dateGroupIndex] = {
-              ...dateGroup,
-              messages: updatedMessages,
-            };
+            // Don't modify state if the queue front doesn't match
+            return prevState;
           }
-        } else {
-          // Group doesn't exist: Create new group and add it
-          const newGroup = {
-            date: messageDateLabel,
-            dateString: newChatMessage.date, // Store YYYY-MM-DD for sorting
-            messages: [newChatMessage],
-          };
-          updatedChatHistory.push(newGroup);
-          // Sort the date groups themselves (e.g., "Today" first)
-          updatedChatHistory.sort(
-            (a, b) =>
-              getSortableDateValue(b.date, b.dateString) -
-              getSortableDateValue(a.date, a.dateString)
-          );
-        }
-        // Update the chats object with the modified history for this room
-        updatedChats[confirmedRoomId] = updatedChatHistory;
-
-        // --- 3. Update Room List (roomsByCourses) ---
-        let roomExistsInState = false;
-        updatedRoomsByCourses = updatedRoomsByCourses.map((courseGroup) => {
-          // Check if this is the correct course group first
-          if (String(courseGroup.id) !== String(courseId)) {
-            return courseGroup;
+
+          // 1. Remove optimistic message
+          let updatedOptimisticMessages = { ...prevState.optimisticMessages };
+          if (updatedOptimisticMessages[pendingKey]) {
+            const filteredList = updatedOptimisticMessages[pendingKey].filter(
+              (msg) => msg.tempId !== tempId
+            );
+            if (filteredList.length === 0)
+              delete updatedOptimisticMessages[pendingKey];
+            else updatedOptimisticMessages[pendingKey] = filteredList;
           }
-          // Find the room within this course group
-          const roomIndex = courseGroup.rooms.findIndex(
-            (room) => room.id === confirmedRoomId
+
+          // 2. Add confirmed message to chats
+          const updatedChats = { ...prevState.chats };
+          const messageDateLabel = getDisplayDateLabel(
+            newChatMessage.created_at
+          ); // Use corrected helper
+          const currentChatHistory = updatedChats[confirmedRoomId] || [];
+          let updatedChatHistory = [...currentChatHistory];
+          let dateGroupIndex = updatedChatHistory.findIndex(
+            (g) => g.date === messageDateLabel
           );
-          if (roomIndex !== -1) {
-            roomExistsInState = true; // Mark room as found
-            const updatedRooms = [...courseGroup.rooms];
-            // Update the last message for the found room
-            updatedRooms[roomIndex] = {
-              ...updatedRooms[roomIndex],
-              last_message: {
-                id: newChatMessage.id,
-                text: newChatMessage.text,
-                media: newChatMessage.media, // Use the confirmed media details
-                created_at: newChatMessage.created_at,
-              },
-              // Resetting unread count here might be incorrect if the user isn't viewing the room
-              // Unread count updates should primarily happen on receiving messages or explicit read actions
-            };
-            // Return the updated course group
-            return { ...courseGroup, rooms: updatedRooms };
+
+          if (dateGroupIndex !== -1) {
+            // Add to existing group if not duplicate
+            if (
+              !updatedChatHistory[dateGroupIndex].messages.some(
+                (m) => m.id === newChatMessage.id
+              )
+            ) {
+              updatedChatHistory[dateGroupIndex].messages = [
+                ...updatedChatHistory[dateGroupIndex].messages,
+                newChatMessage,
+              ].sort(
+                (a, b) =>
+                  new Date(a.created_at).getTime() -
+                  new Date(b.created_at).getTime()
+              );
+            }
+          } else {
+            // Create new group
+            updatedChatHistory.push({
+              date: messageDateLabel,
+              messages: [newChatMessage],
+            });
+            updatedChatHistory.sort(
+              (a, b) =>
+                getSortableTimestampForGroup(b) -
+                getSortableTimestampForGroup(a)
+            ); // Use helper
           }
-          // If room not found in this course group, return group unchanged
-          return courseGroup;
-        });
+          updatedChats[confirmedRoomId] = updatedChatHistory;
+
+          // 3. Update roomsByCourses last_message (if room metadata exists)
+          let updatedRoomsByCourses = [...prevState.roomsByCourses];
+          let roomExists = false;
+          updatedRoomsByCourses = updatedRoomsByCourses.map((cg) => {
+            if (String(cg.id) !== String(courseId)) return cg;
+            const roomIdx = cg.rooms.findIndex((r) => r.id === confirmedRoomId);
+            if (roomIdx !== -1) {
+              roomExists = true;
+              const updatedRoom = {
+                ...cg.rooms[roomIdx],
+                last_message: {
+                  id: newChatMessage.id,
+                  text: newChatMessage.text,
+                  media: newChatMessage.media,
+                  created_at: newChatMessage.created_at,
+                },
+              };
+              const updatedRooms = [...cg.rooms];
+              updatedRooms[roomIdx] = updatedRoom;
+              return { ...cg, rooms: updatedRooms };
+            }
+            return cg;
+          });
 
-        // --- 4. Handle Room Not Found / Refetch ---
-        // If the room's metadata wasn't in roomsByCourses, fetch the list again
-        if (!roomExistsInState) {
-          console.log(
-            `Room ${confirmedRoomId} metadata not found in state after sending message, refetching room list.`
-          );
-          // Use setTimeout to defer the call slightly, avoiding potential issues during render
-          setTimeout(() => getMessageRoomsByCourses(null, true), 0);
-        }
+          // 4. Remove processed item from queue (immutable update)
+          const updatedQueue = prevState.messageQueue.slice(1);
 
-        // --- 5. REMOVED Move Logic ---
+          // 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 Final State ---
-        return {
-          ...prevState,
-          chats: updatedChats,
-          optimisticMessages: updatedOptimisticMessages,
-          roomsByCourses: updatedRoomsByCourses,
-        };
-      });
-    } catch (error) {
-      // --- Update State on Failure ---
-      console.error("Failed to send message:", error);
-      setState((prevState) => {
-        const updatedOptimisticMessages = { ...prevState.optimisticMessages };
+          // Return the combined state updates
+          return {
+            ...prevState,
+            optimisticMessages: updatedOptimisticMessages,
+            chats: updatedChats,
+            roomsByCourses: updatedRoomsByCourses,
+            messageQueue: updatedQueue,
+            isProcessingQueue: true, // Keep true until finally block resets it below
+          };
+        });
+      } catch (error) {
+        // --- Handle FAILURE ---
+        console.error(
+          `Queue Processor: Failed to send message tempId ${tempId}:`,
+          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;
+          }
 
-        // Find the optimistic message ONLY in the PENDING list
-        if (updatedOptimisticMessages[pendingKey]) {
-          const messageIndex = updatedOptimisticMessages[pendingKey].findIndex(
-            (msg) => msg.tempId === tempId && msg.status === "pending" // Important: Only update if still pending
-          );
-          if (messageIndex !== -1) {
-            // Update status to failed and store error message
-            updatedOptimisticMessages[pendingKey][messageIndex] = {
-              ...updatedOptimisticMessages[pendingKey][messageIndex],
-              status: "failed",
-              error: error?.message || "Unknown error", // Store simplified error
-            };
+          // 1. Update optimistic message status to 'failed'
+          let updatedOptimisticMessages = { ...prevState.optimisticMessages };
+          if (updatedOptimisticMessages[pendingKey]) {
+            const messageIndex = updatedOptimisticMessages[
+              pendingKey
+            ].findIndex((msg) => msg.tempId === tempId);
+            if (
+              messageIndex !== -1 &&
+              updatedOptimisticMessages[pendingKey][messageIndex].status ===
+                "pending"
+            ) {
+              const failedMessage = {
+                ...updatedOptimisticMessages[pendingKey][messageIndex],
+                status: "failed",
+                error: error?.message || "Unknown error",
+              };
+              const updatedPendingList = [
+                ...updatedOptimisticMessages[pendingKey],
+              ];
+              updatedPendingList[messageIndex] = failedMessage;
+              updatedOptimisticMessages[pendingKey] = updatedPendingList;
+            } else {
+              console.warn(
+                `Queue Processor: Optimistic message tempId ${tempId} in ${pendingKey} not found or not pending for failure update.`
+              );
+            }
           } else {
             console.warn(
-              `Optimistic message tempId ${tempId} in ${pendingKey} not found or not pending for failure update.`
+              `Queue Processor: Pending key ${pendingKey} not found for failure update.`
             );
           }
-        } else {
-          console.warn(
-            `Pending key ${pendingKey} not found for failure update.`
-          );
-        }
 
-        // Return state with updated optimistic message status
-        return {
-          ...prevState,
-          optimisticMessages: updatedOptimisticMessages,
-        };
-      });
-      // Optionally re-throw or handle the error further (e.g., show notification)
-    }
-  }; // End sendMessage
+          // 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: true, // Keep true until finally block resets it below
+          };
+        });
+      } finally {
+        // --- Finish Processing ---
+        // **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 for the current item.
+    processMessage();
+
+    // 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,
+  ]);
 
   /**
    * Retrieves combined confirmed and optimistic messages for a specific chat,
@@ -1017,23 +1160,22 @@ const useMessageKit = (/*affiliatesActive*/) => {
 
       // --- 3. Get Optimistic Messages (ONLY from pendingKey) ---
       const uniqueOptimisticMessages = state.optimisticMessages[pendingKey]
-        ? [...state.optimisticMessages[pendingKey]] // Get a copy to avoid mutation issues
+        ? [...state.optimisticMessages[pendingKey]] // Get a copy
         : [];
 
       // --- 4. Adapt Optimistic Messages to a structure suitable for sorting/grouping ---
       //    (Does NOT add 'sender')
       const adaptedOptimisticMessages = uniqueOptimisticMessages.map(
         (optMsg) => ({
-          // Use tempId as the unique identifier
           id: optMsg.tempId,
           text: optMsg.text,
-          media: optMsg.media,
-          // NO SENDER FIELD on adapted optimistic messages
-          is_read: false, // Implicitly false
-          is_delivered: false, // Implicitly false
+          media: optMsg.media, // The original media reference stored in optimistic state
+          // NO SENDER FIELD added here
+          is_read: false,
+          is_delivered: false,
           created_at: optMsg.created_at, // Client timestamp
           user_message: optMsg.user_message, // Always true
-          date: getLocalDateString(optMsg.created_at), // Use helper
+          date: getLocalDateString(optMsg.created_at), // Use helper for basic date info
           // Add optimistic-specific fields for UI:
           status: optMsg.status, // 'pending' or 'failed'
           error: optMsg.error, // Error message if failed
@@ -1042,64 +1184,50 @@ const useMessageKit = (/*affiliatesActive*/) => {
       );
 
       // --- 5. Combine and Sort All Messages ---
-      // The combined list contains confirmed ChatMessages (with sender)
-      // and adapted optimistic messages (without sender)
       const combinedFlatMessages = [
         ...confirmedFlatMessages,
         ...adaptedOptimisticMessages,
       ];
       combinedFlatMessages.sort((a, b) => {
-        // Sort primarily by creation timestamp using getTime() for reliable number comparison
-        const dateA = new Date(a.created_at);
-        const dateB = new Date(b.created_at);
-        const timeA = !isNaN(dateA.getTime()) ? dateA.getTime() : 0; // Handle potential invalid dates
-        const timeB = !isNaN(dateB.getTime()) ? dateB.getTime() : 0;
-
-        if (timeA !== timeB) {
-          return timeA - timeB; // Ascending time order
-        }
-        // If timestamps are identical (rare), maintain relative order or rely on stable sort.
-        return 0;
+        const timeA = new Date(a.created_at).getTime();
+        const timeB = new Date(b.created_at).getTime();
+        // Handle potential NaN from invalid dates
+        return (isNaN(timeA) ? 0 : timeA) - (isNaN(timeB) ? 0 : timeB);
       });
 
       // --- 6. Regroup Sorted Messages by Date ---
-      /** @type {Record<string, { date: string; dateString: string; messages: any[] }>} */
+      /** @type {Record<string, { date: string; messages: any[] }>} */
       const groupedMessages = {};
 
       combinedFlatMessages.forEach((message) => {
-        // Use the pre-calculated date string (YYYY-MM-DD)
-        const dateString = message.date;
-        if (!dateString) {
-          // Safety check
-          console.warn("Message missing date string for grouping:", message);
-          return; // Skip messages without a valid date string
+        // Use the corrected helper with the full timestamp
+        const displayLabel = getDisplayDateLabel(message.created_at);
+        if (
+          !displayLabel ||
+          displayLabel === "Unknown Date" ||
+          displayLabel === "Invalid Date" ||
+          displayLabel === "Error Date"
+        ) {
+          console.warn("Skipping message due to invalid date label:", message);
+          return;
         }
-        // Get the display label ("Today", "Yesterday", "Apr 06")
-        const displayLabel = getDisplayDateLabel(dateString);
 
-        // Initialize group if it doesn't exist
         if (!groupedMessages[displayLabel]) {
           groupedMessages[displayLabel] = {
-            date: displayLabel, // The display label
-            dateString: dateString, // The underlying YYYY-MM-DD string
+            date: displayLabel, // The display label (e.g., "Today")
             messages: [],
           };
         }
-        // Add the message (with or without sender property) to the correct group
         groupedMessages[displayLabel].messages.push(message);
       });
 
-      // Convert the grouped object back into an array of groups
-      const finalGroupedArray = Object.values(groupedMessages)
-        // Sort the groups themselves (e.g., Today first, then Yesterday, then older dates)
-        .sort(
-          (a, b) =>
-            getSortableDateValue(b.date, b.dateString) -
-            getSortableDateValue(a.date, a.dateString)
-        );
+      // Convert grouped object back to array and sort the groups using timestamps
+      const finalGroupedArray = Object.values(groupedMessages).sort(
+        (a, b) =>
+          getSortableTimestampForGroup(b) - getSortableTimestampForGroup(a)
+      ); // Descending date order
 
-      // Ensure messages *within* each final group are sorted chronologically
-      // This should be guaranteed by step 5, but double-checking is safe.
+      // Ensure messages *within* each final group are sorted (redundant but safe)
       finalGroupedArray.forEach((group) => {
         group.messages.sort(
           (a, b) =>
@@ -1107,27 +1235,26 @@ const useMessageKit = (/*affiliatesActive*/) => {
         );
       });
 
-      // Return the final array structure expected by the UI
-      return finalGroupedArray; // Array of { date: string, dateString: string, messages: any[] }
+      return finalGroupedArray; // Array of { date: string, messages: any[] }
     },
     [state.chats, state.optimisticMessages]
-  ); // Dependencies
+  ); // Dependencies: only needs state parts used
 
   // Helper to get a sortable value from a display date label
-  const getSortableDateValue = (displayLabel, dateString) => {
-    if (!dateString) return 0; // Handle undefined/null dateString
-    if (displayLabel === "Today") return 2; // Highest priority
-    if (displayLabel === "Yesterday") return 1; // Next highest
-    // For specific dates, return the negative timestamp for descending sort
-    try {
-      const date = new Date(dateString + "T00:00:00Z"); // Use UTC base
-      if (isNaN(date.getTime())) return 0; // Low priority if invalid
-      // Older dates have smaller negative numbers (larger positive time), leading to descending sort
-      return -date.getTime();
-    } catch {
-      return 0; // Fallback for errors
-    }
-  };
+  // const getSortableDateValue = (displayLabel, dateString) => {
+  //   if (!dateString) return 0; // Handle undefined/null dateString
+  //   if (displayLabel === "Today") return 2; // Highest priority
+  //   if (displayLabel === "Yesterday") return 1; // Next highest
+  //   // For specific dates, return the negative timestamp for descending sort
+  //   try {
+  //     const date = new Date(dateString + "T00:00:00Z"); // Use UTC base
+  //     if (isNaN(date.getTime())) return 0; // Low priority if invalid
+  //     // Older dates have smaller negative numbers (larger positive time), leading to descending sort
+  //     return -date.getTime();
+  //   } catch {
+  //     return 0; // Fallback for errors
+  //   }
+  // };
 
   const pinRoom = async (roomId) => {
     // Optimistic update