l-min-components 1.6.1259 → 1.6.1263

package/package.json

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

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

@@ -211,6 +211,21 @@ import sound from "./new-notification-7-210334.mp3";
  * @property {WebSocketMessageData} data - The payload containing the message details.
  */
 
+/**
+ * Represents an optimistic message before server confirmation.
+ * Minimal version without sender info stored directly.
+ * @typedef {object} OptimisticMessage
+ * @property {string} tempId - Client-generated unique temporary ID (e.g., UUID v4).
+ * @property {'pending' | 'failed'} status - The current status of the optimistic message.
+ * @property {string} courseId - The course ID associated with the message. Used for grouping pending.
+ * @property {string} accountId - The target account ID associated with the message. Used for grouping pending.
+ * @property {string | null} text - Message text.
+ * @property {any | null} media - Media object/data sent by the user (structure might vary).
+ * @property {string} created_at - Client-side ISO 8601 timestamp string when the message was initiated.
+ * @property {boolean} user_message - Always true for optimistic messages.
+ * @property {any | null} error - Stores error info if status is 'failed'.
+ */
+
 const useMessageKit = (/*affiliatesActive*/) => {
   const cookieGrabber = (key = "") => {
     const cookies = document.cookie;
@@ -276,11 +291,21 @@ const useMessageKit = (/*affiliatesActive*/) => {
    * @property {Record<string, RoomChatHistory>} stateTuple[0].chats - An object mapping Room IDs (string keys) to their respective chat history (`RoomChatHistory` objects).
    * Example structure: { "roomId123": { results: [...] }, "roomId456": { results: [...] } }
    */
+
+  // initialize message store
   const [state, setState] = useState({
     roomsByCourses: [],
-    chats: {},
-    loadingRoomIds: new Set(), // Track which rooms are currently loading
+    chats: {}, // Maps roomId -> RoomChatHistory (MessagesByDate[])
+    loadingRoomIds: new Set(),
+    /**
+     * Stores optimistic messages sent by the user but not yet confirmed.
+     * Key: `pending_${courseId}_${accountId}`
+     * Value: OptimisticMessage[]
+     * @type {Record<string, OptimisticMessage[]>}
+     */
+    optimisticMessages: {},
   });
+
   // State for rooms that should be automatically marked as read
   const [autoReadRoomIds, setAutoReadRoomIds] = useState(() => new Set());
 
@@ -626,236 +651,482 @@ const useMessageKit = (/*affiliatesActive*/) => {
   }, []);
   // --- End functions to manage auto-read rooms ---
 
-  // sending messages
-  const sendMessage = async ({ text, media, courseId, accountId }) => {
-    let response;
-    if (selectedAccount.type.toLowerCase() === "enterprise") {
-      response = await request({
-        url: "/notify/v1/enterprise/chats/",
-        params: {
-          account_id: accountId,
-          course_id: courseId,
-          _account: selectedAccount.id,
-        },
-        data: {
-          text,
-          media,
-        },
-        method: "Post",
-      });
-    }
-    if (
-      String(selectedAccount.type).toLowerCase() === "instructor" &&
-      affiliateAccount
-      //  &&
-      // affiliatesActive
-    ) {
-      response = await request({
-        url: `/notify/v1/instructor/${affiliateAccount}/chats/`,
-        params: {
-          account_id: accountId,
-          course_id: courseId,
-          _account: selectedAccount.id,
-        },
-        data: {
-          text,
-          media,
-        },
-        method: "Post",
-      });
-    }
-    if (selectedAccount.type.toLowerCase() === "personal") {
-      response = await request({
-        url: `/notify/v1/chats/`,
-        params: {
-          _account: selectedAccount.id,
-          course_id: courseId,
-          account_id: accountId,
-        },
-        data: {
-          text,
-          media,
-        },
-        method: "Post",
-      });
+  // Helper to get YYYY-MM-DD (ensure consistency)
+  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");
+      }
+      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");
+      const day = String(today.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
     }
+  };
 
-    if (!response?.data) return; // Added optional chaining for safety
+  // 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";
 
-    /** @type {SentMessageResponse} */
-    const sentMessageData = response.data;
-    const roomId = sentMessageData.room;
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
 
-    // --- 1. Format the new message into ChatMessage structure ---
-    // Helper to get YYYY-MM-DD from ISO string
-    const getLocalDateString = (isoTimestamp) => {
-      if (!isoTimestamp) return new Date().toISOString().split("T")[0]; // Fallback
-      try {
-        return new Date(isoTimestamp).toISOString().split("T")[0];
-      } catch (e) {
-        console.error("Error parsing date:", e);
-        return new Date().toISOString().split("T")[0]; // Fallback
+    // Use UTC dates for comparison to avoid timezone issues affecting "Today"/"Yesterday" logic
+    const todayUtcString = getLocalDateString(today.toISOString());
+    const yesterdayUtcString = getLocalDateString(yesterday.toISOString());
+
+    if (dateString === todayUtcString) {
+      return "Today";
+    }
+    if (dateString === yesterdayUtcString) {
+      return "Yesterday";
+    }
+
+    // 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
       }
-    };
+      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
+    }
+  };
 
-    /** @type {ChatMessage} */
-    const newChatMessage = {
-      id: sentMessageData.id,
-      text: sentMessageData.text,
-      // Map media - assuming SentMessageMedia is compatible enough or ChatMessage.media allows it
-      media: sentMessageData.media,
-      sender: {
-        // Map sender info
-        id: sentMessageData.sender.id,
-        first_name:
-          sentMessageData.sender.full_name || sentMessageData.sender.name, // Use full_name or name
-      },
-      is_read: sentMessageData.is_read,
-      is_delivered: sentMessageData.is_delivered,
-      created_at: sentMessageData.created_at,
-      user_message: sentMessageData.user_message, // Should be true
-      date: getLocalDateString(sentMessageData.created_at), // Extract YYYY-MM-DD
+  //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,
     };
 
-    // --- 2. Update State ---
+    // --- Store Optimistic Message using pendingKey ---
     setState((prevState) => {
-      // --- Check if room exists before updating state ---
-      let roomExistsInState = false;
-      for (const courseGroup of prevState.roomsByCourses) {
-        if (courseGroup.rooms.some((room) => room.id === roomId)) {
-          roomExistsInState = true;
-          break;
-        }
-      }
+      const currentOptimistic = prevState.optimisticMessages[pendingKey] || [];
+      return {
+        ...prevState,
+        optimisticMessages: {
+          ...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,
+      };
 
-      // If room doesn't exist, fetch rooms and skip this state update
-      if (!roomExistsInState) {
-        console.log(
-          `Room ${roomId} not found in state after sending message, refetching room list.`
+      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."
         );
-        getMessageRoomsByCourses(null, true); // Fetch room list
+      }
+      // --- End API Call ---
 
-        // --- Update chats state even if room metadata isn't found yet ---
-        const chatHistoryForMissingRoom = prevState.chats[roomId] || [];
-        let updatedChatHistoryForMissingRoom = [...chatHistoryForMissingRoom];
-        const todayDateStringForMissing = "today"; // Assume API uses "today"
+      if (!response?.data) {
+        throw new Error("API request succeeded but returned no data.");
+      }
 
-        const todayGroupIndexForMissing =
-          updatedChatHistoryForMissingRoom.findIndex(
-            (group) => group.date === todayDateStringForMissing
+      /** @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
+      };
+
+      // --- 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
           );
 
-        if (todayGroupIndexForMissing !== -1) {
-          const todayGroup =
-            updatedChatHistoryForMissingRoom[todayGroupIndexForMissing];
-          if (
-            !todayGroup.messages.some((msg) => msg.id === newChatMessage.id)
-          ) {
-            const updatedTodayGroup = {
-              ...todayGroup,
-              messages: [...todayGroup.messages, newChatMessage],
-            };
-            updatedChatHistoryForMissingRoom.splice(
-              todayGroupIndexForMissing,
-              1,
-              updatedTodayGroup
-            );
+          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
+            }
           }
-        } else {
-          const newTodayGroup = {
-            date: todayDateStringForMissing,
-            messages: [newChatMessage],
-          };
-          updatedChatHistoryForMissingRoom = [
-            newTodayGroup,
-            ...updatedChatHistoryForMissingRoom,
-          ];
+        }
+        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.`
+          );
         }
 
-        const updatedChatsOnly = {
-          ...prevState.chats,
-          [roomId]: updatedChatHistoryForMissingRoom,
-        };
-
-        // Return state with only chats updated, roomsByCourses will update after fetch
-        return { ...prevState, chats: updatedChatsOnly };
-      }
-
-      // --- Room exists, proceed with updates for both chats and roomsByCourses ---
-      // --- 2a. Update chats state ---
-      const currentChatHistory = prevState.chats[roomId] || [];
-      let updatedChatHistory = [...currentChatHistory];
-      const todayDateString = "today"; // Assume API uses "today" for current day
+        // --- 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];
 
-      const todayGroupIndex = updatedChatHistory.findIndex(
-        (group) => group.date === todayDateString
-      );
+        // Find if a group for this date already exists
+        let dateGroupIndex = updatedChatHistory.findIndex(
+          (group) => group.date === messageDateLabel
+        );
 
-      if (todayGroupIndex !== -1) {
-        // "today" group exists, add message to it
-        const todayGroup = updatedChatHistory[todayGroupIndex];
-        // Avoid adding duplicates if WS sends the same message back
-        if (!todayGroup.messages.some((msg) => msg.id === newChatMessage.id)) {
-          const updatedTodayGroup = {
-            ...todayGroup,
-            messages: [...todayGroup.messages, newChatMessage], // Add new message
+        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()
+            );
+            updatedChatHistory[dateGroupIndex] = {
+              ...dateGroup,
+              messages: updatedMessages,
+            };
+          }
+        } 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],
           };
-          // Replace the old group with the updated one
-          updatedChatHistory.splice(todayGroupIndex, 1, updatedTodayGroup);
+          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)
+          );
         }
-      } else {
-        // "today" group doesn't exist, create it and add to the beginning
-        const newTodayGroup = {
-          date: todayDateString,
-          messages: [newChatMessage],
-        };
-        // Prepend the new group instead of pushing to the end
-        updatedChatHistory = [newTodayGroup, ...updatedChatHistory];
-      }
-
-      const updatedChats = {
-        ...prevState.chats,
-        [roomId]: updatedChatHistory,
-      };
-
-      // --- 2b. Update roomsByCourses state ---
-      const updatedRoomsByCourses = prevState.roomsByCourses.map(
-        (courseGroup) => {
+        // 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;
+          }
+          // Find the room within this course group
           const roomIndex = courseGroup.rooms.findIndex(
-            (room) => room.id === roomId
+            (room) => room.id === confirmedRoomId
           );
           if (roomIndex !== -1) {
-            // Found the room, update its last_message
+            roomExistsInState = true; // Mark room as found
             const updatedRooms = [...courseGroup.rooms];
+            // Update the last message for the found room
             updatedRooms[roomIndex] = {
               ...updatedRooms[roomIndex],
               last_message: {
-                // Format according to LastMessage type
                 id: newChatMessage.id,
                 text: newChatMessage.text,
-                media: newChatMessage.media, // Assuming structure is compatible enough
+                media: newChatMessage.media, // Use the confirmed media details
                 created_at: newChatMessage.created_at,
               },
-              // Optionally increment unread_count if it's for the *other* user,
-              // but typically the sender doesn't increment their own unread count.
-              // unread_count: updatedRooms[roomIndex].unread_count + (newChatMessage.user_message ? 0 : 1)
+              // 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 };
           }
-          return courseGroup; // Return unchanged if room not in this group
+          // If room not found in this course group, return group unchanged
+          return courseGroup;
+        });
+
+        // --- 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);
         }
+
+        // --- 5. REMOVED Move Logic ---
+
+        // --- 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 };
+
+        // 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
+            };
+          } else {
+            console.warn(
+              `Optimistic message tempId ${tempId} in ${pendingKey} not found or not pending 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
+
+  /**
+   * Retrieves combined confirmed and optimistic messages for a specific chat,
+   * sorted chronologically and grouped by date.
+   * Optimistic messages in the output will NOT have a 'sender' property.
+   *
+   * @param {string | null} roomId - The ID of the room (if known). Used ONLY for retrieving confirmed messages.
+   * @param {string} courseId - The course ID associated with the chat. REQUIRED for finding optimistic messages.
+   * @param {string} accountId - The account ID of the other participant. REQUIRED for finding optimistic messages.
+   * @returns {MessagesByDate[]} An array of message groups. Confirmed messages will have a 'sender', optimistic messages will not.
+   */
+  const getMessagesForRoom = useCallback(
+    (roomId, courseId, accountId) => {
+      // --- 1. Determine Keys ---
+      const chatKey = roomId; // Key for confirmed messages (state.chats)
+      const pendingKey = `pending_${courseId}_${accountId}`; // Key for ALL optimistic messages for this pair
+
+      // --- 2. Get Confirmed Messages (using roomId if provided) ---
+      const confirmedDateGroups =
+        chatKey && state.chats[chatKey] ? state.chats[chatKey] : [];
+      // Confirmed messages already have the correct ChatMessage structure (including sender)
+      const confirmedFlatMessages = confirmedDateGroups.flatMap(
+        (group) => group.messages
       );
 
-      // --- Return combined state update ---
-      return {
-        ...prevState,
-        chats: updatedChats,
-        roomsByCourses: updatedRoomsByCourses,
-      };
-    });
+      // --- 3. Get Optimistic Messages (ONLY from pendingKey) ---
+      const uniqueOptimisticMessages = state.optimisticMessages[pendingKey]
+        ? [...state.optimisticMessages[pendingKey]] // Get a copy to avoid mutation issues
+        : [];
+
+      // --- 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
+          created_at: optMsg.created_at, // Client timestamp
+          user_message: optMsg.user_message, // Always true
+          date: getLocalDateString(optMsg.created_at), // Use helper
+          // Add optimistic-specific fields for UI:
+          status: optMsg.status, // 'pending' or 'failed'
+          error: optMsg.error, // Error message if failed
+          tempId: optMsg.tempId, // Keep tempId for keys or retry logic
+        })
+      );
+
+      // --- 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;
+      });
+
+      // --- 6. Regroup Sorted Messages by Date ---
+      /** @type {Record<string, { date: string; dateString: 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
+        }
+        // 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
+            messages: [],
+          };
+        }
+        // Add the message (with or without sender property) to the correct group
+        groupedMessages[displayLabel].messages.push(message);
+      });
 
-    // Optional: Maybe trigger readRoomMessages if the user sends a message?
-    // await readRoomMessages(newChatMessage.id); // Depends on desired logic
+      // 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)
+        );
+
+      // Ensure messages *within* each final group are sorted chronologically
+      // This should be guaranteed by step 5, but double-checking is safe.
+      finalGroupedArray.forEach((group) => {
+        group.messages.sort(
+          (a, b) =>
+            new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+        );
+      });
+
+      // Return the final array structure expected by the UI
+      return finalGroupedArray; // Array of { date: string, dateString: string, messages: any[] }
+    },
+    [state.chats, state.optimisticMessages]
+  ); // Dependencies
+
+  // 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 pinRoom = async (roomId) => {
@@ -1058,14 +1329,17 @@ const useMessageKit = (/*affiliatesActive*/) => {
       //   latestMessageId: "57e31128214a4269be8b9e3bb18495c4",
       //   roomId: "5be9b48281ac4c2885d3b719654ed59d",
       // });
-      // sendMessage({
-      //   text: "automated message",
+      // await sendMessage({
+      //   text: "automated message v2",
       //   courseId: "878",
-      //   accountId: "d9b0c6ab4e",
+      //   accountId: "24dbaeede1",
       // });
     })();
   }, []); // Rerun when selectedAccount changes
-
+  // console.log(
+  //   getMessagesForRoom("5be9b48281ac4c2885d3b719654ed59d", "878", "24dbaeede1"),
+  //   "hold versions"
+  // );
   // --- Handle Incoming WebSocket Messages ---
   useEffect(() => {
     const socket = new WebSocket(buildSocketUrl());
@@ -1275,6 +1549,7 @@ const useMessageKit = (/*affiliatesActive*/) => {
     reportChat,
     // Helper method to check if a specific room is loading
     isRoomLoading: (roomId) => state.loadingRoomIds.has(roomId),
+    getMessagesForRoom,
   };
 };