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

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

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useCallback,useEffect,useMemo}from'react';import {Button,Box,Spinner,Text,VStack,HStack,Avatar,AvatarFallbackText,AvatarImage,Center,Image}from'@admin-layout/gluestack-ui-mobile';import {Platform,SafeAreaView,Linking,View,TouchableHighlight}from'react-native';import {useRoute,useNavigation,useFocusEffect}from'@react-navigation/native';import {useSelector}from'react-redux';import {startCase,uniqBy}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {MaterialIcons,Ionicons,MaterialCommunityIcons}from'@expo/vector-icons';import {GiftedChat,Actions as Actions$1,InputToolbar,Send}from'react-native-gifted-chat';import'common';import {useCreatePostThreadMutation,useSendExpoNotificationOnPostMutation,useGetPostThreadLazyQuery,OnThreadChatMessageAddedDocument}from'common/graphql';import {useUploadFilesNative}from'@messenger-box/platform-client';import {objectId}from'@messenger-box/core';import {format,isToday,isYesterday}from'date-fns';import {userSelector}from'@adminide-stack/user-auth0-client';import {config}from'../config/config.js';import Message from'../components/SlackMessageContainer/SlackMessage.js';import ImageViewerModal from'../components/SlackMessageContainer/ImageViewerModal.js';import CachedImage from'../components/CachedImage/index.js';import colors from'tailwindcss/colors';import {Actions,BaseState,MainState}from'./workflow/thread-conversation-xstate.js';var __defProp = Object.defineProperty;
+import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {useToast,Button,Spinner,Box,ButtonText,HStack,Avatar,AvatarFallbackText,AvatarImage,Text,Image,VStack,Skeleton}from'@admin-layout/gluestack-ui-mobile';import {Platform,Keyboard,View,TouchableHighlight,ScrollView,TouchableOpacity,RefreshControl,Animated}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'base-64';import {MaterialIcons,MaterialCommunityIcons,Ionicons}from'@expo/vector-icons';import {Send,MessageText,Actions,InputToolbar}from'react-native-gifted-chat';import {FileRefType,PreDefinedRole}from'common';import {useCreatePostThread,useSendExpoNotification,useGetPostThreadLazy,CHAT_MESSAGE_ADDED}from'../../../queries/inboxQueries.js';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 {GiftedChatInboxComponent}from'../components/GiftedChatInboxComponent.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -25,343 +25,140 @@ const {
   CALL_TO_ACTION_TEXT_COLOR
 } = config;
 const createdAtText = (value) => {
-  if (!value)
-    return "";
+  if (!value) return "";
   let date = new Date(value);
-  if (isToday(date))
-    return "Today";
-  if (isYesterday(date))
-    return "Yesterday";
+  if (isToday(date)) return "Today";
+  if (isYesterday(date)) 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 ErrorNotification = ({
+  message,
+  onClose
+}) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 300,
+      useNativeDriver: true
+    }).start();
+    const timer = setTimeout(() => {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      }).start(() => onClose && onClose());
+    }, 4e3);
+    return () => clearTimeout(timer);
   }, []);
-  const stateWithMatches = useMemo(() => {
-    return __spreadProps(__spreadValues({}, state), {
-      matches: (checkState) => {
-        return state.value === checkState;
-      }
-    });
-  }, [state]);
-  return [stateWithMatches, send];
-}
+  return /* @__PURE__ */ React__default.createElement(Animated.View, { style: {
+    position: "absolute",
+    top: 10,
+    left: 10,
+    right: 10,
+    backgroundColor: "#f44336",
+    padding: 15,
+    borderRadius: 8,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    zIndex: 1e3,
+    opacity
+  } }, /* @__PURE__ */ React__default.createElement(HStack, { className: "items-center justify-between" }, /* @__PURE__ */ React__default.createElement(Text, { style: {
+    color: "white",
+    fontWeight: "bold"
+  } }, "Upload Failed"), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: onClose }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "close", size: 20, color: "white" }))), /* @__PURE__ */ React__default.createElement(Text, { style: {
+    color: "white",
+    marginTop: 5
+  } }, message));
+};
+const isValidFileUrl = (url) => {
+  return !!url && typeof url === "string" && url.length > 0;
+};
 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, _t, _u;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const {
     params
   } = useRoute();
   const [channelToTop, setChannelToTop] = useState(0);
-  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 [channelMessages, setChannelMessages] = useState([]);
   const auth = useSelector(userSelector);
-  const [selectedImage, setImage] = useState("");
+  const [totalCount, setTotalCount] = useState(0);
+  const [selectedImage, setSelectedImage] = 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 [uploadingMessageId, setUploadingMessageId] = useState(null);
+  const [expoTokens, setExpoTokens] = useState([]);
   const [isShowImageViewer, setImageViewer] = useState(false);
   const [imageObject, setImageObject] = useState({});
   const [parentId, setParentId] = useState(postParentId);
-  const [expoTokens, setExpoTokens] = useState([]);
-  const threadMessageListRef = useRef(null);
-  const [sendThreadMessage] = useCreatePostThreadMutation();
-  const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+  const [postThread, setPostThread] = useState();
   const {
     startUpload
   } = useUploadFilesNative();
+  const [threadPost, setThreadPost] = useState([]);
+  const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+  const threadMessageListRef = useRef(null);
+  useToast();
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isActionSheetVisible, setActionSheetVisible] = useState(false);
+  const [textUpdatedInActionSheet, setTextUpdatedInActionSheet] = useState(false);
+  const [lastShownMsg, setLastShownMsg] = useState("");
+  const textInputRef = useRef(null);
+  const [sendThreadMessage] = useCreatePostThread();
+  const [sendExpoNotificationOnPostMutation] = useSendExpoNotification();
   const [getThreadMessages, {
     data,
     loading: threadLoading,
     fetchMore: fetchMoreMessages,
     refetch: refetchThreadMessages,
     subscribeToMore
-  }] = useGetPostThreadLazyQuery({
+  }] = useGetPostThreadLazy({
     fetchPolicy: "cache-and-network"
   });
+  const [pendingUploads, setPendingUploads] = useState({});
+  const [uploadErrors, setUploadErrors] = useState({});
+  const [isUploadingImage, setIsUploadingImage] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
   useFocusEffect(React__default.useCallback(() => {
     var _a2;
     navigation.setOptions({
       title: (_a2 = params == null ? void 0 : params.title) != null ? _a2 : "Thread",
       headerLeft: (props) => /* @__PURE__ */ React__default.createElement(Button, { className: "bg-transparent active:bg-gray-200 ", onPress: () => navigation.goBack() }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { size: 20, name: "arrow-back-ios", color: "black" }))
     });
-    if (channelId && postParentId) {
-      safeSend({
-        type: Actions.INITIAL_CONTEXT,
-        data: {
-          channelId,
-          postParentId,
-          role
-        }
+    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
       });
     }
     setParentId(postParentId);
     return () => {
-      safeSend({
-        type: Actions.CLEAR_MESSAGES
-      });
+      setTotalCount(0);
+      setChannelMessages([]);
+      setThreadPost([]);
     };
   }, [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: {
@@ -371,78 +168,42 @@ 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
-          }
-        });
       });
     }
-  }, [channelId, parentId, role]);
+  }, [parentId]);
   React__default.useEffect(() => {
     var _a2, _b2, _c2;
     if (data == null ? void 0 : data.getPostThread) {
       const threads = data.getPostThread;
-      const threadPost = (_a2 = threads == null ? void 0 : threads.post) != null ? _a2 : [];
+      const threadPost2 = (_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 = [...threadReplies];
-      safeSend({
-        type: Actions.SET_THREAD_MESSAGES,
-        data: {
-          messages,
-          totalCount: messeageTotalCount,
-          threadPost,
-          postThread: threads
-        }
-      });
+      const messages = [threadPost2, ...threadReplies];
+      if (messages && messages.length > 0 && messeageTotalCount > totalCount || messages && messages.length > 0 && channelMessages.length === 0) {
+        setThreadMessages(messages, messeageTotalCount);
+      }
     }
-  }, [data]);
+    if (isScrollToBottom && channelMessages) scrollToBottom();
+  }, [data, channelMessages, loadingOldMessages, totalCount, isPostParentIdThread, isScrollToBottom]);
+  const setThreadMessages = (messages, messagesTotalCount) => {
+    setChannelMessages((oldMessages) => uniqBy([...messages, ...oldMessages], ({
+      id
+    }) => id));
+    setTotalCount(messagesTotalCount);
+  };
   React__default.useEffect(() => {
-    if (safeContextProperty("selectedImage")) {
-      safeSend({
-        type: Actions.STOP_LOADING
-      });
-    }
-  }, [safeContextProperty("selectedImage")]);
-  React__default.useCallback(() => {
+    if (selectedImage) setImageLoading(false);
+  }, [selectedImage]);
+  const scrollToBottom = React__default.useCallback(() => {
     if (threadMessageListRef == null ? void 0 : threadMessageListRef.current) {
-      threadMessageListRef.current.scrollToBottom();
+      setIsScrollToBottom(false);
+      threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
     }
   }, [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.START_LOADING,
-        data: {
-          loadingOldMessages: true
-        }
-      });
+    if (totalCount > channelMessages.length && !loadingOldMessages) {
+      setLoadEarlierMsg(true);
+      setLoadingOldMessages(true);
       fetchMoreMessages({
         variables: {
           channelId: channelId == null ? void 0 : channelId.toString(),
@@ -450,307 +211,318 @@ const ThreadConversationViewComponent = ({
           postParentId: parentId == null ? void 0 : parentId.toString(),
           selectedFields: "id channel post replies replyCount lastReplyAt createdAt updatedAt",
           limit: MESSAGES_PER_PAGE,
-          skip: threadMessages.length
+          skip: channelMessages.length - 1
         }
       }).then((res) => {
-        var _a2, _b2, _c2;
+        var _a2, _b2, _c2, _d2;
         if ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2.getPostThread) {
           const threads = (_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2.getPostThread;
           const threadReplies = (_c2 = threads == null ? void 0 : threads.replies) != null ? _c2 : [];
-          console.log("Successfully loaded more messages:", threadReplies.length);
-          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
-            }
-          });
+          const messeageTotalCount = (_d2 = threads == null ? void 0 : threads.replyCount) != null ? _d2 : 0;
+          setThreadMessages(threadReplies, messeageTotalCount);
         }
+      }).finally(() => {
+        setLoadEarlierMsg(false);
+        setLoadingOldMessages(false);
+        setRefreshing(false);
       }).catch((error) => {
-        console.error("Error fetching more messages:", error);
-        safeSend({
-          type: "ERROR",
-          data: {
-            message: error.message,
-            loadingOldMessages: false
-          }
-        });
+        setLoadEarlierMsg(false);
+        setLoadingOldMessages(false);
+        setRefreshing(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
-        });
-      }
+      setRefreshing(false);
     }
-  };
-  const handleEndReached = () => {
-    console.log("Reached end of message list");
-  };
+  }, [parentId, channelId, totalCount, channelMessages]);
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    onFetchOld();
+  }, [onFetchOld]);
   const isCloseToTop = ({
     layoutMeasurement,
     contentOffset,
     contentSize
   }) => {
-    const paddingToTop = 80;
-    return contentOffset.y <= paddingToTop;
+    const paddingToTop = 60;
+    return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
   };
+  const removeMessageFromUI = useCallback((messageId) => {
+    setPendingUploads((prev) => {
+      const newPending = __spreadValues({}, prev);
+      delete newPending[messageId];
+      return newPending;
+    });
+    setUploadErrors((prev) => {
+      const newErrors = __spreadValues({}, prev);
+      delete newErrors[messageId];
+      return newErrors;
+    });
+    setIsUploadingImage(false);
+  }, []);
   const onSelectImages = async () => {
-    var _a2;
+    setLoading(true);
     try {
-      safeSend({
-        type: Actions.START_LOADING
-      });
-      const imageSource = await ImagePicker.launchImageLibraryAsync({
+      let imageSource = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
-        allowsEditing: true,
+        allowsEditing: false,
         aspect: [4, 3],
         quality: 0.8,
         base64: true,
-        allowsMultipleSelection: false
+        exif: false,
+        allowsMultipleSelection: true
+        // Enable multiple selection
       });
-      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"
-          }
+      if (!(imageSource == null ? void 0 : imageSource.canceled)) {
+        const selectedAssets = (imageSource == null ? void 0 : imageSource.assets) || [];
+        if (selectedAssets.length === 0) {
+          setLoading(false);
+          return;
+        }
+        const newImages = selectedAssets.map((selectedAsset) => {
+          const base64Data = selectedAsset.base64;
+          const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : selectedAsset.uri;
+          const asset = __spreadProps(__spreadValues({}, selectedAsset), {
+            url: selectedAsset.uri,
+            fileName: selectedAsset.fileName || `image_${Date.now()}.jpg`,
+            mimeType: "image/jpeg"
+          });
+          return asset;
         });
-        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]
+        if (newImages.length > 0) {
+          const base64Data = newImages[0].base64;
+          const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : newImages[0].uri;
+          setSelectedImage(previewImage);
         }
-      });
+        setImages((currentImages) => [...currentImages, ...newImages]);
+        setLoading(false);
+      } else {
+        setLoading(false);
+      }
     } catch (error) {
-      console.error("Error selecting image:", error);
-      safeSend({
-        type: "ERROR",
-        data: {
-          message: error.message || "Failed to select image"
-        }
-      });
+      setLoading(false);
     }
   };
-  const sendThreadMessageHandler = useCallback(async (message) => {
-    var _a2, _b2;
-    console.log("Sending message:", message);
-    if (!channelId) {
-      console.error("No channelId provided");
-      return;
+  useCallback(() => {
+    setLastShownMsg(msg);
+    setActionSheetVisible(true);
+  }, [msg]);
+  useCallback(() => {
+    setActionSheetVisible(false);
+    if (!textUpdatedInActionSheet) {
+      setMsg(lastShownMsg);
+    }
+    setTextUpdatedInActionSheet(false);
+  }, [textUpdatedInActionSheet, lastShownMsg]);
+  useEffect(() => {
+    if (isActionSheetVisible && Platform.OS === "ios") {
+      Keyboard.dismiss();
     }
-    const messageContent = (message == null ? void 0 : message.trim()) || " ";
-    console.log("Using message content for sending:", messageContent);
+  }, [isActionSheetVisible]);
+  const [isGiftedInputFocused, setIsGiftedInputFocused] = useState(false);
+  const handleSend = useCallback(async (message) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
+    const newMessageText = message && message.length > 0 ? message || " " : " ";
+    if (!channelId) return;
+    const hasText = newMessageText !== " ";
+    const hasImages = images && images.length > 0;
+    if (!hasText && !hasImages) return;
+    setLoading(true);
     const postId = objectId();
-    console.log("Generated postId:", postId);
-    safeSend({
-      type: Actions.START_LOADING
-    });
+    const currentDate = /* @__PURE__ */ new Date();
+    const currentMessageText = message || "";
+    const currentImages = [...images];
+    setMsg("");
+    setSelectedImage("");
+    setImages([]);
+    setFiles([]);
+    if (isActionSheetVisible) {
+      setActionSheetVisible(false);
+    }
+    const optimisticMessage = {
+      id: postId,
+      message: currentMessageText || (currentImages.length > 0 ? " " : ""),
+      createdAt: currentDate.toISOString(),
+      author: {
+        id: (_a2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _a2.id,
+        givenName: (_b2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _b2.given_name,
+        familyName: (_c2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _c2.family_name,
+        picture: (_d2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _d2.picture
+      },
+      isDelivered: false,
+      // Mark as not delivered yet during upload
+      isRead: false,
+      isOptimistic: true,
+      // Flag to identify optimistic messages
+      files: currentImages.length > 0 ? {
+        data: currentImages.filter((img) => img && (img.uri || img.url)).map((img) => ({
+          id: objectId(),
+          url: img.uri || img.url,
+          localUri: img.uri || img.url,
+          // Keep local URI for preview
+          name: img.fileName || `image_${Date.now()}.jpg`,
+          extension: "jpg",
+          mimeType: "image/jpeg",
+          refType: FileRefType.Post,
+          height: img.height || 0,
+          width: img.width || 0,
+          isUploading: true
+          // Flag to indicate this file is uploading
+        })),
+        totalCount: currentImages.filter((img) => img && (img.uri || img.url)).length
+        // Only count valid images
+      } : void 0
+    };
+    if (optimisticMessage.message && optimisticMessage.message.trim() !== "" || optimisticMessage.files && optimisticMessage.files.data && optimisticMessage.files.data.length > 0) {
+      setChannelMessages((oldMessages) => uniqBy([optimisticMessage, ...oldMessages], ({
+        id
+      }) => id));
+      setIsScrollToBottom(true);
+    }
     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({
+      let fileIds = null;
+      if (currentImages && currentImages.length > 0) {
+        const validImages = currentImages.filter((img) => img && (img.uri || img.url));
+        if (validImages.length === 0) {
+          setIsUploadingImage(false);
+        } else {
+          setIsUploadingImage(true);
+          const imagesToUpload = validImages.map((img) => {
+            return __spreadProps(__spreadValues({}, img), {
+              uri: img.uri || img.url,
+              // Use either uri or url
+              type: img.mimeType || "image/jpeg",
+              name: img.fileName || `image_${Date.now()}.jpg`
+            });
+          });
+          setUploadingMessageId(postId);
+          setPendingUploads((prev) => __spreadProps(__spreadValues({}, prev), {
+            [postId]: {
+              images: validImages,
+              message: currentMessageText
+            }
+          }));
+          const uploadResponse = await startUpload({
+            file: imagesToUpload,
+            saveUploadedFile: {
+              variables: {
+                postId
+              }
+            },
+            createUploadLink: {
+              variables: {
+                postId
+              }
+            }
+          });
+          if (uploadResponse == null ? void 0 : uploadResponse.error) {
+            throw new Error(uploadResponse.error.toString());
+          }
+          const uploadedFiles = uploadResponse.data;
+          if (uploadResponse.data) {
+            fileIds = (_e2 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _e2 : null;
+            setChannelMessages((oldMessages) => {
+              return oldMessages.map((msg2) => {
+                if (msg2.id === postId && msg2.isOptimistic) {
+                  return __spreadProps(__spreadValues({}, msg2), {
+                    isOptimistic: false,
+                    files: __spreadProps(__spreadValues({}, msg2.files), {
+                      data: uploadedFiles.filter((file) => isValidFileUrl(file.url)).map((file, index) => __spreadProps(__spreadValues({}, msg2.files.data[index]), {
+                        url: file.url,
+                        isUploading: false
+                      }))
+                    })
+                  });
+                }
+                return msg2;
+              });
+            });
+          }
+          setPendingUploads((prev) => {
+            const newPending = __spreadValues({}, prev);
+            delete newPending[postId];
+            return newPending;
+          });
+        }
+      }
+      await sendThreadMessage({
         variables: {
+          postId,
           channelId,
-          postThreadId: safeContextProperty("postThread") && ((_b2 = safeContextProperty("postThread")) == null ? void 0 : _b2.id),
-          postParentId: !parentId || parentId == 0 ? null : parentId,
+          postThreadId: postThread && (postThread == null ? void 0 : postThread.id),
+          postParentId: !parentId || parentId === 0 ? null : parentId,
           threadMessageInput: {
-            content: messageContent,
+            content: currentMessageText,
+            files: fileIds,
             role
           }
         },
+        optimisticResponse: {
+          createPostThread: {
+            __typename: "ThreadMessageSent",
+            lastMessage: {
+              __typename: "Post",
+              id: postId,
+              message: currentMessageText || " ",
+              createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+              author: {
+                __typename: "UserAccount",
+                id: (_f2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _f2.id,
+                givenName: (_g2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _g2.given_name,
+                familyName: (_h2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _h2.family_name,
+                picture: (_i2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _i2.picture
+              },
+              channel: {
+                __typename: "Channel",
+                id: channelId.toString()
+              }
+            },
+            // Type assertion to avoid TypeScript errors
+            data: {
+              __typename: "PostThread",
+              id: (postThread == null ? void 0 : postThread.id) || objectId()
+            }
+          }
+        },
         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);
+          var _a3, _b3, _c3, _d3, _e3, _f3, _g3;
+          if (!data2 || errors) return;
+          setPostThread((_a3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _a3.data);
+          const lastMessageId = (_c3 = (_b3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _b3.lastMessage) == null ? void 0 : _c3.id;
+          if (!parentId || parentId === 0) {
+            setParentId((_e3 = (_d3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _d3.lastMessage) == null ? void 0 : _e3.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);
+          sendPushNotification(lastMessageId, channelId, parentId, (_g3 = (_f3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _f3.data) == null ? void 0 : _g3.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"
+      let formattedErrorMessage = "Failed to upload image. Please try again.";
+      if (__DEV__) {
+        if (error.name === "ApolloError") {
+          formattedErrorMessage = error.message.replace("[ApolloError: ", "").replace("]", "").split(";")[0];
+        } else {
+          formattedErrorMessage = error.message || "Unknown error occurred";
         }
-      });
-    }
-  }, [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();
-    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: preparedImages,
-        saveUploadedFile: {
-          variables: {
-            postId
-          }
-        },
-        createUploadLink: {
-          variables: {
-            postId
-          }
+      } else {
+        if (((_j2 = error.message) == null ? void 0 : _j2.includes("network")) || ((_k2 = error.message) == null ? void 0 : _k2.includes("timeout"))) {
+          formattedErrorMessage = "Network error. Please check your connection.";
+        } else if ((_l2 = error.message) == null ? void 0 : _l2.includes("permission")) {
+          formattedErrorMessage = "Permission denied for this operation.";
         }
-      });
-      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) {
-        const files2 = (_a2 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _a2 : null;
-        console.log("File IDs for message:", files2);
-        console.log("Sending message with attached files");
-        const result = await sendThreadMessage({
-          variables: {
-            postId,
-            channelId,
-            postThreadId: safeContextProperty("postThread") && ((_b2 = safeContextProperty("postThread")) == null ? void 0 : _b2.id),
-            postParentId: !parentId || parentId == 0 ? null : parentId,
-            threadMessageInput: {
-              content: messageContent,
-              files: files2,
-              role
-            }
-          },
-          update: (cache, {
-            data: data2,
-            errors
-          }) => {
-            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) {
-              console.error("Send message with file failed:", errors);
-              safeSend({
-                type: Actions.STOP_LOADING
-              });
-              return;
-            }
-            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) {
-              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 with file mutation result:", result);
       }
-    } catch (error) {
-      console.error("Error sending message with file:", error);
-      safeSend({
-        type: "ERROR",
-        data: {
-          message: error.message || "Failed to send message with file"
-        }
-      });
+      setErrorMessage(formattedErrorMessage);
+      setChannelMessages((oldMessages) => oldMessages.filter((msg2) => msg2.id !== postId));
+      removeMessageFromUI(postId);
+    } finally {
+      setLoading(false);
+      setIsUploadingImage(false);
+      setUploadingMessageId(null);
     }
-  }, [channelId, parentId, state.context, role, startUpload]);
+  }, [auth, channelId, channelToTop, images, parentId, postThread, selectedImage, setChannelMessages, removeMessageFromUI, role]);
   const sendPushNotification = async (messageId, channelId2, parentId2, threadId) => {
     var _a2;
     const notificationData = {
@@ -779,74 +551,264 @@ 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, _n2, _o2;
-        const uniqueId = msg.id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    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, _o2, _p2;
         let message = {
-          _id: uniqueId,
-          text: msg.message || "",
-          createdAt: new Date(msg.createdAt),
+          _id: "",
+          text: "",
+          createdAt: 0,
           user: {
-            _id: (_c2 = (_a2 = msg == null ? void 0 : msg.author) == null ? void 0 : _a2.id) != null ? _c2 : (_b2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _b2.id,
-            name: (_i2 = (_g2 = (_d2 = msg == null ? void 0 : msg.author) == null ? void 0 : _d2.givenName) != null ? _g2 : ((_e2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _e2.given_name) + " " + ((_f2 = msg == null ? void 0 : msg.author) == null ? void 0 : _f2.familyName)) != null ? _i2 : (_h2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _h2.family_name,
-            avatar: (_l2 = (_j2 = msg == null ? void 0 : msg.author) == null ? void 0 : _j2.picture) != null ? _l2 : (_k2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _k2.picture
+            _id: "",
+            name: "",
+            avatar: ""
           },
-          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
+          type: ""
+        };
+        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
         };
-        return message;
+        message.isOptimistic = (msg2 == null ? void 0 : msg2.isOptimistic) || false;
+        message.isUploading = ((_n2 = (_m2 = msg2.files) == null ? void 0 : _m2.data) == null ? void 0 : _n2.some((file) => file.isUploading)) || false;
+        if (((_p2 = (_o2 = msg2.files) == null ? void 0 : _o2.data) == null ? void 0 : _p2.length) > 0) {
+          const validFiles = msg2.files.data.filter((file) => file && (file.url || file.localUri) && typeof (file.url || file.localUri) === "string");
+          if (validFiles.length > 0) {
+            const firstFile = validFiles[0];
+            const imageUrl = firstFile.isUploading ? firstFile.localUri || firstFile.url : firstFile.url || firstFile.localUri;
+            if (imageUrl) {
+              message.image = imageUrl;
+            }
+            if (validFiles.length > 1) {
+              message.images = validFiles.map((file) => file.isUploading ? file.localUri || file.url : file.url || file.localUri).filter((url) => !!url);
+              if (message.images.length === 0) {
+                delete message.images;
+              }
+            }
+          }
+        }
+        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);
       });
     }
-    const sortedMessages = res.sort((a, b) => b.createdAt - a.createdAt);
-    return sortedMessages;
-  }, [safeContextProperty("threadMessages"), auth]);
-  const renderSend = (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: {
-      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 renderActions = (props) => {
+    return (res == null ? void 0 : res.length) > 0 ? uniqBy([...res], ({
+      _id
+    }) => _id) : [];
+  }, [channelMessages]);
+  const renderSend = useCallback((props) => {
+    if (isActionSheetVisible) {
+      return null;
+    }
+    const hasContent = !!props.text || (images == null ? void 0 : images.length) > 0;
+    const canSend = channelId && hasContent;
+    const isDisabled = !canSend || isUploadingImage || loading;
+    return /* @__PURE__ */ React__default.createElement(
+      Send,
+      __spreadProps(__spreadValues({}, props), {
+        disabled: isDisabled,
+        containerStyle: {
+          justifyContent: "center",
+          alignItems: "center",
+          height: 40,
+          width: 44,
+          marginRight: 4,
+          marginBottom: 0,
+          marginLeft: 4
+        }
+      }),
+      /* @__PURE__ */ React__default.createElement(View, { style: {
+        padding: 4
+      } }, isUploadingImage || loading ? /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: colors.blue[500] }) : /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", size: 32, color: isDisabled ? colors.gray[400] : colors.blue[500] }))
+    );
+  }, [channelId, images, isUploadingImage, loading, isActionSheetVisible]);
+  useCallback((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) }, /* @__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 {
+      return /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        left: {
+          marginLeft: 5
+        }
+      } }));
+    }
+  }, [navigation, role]);
+  const renderMessageText = useCallback((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, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U;
+    const {
+      currentMessage
+    } = props;
+    const lastReply = ((_b2 = (_a2 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _a2.data) == null ? void 0 : _b2.length) > 0 ? (_d2 = (_c2 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _c2.data) == null ? void 0 : _d2[0] : null;
+    if (!(currentMessage == null ? void 0 : currentMessage.text) || currentMessage.text.trim() === "") {
+      return null;
+    }
+    if (currentMessage.type === "ALERT") {
+      const attachment = (_f2 = (_e2 = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _e2.contents) == null ? void 0 : _f2.attachment;
+      let action = "";
+      let actionId = "";
+      let params2 = {};
+      if ((_g2 = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _g2.extraParams) {
+        const extraParams = (_h2 = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _h2.extraParams;
+        const route = (_i2 = extraParams == null ? void 0 : extraParams.route) != null ? _i2 : null;
+        let path = null;
+        let param = null;
+        if (role && role == PreDefinedRole.Guest) {
+          path = ((_j2 = route == null ? void 0 : route.guest) == null ? void 0 : _j2.name) ? (_l2 = (_k2 = route == null ? void 0 : route.guest) == null ? void 0 : _k2.name) != null ? _l2 : null : null;
+          param = ((_m2 = route == null ? void 0 : route.guest) == null ? void 0 : _m2.params) ? (_o2 = (_n2 = route == null ? void 0 : route.guest) == null ? void 0 : _n2.params) != null ? _o2 : null : null;
+        } else if (role && role == PreDefinedRole.Owner) {
+          path = ((_p2 = route == null ? void 0 : route.host) == null ? void 0 : _p2.name) ? (_r2 = (_q2 = route == null ? void 0 : route.host) == null ? void 0 : _q2.name) != null ? _r2 : null : null;
+          param = ((_s2 = route == null ? void 0 : route.host) == null ? void 0 : _s2.params) ? (_u = (_t = route == null ? void 0 : route.host) == null ? void 0 : _t.params) != null ? _u : null : null;
+        } else {
+          path = ((_v = route == null ? void 0 : route.host) == null ? void 0 : _v.name) ? (_x = (_w = route == null ? void 0 : route.host) == null ? void 0 : _w.name) != null ? _x : null : null;
+          param = ((_y = route == null ? void 0 : route.host) == null ? void 0 : _y.params) ? (_A = (_z = route == null ? void 0 : route.host) == null ? void 0 : _z.params) != null ? _A : null : null;
+        }
+        action = path;
+        params2 = __spreadValues({}, param);
+      } else if ((_B = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _B.link) {
+        action = CALL_TO_ACTION_PATH;
+        actionId = (_C = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _C.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(TouchableHighlight, { underlayColor: "#c0c0c0", style: {
+        width: "100%"
+      }, onPress: () => {
+        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage) navigation.navigate(config.THREAD_MESSEGE_PATH, {
+          channelId,
+          title: "Message",
+          postParentId: currentMessage == null ? void 0 : currentMessage._id,
+          isPostParentIdThread: true
+        });
+      } }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        left: {
+          marginLeft: 5
+        }
+      } })), ((_E = (_D = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _D.data) == null ? void 0 : _E.length) > 0 && /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-1 items-center" }, /* @__PURE__ */ React__default.createElement(HStack, null, (_J = (_I = (_H = (_G = (_F = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _F.data) == null ? void 0 : _G.filter((v, i, a) => a.findIndex((t) => {
+        var _a3, _b3;
+        return ((_a3 = t == null ? void 0 : t.author) == null ? void 0 : _a3.id) === ((_b3 = v == null ? void 0 : v.author) == null ? void 0 : _b3.id);
+      }) === i)) == null ? void 0 : _H.slice(0, 2)) == null ? void 0 : _I.reverse()) == null ? void 0 : _J.map((p, i) => {
+        var _a3, _b3, _c3;
+        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversations-view-key-" + i, size: "sm", className: "bg-transparent" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b3 = (_a3 = p == null ? void 0 : p.author) == null ? void 0 : _a3.username) == null ? void 0 : _b3.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
+          borderRadius: 6,
+          borderWidth: 2,
+          borderColor: "#fff"
+        }, source: {
+          uri: (_c3 = p == null ? void 0 : p.author) == null ? void 0 : _c3.picture
+        } }));
+      })), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontSize: 12
+      }, className: "font-bold color-blue-800" }, (_K = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _K.totalCount, " ", ((_L = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _L.totalCount) == 1 ? "reply" : "replies"), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontSize: 12
+      }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : "")))));
+    } else {
+      return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#c0c0c0", style: {
+        width: "100%"
+      }, onPress: () => {
+        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage) navigation.navigate(config.THREAD_MESSEGE_PATH, {
+          channelId,
+          title: "Message",
+          postParentId: currentMessage == null ? void 0 : currentMessage._id,
+          isPostParentIdThread: true
+        });
+      } }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        left: {
+          marginLeft: 5
+        }
+      } })), ((_N = (_M = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _M.data) == null ? void 0 : _N.length) > 0 && /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-1 items-center" }, /* @__PURE__ */ React__default.createElement(HStack, null, (_S = (_R = (_Q = (_P = (_O = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _O.data) == null ? void 0 : _P.filter((v, i, a) => a.findIndex((t) => {
+        var _a3, _b3;
+        return ((_a3 = t == null ? void 0 : t.author) == null ? void 0 : _a3.id) === ((_b3 = v == null ? void 0 : v.author) == null ? void 0 : _b3.id);
+      }) === i)) == null ? void 0 : _Q.slice(0, 2)) == null ? void 0 : _R.reverse()) == null ? void 0 : _S.map((p, i) => {
+        var _a3, _b3, _c3;
+        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversation-replies-key-" + i, className: "bg-transparent", size: "sm" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b3 = (_a3 = p == null ? void 0 : p.author) == null ? void 0 : _a3.username) == null ? void 0 : _b3.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
+          borderRadius: 6,
+          borderWidth: 2,
+          borderColor: "#fff"
+        }, source: {
+          uri: (_c3 = p == null ? void 0 : p.author) == null ? void 0 : _c3.picture
+        } }));
+      })), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontSize: 12
+      }, className: "font-bold color-blue-800" }, (_T = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _T.totalCount, " ", ((_U = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _U.totalCount) == 1 ? "reply" : "replies"), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontSize: 12
+      }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
+    }
+  }, [navigation, channelId, role]);
+  useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(
-      Actions$1,
+      Actions,
       __spreadProps(__spreadValues({}, props), {
+        onPressActionButton: onSelectImages,
         options: {
-          ["Choose from Library"]: onSelectImages,
+          ["Choose from Library"]: () => {
+            onSelectImages();
+          },
           ["Cancel"]: () => {
           }
+          // Add this option to make the sheet dismissible
         },
         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] })),
+        icon: () => /* @__PURE__ */ React__default.createElement(Box, { className: "w-8 h-8 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "image", size: 24, color: colors.blue[500] })),
         containerStyle: {
           alignItems: "center",
           justifyContent: "center",
@@ -855,61 +817,91 @@ const ThreadConversationViewComponent = ({
         }
       })
     );
-  };
-  const renderAccessory = (props) => {
-    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,
+  }, [onSelectImages]);
+  useCallback(() => {
+    if (!images.length) return null;
+    return /* @__PURE__ */ React__default.createElement(Box, { style: {
+      position: "relative",
+      height: 70,
+      backgroundColor: "transparent",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React__default.createElement(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: {
       flexDirection: "row",
+      paddingLeft: 15,
+      paddingRight: 5
+    }, contentContainerStyle: {
       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) => {
+      height: "100%"
+    } }, images.map((img, index) => /* @__PURE__ */ React__default.createElement(View, { key: `image-preview-${index}`, style: {
+      width: 40,
+      height: 40,
+      marginRight: 15,
+      borderRadius: 4,
+      backgroundColor: colors.gray[200],
+      overflow: "hidden",
+      borderWidth: 1,
+      borderColor: "#e0e0e0",
+      position: "relative",
+      zIndex: 10
+    } }, /* @__PURE__ */ React__default.createElement(Image, { alt: `selected image ${index + 1}`, source: {
+      uri: img.uri || img.url
+    }, style: {
+      width: "100%",
+      height: "100%"
+    }, size: "md" }), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => {
+      const newImages = [...images];
+      newImages.splice(index, 1);
+      setImages(newImages);
+      if (newImages.length === 0) {
+        setSelectedImage("");
+      }
+    }, style: {
+      position: "absolute",
+      top: -1,
+      right: -1,
+      backgroundColor: "rgba(0,0,0,0.6)",
+      borderRadius: 12,
+      width: 20,
+      height: 20,
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: 9999
+    } }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "close", size: 16, color: "white" }))))));
+  }, [images]);
+  useCallback((props) => /* @__PURE__ */ React__default.createElement(TouchableOpacity, { style: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#fff",
+    minHeight: 48,
+    maxHeight: 48,
+    paddingHorizontal: 12,
+    paddingVertical: 0,
+    marginHorizontal: 8,
+    flex: 1
+  }, activeOpacity: 0.7, onPress: () => {
+    setActionSheetVisible(true);
+  } }, /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: (e) => {
+    e.stopPropagation();
+    onSelectImages();
+  }, style: {
+    width: 25,
+    height: 25,
+    borderRadius: 20,
+    backgroundColor: "#f5f5f5",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 8
+  } }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { name: "add", size: 20, color: "#888" })), /* @__PURE__ */ React__default.createElement(Text, { style: {
+    fontSize: 16,
+    color: msg ? colors.gray[800] : colors.gray[400],
+    flex: 1
+  }, numberOfLines: 1, ellipsizeMode: "tail" }, msg ? msg : "Jot something down")), [msg, onSelectImages]);
+  const setImageViewerObject = useCallback((obj, v) => {
     setImageObject(obj);
     setImageViewer(v);
-  };
-  const modalContent = React__default.useMemo(() => {
-    if (!imageObject)
-      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  }, []);
+  const modalContent = useMemo(() => {
+    if (!imageObject) return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
     const {
       image,
       _id
@@ -922,174 +914,189 @@ const ThreadConversationViewComponent = ({
       expiresIn: 86400
     }, alt: "image" });
   }, [imageObject]);
-  const renderMessage = (props) => {
+  useCallback((props) => {
+    const {
+      currentMessage
+    } = props;
+    const customProps = __spreadProps(__spreadValues({}, props), {
+      isShowImageViewer,
+      setImageViewer: setImageViewerObject,
+      // Pass custom flags to indicate uploading/optimistic states
+      isUploading: currentMessage.isUploading || false,
+      isOptimistic: currentMessage.isOptimistic || false
+    });
+    return /* @__PURE__ */ React__default.createElement(Message, __spreadValues({}, customProps));
+  }, [isShowImageViewer, setImageViewerObject]);
+  const renderMessage = useCallback((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: {
+  }, [isShowImageViewer]);
+  useCallback((props) => {
+    if (isActionSheetVisible) return null;
+    return /* @__PURE__ */ React__default.createElement(
+      InputToolbar,
+      __spreadProps(__spreadValues({}, props), {
+        containerStyle: {
+          backgroundColor: "transparent",
+          padding: 0,
+          margin: 0,
+          borderTopWidth: 1,
+          borderTopColor: colors.gray[200]
+        },
+        primaryStyle: {
+          alignItems: "center",
+          justifyContent: "center",
+          flex: 1
+        }
+      })
+    );
+  }, [isActionSheetVisible, onSelectImages]);
+  const renderLoadEarlier = useCallback(() => {
+    return loadingOldMessages && !refreshing ? /* @__PURE__ */ React__default.createElement(Box, { style: {
+      padding: 10,
+      backgroundColor: "rgba(255,255,255,0.8)",
+      borderRadius: 10,
+      marginTop: 10,
       alignItems: "center"
-    } }));
+    } }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: colors.blue[500] }), /* @__PURE__ */ React__default.createElement(Text, { style: {
+      fontSize: 12,
+      color: colors.gray[600],
+      marginTop: 4
+    } }, "Loading earlier messages...")) : null;
+  }, [loadingOldMessages, refreshing]);
+  let onScroll = false;
+  const onMomentumScrollBegin = ({
+    nativeEvent
+  }) => {
+    onScroll = true;
+    if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages == null ? void 0 : channelMessages.length)) {
+      onFetchOld();
+    }
   };
-  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: {
+  const onEndReached = () => {
+    if (!onScroll) return;
+    onScroll = false;
+  };
+  const renderChatFooter = useCallback(() => {
+    return /* @__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: CHAT_MESSAGE_ADDED,
+      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
+          })
+        });
+      }
+    }) }));
+  }, [channelId, isShowImageViewer, modalContent, parentId, setImageViewer, subscribeToMore]);
+  const handleRemoveImage = useCallback((index) => {
+    const newImages = [...images];
+    newImages.splice(index, 1);
+    setImages(newImages);
+    if (newImages.length === 0) {
+      setSelectedImage("");
+      if (textInputRef.current && typeof textInputRef.current.focus === "function") {
+        textInputRef.current.focus();
+      }
+    }
+  }, [images]);
+  return /* @__PURE__ */ React__default.createElement(View, { style: {
+    flex: 1,
+    marginTop: -40
+  } }, errorMessage ? /* @__PURE__ */ React__default.createElement(ErrorNotification, { message: errorMessage, onClose: () => setErrorMessage("") }) : null, loading && /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }), 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: {
     borderRadius: 6,
     borderWidth: 2,
     borderColor: "#fff"
   }, source: {
-    uri: (_f = (_e = safeContextProperty("threadPost")[0]) == null ? void 0 : _e.author) == null ? void 0 : _f.picture
-  } })), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-black" }, (_i = (_h = (_g = safeContextProperty("threadPost")[0]) == null ? void 0 : _g.author) == null ? void 0 : _h.givenName) != null ? _i : "", " ", (_l = (_k = (_j = safeContextProperty("threadPost")[0]) == null ? void 0 : _j.author) == null ? void 0 : _k.familyName) != null ? _l : ""), /* @__PURE__ */ React__default.createElement(Text, { className: "pl-0 color-gray-500" }, createdAtText((_m = safeContextProperty("threadPost")[0]) == null ? void 0 : _m.createdAt), " at", " ", format(new Date((_n = safeContextProperty("threadPost")[0]) == null ? void 0 : _n.createdAt), "hh:ss:a")))), /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-2 items-center" }, /* @__PURE__ */ React__default.createElement(Text, null, (_p = (_o = safeContextProperty("threadPost")[0]) == null ? void 0 : _o.message) != null ? _p : ""))), /* @__PURE__ */ React__default.createElement(Box, { className: "py-4" }, /* @__PURE__ */ React__default.createElement(Box, { className: "px-4 py-2 border-t border-b border-gray-200" }, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-gray-600" }, (_r = (_q = safeContextProperty("threadPost")[0]) == null ? void 0 : _q.replies) == null ? void 0 : _r.totalCount, " ", ((_t = (_s = safeContextProperty("threadPost")[0]) == null ? void 0 : _s.replies) == null ? void 0 : _t.totalCount) > 0 ? "replies" : "reply"))))), /* @__PURE__ */ React__default.createElement(GiftedChat, { ref: threadMessageListRef, wrapInSafeArea: false, renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: colors.blue[500] }), messages: messageList, listViewProps: {
-    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
-        }
-      });
-    } 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
-        })
-      });
+    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(
+    GiftedChatInboxComponent,
+    {
+      ref: threadMessageListRef,
+      onRemoveImage: handleRemoveImage,
+      images,
+      onSelectImages,
+      selectedImage,
+      setSelectedImage,
+      isUploadingImage,
+      loading,
+      wrapInSafeArea: true,
+      inverted: true,
+      renderLoading: () => /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rounded", style: {
+        flex: 1
+      } }),
+      messages: messageList,
+      listViewProps: {
+        onEndReached,
+        onEndReachedThreshold: 0.5,
+        onMomentumScrollBegin,
+        style: {
+          marginTop: 0
+        },
+        contentContainerStyle: {
+          paddingTop: 0,
+          paddingBottom: selectedImage ? 90 : 0
+        },
+        refreshControl: /* @__PURE__ */ React__default.createElement(RefreshControl, { refreshing, onRefresh, colors: [colors.blue[500]], tintColor: colors.blue[500], title: "Loading earlier messages...", titleColor: colors.gray[600] })
+      },
+      onSend: (messages) => {
+        var _a2, _b2;
+        return handleSend((_b2 = (_a2 = messages[0]) == null ? void 0 : _a2.text) != null ? _b2 : " ");
+      },
+      text: msg || " ",
+      onInputTextChanged: (text) => setMsg(text),
+      renderFooter: () => null,
+      scrollToBottom: true,
+      user: {
+        _id: (auth == null ? void 0 : auth.id) || ""
+      },
+      placeholder: "Jot something down",
+      infiniteScroll: true,
+      renderSend,
+      renderMessageText,
+      renderMessage,
+      renderLoadEarlier,
+      loadEarlier: totalCount > channelMessages.length,
+      isLoadingEarlier: loadingOldMessages,
+      textInputProps: {
+        multiline: true,
+        returnKeyType: "default",
+        enablesReturnKeyAutomatically: true,
+        placeholderTextColor: colors.gray[400],
+        // Allow direct editing in the main input too for better UX
+        editable: true,
+        onFocus: () => setIsGiftedInputFocused(true),
+        onBlur: () => setIsGiftedInputFocused(false)
+      },
+      renderChatFooter,
+      messagesContainerStyle: __spreadProps(__spreadValues({}, (messageList == null ? void 0 : messageList.length) == 0 ? {
+        transform: [{
+          scaleY: -1
+        }]
+      } : {}), {
+        //  marginTop: -40, // Negative margin to remove the top padding
+        paddingTop: 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: {
-    underlayColor: "transparent",
-    springConfig: {
-      tension: 9e4,
-      friction: 9e4
-    },
-    disabled: true
-  } }));
+  ));
 };
 const SubscriptionHandler = ({
   subscribeToNewMessages,
@@ -1098,4 +1105,4 @@ const SubscriptionHandler = ({
   useEffect(() => subscribeToNewMessages(), [channelId]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
-const ThreadConversationView = React__default.memo(ThreadConversationViewComponent);export{ThreadConversationView};//# sourceMappingURL=ThreadConversationView.js.map
+const ThreadConversationView = ThreadConversationViewComponent;export{ThreadConversationView};//# sourceMappingURL=ThreadConversationView.js.map