@messenger-box/platform-mobile 10.0.3-alpha.22 → 10.0.3-alpha.23

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,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;
+import React__default,{useState,useRef,useCallback,useEffect,useMemo}from'react';import {Button,Box,Image,Text,ButtonText,Spinner,HStack,VStack,Avatar,AvatarFallbackText,AvatarImage,Center}from'@admin-layout/gluestack-ui-mobile';import {Platform,View,TouchableHighlight,SafeAreaView,Alert,Linking}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,MaterialCommunityIcons,Ionicons}from'@expo/vector-icons';import {Send,Actions as Actions$1,InputToolbar,MessageText,GiftedChat}from'react-native-gifted-chat';import {PreDefinedRole}from'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;
@@ -298,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;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const {
     params
   } = useRoute();
@@ -468,7 +468,14 @@ const ThreadConversationViewComponent = ({
   }, [state.value]);
   const fetchThreadMessages = useCallback(() => {
     if (channelId && parentId) {
-      console.log("Initial fetch of thread messages using larger limit (50)");
+      if (__DEV__)
+        console.log("Initial fetch of thread messages using larger limit (50)");
+      safeSend({
+        type: Actions.START_LOADING,
+        data: {
+          loading: true
+        }
+      });
       getThreadMessages({
         variables: {
           channelId: channelId == null ? void 0 : channelId.toString(),
@@ -487,7 +494,8 @@ 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`);
+          if (__DEV__)
+            console.log(`Initial fetch complete. Got ${messages.length} messages of ${messageTotalCount} total`);
           safeSend({
             type: Actions.SET_THREAD_MESSAGES,
             data: {
@@ -507,7 +515,7 @@ const ThreadConversationViewComponent = ({
         });
       });
     }
-  }, [channelId, parentId, role]);
+  }, [channelId, parentId, role, getThreadMessages, safeSend]);
   React__default.useEffect(() => {
     var _a2, _b2, _c2;
     if (data == null ? void 0 : data.getPostThread) {
@@ -587,109 +595,16 @@ const ThreadConversationViewComponent = ({
       threadMessageListRef.current.scrollToBottom();
     }
   }, [threadMessageListRef]);
-  const onFetchOld = useCallback(() => {
-    const totalCount = safeContextProperty("totalCount", 0);
-    const threadMessages = safeContextProperty("threadMessages", []);
-    if (totalCount > threadMessages.length && !safeContextProperty("loadingOldMessages", false)) {
-      console.log("Loading more messages - current count:", threadMessages.length, "of", totalCount);
-      safeSend({
-        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: queryVariables
-      }).then((res) => {
-        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 : [];
-          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: newUniqueMessages,
-              totalCount: actualTotalCount,
-              loadingOldMessages: false
-            }
-          });
-        } else {
-          console.log("No thread data returned when loading more messages");
-          registerLoadAttemptResult(false);
-          safeSend({
-            type: Actions.STOP_LOADING,
-            data: {
-              loadingOldMessages: false
-            }
-          });
-        }
-      }).catch((error) => {
-        console.error("Error fetching more messages:", error);
-        registerLoadAttemptResult(false);
-        safeSend({
-          type: "ERROR",
-          data: {
-            message: error.message,
-            loadingOldMessages: false
-          }
-        });
-      });
-    } 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, registerLoadAttemptResult]);
-  const handleScrollToTop = ({
+  const isCloseToTop = useCallback(({
+    layoutMeasurement,
+    contentOffset,
+    contentSize
+  }) => {
+    const visibleHeight = layoutMeasurement.height;
+    const topThreshold = Math.min(80, visibleHeight * 0.15);
+    return contentOffset.y <= topThreshold;
+  }, []);
+  const handleScrollToTop = useCallback(({
     nativeEvent
   }) => {
     if (isCloseToTop(nativeEvent)) {
@@ -697,30 +612,20 @@ const ThreadConversationViewComponent = ({
       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 (__DEV__)
+        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");
+        if (__DEV__)
+          console.log("Near top of list - loading older messages");
         safeSend({
           type: Actions.FETCH_MORE_MESSAGES
         });
       }
     }
-  };
+  }, [isCloseToTop, safeContextProperty, safeSend]);
   const handleEndReached = () => {
     console.log("Reached end of message list");
   };
-  const isCloseToTop = ({
-    layoutMeasurement,
-    contentOffset,
-    contentSize
-  }) => {
-    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;
     try {
@@ -990,79 +895,62 @@ const ThreadConversationViewComponent = ({
   };
   const messageList = useMemo(() => {
     const threadMessages = safeContextProperty("threadMessages", []);
-    console.log(`Creating message list from ${threadMessages.length} thread messages`);
-    let res = [];
-    if (threadMessages == null ? void 0 : threadMessages.length) {
-      const messageIds = /* @__PURE__ */ new Set();
-      res = threadMessages.filter((msg) => {
-        if (!msg.id || messageIds.has(msg.id)) {
-          console.log("Skipping duplicate message ID:", msg.id);
-          return false;
-        }
-        messageIds.add(msg.id);
-        return true;
-      }).map((msg) => {
-        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);
+    if (__DEV__)
+      console.log(`Creating message list from ${threadMessages.length} thread messages`);
+    if (!(threadMessages == null ? void 0 : threadMessages.length))
+      return [];
+    const messageIds = /* @__PURE__ */ new Set();
+    const res = threadMessages.filter((msg) => {
+      if (!msg.id || messageIds.has(msg.id))
+        return false;
+      messageIds.add(msg.id);
+      return true;
+    }).map((msg) => {
+      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 {
           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);
-          }
+      } catch (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;
         }
-        let messageText = msg.message || "";
-        let message = {
-          _id: uniqueId,
-          text: messageText,
-          createdAt: messageDate,
-          user: {
-            _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: imageUrl,
-          sent: (msg == null ? void 0 : msg.isDelivered) || true,
-          received: (msg == null ? void 0 : msg.isRead) || false,
-          propsConfiguration: msg == null ? void 0 : msg.propsConfiguration
-        };
-        return message;
-      });
-    }
-    const sortedMessages = orderBy(res, [(msg) => {
+      }
+      let messageText = msg.message || "";
+      return {
+        _id: uniqueId,
+        text: messageText,
+        createdAt: messageDate,
+        user: {
+          _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: imageUrl,
+        sent: (msg == null ? void 0 : msg.isDelivered) || true,
+        received: (msg == null ? void 0 : msg.isRead) || false,
+        propsConfiguration: msg == null ? void 0 : msg.propsConfiguration
+      };
+    });
+    return 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) => {
+  const renderSend = useCallback((props) => {
     const hasImage = safeContextProperty("selectedImage", "") !== "";
     const isDisabled = !hasImage && (!props.text || props.text.trim().length === 0);
     return /* @__PURE__ */ React__default.createElement(Send, __spreadProps(__spreadValues({}, props), { containerStyle: {
@@ -1076,8 +964,8 @@ const ThreadConversationViewComponent = ({
       alignItems: "center",
       justifyContent: "center"
     } }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", size: 30, color: isDisabled ? colors.gray[400] : colors.blue[500] })));
-  };
-  const renderActions = (props) => {
+  }, [safeContextProperty]);
+  const renderActions = useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(
       Actions$1,
       __spreadProps(__spreadValues({}, props), {
@@ -1102,8 +990,8 @@ const ThreadConversationViewComponent = ({
         }
       })
     );
-  };
-  const renderAccessory = (props) => {
+  }, [onSelectImages]);
+  const renderAccessory = useCallback((props) => {
     var _a2, _b2;
     const selectedImage2 = safeContextProperty("selectedImage", "");
     if (!selectedImage2) {
@@ -1149,11 +1037,80 @@ const ThreadConversationViewComponent = ({
       color: "white",
       fontWeight: "bold"
     } }, "X"))));
-  };
+  }, [(_a = state == null ? void 0 : state.context) == null ? void 0 : _a.selectedImage, safeSend]);
+  const renderInputToolbar = useCallback((props) => {
+    return /* @__PURE__ */ React__default.createElement(InputToolbar, __spreadProps(__spreadValues({}, props), { containerStyle: {
+      backgroundColor: "white",
+      borderTopWidth: 1,
+      borderTopColor: colors.gray[200],
+      paddingHorizontal: 4,
+      paddingVertical: 4
+    }, primaryStyle: {
+      alignItems: "center"
+    } }));
+  }, []);
   const setImageViewerObject = (obj, v) => {
     setImageObject(obj);
     setImageViewer(v);
   };
+  const renderMessageText = useCallback((props) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v, _w, _x, _y;
+    const {
+      currentMessage
+    } = props;
+    if (currentMessage.type === "ALERT") {
+      const attachment = (_b2 = (_a2 = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _a2.contents) == null ? void 0 : _b2.attachment;
+      let action = "";
+      let actionId = "";
+      let params2 = {};
+      if ((_c2 = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _c2.extraParams) {
+        const extraParams = (_d2 = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _d2.extraParams;
+        const route = (_e2 = extraParams == null ? void 0 : extraParams.route) != null ? _e2 : null;
+        let path = null;
+        let param = null;
+        if (role && role == PreDefinedRole.Guest) {
+          path = ((_f2 = route == null ? void 0 : route.guest) == null ? void 0 : _f2.name) ? (_h2 = (_g2 = route == null ? void 0 : route.guest) == null ? void 0 : _g2.name) != null ? _h2 : null : null;
+          param = ((_i2 = route == null ? void 0 : route.guest) == null ? void 0 : _i2.params) ? (_k2 = (_j2 = route == null ? void 0 : route.guest) == null ? void 0 : _j2.params) != null ? _k2 : null : null;
+        } else if (role && role == PreDefinedRole.Owner) {
+          path = ((_l2 = route == null ? void 0 : route.host) == null ? void 0 : _l2.name) ? (_n2 = (_m2 = route == null ? void 0 : route.host) == null ? void 0 : _m2.name) != null ? _n2 : null : null;
+          param = ((_o2 = route == null ? void 0 : route.host) == null ? void 0 : _o2.params) ? (_q2 = (_p2 = route == null ? void 0 : route.host) == null ? void 0 : _p2.params) != null ? _q2 : null : null;
+        } else {
+          path = ((_r2 = route == null ? void 0 : route.host) == null ? void 0 : _r2.name) ? (_t2 = (_s2 = route == null ? void 0 : route.host) == null ? void 0 : _s2.name) != null ? _t2 : null : null;
+          param = ((_u2 = route == null ? void 0 : route.host) == null ? void 0 : _u2.params) ? (_w = (_v = route == null ? void 0 : route.host) == null ? void 0 : _v.params) != null ? _w : null : null;
+        }
+        action = path;
+        params2 = __spreadValues({}, param);
+      } else if ((_x = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _x.link) {
+        action = CALL_TO_ACTION_PATH;
+        actionId = (_y = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _y.link.split("/").pop();
+        params2 = {
+          reservationId: actionId
+        };
+      }
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (attachment == null ? void 0 : attachment.callToAction) && action ? /* @__PURE__ */ React__default.createElement(Box, { className: `bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2` }, /* @__PURE__ */ React__default.createElement(Button, { variant: "outline", size: "sm", className: `border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`, onPress: () => action && params2 && navigation.navigate(action, params2) }, /* @__PURE__ */ React__default.createElement(ButtonText, { className: `color-[${CALL_TO_ACTION_TEXT_COLOR}]` }, attachment.callToAction.title)), /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        left: {
+          marginLeft: 5,
+          color: CALL_TO_ACTION_TEXT_COLOR,
+          paddingHorizontal: 2
+        }
+      } }))) : /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        left: {
+          marginLeft: 5
+        }
+      } })));
+    } else if (currentMessage.text === "\u{1F4CE} File attachment") {
+      return null;
+    } else {
+      return /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        left: {
+          marginLeft: 5
+        }
+      } }));
+    }
+  }, [role, navigation]);
+  const renderMessage = useCallback((props) => {
+    return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
+  }, [isShowImageViewer, setImageViewerObject]);
   const modalContent = React__default.useMemo(() => {
     if (!imageObject)
       return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
@@ -1169,24 +1126,10 @@ const ThreadConversationViewComponent = ({
       expiresIn: 86400
     }, alt: "image" });
   }, [imageObject]);
-  const renderMessage = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
-  };
   const currentMessageText = useMemo(() => {
     const text = safeContextProperty("messageText", "") || "  ";
     return text;
   }, [safeContextProperty("messageText")]);
-  const renderInputToolbar = (props) => {
-    return /* @__PURE__ */ React__default.createElement(InputToolbar, __spreadProps(__spreadValues({}, props), { containerStyle: {
-      backgroundColor: "white",
-      borderTopWidth: 1,
-      borderTopColor: colors.gray[200],
-      paddingHorizontal: 4,
-      paddingVertical: 4
-    }, primaryStyle: {
-      alignItems: "center"
-    } }));
-  };
   const forceLoadMessages = useCallback((skipValue) => {
     console.log(`Force loading messages with explicit skip=${skipValue}, limit=50`);
     if (channelId && parentId) {
@@ -1237,6 +1180,126 @@ const ThreadConversationViewComponent = ({
       });
     }
   }, [channelId, parentId, getThreadMessages, safeSend]);
+  const onFetchOld = useCallback(() => {
+    const totalCount = safeContextProperty("totalCount", 0);
+    const threadMessages = safeContextProperty("threadMessages", []);
+    const isLoading = safeContextProperty("loadingOldMessages", false);
+    if (totalCount <= threadMessages.length || isLoading) {
+      if (isLoading) {
+        safeSend({
+          type: Actions.STOP_LOADING,
+          data: {
+            loadingOldMessages: false
+          }
+        });
+      }
+      if (__DEV__)
+        console.log("No more messages to load or already loading");
+      return;
+    }
+    if (__DEV__)
+      console.log("Loading more messages - current count:", threadMessages.length, "of", totalCount);
+    safeSend({
+      type: Actions.FETCH_MORE_MESSAGES,
+      data: {
+        loadingOldMessages: true
+      }
+    });
+    if (__DEV__)
+      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
+    };
+    if (__DEV__)
+      console.log("Query variables:", JSON.stringify(queryVariables));
+    fetchMoreMessages({
+      variables: queryVariables
+    }).then((res) => {
+      var _a2, _b2, _c2, _d2;
+      if (__DEV__)
+        console.log("API response received with status:", res ? "success" : "empty");
+      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;
+        if (__DEV__) {
+          console.log("API response details:");
+          console.log("- replyCount:", threads == null ? void 0 : threads.replyCount);
+          console.log("- replies array length:", threadReplies.length);
+        }
+        if (threadReplies.length > 0) {
+          const existingIds = new Set(threadMessages.map((msg) => msg.id));
+          const newUniqueMessages = threadReplies.filter((msg) => !existingIds.has(msg.id));
+          if (__DEV__)
+            console.log(`Found ${newUniqueMessages.length} unique new messages out of ${threadReplies.length} received`);
+          if (newUniqueMessages.length === 0) {
+            if (__DEV__)
+              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);
+          if (__DEV__)
+            console.log(`Adding ${newUniqueMessages.length} new messages to thread`);
+          safeSend({
+            type: "FETCH_MORE_MESSAGES_SUCCESS",
+            data: {
+              messages: newUniqueMessages,
+              totalCount: actualTotalCount,
+              loadingOldMessages: false
+            }
+          });
+        } else {
+          if (__DEV__)
+            console.log("No thread replies returned when loading more messages");
+          registerLoadAttemptResult(false);
+          safeSend({
+            type: Actions.SET_THREAD_MESSAGES,
+            data: {
+              messages: threadMessages,
+              totalCount: threadMessages.length,
+              threadPost: safeContextProperty("threadPost", []),
+              postThread: safeContextProperty("postThread", null)
+            }
+          });
+        }
+      } else {
+        if (__DEV__)
+          console.log("No thread data returned when loading more messages");
+        registerLoadAttemptResult(false);
+        safeSend({
+          type: Actions.STOP_LOADING,
+          data: {
+            loadingOldMessages: false
+          }
+        });
+      }
+    }).catch((error) => {
+      console.error("Error fetching more messages:", error);
+      registerLoadAttemptResult(false);
+      safeSend({
+        type: "ERROR",
+        data: {
+          message: error.message,
+          loadingOldMessages: false
+        }
+      });
+    });
+  }, [parentId, channelId, role, safeContextProperty, safeSend, fetchMoreMessages, registerLoadAttemptResult]);
   return /* @__PURE__ */ React__default.createElement(SafeAreaView, { style: {
     flex: 1
   } }, 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: () => {
@@ -1417,13 +1480,13 @@ const ThreadConversationViewComponent = ({
       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: {
+  }, 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, ((_b = safeContextProperty("threadPost", [])) == null ? void 0 : _b.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((_e = (_d = (_c = safeContextProperty("threadPost")[0]) == null ? void 0 : _c.author) == null ? void 0 : _d.username) == null ? void 0 : _e.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", " ", (() => {
+    uri: (_g = (_f = safeContextProperty("threadPost")[0]) == null ? void 0 : _f.author) == null ? void 0 : _g.picture
+  } })), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-black" }, (_j = (_i = (_h = safeContextProperty("threadPost")[0]) == null ? void 0 : _h.author) == null ? void 0 : _i.givenName) != null ? _j : "", " ", (_m = (_l = (_k = safeContextProperty("threadPost")[0]) == null ? void 0 : _k.author) == null ? void 0 : _l.familyName) != null ? _m : ""), /* @__PURE__ */ React__default.createElement(Text, { className: "pl-0 color-gray-500" }, createdAtText((_n = safeContextProperty("threadPost")[0]) == null ? void 0 : _n.createdAt), " at", " ", (() => {
     var _a2;
     try {
       const createdAt = (_a2 = safeContextProperty("threadPost")[0]) == null ? void 0 : _a2.createdAt;
@@ -1436,7 +1499,7 @@ const ThreadConversationViewComponent = ({
       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: {
+  })()))), /* @__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: {
     onScroll: handleScrollToTop,
     onEndReached: handleEndReached,
     onEndReachedThreshold: 0.2,
@@ -1458,7 +1521,8 @@ const ThreadConversationViewComponent = ({
     }
     const currentInputText = currentMessageText;
     const messageToSend = (currentInputText == null ? void 0 : currentInputText.trim()) || ((_b2 = (_a2 = messages[0]) == null ? void 0 : _a2.text) == null ? void 0 : _b2.trim()) || " ";
-    console.log("GiftedChat onSend triggered with text from state:", messageToSend);
+    if (__DEV__)
+      console.log("GiftedChat onSend triggered with text from state:", messageToSend);
     safeSend({
       type: Actions.SET_MESSAGE_TEXT,
       data: {
@@ -1466,7 +1530,8 @@ const ThreadConversationViewComponent = ({
       }
     });
     if (safeContextProperty("images", []).length > 0) {
-      console.log("Sending message with file:", messageToSend, "Images:", safeContextProperty("images", []).length);
+      if (__DEV__)
+        console.log("Sending message with file:", messageToSend, "Images:", safeContextProperty("images", []).length);
       safeSend({
         type: Actions.SEND_THREAD_MESSAGE_WITH_FILE,
         data: {
@@ -1474,7 +1539,8 @@ const ThreadConversationViewComponent = ({
         }
       });
     } else {
-      console.log("Sending text message:", messageToSend);
+      if (__DEV__)
+        console.log("Sending text message:", messageToSend);
       safeSend({
         type: Actions.SEND_THREAD_MESSAGE,
         data: {
@@ -1483,9 +1549,6 @@ const ThreadConversationViewComponent = ({
       });
     }
   }, text: currentMessageText, onInputTextChanged: (text) => {
-    if (text.length % 5 === 0 || text.length < 5) {
-      console.log("Input text changed:", text);
-    }
     safeSend({
       type: Actions.SET_MESSAGE_TEXT,
       data: {
@@ -1494,7 +1557,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: !!((_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) => [{
+  }, isTyping: safeContextProperty("loading", false), 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, renderMessageText, maxInputLength: 1e3, placeholder: "Type a message...", showUserAvatar: true, showAvatarForEveryMessage: false, inverted: true, parsePatterns: (linkStyle) => [{
     type: "url",
     style: __spreadProps(__spreadValues({}, linkStyle), {
       color: colors.blue[500]
@@ -1544,7 +1607,7 @@ const ThreadConversationViewComponent = ({
         return prev;
       const newMessage = (_a2 = subscriptionData == null ? void 0 : subscriptionData.data) == null ? void 0 : _a2.threadChatMessageAdded;
       const prevReplyCount = (_b2 = prev == null ? void 0 : prev.getPostThread) == null ? void 0 : _b2.replyCount;
-      const newReplyCount = prevReplyCount || 0 + 1;
+      const newReplyCount = (prevReplyCount || 0) + 1;
       const replies = ((_c2 = prev == null ? void 0 : prev.getPostThread) == null ? void 0 : _c2.replies) || [];
       safeSend({
         type: Actions.SET_THREAD_MESSAGES,
@@ -1566,11 +1629,11 @@ const ThreadConversationViewComponent = ({
         })
       });
     }
-  }) })), messagesContainerStyle: (messageList == null ? void 0 : messageList.length) == 0 && {
+  }) })), messagesContainerStyle: (messageList == null ? void 0 : messageList.length) == 0 ? {
     transform: [{
       scaleY: -1
     }]
-  }, renderChatEmpty: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !threadLoading && messageList && (messageList == null ? void 0 : messageList.length) == 0 && /* @__PURE__ */ React__default.createElement(Box, { className: "p-5" }, /* @__PURE__ */ React__default.createElement(Center, { className: "mt-6" }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "chatbubbles", size: 30 }), /* @__PURE__ */ React__default.createElement(Text, null, "You don't have any message yet!")))), lightboxProps: {
+  } : void 0, renderChatEmpty: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !threadLoading && messageList && (messageList == null ? void 0 : messageList.length) == 0 && /* @__PURE__ */ React__default.createElement(Box, { className: "p-5" }, /* @__PURE__ */ React__default.createElement(Center, { className: "mt-6" }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "chatbubbles", size: 30 }), /* @__PURE__ */ React__default.createElement(Text, null, "You don't have any message yet!")))), lightboxProps: {
     underlayColor: "transparent",
     springConfig: {
       tension: 9e4,