@messenger-box/platform-mobile 10.0.3-alpha.40 → 10.0.3-alpha.46

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

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {Button,Box,ButtonText,Image,Spinner,Text,Skeleton,VStack,HStack,Avatar,AvatarFallbackText,AvatarImage,Center}from'@admin-layout/gluestack-ui-mobile';import {Platform,View,TouchableHighlight}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,InputToolbar,GiftedChat,Actions}from'react-native-gifted-chat';import {FileRefType,PreDefinedRole}from'common';import {useCreatePostThreadMutation,useSendExpoNotificationOnPostMutation,useGetPostThreadLazyQuery,OnThreadChatMessageAddedDocument}from'common/graphql';import {useUploadFilesNative}from'@messenger-box/platform-client';import {objectId}from'@messenger-box/core';import {format,isToday,isYesterday}from'date-fns';import {userSelector}from'@adminide-stack/user-auth0-client';import {config}from'../config/config.js';import Message from'../components/SlackMessageContainer/SlackMessage.js';import ImageViewerModal from'../components/SlackMessageContainer/ImageViewerModal.js';import CachedImage from'../components/CachedImage/index.js';import colors from'tailwindcss/colors';var __defProp = Object.defineProperty;
+import React__default,{useState,useRef,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;
@@ -34,6 +34,55 @@ const createdAtText = (value) => {
     return "Yesterday";
   return format(new Date(value), "MMM dd, yyyy");
 };
+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);
+  }, []);
+  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,
@@ -48,7 +97,7 @@ const ThreadConversationViewComponent = ({
   const [channelMessages, setChannelMessages] = useState([]);
   const auth = useSelector(userSelector);
   const [totalCount, setTotalCount] = useState(0);
-  const [selectedImage, setImage] = useState("");
+  const [selectedImage, setSelectedImage] = useState("");
   const [loadingOldMessages, setLoadingOldMessages] = useState(false);
   const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
   const navigation = useNavigation();
@@ -69,17 +118,27 @@ const ThreadConversationViewComponent = ({
   const [threadPost, setThreadPost] = useState([]);
   const [isScrollToBottom, setIsScrollToBottom] = useState(false);
   const threadMessageListRef = useRef(null);
-  const [sendThreadMessage] = useCreatePostThreadMutation();
-  const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+  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({
@@ -149,6 +208,7 @@ const ThreadConversationViewComponent = ({
   const onFetchOld = useCallback(() => {
     if (totalCount > channelMessages.length && !loadingOldMessages) {
       setLoadEarlierMsg(true);
+      setLoadingOldMessages(true);
       fetchMoreMessages({
         variables: {
           channelId: channelId == null ? void 0 : channelId.toString(),
@@ -169,12 +229,20 @@ const ThreadConversationViewComponent = ({
       }).finally(() => {
         setLoadEarlierMsg(false);
         setLoadingOldMessages(false);
+        setRefreshing(false);
       }).catch((error) => {
         setLoadEarlierMsg(false);
         setLoadingOldMessages(false);
+        setRefreshing(false);
       });
+    } else {
+      setRefreshing(false);
     }
   }, [parentId, channelId, totalCount, channelMessages]);
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    onFetchOld();
+  }, [onFetchOld]);
   const isCloseToTop = ({
     layoutMeasurement,
     contentOffset,
@@ -183,100 +251,197 @@ const ThreadConversationViewComponent = ({
     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;
-    setImageLoading(true);
+    setLoading(true);
     try {
       let imageSource = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
-        allowsEditing: true,
+        allowsEditing: false,
         aspect: [4, 3],
         quality: 0.8,
         base64: true,
-        exif: false
+        exif: false,
+        allowsMultipleSelection: true
       });
       if (!(imageSource == null ? void 0 : imageSource.canceled)) {
-        const selectedAsset = (_a2 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _a2[0];
-        if (!selectedAsset) {
-          setImageLoading(false);
+        const selectedAssets = (imageSource == null ? void 0 : imageSource.assets) || [];
+        if (selectedAssets.length === 0) {
+          setLoading(false);
           return;
         }
-        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"
+        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;
         });
-        setImage(previewImage);
-        setImages([asset]);
-        setImageLoading(false);
+        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 {
-        setImageLoading(false);
+        setLoading(false);
       }
     } catch (error) {
-      console.error("Error selecting image:", error);
-      setImageLoading(false);
+      setLoading(false);
     }
   };
+  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();
+    }
+  }, [isActionSheetVisible]);
+  const [isGiftedInputFocused, setIsGiftedInputFocused] = useState(false);
   const handleSend = useCallback(async (message) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
+    const newMessageText = message && message.length > 0 ? message || " " : " ";
     if (!channelId)
       return;
-    if (!message && message !== " " && images.length === 0)
+    const hasText = !!newMessageText && newMessageText !== " ";
+    const hasImages = images && images.length > 0;
+    if (!hasText && !hasImages)
       return;
+    setLoading(true);
     const postId = objectId();
     const currentDate = new Date();
-    setUploadingMessageId(postId);
-    images.length > 0 ? {
-      id: objectId(),
-      name: ((_a2 = images[0]) == null ? void 0 : _a2.fileName) || "image.jpg",
-      refType: FileRefType.Post,
-      height: ((_b2 = images[0]) == null ? void 0 : _b2.height) || 0,
-      width: ((_c2 = images[0]) == null ? void 0 : _c2.width) || 0
-    } : null;
-    ({
-      message: message || (images.length > 0 ? " " : ""),
+    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: (_d2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _d2.id,
-        givenName: (_e2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _e2.given_name,
-        familyName: (_f2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _f2.family_name,
-        picture: (_g2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _g2.picture
-      }});
-    setMsg("");
+        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,
+      isRead: false,
+      isOptimistic: true,
+      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,
+          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
+        })),
+        totalCount: currentImages.filter((img) => img && (img.uri || img.url)).length
+      } : 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 {
       let fileIds = null;
-      if (images && images.length > 0) {
-        setLoading(true);
-        const imagesToUpload = images.map((img) => {
-          return __spreadProps(__spreadValues({}, img), {
-            uri: img.uri || img.url,
-            type: img.mimeType || "image/jpeg",
-            name: img.fileName || `image_${Date.now()}.jpg`
+      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,
+              type: img.mimeType || "image/jpeg",
+              name: img.fileName || `image_${Date.now()}.jpg`
+            });
           });
-        });
-        const uploadResponse = await startUpload({
-          file: imagesToUpload,
-          saveUploadedFile: {
-            variables: {
-              postId
+          setUploadingMessageId(postId);
+          setPendingUploads((prev) => __spreadProps(__spreadValues({}, prev), {
+            [postId]: {
+              images: validImages,
+              message: currentMessageText
             }
-          },
-          createUploadLink: {
-            variables: {
-              postId
+          }));
+          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());
           }
-        });
-        if (uploadResponse == null ? void 0 : uploadResponse.error)
-          throw new Error(uploadResponse.error.toString());
-        const uploadedFiles = uploadResponse.data;
-        if (uploadResponse.data) {
-          setImage("");
-          setFiles([]);
-          setImages([]);
-          fileIds = (_h2 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _h2 : null;
+          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({
@@ -286,11 +451,37 @@ const ThreadConversationViewComponent = ({
           postThreadId: postThread && (postThread == null ? void 0 : postThread.id),
           postParentId: !parentId || parentId === 0 ? null : parentId,
           threadMessageInput: {
-            content: message,
+            content: currentMessageText,
             files: fileIds,
             role
           }
         },
+        optimisticResponse: {
+          createPostThread: {
+            __typename: "ThreadMessageSent",
+            lastMessage: {
+              __typename: "Post",
+              id: postId,
+              message: currentMessageText || " ",
+              createdAt: 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()
+              }
+            },
+            data: {
+              __typename: "PostThread",
+              id: (postThread == null ? void 0 : postThread.id) || objectId()
+            }
+          }
+        },
         update: (cache, {
           data: data2,
           errors
@@ -307,17 +498,31 @@ const ThreadConversationViewComponent = ({
           sendPushNotification(lastMessageId, channelId, parentId, (_g3 = (_f3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _f3.data) == null ? void 0 : _g3.id);
         }
       });
-      setChannelMessages((oldMessages) => oldMessages.map((msg2) => msg2.id === postId ? __spreadProps(__spreadValues({}, msg2), {
-        isDelivered: true
-      }) : msg2));
     } catch (error) {
       console.error("Error sending message:", error);
+      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";
+        }
+      } 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.";
+        }
+      }
+      setErrorMessage(formattedErrorMessage);
       setChannelMessages((oldMessages) => oldMessages.filter((msg2) => msg2.id !== postId));
+      removeMessageFromUI(postId);
     } finally {
       setLoading(false);
+      setIsUploadingImage(false);
       setUploadingMessageId(null);
     }
-  }, [auth, channelId, channelToTop, images, parentId, postThread, selectedImage, setChannelMessages]);
+  }, [auth, channelId, channelToTop, images, parentId, postThread, selectedImage, setChannelMessages, removeMessageFromUI, role]);
   const sendPushNotification = async (messageId, channelId2, parentId2, threadId) => {
     var _a2;
     const notificationData = {
@@ -352,7 +557,7 @@ const ThreadConversationViewComponent = ({
     }) => 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;
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2;
         let message = {
           _id: "",
           text: "",
@@ -372,7 +577,27 @@ const ThreadConversationViewComponent = ({
           _id: (_c2 = (_a2 = msg2 == null ? void 0 : msg2.author) == null ? void 0 : _a2.id) != null ? _c2 : (_b2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _b2.id,
           name: (_i2 = (_g2 = (_d2 = msg2 == null ? void 0 : msg2.author) == null ? void 0 : _d2.givenName) != null ? _g2 : ((_e2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _e2.given_name) + " " + ((_f2 = msg2 == null ? void 0 : msg2.author) == null ? void 0 : _f2.familyName)) != null ? _i2 : (_h2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _h2.family_name,
           avatar: (_l2 = (_j2 = msg2 == null ? void 0 : msg2.author) == null ? void 0 : _j2.picture) != null ? _l2 : (_k2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _k2.picture
-        }, message.image = (_n2 = (_m2 = msg2.files) == null ? void 0 : _m2.data[0]) == null ? void 0 : _n2.url, message.sent = msg2 == null ? void 0 : msg2.isDelivered, message.received = msg2 == null ? void 0 : msg2.isRead;
+        };
+        message.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);
@@ -383,12 +608,32 @@ const ThreadConversationViewComponent = ({
     }) => _id) : [];
   }, [channelMessages]);
   const renderSend = useCallback((props) => {
-    return /* @__PURE__ */ React__default.createElement(Send, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", style: {
-      marginBottom: 5,
-      marginRight: 5
-    }, size: 32, color: "#2e64e5" })));
-  }, []);
-  const renderMessageText = 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
@@ -441,12 +686,124 @@ const ThreadConversationViewComponent = ({
       } }));
     }
   }, [navigation, role]);
-  const renderActions = (props) => {
+  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,
       __spreadProps(__spreadValues({}, props), {
+        onPressActionButton: onSelectImages,
         options: {
-          ["Choose from Library"]: onSelectImages,
+          ["Choose from Library"]: () => {
+            onSelectImages();
+          },
           ["Cancel"]: () => {
           }
         },
@@ -461,88 +818,86 @@ const ThreadConversationViewComponent = ({
         }
       })
     );
-  };
-  const renderAccessory = useCallback(() => {
-    var _a2;
-    if (!selectedImage) {
+  }, [onSelectImages]);
+  useCallback(() => {
+    if (!images.length)
       return null;
-    }
-    return /* @__PURE__ */ React__default.createElement(View, { style: {
+    return /* @__PURE__ */ React__default.createElement(Box, { style: {
+      position: "relative",
       height: 70,
-      backgroundColor: "white",
-      borderTopWidth: 1,
-      borderTopColor: "#e0e0e0",
-      flexDirection: "row",
-      alignItems: "center",
-      margin: 0,
-      padding: 0,
-      paddingVertical: 0,
-      position: "absolute",
-      bottom: Platform.OS === "ios" ? 105 : 95,
-      left: 0,
-      right: 0,
-      zIndex: 1,
-      elevation: 3,
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: -1
-      },
-      shadowOpacity: 0.05,
-      shadowRadius: 2
-    } }, /* @__PURE__ */ React__default.createElement(View, { style: {
-      flex: 1,
+      backgroundColor: "transparent",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React__default.createElement(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: {
       flexDirection: "row",
-      alignItems: "center",
       paddingLeft: 15,
       paddingRight: 5
-    } }, /* @__PURE__ */ React__default.createElement(View, { style: {
-      width: 56,
-      height: 56,
+    }, contentContainerStyle: {
+      alignItems: "center",
+      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"
-    } }, /* @__PURE__ */ React__default.createElement(Image, { key: selectedImage, alt: "selected image", source: {
-      uri: selectedImage
+      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" }), loading && /* @__PURE__ */ React__default.createElement(View, { style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: "rgba(255, 255, 255, 0.7)",
-      justifyContent: "center",
-      alignItems: "center"
-    } }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: colors.blue[500] }))), /* @__PURE__ */ React__default.createElement(View, { style: {
-      flex: 1
-    } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
-      fontSize: 14,
-      fontWeight: "400",
-      color: colors.gray[800]
-    } }, ((_a2 = images[0]) == null ? void 0 : _a2.fileName) || "image_" + new Date().getTime() + ".jpg"), /* @__PURE__ */ React__default.createElement(Text, { style: {
-      fontSize: 12,
-      color: colors.gray[500],
-      marginTop: 2
-    } }, loading ? "Preparing..." : "Ready to send")), /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "rgba(0,0,0,0.1)", onPress: () => {
-      setFiles([]);
-      setImage("");
-      setImages([]);
+    }, size: "md" }), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => {
+      const newImages = [...images];
+      newImages.splice(index, 1);
+      setImages(newImages);
+      if (newImages.length === 0) {
+        setSelectedImage("");
+      }
     }, style: {
-      backgroundColor: colors.red[500],
-      borderRadius: 24,
-      width: 36,
-      height: 36,
+      position: "absolute",
+      top: -1,
+      right: -1,
+      backgroundColor: "rgba(0,0,0,0.6)",
+      borderRadius: 12,
+      width: 20,
+      height: 20,
       alignItems: "center",
       justifyContent: "center",
-      marginRight: 10
-    } }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "close", size: 20, color: "white" }))));
-  }, [selectedImage, loading, images]);
+      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);
@@ -562,38 +917,55 @@ const ThreadConversationViewComponent = ({
       expiresIn: 86400
     }, alt: "image" });
   }, [imageObject]);
-  const renderMessage = useCallback((props) => {
+  useCallback((props) => {
     const {
       currentMessage
     } = props;
-    const isUploading = currentMessage._id === uploadingMessageId && loading;
-    if (isUploading) {
-      return /* @__PURE__ */ React__default.createElement(Box, { className: "p-3 mb-2 mr-3 self-end rounded-2xl bg-gray-100 max-w-[80%]" }, currentMessage.text && currentMessage.text.trim() !== "" && /* @__PURE__ */ React__default.createElement(Box, { className: "h-4 mb-2 rounded bg-gray-200 overflow-hidden" }, /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rounded", className: "flex-1" })), currentMessage.image && /* @__PURE__ */ React__default.createElement(Box, { className: "h-[150px] w-[150px] rounded-lg bg-gray-200 overflow-hidden mt-1" }, /* @__PURE__ */ React__default.createElement(Box, { className: "flex-1 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: colors.blue[500] })), /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rounded", className: "flex-1" })));
-    }
+    const customProps = __spreadProps(__spreadValues({}, props), {
+      isShowImageViewer,
+      setImageViewer: setImageViewerObject,
+      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 }));
-  }, [uploadingMessageId, loading, isShowImageViewer, setImageViewerObject]);
-  const renderInputToolbar = useCallback((props) => {
-    return /* @__PURE__ */ React__default.createElement(InputToolbar, __spreadProps(__spreadValues({}, props), { containerStyle: {
-      backgroundColor: "white",
-      borderTopWidth: 1,
-      borderTopColor: colors.gray[200],
-      paddingHorizontal: 4,
-      paddingVertical: 0,
-      paddingTop: 2,
-      marginBottom: 0,
-      marginTop: 0
-    }, primaryStyle: {
-      alignItems: "center"
-    } }));
-  }, []);
+  }, [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 ? /* @__PURE__ */ React__default.createElement(Box, { style: {
+    return loadingOldMessages && !refreshing ? /* @__PURE__ */ React__default.createElement(Box, { style: {
       padding: 10,
       backgroundColor: "rgba(255,255,255,0.8)",
       borderRadius: 10,
-      marginTop: 10
-    } }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: colors.blue[500] })) : null;
-  }, [loadingOldMessages]);
+      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
@@ -608,84 +980,126 @@ const ThreadConversationViewComponent = ({
       return;
     onScroll = false;
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, 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: {
+  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: (_e = (_d = threadPost[0]) == null ? void 0 : _d.author) == null ? void 0 : _e.picture
-  } })), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-black" }, (_h = (_g = (_f = threadPost[0]) == null ? void 0 : _f.author) == null ? void 0 : _g.givenName) != null ? _h : "", " ", (_k = (_j = (_i = threadPost[0]) == null ? void 0 : _i.author) == null ? void 0 : _j.familyName) != null ? _k : ""), /* @__PURE__ */ React__default.createElement(Text, { className: "pl-0 color-gray-500" }, createdAtText((_l = threadPost[0]) == null ? void 0 : _l.createdAt), " at", " ", format(new Date((_m = threadPost[0]) == null ? void 0 : _m.createdAt), "hh:ss:a")))), /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-2 items-center" }, /* @__PURE__ */ React__default.createElement(Text, null, (_o = (_n = threadPost[0]) == null ? void 0 : _n.message) != null ? _o : ""))), /* @__PURE__ */ React__default.createElement(Box, { className: "py-4" }, /* @__PURE__ */ React__default.createElement(Box, { className: "px-4 py-2 border-t border-b border-gray-200" }, /* @__PURE__ */ React__default.createElement(Text, { className: "font-bold color-gray-600" }, (_q = (_p = threadPost[0]) == null ? void 0 : _p.replies) == null ? void 0 : _q.totalCount, " ", ((_s = (_r = threadPost[0]) == null ? void 0 : _r.replies) == null ? void 0 : _s.totalCount) > 0 ? "replies" : "reply"))))), /* @__PURE__ */ React__default.createElement(GiftedChat, { ref: threadMessageListRef, wrapInSafeArea: true, renderLoading: () => /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rounded", style: {
-    flex: 1
-  } }), messages: messageList, listViewProps: {
-    onEndReached,
-    onEndReachedThreshold: 0.5,
-    onMomentumScrollBegin
-  }, onSend: (messages) => {
-    var _a2, _b2;
-    return handleSend((_b2 = (_a2 = messages[0]) == null ? void 0 : _a2.text) != null ? _b2 : " ");
-  }, text: msg ? msg : " ", onInputTextChanged: (text) => setMsg(text), renderFooter: () => null, scrollToBottom: true, user: {
-    _id: (auth == null ? void 0 : auth.id) || ""
-  }, isTyping: false, alwaysShowSend: true, infiniteScroll: true, renderSend, renderMessageText, renderInputToolbar, minInputToolbarHeight: 50, renderActions, renderAccessory: !!selectedImage ? renderAccessory : void 0, renderMessage, renderLoadEarlier, loadEarlier: totalCount > channelMessages.length, isLoadingEarlier: loadingOldMessages, bottomOffset: Platform.OS === "ios" ? 10 : 0, textInputProps: {
-    style: {
-      borderWidth: 1,
-      borderColor: colors.gray[300],
-      backgroundColor: "#f8f8f8",
-      borderRadius: 20,
-      minHeight: 36,
-      maxHeight: 80,
-      color: "#000",
-      padding: 8,
-      paddingHorizontal: 15,
-      fontSize: 16,
-      flex: 1,
-      marginVertical: 2,
-      marginBottom: 0
-    },
-    multiline: true,
-    returnKeyType: "default",
-    enablesReturnKeyAutomatically: true,
-    placeholderTextColor: colors.gray[400]
-  }, minComposerHeight: 36, maxComposerHeight: 100, placeholder: "Type a message...", renderChatFooter: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent }), /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { channelId, subscribeToNewMessages: () => subscribeToMore({
-    document: OnThreadChatMessageAddedDocument,
-    variables: {
-      channelId: channelId == null ? void 0 : channelId.toString(),
-      postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString()
-    },
-    updateQuery: (prev, {
-      subscriptionData
-    }) => {
-      var _a2, _b2, _c2;
-      if (!subscriptionData.data)
-        return prev;
-      const newMessage = (_a2 = subscriptionData == null ? void 0 : subscriptionData.data) == null ? void 0 : _a2.threadChatMessageAdded;
-      const prevReplyCount = (_b2 = prev == null ? void 0 : prev.getPostThread) == null ? void 0 : _b2.replyCount;
-      const newReplyCount = prevReplyCount || 0 + 1;
-      const replies = ((_c2 = prev == null ? void 0 : prev.getPostThread) == null ? void 0 : _c2.replies) || [];
-      setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-        id
-      }) => id));
-      setTotalCount(newReplyCount);
-      return Object.assign({}, prev, {
-        getPostThread: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.getPostThread), {
-          lastReplyAt: newMessage.createdAt,
-          replies: [newMessage, ...replies],
-          replyCount: newReplyCount,
-          updatedAt: newMessage.createdAt
-        })
-      });
+  } })), /* @__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],
+        editable: true,
+        onFocus: () => setIsGiftedInputFocused(true),
+        onBlur: () => setIsGiftedInputFocused(false)
+      },
+      renderChatFooter,
+      messagesContainerStyle: __spreadProps(__spreadValues({}, (messageList == null ? void 0 : messageList.length) == 0 ? {
+        transform: [{
+          scaleY: -1
+        }]
+      } : {}), {
+        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,