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

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

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {Button,Spinner,VStack,HStack,Avatar,AvatarFallbackText,AvatarImage,Box,Text,Center,Image,ButtonText}from'@admin-layout/gluestack-ui-mobile';import {Platform}from'react-native';import {useRoute,useNavigation,useFocusEffect}from'@react-navigation/native';import {useSelector}from'react-redux';import {uniqBy,orderBy,startCase}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {encode}from'base-64';import {MaterialIcons,Ionicons,MaterialCommunityIcons}from'@expo/vector-icons';import {GiftedChat,Actions,MessageText,Send}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';var __defProp = Object.defineProperty;
+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;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -34,42 +34,277 @@ const createdAtText = (value) => {
     return "Yesterday";
   return format(new Date(value), "MMM dd, yyyy");
 };
+function useSafeMachine(machine) {
+  const [state, setState] = useState({
+    context: {
+      channelId: null,
+      postParentId: null,
+      role: null,
+      threadMessages: [],
+      totalCount: 0,
+      skip: 0,
+      loading: false,
+      loadingOldMessages: false,
+      error: null,
+      selectedImage: "",
+      files: [],
+      images: [],
+      messageText: "",
+      imageLoading: false,
+      postThread: null,
+      threadPost: [],
+      isScrollToBottom: false
+    },
+    value: "idle"
+  });
+  const send = useCallback((event) => {
+    var _a, _b, _c, _d;
+    try {
+      console.log("Thread Event received:", event.type);
+      if (event.type === Actions.INITIAL_CONTEXT) {
+        setState((prev) => {
+          var _a2, _b2, _c2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              channelId: ((_a2 = event.data) == null ? void 0 : _a2.channelId) || null,
+              postParentId: ((_b2 = event.data) == null ? void 0 : _b2.postParentId) || null,
+              role: ((_c2 = event.data) == null ? void 0 : _c2.role) || null
+            }),
+            value: BaseState.FetchThreadMessages
+          });
+        });
+      } else if (event.type === Actions.SET_THREAD_MESSAGES) {
+        setState((prev) => {
+          var _a2, _b2, _c2, _d2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              threadMessages: ((_a2 = event.data) == null ? void 0 : _a2.messages) || [],
+              totalCount: ((_b2 = event.data) == null ? void 0 : _b2.totalCount) || 0,
+              loading: false,
+              loadingOldMessages: false,
+              threadPost: ((_c2 = event.data) == null ? void 0 : _c2.threadPost) || [],
+              postThread: ((_d2 = event.data) == null ? void 0 : _d2.postThread) || null
+            }),
+            value: "active"
+          });
+        });
+      } else if (event.type === Actions.CLEAR_MESSAGES) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            threadMessages: [],
+            totalCount: 0
+          })
+        }));
+      } else if (event.type === Actions.SET_MESSAGE_TEXT) {
+        setState((prev) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              messageText: ((_a2 = event.data) == null ? void 0 : _a2.messageText) || ""
+            })
+          });
+        });
+      } else if (event.type === Actions.FETCH_MORE_MESSAGES) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            loadingOldMessages: true
+          }),
+          value: MainState.FetchMoreMessages
+        }));
+      } else if (event.type === Actions.SET_IMAGE) {
+        setState((prev) => {
+          var _a2, _b2, _c2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              selectedImage: ((_a2 = event.data) == null ? void 0 : _a2.image) || "",
+              images: ((_b2 = event.data) == null ? void 0 : _b2.images) || [],
+              files: ((_c2 = event.data) == null ? void 0 : _c2.files) || [],
+              imageLoading: false
+            })
+          });
+        });
+      } else if (event.type === Actions.CLEAR_IMAGE) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            selectedImage: "",
+            images: [],
+            files: []
+          })
+        }));
+      } else if (event.type === Actions.START_LOADING) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            loading: true
+          })
+        }));
+      } else if (event.type === Actions.STOP_LOADING) {
+        setState((prev) => __spreadProps(__spreadValues({}, prev), {
+          context: __spreadProps(__spreadValues({}, prev.context), {
+            loading: false
+          })
+        }));
+      } 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) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              loading: true,
+              messageText: ((_a2 = event.data) == null ? void 0 : _a2.messageText) || prev.context.messageText
+            }),
+            value: MainState.SendThreadMessage
+          });
+        });
+      } else if (event.type === Actions.SEND_THREAD_MESSAGE_WITH_FILE) {
+        console.log("Sending message with file event, text:", (_b = event.data) == null ? void 0 : _b.messageText);
+        setState((prev) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              loading: true,
+              messageText: ((_a2 = event.data) == null ? void 0 : _a2.messageText) || prev.context.messageText
+            }),
+            value: MainState.SendThreadMessageWithFile
+          });
+        });
+      } else if (event.type === "SEND_THREAD_MESSAGE_SUCCESS" || event.type === "SEND_THREAD_MESSAGE_WITH_FILE_SUCCESS") {
+        console.log("Handling send success event:", event.type, "with message:", (_d = (_c = event.data) == null ? void 0 : _c.message) == null ? void 0 : _d.id);
+        setState((prev) => {
+          var _a2;
+          if (!((_a2 = event.data) == null ? void 0 : _a2.message)) {
+            console.warn("Send success event without message data");
+            return __spreadProps(__spreadValues({}, prev), {
+              context: __spreadProps(__spreadValues({}, prev.context), {
+                loading: false,
+                messageText: "",
+                images: [],
+                selectedImage: "",
+                files: []
+              }),
+              value: "active"
+            });
+          }
+          const newMessage = event.data.message;
+          const updatedMessages = [newMessage, ...prev.context.threadMessages];
+          console.log("Updated thread messages list after send, now has", updatedMessages.length, "messages");
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              loading: false,
+              messageText: "",
+              images: [],
+              selectedImage: "",
+              files: [],
+              threadMessages: updatedMessages,
+              totalCount: prev.context.totalCount + 1
+            }),
+            value: "active"
+          });
+        });
+      } else if (event.type === "FETCH_MORE_MESSAGES_SUCCESS") {
+        setState((prev) => {
+          var _a2;
+          const newMessages = ((_a2 = event.data) == null ? void 0 : _a2.messages) || [];
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              loadingOldMessages: false,
+              threadMessages: uniqBy([...prev.context.threadMessages, ...newMessages], ({
+                id
+              }) => id)
+            }),
+            value: "active"
+          });
+        });
+      } else if (event.type === "ERROR") {
+        setState((prev) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, prev), {
+            context: __spreadProps(__spreadValues({}, prev.context), {
+              loading: false,
+              loadingOldMessages: false,
+              error: ((_a2 = event.data) == null ? void 0 : _a2.message) || "Unknown error"
+            }),
+            value: "error"
+          });
+        });
+      }
+    } catch (error) {
+      console.error("Error in thread conversation send function:", error);
+    }
+  }, []);
+  const stateWithMatches = useMemo(() => {
+    return __spreadProps(__spreadValues({}, state), {
+      matches: (checkState) => {
+        return state.value === checkState;
+      }
+    });
+  }, [state]);
+  return [stateWithMatches, send];
+}
 const ThreadConversationViewComponent = ({
   channelId,
   postParentId,
   isPostParentIdThread,
   role
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+  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();
   const [channelToTop, setChannelToTop] = useState(0);
-  const [channelMessages, setChannelMessages] = useState([]);
+  useRef(true);
+  const [state, send] = useSafeMachine();
+  useCallback(() => {
+    try {
+      return (state == null ? void 0 : state.context) || {};
+    } catch (error) {
+      console.error("Error accessing state.context:", error);
+      return {};
+    }
+  }, [state]);
+  const safeContextProperty = useCallback((property, defaultValue = null) => {
+    var _a2, _b2;
+    try {
+      return (_b2 = (_a2 = state == null ? void 0 : state.context) == null ? void 0 : _a2[property]) != null ? _b2 : defaultValue;
+    } catch (error) {
+      console.error(`Error accessing state.context.${property}:`, error);
+      return defaultValue;
+    }
+  }, [state]);
+  const safeMatches = useCallback((stateValue) => {
+    var _a2;
+    try {
+      return ((_a2 = state == null ? void 0 : state.matches) == null ? void 0 : _a2.call(state, stateValue)) || false;
+    } catch (error) {
+      console.error(`Error calling state.matches with ${stateValue}:`, error);
+      return false;
+    }
+  }, [state]);
+  const safeSend = useCallback((event) => {
+    try {
+      send(event);
+    } catch (error) {
+      console.error("Error sending event to state machine:", error, event);
+    }
+  }, [send]);
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
   const auth = useSelector(userSelector);
-  const [totalCount, setTotalCount] = useState(0);
   const [selectedImage, setImage] = useState("");
-  const [loadingOldMessages, setLoadingOldMessages] = useState(false);
-  const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
   const navigation = useNavigation();
   const [files, setFiles] = useState([]);
   const [images, setImages] = useState([]);
-  const [msg, setMsg] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [imageLoading, setImageLoading] = useState(false);
-  const [expoTokens, setExpoTokens] = useState([]);
   const [isShowImageViewer, setImageViewer] = useState(false);
   const [imageObject, setImageObject] = useState({});
   const [parentId, setParentId] = useState(postParentId);
-  const [postThread, setPostThread] = useState();
-  const {
-    startUpload
-  } = useUploadFilesNative();
-  const [threadPost, setThreadPost] = useState([]);
-  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+  const [expoTokens, setExpoTokens] = useState([]);
   const threadMessageListRef = useRef(null);
   const [sendThreadMessage] = useCreatePostThreadMutation();
   const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+  const {
+    startUpload
+  } = useUploadFilesNative();
   const [getThreadMessages, {
     data,
     loading: threadLoading,
@@ -85,23 +320,48 @@ const ThreadConversationViewComponent = ({
       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" }))
     });
-    if (postParentId) {
-      refetchThreadMessages({
-        channelId: channelId == null ? void 0 : channelId.toString(),
-        role: role == null ? void 0 : role.toString(),
-        postParentId: postParentId == null ? void 0 : postParentId.toString(),
-        selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
-        limit: MESSAGES_PER_PAGE
+    if (channelId && postParentId) {
+      safeSend({
+        type: Actions.INITIAL_CONTEXT,
+        data: {
+          channelId,
+          postParentId,
+          role
+        }
       });
     }
     setParentId(postParentId);
     return () => {
-      setTotalCount(0);
-      setChannelMessages([]);
-      setThreadPost([]);
+      safeSend({
+        type: Actions.CLEAR_MESSAGES
+      });
     };
   }, [postParentId]));
   useEffect(() => {
+    if (safeMatches(BaseState.FetchThreadMessages)) {
+      fetchThreadMessages();
+    }
+  }, [state.value]);
+  useEffect(() => {
+    if (safeMatches(MainState.FetchMoreMessages)) {
+      onFetchOld();
+    }
+  }, [state.value]);
+  useEffect(() => {
+    if (safeMatches(MainState.SendThreadMessage)) {
+      const messageText = safeContextProperty("messageText", "");
+      console.log("Sending message from state transition, text:", messageText);
+      sendThreadMessageHandler(messageText);
+    }
+  }, [state.value]);
+  useEffect(() => {
+    if (safeMatches(MainState.SendThreadMessageWithFile)) {
+      const messageText = safeContextProperty("messageText", "");
+      const images2 = safeContextProperty("images", []);
+      sendThreadMessageWithFileHandler(messageText, images2);
+    }
+  }, [state.value]);
+  const fetchThreadMessages = useCallback(() => {
     if (channelId && parentId) {
       getThreadMessages({
         variables: {
@@ -111,43 +371,78 @@ const ThreadConversationViewComponent = ({
           selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
           limit: MESSAGES_PER_PAGE
         }
+      }).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];
+          safeSend({
+            type: Actions.SET_THREAD_MESSAGES,
+            data: {
+              messages,
+              totalCount: messageTotalCount,
+              threadPost,
+              postThread: threads
+            }
+          });
+        }
+      }).catch((error) => {
+        safeSend({
+          type: "ERROR",
+          data: {
+            message: error.message
+          }
+        });
       });
     }
-  }, [parentId]);
+  }, [channelId, parentId, role]);
   React__default.useEffect(() => {
     var _a2, _b2, _c2;
     if (data == null ? void 0 : data.getPostThread) {
       const threads = data.getPostThread;
-      const threadPost2 = (_a2 = threads == null ? void 0 : threads.post) != null ? _a2 : [];
+      const threadPost = (_a2 = threads == null ? void 0 : threads.post) != null ? _a2 : [];
       const threadReplies = (_b2 = threads == null ? void 0 : threads.replies) != null ? _b2 : [];
       const messeageTotalCount = (_c2 = threads == null ? void 0 : threads.replyCount) != null ? _c2 : 0;
-      const messages = [threadPost2, ...threadReplies];
-      if (messages && messages.length > 0 && messeageTotalCount > totalCount || messages && messages.length > 0 && channelMessages.length === 0) {
-        setThreadMessages(messages, messeageTotalCount);
-      }
+      const messages = [...threadReplies];
+      safeSend({
+        type: Actions.SET_THREAD_MESSAGES,
+        data: {
+          messages,
+          totalCount: messeageTotalCount,
+          threadPost,
+          postThread: threads
+        }
+      });
     }
-    if (isScrollToBottom && channelMessages)
-      scrollToBottom();
-  }, [data, channelMessages, loadingOldMessages, totalCount, isPostParentIdThread, isScrollToBottom]);
-  const setThreadMessages = (messages, messagesTotalCount) => {
-    setChannelMessages((oldMessages) => uniqBy([...messages, ...oldMessages], ({
-      id
-    }) => id));
-    setTotalCount(messagesTotalCount);
-  };
+  }, [data]);
   React__default.useEffect(() => {
-    if (selectedImage)
-      setImageLoading(false);
-  }, [selectedImage]);
-  const scrollToBottom = React__default.useCallback(() => {
+    if (safeContextProperty("selectedImage")) {
+      safeSend({
+        type: Actions.STOP_LOADING
+      });
+    }
+  }, [safeContextProperty("selectedImage")]);
+  React__default.useCallback(() => {
     if (threadMessageListRef == null ? void 0 : threadMessageListRef.current) {
-      setIsScrollToBottom(false);
-      threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
+      threadMessageListRef.current.scrollToBottom();
     }
   }, [threadMessageListRef]);
   const onFetchOld = useCallback(() => {
-    if (totalCount > channelMessages.length && !loadingOldMessages) {
-      setLoadEarlierMsg(true);
+    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.START_LOADING,
+        data: {
+          loadingOldMessages: true
+        }
+      });
       fetchMoreMessages({
         variables: {
           channelId: channelId == null ? void 0 : channelId.toString(),
@@ -155,73 +450,228 @@ const ThreadConversationViewComponent = ({
           postParentId: parentId == null ? void 0 : parentId.toString(),
           selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
           limit: MESSAGES_PER_PAGE,
-          skip: channelMessages.length - 1
+          skip: threadMessages.length
         }
       }).then((res) => {
-        var _a2, _b2, _c2, _d2;
+        var _a2, _b2, _c2;
         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 messeageTotalCount = (_d2 = threads == null ? void 0 : threads.replyCount) != null ? _d2 : 0;
-          setThreadMessages(threadReplies, messeageTotalCount);
+          console.log("Successfully loaded more messages:", threadReplies.length);
+          safeSend({
+            type: "FETCH_MORE_MESSAGES_SUCCESS",
+            data: {
+              messages: threadReplies,
+              loadingOldMessages: false
+            }
+          });
+        } else {
+          console.log("No thread data returned when loading more messages");
+          safeSend({
+            type: Actions.STOP_LOADING,
+            data: {
+              loadingOldMessages: false
+            }
+          });
         }
-      }).finally(() => {
-        setLoadEarlierMsg(false);
-        setLoadingOldMessages(false);
       }).catch((error) => {
-        setLoadEarlierMsg(false);
-        setLoadingOldMessages(false);
+        console.error("Error fetching more messages:", error);
+        safeSend({
+          type: "ERROR",
+          data: {
+            message: error.message,
+            loadingOldMessages: false
+          }
+        });
       });
+    } else {
+      console.log("No more messages to load or already loading");
+    }
+  }, [parentId, channelId, state.context]);
+  const handleScrollToTop = ({
+    nativeEvent
+  }) => {
+    if (isCloseToTop(nativeEvent)) {
+      if (!safeContextProperty("loadingOldMessages", false) && safeContextProperty("totalCount", 0) > safeContextProperty("threadMessages", []).length) {
+        console.log("Near top of list - loading older messages");
+        safeSend({
+          type: Actions.FETCH_MORE_MESSAGES
+        });
+      }
     }
-  }, [parentId, channelId, totalCount, channelMessages]);
+  };
+  const handleEndReached = () => {
+    console.log("Reached end of message list");
+  };
   const isCloseToTop = ({
     layoutMeasurement,
     contentOffset,
     contentSize
   }) => {
-    const paddingToTop = 60;
-    return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
-  };
-  const dataURLtoFile = (dataurl, filename) => {
-    var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = encode(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n);
-    }
-    return new File([u8arr], filename, {
-      type: mime
-    });
+    const paddingToTop = 80;
+    return contentOffset.y <= paddingToTop;
   };
   const onSelectImages = async () => {
     var _a2;
-    setImageLoading(true);
-    let imageSource = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: true,
-      aspect: [4, 3],
-      quality: 1,
-      base64: true
-    });
-    if (!imageSource.canceled) {
-      const image = "data:image/jpeg;base64," + ((_a2 = imageSource.assets[0]) == null ? void 0 : _a2.base64);
-      setImage(image);
-      const file = dataURLtoFile(image, "inputImage.jpg");
-      setFiles((files2) => files2.concat(file));
-      setImages((images2) => images2.concat(imageSource.assets[0]));
+    try {
+      safeSend({
+        type: Actions.START_LOADING
+      });
+      const imageSource = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [4, 3],
+        quality: 0.8,
+        base64: true,
+        allowsMultipleSelection: false
+      });
+      if (imageSource.canceled) {
+        console.log("Image selection was canceled");
+        safeSend({
+          type: Actions.STOP_LOADING
+        });
+        return;
+      }
+      if (!imageSource.assets || imageSource.assets.length === 0 || !((_a2 = imageSource.assets[0]) == null ? void 0 : _a2.base64)) {
+        console.error("No valid image data received");
+        safeSend({
+          type: "ERROR",
+          data: {
+            message: "No valid image data received"
+          }
+        });
+        return;
+      }
+      const asset = imageSource.assets[0];
+      const fileExtension = asset.mimeType ? asset.mimeType.split("/").pop() || "jpg" : "jpg";
+      const filename = `image_${Date.now()}.${fileExtension}`;
+      const mimeType = asset.mimeType || "image/jpeg";
+      const image = `data:${mimeType};base64,${asset.base64}`;
+      const fileData = {
+        uri: asset.uri,
+        type: mimeType,
+        name: filename,
+        base64: asset.base64
+      };
+      console.log(`Selected image: ${filename}, type: ${mimeType}`);
+      safeSend({
+        type: Actions.SET_IMAGE,
+        data: {
+          image,
+          files: [fileData],
+          images: [asset]
+        }
+      });
+    } catch (error) {
+      console.error("Error selecting image:", error);
+      safeSend({
+        type: "ERROR",
+        data: {
+          message: error.message || "Failed to select image"
+        }
+      });
     }
-    if (imageSource.canceled)
-      setLoading(false);
   };
-  const handleSend = useCallback(async (message) => {
-    var _a2;
-    if (!channelId)
+  const sendThreadMessageHandler = useCallback(async (message) => {
+    var _a2, _b2;
+    console.log("Sending message:", message);
+    if (!channelId) {
+      console.error("No channelId provided");
       return;
-    if (!message && message != " " && images.length == 0)
+    }
+    const messageContent = (message == null ? void 0 : message.trim()) || " ";
+    console.log("Using message content for sending:", messageContent);
+    const postId = objectId();
+    console.log("Generated postId:", postId);
+    safeSend({
+      type: Actions.START_LOADING
+    });
+    try {
+      console.log("Sending mutation with variables:", {
+        channelId,
+        postThreadId: (_a2 = safeContextProperty("postThread")) == null ? void 0 : _a2.id,
+        postParentId: !parentId || parentId == 0 ? null : parentId,
+        message: messageContent
+      });
+      const result = await sendThreadMessage({
+        variables: {
+          channelId,
+          postThreadId: safeContextProperty("postThread") && ((_b2 = safeContextProperty("postThread")) == null ? void 0 : _b2.id),
+          postParentId: !parentId || parentId == 0 ? null : parentId,
+          threadMessageInput: {
+            content: messageContent,
+            role
+          }
+        },
+        update: (cache, {
+          data: data2,
+          errors
+        }) => {
+          var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2;
+          console.log("Send message update callback - data:", data2, "errors:", errors);
+          if (!data2 || errors) {
+            console.error("Send message failed:", errors);
+            safeSend({
+              type: Actions.STOP_LOADING
+            });
+            return;
+          }
+          console.log("Message sent successfully:", (_a3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _a3.lastMessage);
+          const newMessage = (_b3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _b3.lastMessage;
+          safeSend({
+            type: "SEND_THREAD_MESSAGE_SUCCESS",
+            data: {
+              message: newMessage,
+              messageText: ""
+            }
+          });
+          if (!parentId || parentId == 0) {
+            console.log("Setting new parentId:", (_d2 = (_c2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _c2.lastMessage) == null ? void 0 : _d2.id);
+            setParentId((_f2 = (_e2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _e2.lastMessage) == null ? void 0 : _f2.id);
+          }
+          setChannelToTop(channelToTop + 1);
+          const lastMessageId = (_h2 = (_g2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _g2.lastMessage) == null ? void 0 : _h2.id;
+          sendPushNotification(lastMessageId, channelId, parentId, (_j2 = (_i2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _i2.data) == null ? void 0 : _j2.id);
+        }
+      });
+      console.log("Send mutation result:", result);
+    } catch (error) {
+      console.error("Error sending message:", error);
+      safeSend({
+        type: "ERROR",
+        data: {
+          message: error.message || "Failed to send message"
+        }
+      });
+    }
+  }, [channelId, parentId, state.context, role]);
+  const sendThreadMessageWithFileHandler = useCallback(async (message, images2) => {
+    var _a2, _b2;
+    console.log("Sending message with file:", message, "Images:", images2.length);
+    if (!channelId) {
+      console.error("No channelId provided");
+      return;
+    }
+    if (images2.length === 0) {
+      console.error("No images to send");
       return;
+    }
+    const messageContent = (message == null ? void 0 : message.trim()) || " ";
+    console.log("Using message content for file send:", messageContent);
     const postId = objectId();
-    if (images && images.length > 0) {
-      setLoading(true);
+    console.log("Generated postId for file upload:", postId);
+    try {
+      const preparedImages = images2.map((img) => ({
+        uri: img.uri,
+        type: img.mimeType || "image/jpeg",
+        name: img.fileName || `image_${Date.now()}.jpg`,
+        base64: img.base64,
+        width: img.width || 0,
+        height: img.height || 0
+      }));
+      console.log("Starting file upload with prepared images:", preparedImages.length);
       const uploadResponse = await startUpload({
-        file: images,
+        file: preparedImages,
         saveUploadedFile: {
           variables: {
             postId
@@ -233,22 +683,27 @@ const ThreadConversationViewComponent = ({
           }
         }
       });
-      if (uploadResponse == null ? void 0 : uploadResponse.error)
-        setLoading(false);
+      if (uploadResponse == null ? void 0 : uploadResponse.error) {
+        console.error("File upload failed:", uploadResponse.error);
+        safeSend({
+          type: Actions.STOP_LOADING
+        });
+        return;
+      }
       const uploadedFiles = uploadResponse.data;
+      console.log("Files uploaded successfully:", uploadedFiles == null ? void 0 : uploadedFiles.length);
       if (uploadResponse.data) {
-        setImage("");
-        setFiles([]);
-        setImages([]);
         const files2 = (_a2 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _a2 : null;
-        await sendThreadMessage({
+        console.log("File IDs for message:", files2);
+        console.log("Sending message with attached files");
+        const result = await sendThreadMessage({
           variables: {
             postId,
             channelId,
-            postThreadId: postThread && (postThread == null ? void 0 : postThread.id),
+            postThreadId: safeContextProperty("postThread") && ((_b2 = safeContextProperty("postThread")) == null ? void 0 : _b2.id),
             postParentId: !parentId || parentId == 0 ? null : parentId,
             threadMessageInput: {
-              content: message,
+              content: messageContent,
               files: files2,
               role
             }
@@ -257,57 +712,45 @@ const ThreadConversationViewComponent = ({
             data: data2,
             errors
           }) => {
-            var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
+            var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2;
+            console.log("Send message with file update callback - data:", data2, "errors:", errors);
             if (!data2 || errors) {
-              setLoading(false);
+              console.error("Send message with file failed:", errors);
+              safeSend({
+                type: Actions.STOP_LOADING
+              });
               return;
             }
-            setPostThread((_a3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _a3.data);
-            const lastMessageId = (_c2 = (_b2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _b2.lastMessage) == null ? void 0 : _c2.id;
+            console.log("Message with file sent successfully:", (_a3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _a3.lastMessage);
+            const newMessage = (_b3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _b3.lastMessage;
+            safeSend({
+              type: "SEND_THREAD_MESSAGE_WITH_FILE_SUCCESS",
+              data: {
+                message: newMessage,
+                messageText: ""
+              }
+            });
             if (!parentId || parentId == 0) {
-              setParentId((_e2 = (_d2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _d2.lastMessage) == null ? void 0 : _e2.id);
+              console.log("Setting new parentId:", (_d2 = (_c2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _c2.lastMessage) == null ? void 0 : _d2.id);
+              setParentId((_f2 = (_e2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _e2.lastMessage) == null ? void 0 : _f2.id);
             }
             setChannelToTop(channelToTop + 1);
-            setLoading(false);
-            setMsg("");
-            sendPushNotification(lastMessageId, channelId, parentId, (_g2 = (_f2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _f2.data) == null ? void 0 : _g2.id);
+            const lastMessageId = (_h2 = (_g2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _g2.lastMessage) == null ? void 0 : _h2.id;
+            sendPushNotification(lastMessageId, channelId, parentId, (_j2 = (_i2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _i2.data) == null ? void 0 : _j2.id);
           }
         });
+        console.log("Send with file mutation result:", result);
       }
-    } else {
-      setLoading(true);
-      await sendThreadMessage({
-        variables: {
-          channelId,
-          postThreadId: postThread && (postThread == null ? void 0 : postThread.id),
-          postParentId: !parentId || parentId == 0 ? null : parentId,
-          threadMessageInput: {
-            content: message,
-            role
-          }
-        },
-        update: (cache, {
-          data: data2,
-          errors
-        }) => {
-          var _a3, _b2, _c2, _d2, _e2, _f2;
-          if (!data2 || errors) {
-            setLoading(false);
-            return;
-          }
-          setPostThread(data2 == null ? void 0 : data2.createPostThread.data);
-          const lastMessageId = (_b2 = (_a3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _a3.lastMessage) == null ? void 0 : _b2.id;
-          if (!parentId || parentId == 0) {
-            setParentId((_d2 = (_c2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _c2.lastMessage) == null ? void 0 : _d2.id);
-          }
-          setChannelToTop(channelToTop + 1);
-          setLoading(false);
-          setMsg("");
-          sendPushNotification(lastMessageId, channelId, parentId, (_f2 = (_e2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _e2.data) == null ? void 0 : _f2.id);
+    } catch (error) {
+      console.error("Error sending message with file:", error);
+      safeSend({
+        type: "ERROR",
+        data: {
+          message: error.message || "Failed to send message with file"
         }
       });
     }
-  }, [setChannelMessages, channelId, images, parentId, expoTokens]);
+  }, [channelId, parentId, state.context, role, startUpload]);
   const sendPushNotification = async (messageId, channelId2, parentId2, threadId) => {
     var _a2;
     const notificationData = {
@@ -336,121 +779,129 @@ const ThreadConversationViewComponent = ({
     }
   };
   const messageList = useMemo(() => {
+    const threadMessages = safeContextProperty("threadMessages", []);
+    console.log(`Creating message list from ${threadMessages.length} thread messages`);
     let res = [];
-    const filteredMessages = channelMessages && (channelMessages == null ? void 0 : channelMessages.length) > 0 ? uniqBy([...channelMessages], ({
-      id
-    }) => id) : [];
-    if (filteredMessages == null ? void 0 : filteredMessages.length) {
-      orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg2) => {
-        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
+    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, _n2, _o2;
+        const uniqueId = msg.id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
         let message = {
-          _id: "",
-          text: "",
-          createdAt: 0,
+          _id: uniqueId,
+          text: msg.message || "",
+          createdAt: new Date(msg.createdAt),
           user: {
-            _id: "",
-            name: "",
-            avatar: ""
+            _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
           },
-          type: ""
+          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,
+          sent: (msg == null ? void 0 : msg.isDelivered) || true,
+          received: (msg == null ? void 0 : msg.isRead) || false,
+          propsConfiguration: msg == null ? void 0 : msg.propsConfiguration
         };
-        const date = new Date(msg2.createdAt);
-        message._id = msg2.id;
-        message.text = msg2.message;
-        message.createdAt = date;
-        message.user = {
-          _id: (_c2 = (_a2 = msg2 == null ? void 0 : msg2.author) == null ? void 0 : _a2.id) != null ? _c2 : (_b2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _b2.id,
-          name: (_i2 = (_g2 = (_d2 = msg2 == null ? void 0 : msg2.author) == null ? void 0 : _d2.givenName) != null ? _g2 : ((_e2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _e2.given_name) + " " + ((_f2 = msg2 == null ? void 0 : msg2.author) == null ? void 0 : _f2.familyName)) != null ? _i2 : (_h2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _h2.family_name,
-          avatar: (_l2 = (_j2 = msg2 == null ? void 0 : msg2.author) == null ? void 0 : _j2.picture) != null ? _l2 : (_k2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _k2.picture
-        }, message.image = (_n2 = (_m2 = msg2.files) == null ? void 0 : _m2.data[0]) == null ? void 0 : _n2.url, message.sent = msg2 == null ? void 0 : msg2.isDelivered, message.received = msg2 == null ? void 0 : msg2.isRead;
-        message.type = msg2 == null ? void 0 : msg2.type;
-        message.propsConfiguration = msg2 == null ? void 0 : msg2.propsConfiguration;
-        res.push(message);
+        return message;
       });
     }
-    return (res == null ? void 0 : res.length) > 0 ? uniqBy([...res], ({
-      _id
-    }) => _id) : [];
-  }, [channelMessages]);
+    const sortedMessages = res.sort((a, b) => b.createdAt - a.createdAt);
+    return sortedMessages;
+  }, [safeContextProperty("threadMessages"), auth]);
   const renderSend = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Send, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", style: {
-      marginBottom: 5,
-      marginRight: 5
-    }, size: 32, color: "#2e64e5" })));
+    const hasImage = safeContextProperty("selectedImage", "") !== "";
+    const isDisabled = !hasImage && (!props.text || props.text.trim().length === 0);
+    return /* @__PURE__ */ React__default.createElement(Send, __spreadProps(__spreadValues({}, props), { containerStyle: {
+      alignItems: "center",
+      justifyContent: "center",
+      marginHorizontal: 4,
+      marginBottom: 0
+    }, disabled: isDisabled }), /* @__PURE__ */ React__default.createElement(Box, { style: {
+      width: 32,
+      height: 32,
+      alignItems: "center",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", size: 30, color: isDisabled ? colors.gray[400] : colors.blue[500] })));
   };
-  const renderMessageText = (props) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t, _u, _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) ? (_t = (_s2 = route == null ? void 0 : route.host) == null ? void 0 : _s2.name) != null ? _t : null : null;
-          param = ((_u = route == null ? void 0 : route.host) == null ? void 0 : _u.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)
+  const renderActions = (props) => {
+    return /* @__PURE__ */ React__default.createElement(
+      Actions$1,
+      __spreadProps(__spreadValues({}, props), {
+        options: {
+          ["Choose from Library"]: onSelectImages,
+          ["Cancel"]: () => {
+          }
         },
-        /* @__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
+        optionTintColor: "#000000",
+        cancelButtonIndex: 1,
+        icon: () => /* @__PURE__ */ React__default.createElement(Box, { style: {
+          width: 32,
+          height: 32,
+          alignItems: "center",
+          justifyContent: "center"
+        } }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "image", size: 24, color: colors.blue[500] })),
+        containerStyle: {
+          alignItems: "center",
+          justifyContent: "center",
+          marginLeft: 8,
+          marginBottom: 0
         }
-      } })));
-    } else {
-      return /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
-        left: {
-          marginLeft: 5
-        }
-      } }));
-    }
-  };
-  const renderActions = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Actions, __spreadProps(__spreadValues({}, props), { icon: () => /* @__PURE__ */ React__default.createElement(Ionicons, { name: "image", size: 30, color: "black", onPress: onSelectImages }) }));
+      })
+    );
   };
   const renderAccessory = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Box, null, selectedImage !== "" ? /* @__PURE__ */ React__default.createElement(HStack, { className: "items-center" }, /* @__PURE__ */ React__default.createElement(Image, { className: "ml-3", key: selectedImage, alt: "image", source: {
-      uri: selectedImage
-    }, size: "xs" }), /* @__PURE__ */ React__default.createElement(Button, { variant: "solid", className: "bg-transparent", onPress: () => {
-      setFiles([]);
-      setImage("");
-      setImages([]);
-    } }, /* @__PURE__ */ React__default.createElement(ButtonText, { className: "color-black" }, "Cancel"))) : null);
+    var _a2, _b2;
+    const selectedImage2 = safeContextProperty("selectedImage", "");
+    if (!selectedImage2) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default.createElement(View, { style: {
+      height: 80,
+      padding: 10,
+      backgroundColor: "white",
+      borderTopWidth: 1,
+      borderTopColor: "#e0e0e0",
+      flexDirection: "row",
+      alignItems: "center"
+    } }, /* @__PURE__ */ React__default.createElement(View, { style: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: 20
+    } }, /* @__PURE__ */ React__default.createElement(Image, { key: (_a2 = state == null ? void 0 : state.context) == null ? void 0 : _a2.selectedImage, alt: "selected image", source: {
+      uri: (_b2 = state == null ? void 0 : state.context) == null ? void 0 : _b2.selectedImage
+    }, size: "xs", style: {
+      width: 5,
+      height: 5,
+      borderRadius: 5,
+      marginRight: 20
+    } }), /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#dddddd", onPress: () => safeSend({
+      type: Actions.CLEAR_IMAGE
+    }), style: {
+      backgroundColor: "#f44336",
+      paddingVertical: 2,
+      paddingHorizontal: 5,
+      borderRadius: 5,
+      marginLeft: 10,
+      elevation: 3,
+      shadowColor: "#000",
+      shadowOffset: {
+        width: 0,
+        height: 1
+      },
+      shadowOpacity: 0.3,
+      shadowRadius: 2
+    } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
+      color: "white",
+      fontWeight: "bold"
+    } }, "X"))));
   };
   const setImageViewerObject = (obj, v) => {
     setImageObject(obj);
@@ -463,126 +914,182 @@ const ThreadConversationViewComponent = ({
       image,
       _id
     } = imageObject;
-    return /* @__PURE__ */ React__default.createElement(
-      CachedImage,
-      {
-        style: {
-          width: "100%",
-          height: "100%"
-        },
-        resizeMode: "cover",
-        cacheKey: `${_id}-slack-bubble-imageKey`,
-        source: {
-          uri: image,
-          expiresIn: 86400
-        },
-        alt: "image"
-      }
-    );
+    return /* @__PURE__ */ React__default.createElement(CachedImage, { style: {
+      width: "100%",
+      height: "100%"
+    }, resizeMode: "cover", cacheKey: `${_id}-slack-bubble-imageKey`, source: {
+      uri: image,
+      expiresIn: 86400
+    }, alt: "image" });
   }, [imageObject]);
   const renderMessage = (props) => {
     return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
   };
-  let onScroll = false;
-  const onMomentumScrollBegin = ({
-    nativeEvent
-  }) => {
-    onScroll = true;
-    console.log("scroll top");
-    if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages == null ? void 0 : channelMessages.length)) {
-      onFetchOld();
-    }
-  };
-  const onEndReached = () => {
-    console.log("on end reached");
-    if (!onScroll)
-      return;
-    onScroll = false;
+  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"
+    } }));
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (loadingOldMessages || loadEarlierMsg) && /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }), isPostParentIdThread && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (threadPost == null ? void 0 : threadPost.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((_c = (_b = (_a = threadPost[0]) == null ? void 0 : _a.author) == null ? void 0 : _b.username) == null ? void 0 : _c.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "image", style: {
+  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: {
     borderRadius: 6,
     borderWidth: 2,
     borderColor: "#fff"
   }, source: {
-    uri: (_e = (_d = threadPost[0]) == null ? void 0 : _d.author) == null ? void 0 : _e.picture
-  } })), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-black" }, (_h = (_g = (_f = threadPost[0]) == null ? void 0 : _f.author) == null ? void 0 : _g.givenName) != null ? _h : "", " ", (_k = (_j = (_i = threadPost[0]) == null ? void 0 : _i.author) == null ? void 0 : _j.familyName) != null ? _k : ""), /* @__PURE__ */ React__default.createElement(Text, { className: "pl-0 color-gray-500" }, createdAtText((_l = threadPost[0]) == null ? void 0 : _l.createdAt), " at", " ", format(new Date((_m = threadPost[0]) == null ? void 0 : _m.createdAt), "hh:ss:a")))), /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-2 items-center" }, /* @__PURE__ */ React__default.createElement(Text, null, (_o = (_n = 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 = threadPost[0]) == null ? void 0 : _p.replies) == null ? void 0 : _q.totalCount, " ", ((_s = (_r = 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: {
-        onEndReached,
-        onEndReachedThreshold: 0.5,
-        onMomentumScrollBegin
-      },
-      onSend: (messages) => {
-        var _a2, _b2;
-        return handleSend((_b2 = (_a2 = messages[0]) == null ? void 0 : _a2.text) != null ? _b2 : " ");
-      },
-      text: msg ? msg : " ",
-      onInputTextChanged: (text) => setMsg(text),
-      renderFooter: () => loading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }) : imageLoading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }) : "",
-      scrollToBottom: true,
-      user: {
-        _id: (auth == null ? void 0 : auth.id) || ""
-      },
-      isTyping: true,
-      alwaysShowSend: loading ? false : true,
-      infiniteScroll: true,
-      renderSend,
-      renderMessageText,
-      minInputToolbarHeight: 50,
-      renderActions,
-      renderAccessory,
-      renderMessage,
-      renderChatFooter: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent }), /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { channelId, subscribeToNewMessages: () => subscribeToMore({
-        document: OnThreadChatMessageAddedDocument,
-        variables: {
-          channelId: channelId == null ? void 0 : channelId.toString(),
-          postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString()
-        },
-        updateQuery: (prev, {
-          subscriptionData
-        }) => {
-          var _a2, _b2, _c2;
-          if (!subscriptionData.data)
-            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 replies = ((_c2 = prev == null ? void 0 : prev.getPostThread) == null ? void 0 : _c2.replies) || [];
-          setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-            id
-          }) => id));
-          setTotalCount(newReplyCount);
-          return Object.assign({}, prev, {
-            getPostThread: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.getPostThread), {
-              lastReplyAt: newMessage.createdAt,
-              replies: [newMessage, ...replies],
-              replyCount: newReplyCount,
-              updatedAt: newMessage.createdAt
-            })
-          });
+    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: {
+    onScroll: handleScrollToTop,
+    onEndReached: handleEndReached,
+    onEndReachedThreshold: 0.2,
+    contentContainerStyle: {
+      paddingBottom: 10
+    },
+    maintainVisibleContentPosition: {
+      minIndexForVisible: 0,
+      autoscrollToTopThreshold: 100
+    },
+    scrollEventThrottle: 100,
+    keyboardDismissMode: "on-drag",
+    keyboardShouldPersistTaps: "handled"
+  }, onSend: (messages) => {
+    var _a2, _b2;
+    if (!messages || messages.length === 0) {
+      console.log("No messages to send");
+      return;
+    }
+    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);
+    safeSend({
+      type: Actions.SET_MESSAGE_TEXT,
+      data: {
+        messageText: ""
+      }
+    });
+    if (safeContextProperty("images", []).length > 0) {
+      console.log("Sending message with file:", messageToSend, "Images:", safeContextProperty("images", []).length);
+      safeSend({
+        type: Actions.SEND_THREAD_MESSAGE_WITH_FILE,
+        data: {
+          messageText: messageToSend
         }
-      }) })),
-      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: {
-        underlayColor: "transparent",
-        springConfig: {
-          tension: 9e4,
-          friction: 9e4
-        },
-        disabled: true
+      });
+    } else {
+      console.log("Sending text message:", messageToSend);
+      safeSend({
+        type: Actions.SEND_THREAD_MESSAGE,
+        data: {
+          messageText: messageToSend
+        }
+      });
+    }
+  }, 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: {
+        messageText: text
       }
+    });
+  }, 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) => [{
+    type: "url",
+    style: __spreadProps(__spreadValues({}, linkStyle), {
+      color: colors.blue[500]
+    }),
+    onPress: (url) => Linking.openURL(url)
+  }, {
+    type: "phone",
+    style: __spreadProps(__spreadValues({}, linkStyle), {
+      color: colors.blue[500]
+    }),
+    onPress: (phone) => Linking.openURL(`tel:${phone}`)
+  }, {
+    type: "email",
+    style: __spreadProps(__spreadValues({}, linkStyle), {
+      color: colors.blue[500]
+    }),
+    onPress: (email) => Linking.openURL(`mailto:${email}`)
+  }], textInputProps: {
+    style: {
+      borderWidth: 1,
+      borderColor: colors.gray[300],
+      backgroundColor: "#f8f8f8",
+      borderRadius: 20,
+      minHeight: 40,
+      maxHeight: 80,
+      color: "#000",
+      padding: 10,
+      paddingHorizontal: 20,
+      fontSize: 16,
+      flex: 1
+    },
+    multiline: true,
+    returnKeyType: "default",
+    enablesReturnKeyAutomatically: true,
+    placeholderTextColor: colors.gray[400]
+  }, minComposerHeight: 44, isKeyboardInternallyHandled: true, bottomOffset: Platform.OS === "ios" ? 20 : 0, renderChatFooter: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent }), /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { channelId, subscribeToNewMessages: () => subscribeToMore({
+    document: OnThreadChatMessageAddedDocument,
+    variables: {
+      channelId: channelId == null ? void 0 : channelId.toString(),
+      postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString()
+    },
+    updateQuery: (prev, {
+      subscriptionData
+    }) => {
+      var _a2, _b2, _c2;
+      if (!subscriptionData.data)
+        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 replies = ((_c2 = prev == null ? void 0 : prev.getPostThread) == null ? void 0 : _c2.replies) || [];
+      safeSend({
+        type: Actions.SET_THREAD_MESSAGES,
+        data: {
+          messages: uniqBy([...safeContextProperty("threadMessages", []), newMessage], ({
+            id
+          }) => id),
+          totalCount: newReplyCount,
+          threadPost: safeContextProperty("threadPost", []),
+          postThread: safeContextProperty("postThread", null)
+        }
+      });
+      return Object.assign({}, prev, {
+        getPostThread: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.getPostThread), {
+          lastReplyAt: newMessage.createdAt,
+          replies: [newMessage, ...replies],
+          replyCount: newReplyCount,
+          updatedAt: newMessage.createdAt
+        })
+      });
     }
-  ));
+  }) })), 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: {
+    underlayColor: "transparent",
+    springConfig: {
+      tension: 9e4,
+      friction: 9e4
+    },
+    disabled: true
+  } }));
 };
 const SubscriptionHandler = ({
   subscribeToNewMessages,
@@ -591,4 +1098,4 @@ const SubscriptionHandler = ({
   useEffect(() => subscribeToNewMessages(), [channelId]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
-const ThreadConversationView = ThreadConversationViewComponent;export{ThreadConversationView};//# sourceMappingURL=ThreadConversationView.js.map
+const ThreadConversationView = React__default.memo(ThreadConversationViewComponent);export{ThreadConversationView};//# sourceMappingURL=ThreadConversationView.js.map