@messenger-box/platform-mobile 10.0.3-alpha.18 → 10.0.3-alpha.20

package/lib/screens/inbox/containers/ThreadConversationView.js

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useCallback,useEffect,useMemo}from'react';import {Button,Box,Spinner,Text,VStack,HStack,Avatar,AvatarFallbackText,AvatarImage,Center,Image}from'@admin-layout/gluestack-ui-mobile';import {Platform,SafeAreaView,Linking,View,TouchableHighlight}from'react-native';import {useRoute,useNavigation,useFocusEffect}from'@react-navigation/native';import {useSelector}from'react-redux';import {startCase,uniqBy}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {MaterialIcons,Ionicons,MaterialCommunityIcons}from'@expo/vector-icons';import {GiftedChat,Actions as Actions$1,InputToolbar,Send}from'react-native-gifted-chat';import'common';import {useCreatePostThreadMutation,useSendExpoNotificationOnPostMutation,useGetPostThreadLazyQuery,OnThreadChatMessageAddedDocument}from'common/graphql';import {useUploadFilesNative}from'@messenger-box/platform-client';import {objectId}from'@messenger-box/core';import {format,isToday,isYesterday}from'date-fns';import {userSelector}from'@adminide-stack/user-auth0-client';import {config}from'../config/config.js';import Message from'../components/SlackMessageContainer/SlackMessage.js';import ImageViewerModal from'../components/SlackMessageContainer/ImageViewerModal.js';import CachedImage from'../components/CachedImage/index.js';import colors from'tailwindcss/colors';import {Actions,BaseState,MainState}from'./workflow/thread-conversation-xstate.js';var __defProp = Object.defineProperty;
+import React__default,{useState,useRef,useCallback,useEffect,useMemo}from'react';import {Button,Box,Spinner,Text,HStack,VStack,Avatar,AvatarFallbackText,AvatarImage,Center,Image}from'@admin-layout/gluestack-ui-mobile';import {Platform,SafeAreaView,TouchableHighlight,Alert,Linking,View}from'react-native';import {useRoute,useNavigation,useFocusEffect}from'@react-navigation/native';import {useSelector}from'react-redux';import {orderBy,startCase,uniqBy}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {MaterialIcons,Ionicons,MaterialCommunityIcons}from'@expo/vector-icons';import {GiftedChat,Actions as Actions$1,InputToolbar,Send}from'react-native-gifted-chat';import'common';import {useCreatePostThreadMutation,useSendExpoNotificationOnPostMutation,useGetPostThreadLazyQuery,OnThreadChatMessageAddedDocument}from'common/graphql';import {useUploadFilesNative}from'@messenger-box/platform-client';import {objectId}from'@messenger-box/core';import {format,isToday,isYesterday}from'date-fns';import {userSelector}from'@adminide-stack/user-auth0-client';import {config}from'../config/config.js';import Message from'../components/SlackMessageContainer/SlackMessage.js';import ImageViewerModal from'../components/SlackMessageContainer/ImageViewerModal.js';import CachedImage from'../components/CachedImage/index.js';import colors from'tailwindcss/colors';import {Actions,BaseState,MainState}from'./workflow/thread-conversation-xstate.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -27,12 +27,22 @@ const {
 const createdAtText = (value) => {
   if (!value)
     return "";
-  let date = new Date(value);
-  if (isToday(date))
-    return "Today";
-  if (isYesterday(date))
-    return "Yesterday";
-  return format(new Date(value), "MMM dd, yyyy");
+  try {
+    const timestamp = new Date(value).getTime();
+    if (isNaN(timestamp)) {
+      console.warn(`Invalid date value in createdAtText: ${value}`);
+      return "Unknown date";
+    }
+    let date = new Date(value);
+    if (isToday(date))
+      return "Today";
+    if (isYesterday(date))
+      return "Yesterday";
+    return format(date, "MMM dd, yyyy");
+  } catch (error) {
+    console.error(`Error processing date in createdAtText: ${value}`, error);
+    return "Unknown date";
+  }
 };
 function useSafeMachine(machine) {
   const [state, setState] = useState({
@@ -138,11 +148,15 @@ function useSafeMachine(machine) {
           })
         }));
       } else if (event.type === Actions.STOP_LOADING) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: false
-          })
-        }));
+        setState((prev) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              loading: false,
+              loadingOldMessages: ((_a2 = event.data) == null ? void 0 : _a2.loadingOldMessages) === false ? false : prev.context.loadingOldMessages
+            })
+          });
+        });
       } else if (event.type === Actions.SEND_THREAD_MESSAGE) {
         console.log("Sending message event with text:", (_a = event.data) == null ? void 0 : _a.messageText);
         setState((prev) => {
@@ -202,14 +216,52 @@ function useSafeMachine(machine) {
         });
       } else if (event.type === "FETCH_MORE_MESSAGES_SUCCESS") {
         setState((prev) => {
-          var _a2;
+          var _a2, _b2;
           const newMessages = ((_a2 = event.data) == null ? void 0 : _a2.messages) || [];
+          const apiTotalCount = (_b2 = event.data) == null ? void 0 : _b2.totalCount;
+          console.log(`Merging ${newMessages.length} older messages with ${prev.context.threadMessages.length} existing messages`);
+          if (newMessages.length > 0) {
+            try {
+              console.log("First new message date:", !isNaN(new Date(newMessages[0].createdAt).getTime()) ? new Date(newMessages[0].createdAt).toISOString() : "Invalid date");
+              console.log("Last new message date:", !isNaN(new Date(newMessages[newMessages.length - 1].createdAt).getTime()) ? new Date(newMessages[newMessages.length - 1].createdAt).toISOString() : "Invalid date");
+            } catch (error) {
+              console.error("Error logging new message dates:", error);
+            }
+          }
+          if (prev.context.threadMessages.length > 0) {
+            try {
+              console.log("First existing message date:", !isNaN(new Date(prev.context.threadMessages[0].createdAt).getTime()) ? new Date(prev.context.threadMessages[0].createdAt).toISOString() : "Invalid date");
+              console.log("Last existing message date:", !isNaN(new Date(prev.context.threadMessages[prev.context.threadMessages.length - 1].createdAt).getTime()) ? new Date(prev.context.threadMessages[prev.context.threadMessages.length - 1].createdAt).toISOString() : "Invalid date");
+            } catch (error) {
+              console.error("Error logging existing message dates:", error);
+            }
+          }
+          if (newMessages.length === 0 && prev.context.totalCount > prev.context.threadMessages.length) {
+            console.log("No new messages found despite totalCount indicating more should exist");
+            return __spreadProps(__spreadValues({}, prev), {
+              context: __spreadProps(__spreadValues({}, prev.context), {
+                loadingOldMessages: false,
+                totalCount: prev.context.threadMessages.length
+              }),
+              value: "active"
+            });
+          }
+          const combinedMessages = uniqBy([...prev.context.threadMessages, ...newMessages], "id");
+          const sortedMessages = orderBy(combinedMessages, [(msg) => {
+            try {
+              return !isNaN(new Date(msg.createdAt).getTime()) ? new Date(msg.createdAt).getTime() : 0;
+            } catch (error) {
+              console.error(`Error sorting message by date: ${msg.id}`, error);
+              return 0;
+            }
+          }], ["desc"]);
+          const newTotalCount = typeof apiTotalCount === "number" ? apiTotalCount : Math.max(sortedMessages.length, prev.context.totalCount);
+          console.log(`Total messages after merge and sort: ${sortedMessages.length}, totalCount: ${newTotalCount}`);
           return __spreadProps(__spreadValues({}, prev), {
             context: __spreadProps(__spreadValues({}, prev.context), {
               loadingOldMessages: false,
-              threadMessages: uniqBy([...prev.context.threadMessages, ...newMessages], ({
-                id
-              }) => id)
+              threadMessages: sortedMessages,
+              totalCount: newTotalCount
             }),
             value: "active"
           });
@@ -246,7 +298,7 @@ const ThreadConversationViewComponent = ({
   isPostParentIdThread,
   role
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const {
     params
   } = useRoute();
@@ -314,11 +366,64 @@ const ThreadConversationViewComponent = ({
   }] = useGetPostThreadLazyQuery({
     fetchPolicy: "cache-and-network"
   });
+  const forceRefreshMessages = useCallback(() => {
+    console.log("Force refreshing all messages");
+    safeSend({
+      type: Actions.CLEAR_MESSAGES
+    });
+    if (channelId && parentId) {
+      safeSend({
+        type: Actions.START_LOADING,
+        data: {
+          loading: true
+        }
+      });
+      getThreadMessages({
+        variables: {
+          channelId: channelId == null ? void 0 : channelId.toString(),
+          role: role == null ? void 0 : role.toString(),
+          postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString(),
+          selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
+          limit: 50
+        }
+      }).then(({
+        data: data2
+      }) => {
+        var _a2, _b2, _c2;
+        if (data2 == null ? void 0 : data2.getPostThread) {
+          const threads = data2.getPostThread;
+          const threadPost = (_a2 = threads == null ? void 0 : threads.post) != null ? _a2 : [];
+          const threadReplies = (_b2 = threads == null ? void 0 : threads.replies) != null ? _b2 : [];
+          const messageTotalCount = (_c2 = threads == null ? void 0 : threads.replyCount) != null ? _c2 : 0;
+          const messages = [...threadReplies];
+          console.log(`Force refresh complete. Got ${messages.length} messages of ${messageTotalCount} total`);
+          safeSend({
+            type: Actions.SET_THREAD_MESSAGES,
+            data: {
+              messages,
+              totalCount: messageTotalCount,
+              threadPost,
+              postThread: threads
+            }
+          });
+        }
+      }).catch((error) => {
+        console.error("Error during force refresh:", error);
+        safeSend({
+          type: "ERROR",
+          data: {
+            message: error.message
+          }
+        });
+      });
+    }
+  }, [channelId, parentId, getThreadMessages, safeSend]);
   useFocusEffect(React__default.useCallback(() => {
     var _a2;
     navigation.setOptions({
       title: (_a2 = params == null ? void 0 : params.title) != null ? _a2 : "Thread",
-      headerLeft: (props) => /* @__PURE__ */ React__default.createElement(Button, { className: "bg-transparent active:bg-gray-200 ", onPress: () => navigation.goBack() }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { size: 20, name: "arrow-back-ios", color: "black" }))
+      headerLeft: (props) => /* @__PURE__ */ React__default.createElement(Button, { className: "bg-transparent active:bg-gray-200 ", onPress: () => navigation.goBack() }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { size: 20, name: "arrow-back-ios", color: "black" })),
+      headerRight: () => /* @__PURE__ */ React__default.createElement(Button, { className: "bg-transparent active:bg-gray-200 mr-2", onPress: forceRefreshMessages }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { size: 20, name: "refresh", color: "black" }))
     });
     if (channelId && postParentId) {
       safeSend({
@@ -336,7 +441,7 @@ const ThreadConversationViewComponent = ({
         type: Actions.CLEAR_MESSAGES
       });
     };
-  }, [postParentId]));
+  }, [postParentId, forceRefreshMessages]));
   useEffect(() => {
     if (safeMatches(BaseState.FetchThreadMessages)) {
       fetchThreadMessages();
@@ -363,13 +468,14 @@ const ThreadConversationViewComponent = ({
   }, [state.value]);
   const fetchThreadMessages = useCallback(() => {
     if (channelId && parentId) {
+      console.log("Initial fetch of thread messages using larger limit (50)");
       getThreadMessages({
         variables: {
           channelId: channelId == null ? void 0 : channelId.toString(),
           role: role == null ? void 0 : role.toString(),
           postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString(),
           selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
-          limit: MESSAGES_PER_PAGE
+          limit: 50
         }
       }).then(({
         data: data2
@@ -381,6 +487,7 @@ const ThreadConversationViewComponent = ({
           const threadReplies = (_b2 = threads == null ? void 0 : threads.replies) != null ? _b2 : [];
           const messageTotalCount = (_c2 = threads == null ? void 0 : threads.replyCount) != null ? _c2 : 0;
           const messages = [...threadReplies];
+          console.log(`Initial fetch complete. Got ${messages.length} messages of ${messageTotalCount} total`);
           safeSend({
             type: Actions.SET_THREAD_MESSAGES,
             data: {
@@ -427,6 +534,54 @@ const ThreadConversationViewComponent = ({
       });
     }
   }, [safeContextProperty("selectedImage")]);
+  React__default.useEffect(() => {
+    const isLoading = safeContextProperty("loadingOldMessages", false);
+    if (isLoading) {
+      console.log("Message loading timeout safety started");
+      const timeoutId = setTimeout(() => {
+        if (safeContextProperty("loadingOldMessages", false)) {
+          console.log("Message loading timed out - resetting state");
+          safeSend({
+            type: Actions.STOP_LOADING,
+            data: {
+              loadingOldMessages: false
+            }
+          });
+        }
+      }, 1e4);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [safeContextProperty("loadingOldMessages")]);
+  const failedLoadAttemptsRef = useRef(0);
+  const registerLoadAttemptResult = useCallback((success) => {
+    if (!success) {
+      failedLoadAttemptsRef.current += 1;
+      console.log(`Failed load attempt registered, count: ${failedLoadAttemptsRef.current}`);
+    } else {
+      failedLoadAttemptsRef.current = 0;
+    }
+  }, []);
+  React__default.useEffect(() => {
+    const isLoading = safeContextProperty("loadingOldMessages", false);
+    const totalCount = safeContextProperty("totalCount", 0);
+    const messagesCount = safeContextProperty("threadMessages", []).length;
+    if (!isLoading && totalCount > messagesCount) {
+      if (failedLoadAttemptsRef.current >= 2) {
+        console.log(`Auto-fixing incorrect message count after ${failedLoadAttemptsRef.current + 1} failed load attempts`);
+        console.log(`Adjusting totalCount from ${totalCount} to ${messagesCount}`);
+        safeSend({
+          type: Actions.SET_THREAD_MESSAGES,
+          data: {
+            messages: safeContextProperty("threadMessages", []),
+            totalCount: messagesCount,
+            threadPost: safeContextProperty("threadPost", []),
+            postThread: safeContextProperty("postThread", null)
+          }
+        });
+        failedLoadAttemptsRef.current = 0;
+      }
+    }
+  }, [safeContextProperty("loadingOldMessages"), safeContextProperty("threadMessages")]);
   React__default.useCallback(() => {
     if (threadMessageListRef == null ? void 0 : threadMessageListRef.current) {
       threadMessageListRef.current.scrollToBottom();
@@ -438,35 +593,72 @@ const ThreadConversationViewComponent = ({
     if (totalCount > threadMessages.length && !safeContextProperty("loadingOldMessages", false)) {
       console.log("Loading more messages - current count:", threadMessages.length, "of", totalCount);
       safeSend({
-        type: Actions.START_LOADING,
+        type: Actions.FETCH_MORE_MESSAGES,
         data: {
           loadingOldMessages: true
         }
       });
+      console.log("Using proven approach: Skip=0, Limit=50");
+      const queryVariables = {
+        channelId: channelId == null ? void 0 : channelId.toString(),
+        role: role == null ? void 0 : role.toString(),
+        postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString(),
+        selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
+        limit: 50,
+        skip: 0
+      };
+      console.log("Query variables:", JSON.stringify(queryVariables));
       fetchMoreMessages({
-        variables: {
-          channelId: channelId == null ? void 0 : channelId.toString(),
-          role: role == null ? void 0 : role.toString(),
-          postParentId: parentId == null ? void 0 : parentId.toString(),
-          selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
-          limit: MESSAGES_PER_PAGE,
-          skip: threadMessages.length
-        }
+        variables: queryVariables
       }).then((res) => {
-        var _a2, _b2, _c2;
+        var _a2, _b2, _c2, _d2;
+        console.log("API response received:", JSON.stringify(res == null ? void 0 : res.data, null, 2));
         if ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.getPostThread) {
           const threads = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.getPostThread;
           const threadReplies = (_c2 = threads == null ? void 0 : threads.replies) != null ? _c2 : [];
-          console.log("Successfully loaded more messages:", threadReplies.length);
+          const actualTotalCount = (_d2 = threads == null ? void 0 : threads.replyCount) != null ? _d2 : 0;
+          console.log("API response details:");
+          console.log("- replyCount:", threads == null ? void 0 : threads.replyCount);
+          console.log("- replies array length:", threadReplies.length);
+          console.log("- replies structure:", threadReplies.length > 0 ? `First item has fields: ${Object.keys(threadReplies[0]).join(", ")}` : "No items");
+          if (threadReplies.length > 0) {
+            console.log("- Sample message:", JSON.stringify(threadReplies[0], null, 2));
+          }
+          console.log("Successfully loaded more messages:", threadReplies.length, "of total:", actualTotalCount);
+          console.log("Thread reply IDs:", threadReplies.map((msg) => msg.id).join(", "));
+          const existingIds = new Set(threadMessages.map((msg) => msg.id));
+          const newUniqueMessages = threadReplies.filter((msg) => !existingIds.has(msg.id));
+          console.log(`Found ${newUniqueMessages.length} unique new messages out of ${threadReplies.length} received`);
+          if (actualTotalCount !== totalCount) {
+            console.log(`Updating totalCount from ${totalCount} to ${actualTotalCount} based on API response`);
+          }
+          if (newUniqueMessages.length === 0) {
+            console.log("No new unique messages found, adjusting total count");
+            registerLoadAttemptResult(false);
+            safeSend({
+              type: Actions.SET_THREAD_MESSAGES,
+              data: {
+                messages: threadMessages,
+                totalCount: threadMessages.length,
+                threadPost: safeContextProperty("threadPost", []),
+                postThread: safeContextProperty("postThread", null)
+              }
+            });
+            return;
+          }
+          registerLoadAttemptResult(true);
+          console.log(`Adding ${newUniqueMessages.length} new messages to thread`);
           safeSend({
             type: "FETCH_MORE_MESSAGES_SUCCESS",
             data: {
-              messages: threadReplies,
+              messages: newUniqueMessages,
+              totalCount: actualTotalCount,
               loadingOldMessages: false
             }
           });
         } else {
           console.log("No thread data returned when loading more messages");
+          registerLoadAttemptResult(false);
           safeSend({
             type: Actions.STOP_LOADING,
             data: {
@@ -476,6 +668,7 @@ const ThreadConversationViewComponent = ({
         }
       }).catch((error) => {
         console.error("Error fetching more messages:", error);
+        registerLoadAttemptResult(false);
         safeSend({
           type: "ERROR",
           data: {
@@ -486,13 +679,26 @@ const ThreadConversationViewComponent = ({
       });
     } else {
       console.log("No more messages to load or already loading");
+      if (safeContextProperty("loadingOldMessages", false)) {
+        safeSend({
+          type: Actions.STOP_LOADING,
+          data: {
+            loadingOldMessages: false
+          }
+        });
+      }
     }
-  }, [parentId, channelId, state.context]);
+  }, [parentId, channelId, state.context, registerLoadAttemptResult]);
   const handleScrollToTop = ({
     nativeEvent
   }) => {
     if (isCloseToTop(nativeEvent)) {
-      if (!safeContextProperty("loadingOldMessages", false) && safeContextProperty("totalCount", 0) > safeContextProperty("threadMessages", []).length) {
+      const isLoading = safeContextProperty("loadingOldMessages", false);
+      const totalCount = safeContextProperty("totalCount", 0);
+      const currentCount = safeContextProperty("threadMessages", []).length;
+      const hasMoreMessages = totalCount > currentCount;
+      console.log(`Scroll near top - Loading state: ${isLoading}, Messages: ${currentCount}/${totalCount}, Has more: ${hasMoreMessages}`);
+      if (!isLoading && hasMoreMessages) {
         console.log("Near top of list - loading older messages");
         safeSend({
           type: Actions.FETCH_MORE_MESSAGES
@@ -508,8 +714,12 @@ const ThreadConversationViewComponent = ({
     contentOffset,
     contentSize
   }) => {
-    const paddingToTop = 80;
-    return contentOffset.y <= paddingToTop;
+    const visibleHeight = layoutMeasurement.height;
+    const topThreshold = Math.min(80, visibleHeight * 0.15);
+    const distanceFromTop = contentOffset.y;
+    const totalContentHeight = contentSize.height;
+    console.log(`Scroll position: ${distanceFromTop.toFixed(0)}px from top, threshold: ${topThreshold.toFixed(0)}px, content height: ${totalContentHeight.toFixed(0)}px`);
+    return contentOffset.y <= topThreshold;
   };
   const onSelectImages = async () => {
     var _a2;
@@ -792,19 +1002,40 @@ const ThreadConversationViewComponent = ({
         messageIds.add(msg.id);
         return true;
       }).map((msg) => {
-        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2;
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
         const uniqueId = msg.id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        let messageDate;
+        try {
+          if (msg.createdAt && !isNaN(new Date(msg.createdAt).getTime())) {
+            messageDate = new Date(msg.createdAt);
+          } else {
+            console.warn(`Invalid date value for message ${msg.id}: ${msg.createdAt}`);
+            messageDate = new Date();
+          }
+        } catch (error) {
+          console.error(`Error creating date for message ${msg.id}:`, error);
+          messageDate = new Date();
+        }
+        let imageUrl = null;
+        if (((_a2 = msg.files) == null ? void 0 : _a2.data) && msg.files.data.length > 0) {
+          const fileData = msg.files.data[0];
+          if (fileData && fileData.url) {
+            imageUrl = fileData.url;
+            console.log("\u{1F4F7} Found image URL for message", msg.id, ":", imageUrl);
+          }
+        }
+        let messageText = msg.message || "";
         let message = {
           _id: uniqueId,
-          text: msg.message || "",
-          createdAt: new Date(msg.createdAt),
+          text: messageText,
+          createdAt: messageDate,
           user: {
-            _id: (_c2 = (_a2 = msg == null ? void 0 : msg.author) == null ? void 0 : _a2.id) != null ? _c2 : (_b2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _b2.id,
-            name: (_i2 = (_g2 = (_d2 = msg == null ? void 0 : msg.author) == null ? void 0 : _d2.givenName) != null ? _g2 : ((_e2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _e2.given_name) + " " + ((_f2 = msg == null ? void 0 : msg.author) == null ? void 0 : _f2.familyName)) != null ? _i2 : (_h2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _h2.family_name,
-            avatar: (_l2 = (_j2 = msg == null ? void 0 : msg.author) == null ? void 0 : _j2.picture) != null ? _l2 : (_k2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _k2.picture
+            _id: (_d2 = (_b2 = msg == null ? void 0 : msg.author) == null ? void 0 : _b2.id) != null ? _d2 : (_c2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _c2.id,
+            name: (_j2 = (_h2 = (_e2 = msg == null ? void 0 : msg.author) == null ? void 0 : _e2.givenName) != null ? _h2 : ((_f2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _f2.given_name) + " " + ((_g2 = msg == null ? void 0 : msg.author) == null ? void 0 : _g2.familyName)) != null ? _j2 : (_i2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _i2.family_name,
+            avatar: (_m2 = (_k2 = msg == null ? void 0 : msg.author) == null ? void 0 : _k2.picture) != null ? _m2 : (_l2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _l2.picture
           },
           type: (msg == null ? void 0 : msg.type) || "",
-          image: (_o2 = (_n2 = (_m2 = msg == null ? void 0 : msg.files) == null ? void 0 : _m2.data) == null ? void 0 : _n2[0]) == null ? void 0 : _o2.url,
+          image: imageUrl,
           sent: (msg == null ? void 0 : msg.isDelivered) || true,
           received: (msg == null ? void 0 : msg.isRead) || false,
           propsConfiguration: msg == null ? void 0 : msg.propsConfiguration
@@ -812,7 +1043,23 @@ const ThreadConversationViewComponent = ({
         return message;
       });
     }
-    const sortedMessages = res.sort((a, b) => b.createdAt - a.createdAt);
+    const sortedMessages = orderBy(res, [(msg) => {
+      try {
+        return msg.createdAt instanceof Date ? msg.createdAt.getTime() : new Date().getTime();
+      } catch (error) {
+        console.error("Error sorting message by date:", error);
+        return 0;
+      }
+    }], ["desc"]);
+    if (sortedMessages.length > 0) {
+      try {
+        const firstMsg = sortedMessages[0];
+        const lastMsg = sortedMessages[sortedMessages.length - 1];
+        console.log("Message date range:", lastMsg.createdAt instanceof Date ? lastMsg.createdAt.toISOString() : "invalid date", "to", firstMsg.createdAt instanceof Date ? firstMsg.createdAt.toISOString() : "invalid date");
+      } catch (error) {
+        console.error("Error logging message date range:", error);
+      }
+    }
     return sortedMessages;
   }, [safeContextProperty("threadMessages"), auth]);
   const renderSend = (props) => {
@@ -940,15 +1187,256 @@ const ThreadConversationViewComponent = ({
       alignItems: "center"
     } }));
   };
+  const forceLoadMessages = useCallback((skipValue) => {
+    console.log(`Force loading messages with explicit skip=${skipValue}, limit=50`);
+    if (channelId && parentId) {
+      safeSend({
+        type: Actions.START_LOADING,
+        data: {
+          loading: true
+        }
+      });
+      getThreadMessages({
+        variables: {
+          channelId: channelId == null ? void 0 : channelId.toString(),
+          role: role == null ? void 0 : role.toString(),
+          postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString(),
+          selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
+          skip: skipValue,
+          limit: 50
+        }
+      }).then(({
+        data: data2
+      }) => {
+        var _a2, _b2, _c2;
+        if (data2 == null ? void 0 : data2.getPostThread) {
+          const threads = data2.getPostThread;
+          const threadPost = (_a2 = threads == null ? void 0 : threads.post) != null ? _a2 : [];
+          const threadReplies = (_b2 = threads == null ? void 0 : threads.replies) != null ? _b2 : [];
+          const messageTotalCount = (_c2 = threads == null ? void 0 : threads.replyCount) != null ? _c2 : 0;
+          const messages = [...threadReplies];
+          console.log(`Force load with skip=${skipValue} complete. Got ${messages.length} messages of ${messageTotalCount} total`);
+          safeSend({
+            type: Actions.SET_THREAD_MESSAGES,
+            data: {
+              messages,
+              totalCount: messageTotalCount,
+              threadPost,
+              postThread: threads
+            }
+          });
+        }
+      }).catch((error) => {
+        console.error("Error during force load:", error);
+        safeSend({
+          type: "ERROR",
+          data: {
+            message: error.message
+          }
+        });
+      });
+    }
+  }, [channelId, parentId, getThreadMessages, safeSend]);
   return /* @__PURE__ */ React__default.createElement(SafeAreaView, { style: {
     flex: 1
-  } }, safeContextProperty("loadingOldMessages", false) && /* @__PURE__ */ React__default.createElement(Box, { className: "absolute top-10 left-0 right-0 z-10 items-center" }, /* @__PURE__ */ React__default.createElement(Box, { className: "bg-blue-500/20 rounded-full px-4 py-2 flex-row items-center" }, /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500], size: "small" }), /* @__PURE__ */ React__default.createElement(Text, { className: "text-sm font-medium color-blue-600 ml-2" }, "Loading messages..."))), isPostParentIdThread && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ((_a = safeContextProperty("threadPost", [])) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(VStack, { className: "px-2 pt-2 pb-0", space: "sm" }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "items-center" }, /* @__PURE__ */ React__default.createElement(Avatar, { className: "bg-transparent", size: "md" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_d = (_c = (_b = safeContextProperty("threadPost")[0]) == null ? void 0 : _b.author) == null ? void 0 : _c.username) == null ? void 0 : _d.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
+  } }, safeContextProperty("loadingOldMessages", false) === true && /* @__PURE__ */ React__default.createElement(Box, { className: "absolute top-10 left-0 right-0 z-10 items-center" }, /* @__PURE__ */ React__default.createElement(Box, { className: "bg-blue-500/20 rounded-full px-4 py-2 flex-row items-center" }, /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500], size: "small" }), /* @__PURE__ */ React__default.createElement(Text, { className: "text-sm font-medium color-blue-600 ml-2" }, "Loading messages..."))), !safeContextProperty("loadingOldMessages", false) && safeContextProperty("totalCount", 0) > safeContextProperty("threadMessages", []).length && /* @__PURE__ */ React__default.createElement(Box, { className: "absolute top-10 left-0 right-0 z-10 items-center" }, /* @__PURE__ */ React__default.createElement(HStack, { space: 2, className: "px-2" }, /* @__PURE__ */ React__default.createElement(TouchableHighlight, { onPress: () => {
+    console.log("Manual load more pressed");
+    Alert.alert("Load Options", "Choose loading method", [{
+      text: "Normal Load",
+      onPress: () => safeSend({
+        type: Actions.FETCH_MORE_MESSAGES
+      })
+    }, {
+      text: "Try Skip=0",
+      onPress: () => forceLoadMessages(0)
+    }, {
+      text: "Try Skip=0, Limit=50",
+      onPress: () => {
+        console.log("Force loading with explicit skip=0, limit=50");
+        safeSend({
+          type: Actions.START_LOADING,
+          data: {
+            loadingOldMessages: true
+          }
+        });
+        fetchMoreMessages({
+          variables: {
+            channelId: channelId == null ? void 0 : channelId.toString(),
+            role: role == null ? void 0 : role.toString(),
+            postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString(),
+            selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
+            limit: 50,
+            skip: 0
+          }
+        }).then((res) => {
+          var _a2, _b2, _c2, _d2;
+          console.log("LARGE LIMIT response:", JSON.stringify(res == null ? void 0 : res.data, null, 2));
+          if ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.getPostThread) {
+            const threads = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.getPostThread;
+            const threadReplies = (_c2 = threads == null ? void 0 : threads.replies) != null ? _c2 : [];
+            const actualTotalCount = (_d2 = threads == null ? void 0 : threads.replyCount) != null ? _d2 : 0;
+            console.log(`Large limit load complete. Got ${threadReplies.length} messages of ${actualTotalCount} total`);
+            if (threadReplies.length > 0) {
+              safeSend({
+                type: Actions.SET_THREAD_MESSAGES,
+                data: {
+                  messages: threadReplies,
+                  totalCount: actualTotalCount,
+                  threadPost: safeContextProperty("threadPost", []),
+                  postThread: threads
+                }
+              });
+            } else {
+              safeSend({
+                type: Actions.SET_THREAD_MESSAGES,
+                data: {
+                  messages: safeContextProperty("threadMessages", []),
+                  totalCount: safeContextProperty("threadMessages", []).length,
+                  threadPost: safeContextProperty("threadPost", []),
+                  postThread: safeContextProperty("postThread", null)
+                }
+              });
+            }
+          } else {
+            safeSend({
+              type: Actions.STOP_LOADING,
+              data: {
+                loadingOldMessages: false
+              }
+            });
+          }
+        }).catch((error) => {
+          console.error("Error in large limit load:", error);
+          safeSend({
+            type: Actions.STOP_LOADING,
+            data: {
+              loadingOldMessages: false
+            }
+          });
+        });
+      }
+    }, {
+      text: "Try Direct Fetch",
+      onPress: () => {
+        const currentCount = safeContextProperty("threadMessages", []).length;
+        const totalCount = safeContextProperty("totalCount", 0);
+        const missingCount = totalCount - currentCount;
+        if (missingCount <= 0) {
+          Alert.alert("Info", "No missing messages to fetch");
+          return;
+        }
+        console.log(`Attempting direct fetch of missing ${missingCount} messages`);
+        safeSend({
+          type: Actions.START_LOADING,
+          data: {
+            loadingOldMessages: true
+          }
+        });
+        getThreadMessages({
+          variables: {
+            channelId: channelId == null ? void 0 : channelId.toString(),
+            role: role == null ? void 0 : role.toString(),
+            postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString(),
+            selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
+            limit: missingCount,
+            skip: 0
+          }
+        }).then(({
+          data: data2
+        }) => {
+          var _a2, _b2;
+          console.log("DIRECT FETCH response:", JSON.stringify(data2, null, 2));
+          if (data2 == null ? void 0 : data2.getPostThread) {
+            const threads = data2.getPostThread;
+            const threadReplies = (_a2 = threads == null ? void 0 : threads.replies) != null ? _a2 : [];
+            const actualTotalCount = (_b2 = threads == null ? void 0 : threads.replyCount) != null ? _b2 : 0;
+            console.log(`Direct fetch complete. Got ${threadReplies.length} messages of ${actualTotalCount} total`);
+            console.log("Message IDs:", threadReplies.map((msg) => msg.id).join(", "));
+            const existingIds = new Set(safeContextProperty("threadMessages", []).map((msg) => msg.id));
+            const newMessages = threadReplies.filter((msg) => !existingIds.has(msg.id));
+            console.log(`Found ${newMessages.length} new messages that we didn't have before`);
+            if (newMessages.length > 0) {
+              safeSend({
+                type: "FETCH_MORE_MESSAGES_SUCCESS",
+                data: {
+                  messages: newMessages,
+                  totalCount: actualTotalCount,
+                  loadingOldMessages: false
+                }
+              });
+              Alert.alert("Success", `Found ${newMessages.length} new messages`);
+            } else {
+              console.log("No new messages found, adjusting count");
+              safeSend({
+                type: Actions.SET_THREAD_MESSAGES,
+                data: {
+                  messages: safeContextProperty("threadMessages", []),
+                  totalCount: safeContextProperty("threadMessages", []).length,
+                  threadPost: safeContextProperty("threadPost", []),
+                  postThread: safeContextProperty("postThread", null)
+                }
+              });
+              Alert.alert("Info", "No new messages found. Count has been adjusted.");
+            }
+          } else {
+            Alert.alert("Error", "Could not fetch thread messages");
+            safeSend({
+              type: Actions.STOP_LOADING,
+              data: {
+                loadingOldMessages: false
+              }
+            });
+          }
+        }).catch((error) => {
+          console.error("Error in direct fetch:", error);
+          Alert.alert("Error", "Failed to fetch messages: " + error.message);
+          safeSend({
+            type: Actions.STOP_LOADING,
+            data: {
+              loadingOldMessages: false
+            }
+          });
+        });
+      }
+    }, {
+      text: "Reset Count",
+      style: "destructive",
+      onPress: () => {
+        console.log("Resetting message count to match reality");
+        safeSend({
+          type: Actions.SET_THREAD_MESSAGES,
+          data: {
+            messages: safeContextProperty("threadMessages", []),
+            totalCount: safeContextProperty("threadMessages", []).length,
+            threadPost: safeContextProperty("threadPost", []),
+            postThread: safeContextProperty("postThread", null)
+          }
+        });
+      }
+    }, {
+      text: "Cancel",
+      style: "cancel"
+    }]);
+  }, underlayColor: "#e6e6e6" }, /* @__PURE__ */ React__default.createElement(Box, { className: "bg-gray-200 rounded-full px-4 py-2 flex-row items-center" }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { name: "arrow-upward", size: 16, color: colors.blue[500] }), /* @__PURE__ */ React__default.createElement(Text, { className: "text-sm font-medium color-blue-600 ml-2" }, "Load More (", safeContextProperty("totalCount", 0) - safeContextProperty("threadMessages", []).length, ")"))), /* @__PURE__ */ React__default.createElement(TouchableHighlight, { onPress: forceRefreshMessages, underlayColor: "#e6e6e6" }, /* @__PURE__ */ React__default.createElement(Box, { className: "bg-gray-200 rounded-full px-4 py-2 flex-row items-center" }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { name: "refresh", size: 16, color: colors.blue[500] }), /* @__PURE__ */ React__default.createElement(Text, { className: "text-sm font-medium color-blue-600 ml-2" }, "Refresh All"))))), isPostParentIdThread && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ((_a = safeContextProperty("threadPost", [])) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(VStack, { className: "px-2 pt-2 pb-0", space: "sm" }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "items-center" }, /* @__PURE__ */ React__default.createElement(Avatar, { className: "bg-transparent", size: "md" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_d = (_c = (_b = safeContextProperty("threadPost")[0]) == null ? void 0 : _b.author) == null ? void 0 : _c.username) == null ? void 0 : _d.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
     borderRadius: 6,
     borderWidth: 2,
     borderColor: "#fff"
   }, source: {
     uri: (_f = (_e = safeContextProperty("threadPost")[0]) == null ? void 0 : _e.author) == null ? void 0 : _f.picture
-  } })), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-black" }, (_i = (_h = (_g = safeContextProperty("threadPost")[0]) == null ? void 0 : _g.author) == null ? void 0 : _h.givenName) != null ? _i : "", " ", (_l = (_k = (_j = safeContextProperty("threadPost")[0]) == null ? void 0 : _j.author) == null ? void 0 : _k.familyName) != null ? _l : ""), /* @__PURE__ */ React__default.createElement(Text, { className: "pl-0 color-gray-500" }, createdAtText((_m = safeContextProperty("threadPost")[0]) == null ? void 0 : _m.createdAt), " at", " ", format(new Date((_n = safeContextProperty("threadPost")[0]) == null ? void 0 : _n.createdAt), "hh:ss:a")))), /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-2 items-center" }, /* @__PURE__ */ React__default.createElement(Text, null, (_p = (_o = safeContextProperty("threadPost")[0]) == null ? void 0 : _o.message) != null ? _p : ""))), /* @__PURE__ */ React__default.createElement(Box, { className: "py-4" }, /* @__PURE__ */ React__default.createElement(Box, { className: "px-4 py-2 border-t border-b border-gray-200" }, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-gray-600" }, (_r = (_q = safeContextProperty("threadPost")[0]) == null ? void 0 : _q.replies) == null ? void 0 : _r.totalCount, " ", ((_t = (_s = safeContextProperty("threadPost")[0]) == null ? void 0 : _s.replies) == null ? void 0 : _t.totalCount) > 0 ? "replies" : "reply"))))), /* @__PURE__ */ React__default.createElement(GiftedChat, { ref: threadMessageListRef, wrapInSafeArea: false, renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }), messages: messageList, listViewProps: {
+  } })), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-black" }, (_i = (_h = (_g = safeContextProperty("threadPost")[0]) == null ? void 0 : _g.author) == null ? void 0 : _h.givenName) != null ? _i : "", " ", (_l = (_k = (_j = safeContextProperty("threadPost")[0]) == null ? void 0 : _j.author) == null ? void 0 : _k.familyName) != null ? _l : ""), /* @__PURE__ */ React__default.createElement(Text, { className: "pl-0 color-gray-500" }, createdAtText((_m = safeContextProperty("threadPost")[0]) == null ? void 0 : _m.createdAt), " at", " ", (() => {
+    var _a2;
+    try {
+      const createdAt = (_a2 = safeContextProperty("threadPost")[0]) == null ? void 0 : _a2.createdAt;
+      if (createdAt && !isNaN(new Date(createdAt).getTime())) {
+        return format(new Date(createdAt), "hh:mm:a");
+      } else {
+        return "unknown time";
+      }
+    } catch (error) {
+      console.error("Error formatting thread post time:", error);
+      return "unknown time";
+    }
+  })()))), /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-2 items-center" }, /* @__PURE__ */ React__default.createElement(Text, null, (_o = (_n = safeContextProperty("threadPost")[0]) == null ? void 0 : _n.message) != null ? _o : ""))), /* @__PURE__ */ React__default.createElement(Box, { className: "py-4" }, /* @__PURE__ */ React__default.createElement(Box, { className: "px-4 py-2 border-t border-b border-gray-200" }, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-gray-600" }, (_q = (_p = safeContextProperty("threadPost")[0]) == null ? void 0 : _p.replies) == null ? void 0 : _q.totalCount, " ", ((_s = (_r = safeContextProperty("threadPost")[0]) == null ? void 0 : _r.replies) == null ? void 0 : _s.totalCount) > 0 ? "replies" : "reply"))))), /* @__PURE__ */ React__default.createElement(GiftedChat, { ref: threadMessageListRef, wrapInSafeArea: false, renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }), messages: messageList, listViewProps: {
     onScroll: handleScrollToTop,
     onEndReached: handleEndReached,
     onEndReachedThreshold: 0.2,
@@ -959,7 +1447,7 @@ const ThreadConversationViewComponent = ({
       minIndexForVisible: 0,
       autoscrollToTopThreshold: 100
     },
-    scrollEventThrottle: 100,
+    scrollEventThrottle: 16,
     keyboardDismissMode: "on-drag",
     keyboardShouldPersistTaps: "handled"
   }, onSend: (messages) => {
@@ -1006,7 +1494,7 @@ const ThreadConversationViewComponent = ({
     });
   }, renderFooter: () => safeContextProperty("loading", false) && !safeContextProperty("loadingOldMessages", false) ? /* @__PURE__ */ React__default.createElement(Box, { className: "w-full py-2 items-center" }, /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] })) : safeContextProperty("imageLoading", false) ? /* @__PURE__ */ React__default.createElement(Box, { className: "w-full py-2 items-center" }, /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), scrollToBottom: true, loadEarlier: false, isLoadingEarlier: false, user: {
     _id: (auth == null ? void 0 : auth.id) || ""
-  }, isTyping: true, alwaysShowSend: safeContextProperty("loading", false) ? false : true, infiniteScroll: true, renderSend, renderInputToolbar, minInputToolbarHeight: 50, renderActions, renderAccessory: !!((_u = state == null ? void 0 : state.context) == null ? void 0 : _u.selectedImage) ? renderAccessory : void 0, renderMessage, maxInputLength: 1e3, placeholder: "Type a message...", showUserAvatar: true, showAvatarForEveryMessage: false, inverted: true, parsePatterns: (linkStyle) => [{
+  }, isTyping: true, alwaysShowSend: safeContextProperty("loading", false) ? false : true, infiniteScroll: true, renderSend, renderInputToolbar, minInputToolbarHeight: 50, renderActions, renderAccessory: !!((_t = state == null ? void 0 : state.context) == null ? void 0 : _t.selectedImage) ? renderAccessory : void 0, renderMessage, maxInputLength: 1e3, placeholder: "Type a message...", showUserAvatar: true, showAvatarForEveryMessage: false, inverted: true, parsePatterns: (linkStyle) => [{
     type: "url",
     style: __spreadProps(__spreadValues({}, linkStyle), {
       color: colors.blue[500]