@messenger-box/platform-mobile 10.0.3-alpha.7 → 10.0.3-alpha.72

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

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {Button,Spinner,VStack,HStack,Avatar,AvatarFallbackText,AvatarImage,Box,Text,Center,Image,ButtonText}from'@admin-layout/gluestack-ui-mobile';import {Platform}from'react-native';import {useRoute,useNavigation,useFocusEffect}from'@react-navigation/native';import {useSelector}from'react-redux';import {uniqBy,orderBy,startCase}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {encode}from'base-64';import {MaterialIcons,Ionicons,MaterialCommunityIcons}from'@expo/vector-icons';import {GiftedChat,Actions,MessageText,Send}from'react-native-gifted-chat';import {PreDefinedRole}from'common';import {useCreatePostThreadMutation,useSendExpoNotificationOnPostMutation,useGetPostThreadLazyQuery,OnThreadChatMessageAddedDocument}from'common/lib/generated/generated.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';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();
@@ -57,6 +106,7 @@ const ThreadConversationViewComponent = ({
   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({});
@@ -68,22 +118,32 @@ 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({
       title: (_a2 = params == null ? void 0 : params.title) != null ? _a2 : "Thread",
-      headerLeft: (props) => /* @__PURE__ */ React__default.createElement(Button, { bg: "transparent", "$pressed-bg": "$trueGray200", "$active-bg": "$trueGray200", onPress: () => navigation.goBack() }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { size: 20, name: "arrow-back-ios", color: "black" }))
+      headerLeft: (props) => /* @__PURE__ */ React__default.createElement(Button, { className: "bg-transparent active:bg-gray-200 ", onPress: () => navigation.goBack() }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { size: 20, name: "arrow-back-ios", color: "black" }))
     });
     if (postParentId) {
       refetchThreadMessages({
@@ -148,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(),
@@ -168,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,
@@ -182,132 +251,278 @@ const ThreadConversationViewComponent = ({
     const paddingToTop = 60;
     return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
   };
-  const dataURLtoFile = (dataurl, filename) => {
-    var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = encode(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n);
-    }
-    return new File([u8arr], filename, {
-      type: mime
+  const removeMessageFromUI = useCallback((messageId) => {
+    setPendingUploads((prev) => {
+      const newPending = __spreadValues({}, prev);
+      delete newPending[messageId];
+      return newPending;
     });
-  };
-  const onSelectImages = async () => {
-    var _a2;
-    setImageLoading(true);
-    let imageSource = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: true,
-      aspect: [4, 3],
-      quality: 1,
-      base64: true
+    setUploadErrors((prev) => {
+      const newErrors = __spreadValues({}, prev);
+      delete newErrors[messageId];
+      return newErrors;
     });
-    if (!imageSource.canceled) {
-      const image = "data:image/jpeg;base64," + ((_a2 = imageSource.assets[0]) == null ? void 0 : _a2.base64);
-      setImage(image);
-      const file = dataURLtoFile(image, "inputImage.jpg");
-      setFiles((files2) => files2.concat(file));
-      setImages((images2) => images2.concat(imageSource.assets[0]));
-    }
-    if (imageSource.canceled)
+    setIsUploadingImage(false);
+  }, []);
+  const onSelectImages = async () => {
+    setLoading(true);
+    try {
+      let imageSource = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: false,
+        aspect: [4, 3],
+        quality: 0.8,
+        base64: true,
+        exif: false,
+        allowsMultipleSelection: true
+      });
+      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;
+        });
+        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) {
       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;
+    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();
-    if (images && images.length > 0) {
-      setLoading(true);
-      const uploadResponse = await startUpload({
-        file: images,
-        saveUploadedFile: {
-          variables: {
-            postId
-          }
-        },
-        createUploadLink: {
-          variables: {
-            postId
-          }
-        }
-      });
-      if (uploadResponse == null ? void 0 : uploadResponse.error)
-        setLoading(false);
-      const uploadedFiles = uploadResponse.data;
-      if (uploadResponse.data) {
-        setImage("");
-        setFiles([]);
-        setImages([]);
-        const files2 = (_a2 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _a2 : null;
-        await sendThreadMessage({
-          variables: {
-            postId,
-            channelId,
-            postThreadId: postThread && (postThread == null ? void 0 : postThread.id),
-            postParentId: !parentId || parentId == 0 ? null : parentId,
-            threadMessageInput: {
-              content: message,
-              files: files2,
-              role
-            }
-          },
-          update: (cache, {
-            data: data2,
-            errors
-          }) => {
-            var _a3, _b2, _c2, _d2, _e2, _f2, _g2;
-            if (!data2 || errors) {
-              setLoading(false);
-              return;
+    const currentDate = 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,
+      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 (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`
+            });
+          });
+          setUploadingMessageId(postId);
+          setPendingUploads((prev) => __spreadProps(__spreadValues({}, prev), {
+            [postId]: {
+              images: validImages,
+              message: currentMessageText
             }
-            setPostThread((_a3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _a3.data);
-            const lastMessageId = (_c2 = (_b2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _b2.lastMessage) == null ? void 0 : _c2.id;
-            if (!parentId || parentId == 0) {
-              setParentId((_e2 = (_d2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _d2.lastMessage) == null ? void 0 : _e2.id);
+          }));
+          const uploadResponse = await startUpload({
+            file: imagesToUpload,
+            saveUploadedFile: {
+              variables: {
+                postId
+              }
+            },
+            createUploadLink: {
+              variables: {
+                postId
+              }
             }
-            setChannelToTop(channelToTop + 1);
-            setLoading(false);
-            setMsg("");
-            sendPushNotification(lastMessageId, channelId, parentId, (_g2 = (_f2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _f2.data) == null ? void 0 : _g2.id);
+          });
+          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;
+          });
+        }
       }
-    } else {
-      setLoading(true);
       await sendThreadMessage({
         variables: {
+          postId,
           channelId,
           postThreadId: postThread && (postThread == null ? void 0 : postThread.id),
-          postParentId: !parentId || parentId == 0 ? null : parentId,
+          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
         }) => {
-          var _a3, _b2, _c2, _d2, _e2, _f2;
-          if (!data2 || errors) {
-            setLoading(false);
+          var _a3, _b3, _c3, _d3, _e3, _f3, _g3;
+          if (!data2 || errors)
             return;
-          }
-          setPostThread(data2 == null ? void 0 : data2.createPostThread.data);
-          const lastMessageId = (_b2 = (_a3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _a3.lastMessage) == null ? void 0 : _b2.id;
-          if (!parentId || parentId == 0) {
-            setParentId((_d2 = (_c2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _c2.lastMessage) == null ? void 0 : _d2.id);
+          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);
-          setLoading(false);
-          setMsg("");
-          sendPushNotification(lastMessageId, channelId, parentId, (_f2 = (_e2 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _e2.data) == null ? void 0 : _f2.id);
+          sendPushNotification(lastMessageId, channelId, parentId, (_g3 = (_f3 = data2 == null ? void 0 : data2.createPostThread) == null ? void 0 : _f3.data) == null ? void 0 : _g3.id);
         }
       });
+    } 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);
     }
-  }, [setChannelMessages, channelId, images, parentId, expoTokens]);
+  }, [auth, channelId, channelToTop, images, parentId, postThread, selectedImage, setChannelMessages, removeMessageFromUI, role]);
   const sendPushNotification = async (messageId, channelId2, parentId2, threadId) => {
     var _a2;
     const notificationData = {
@@ -342,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: "",
@@ -362,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);
@@ -372,13 +607,33 @@ const ThreadConversationViewComponent = ({
       _id
     }) => _id) : [];
   }, [channelMessages]);
-  const renderSend = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Send, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", style: {
-      marginBottom: 5,
-      marginRight: 5
-    }, size: 32, color: "#2e64e5" })));
-  };
-  const renderMessageText = (props) => {
+  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
@@ -412,16 +667,7 @@ const ThreadConversationViewComponent = ({
           reservationId: actionId
         };
       }
-      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (attachment == null ? void 0 : attachment.callToAction) && action ? /* @__PURE__ */ React__default.createElement(Box, { bg: CALL_TO_ACTION_BOX_BGCOLOR, borderRadius: 15, pb: 2 }, /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          borderColor: CALL_TO_ACTION_BUTTON_BORDERCOLOR,
-          onPress: () => action && params2 && navigation.navigate(action, params2)
-        },
-        /* @__PURE__ */ React__default.createElement(ButtonText, { color: CALL_TO_ACTION_TEXT_COLOR }, attachment.callToAction.title)
-      ), /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+      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,
@@ -439,156 +685,419 @@ const ThreadConversationViewComponent = ({
         }
       } }));
     }
-  };
-  const renderActions = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Actions, __spreadProps(__spreadValues({}, props), { icon: () => /* @__PURE__ */ React__default.createElement(Ionicons, { name: "image", size: 30, color: "black", onPress: onSelectImages }) }));
-  };
-  const renderAccessory = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Box, null, selectedImage !== "" ? /* @__PURE__ */ React__default.createElement(HStack, { alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Image, { ml: "$3", key: selectedImage, alt: "image", source: {
-      uri: selectedImage
-    }, size: "xs" }), /* @__PURE__ */ React__default.createElement(
-      Button,
-      {
-        variant: "solid",
-        bg: "transparent",
-        onPress: () => {
-          setFiles([]);
-          setImage("");
-          setImages([]);
+  }, [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;
         }
-      },
-      /* @__PURE__ */ React__default.createElement(ButtonText, { color: "$black" }, "Cancel")
-    )) : null);
-  };
-  const setImageViewerObject = (obj, v) => {
+        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();
+          },
+          ["Cancel"]: () => {
+          }
+        },
+        optionTintColor: "#000000",
+        cancelButtonIndex: 1,
+        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",
+          marginLeft: 8,
+          marginBottom: 0
+        }
+      })
+    );
+  }, [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",
+      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(() => {
+  }, []);
+  const modalContent = useMemo(() => {
     if (!imageObject)
       return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
     const {
       image,
       _id
     } = imageObject;
+    return /* @__PURE__ */ React__default.createElement(CachedImage, { style: {
+      width: "100%",
+      height: "100%"
+    }, resizeMode: "cover", cacheKey: `${_id}-slack-bubble-imageKey`, source: {
+      uri: image,
+      expiresIn: 86400
+    }, alt: "image" });
+  }, [imageObject]);
+  useCallback((props) => {
+    const {
+      currentMessage
+    } = props;
+    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 }));
+  }, [isShowImageViewer]);
+  useCallback((props) => {
+    if (isActionSheetVisible)
+      return null;
     return /* @__PURE__ */ React__default.createElement(
-      CachedImage,
-      {
-        style: {
-          width: "100%",
-          height: "100%"
-        },
-        resizeMode: "cover",
-        cacheKey: `${_id}-slack-bubble-imageKey`,
-        source: {
-          uri: image,
-          expiresIn: 86400
+      InputToolbar,
+      __spreadProps(__spreadValues({}, props), {
+        containerStyle: {
+          backgroundColor: "transparent",
+          padding: 0,
+          margin: 0,
+          borderTopWidth: 1,
+          borderTopColor: colors.gray[200]
         },
-        alt: "image"
-      }
+        primaryStyle: {
+          alignItems: "center",
+          justifyContent: "center",
+          flex: 1
+        }
+      })
     );
-  }, [imageObject]);
-  const renderMessage = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
-  };
+  }, [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;
-    console.log("scroll top");
     if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages == null ? void 0 : channelMessages.length)) {
       onFetchOld();
     }
   };
   const onEndReached = () => {
-    console.log("on end reached");
     if (!onScroll)
       return;
     onScroll = false;
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (loadingOldMessages || loadEarlierMsg) && /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }), 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, { px: "$2", pt: "$2", pb: "$0", space: "sm" }, /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Avatar, { 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, { color: "$black", fontWeight: "$bold" }, (_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, { color: "$trueGray500", pl: "$0" }, 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, { px: "$2", space: "sm", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Text, null, (_o = (_n = threadPost[0]) == null ? void 0 : _n.message) != null ? _o : ""))), /* @__PURE__ */ React__default.createElement(Box, { py: "$4" }, /* @__PURE__ */ React__default.createElement(Box, { px: "$4", borderTopWidth: "$1", borderBottomWidth: "$1", py: "$2", borderColor: "$trueGray200" }, /* @__PURE__ */ React__default.createElement(Text, { color: "$trueGray600", fontWeight: "$bold" }, (_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,
+  } })), /* @__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,
-      wrapInSafeArea: false,
-      renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }),
+      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
+        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 ? msg : " ",
+      text: msg || " ",
       onInputTextChanged: (text) => setMsg(text),
-      renderFooter: () => loading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }) : imageLoading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }) : "",
+      renderFooter: () => null,
       scrollToBottom: true,
       user: {
         _id: (auth == null ? void 0 : auth.id) || ""
       },
-      isTyping: true,
-      alwaysShowSend: loading ? false : true,
+      placeholder: "Jot something down",
       infiniteScroll: true,
       renderSend,
       renderMessageText,
-      minInputToolbarHeight: 50,
-      renderActions,
-      renderAccessory,
       renderMessage,
-      renderChatFooter: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent }), /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { channelId, subscribeToNewMessages: () => subscribeToMore({
-        document: OnThreadChatMessageAddedDocument,
-        variables: {
-          channelId: channelId == null ? void 0 : channelId.toString(),
-          postParentId: !parentId || parentId == 0 ? null : parentId == null ? void 0 : parentId.toString()
-        },
-        updateQuery: (prev, {
-          subscriptionData
-        }) => {
-          var _a2, _b2, _c2;
-          if (!subscriptionData.data)
-            return prev;
-          const newMessage = (_a2 = subscriptionData == null ? void 0 : subscriptionData.data) == null ? void 0 : _a2.threadChatMessageAdded;
-          const prevReplyCount = (_b2 = prev == null ? void 0 : prev.getPostThread) == null ? void 0 : _b2.replyCount;
-          const newReplyCount = prevReplyCount || 0 + 1;
-          const replies = ((_c2 = prev == null ? void 0 : prev.getPostThread) == null ? void 0 : _c2.replies) || [];
-          setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-            id
-          }) => id));
-          setTotalCount(newReplyCount);
-          return Object.assign({}, prev, {
-            getPostThread: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.getPostThread), {
-              lastReplyAt: newMessage.createdAt,
-              replies: [newMessage, ...replies],
-              replyCount: newReplyCount,
-              updatedAt: newMessage.createdAt
-            })
-          });
-        }
-      }) })),
-      messagesContainerStyle: (messageList == null ? void 0 : messageList.length) == 0 && {
+      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
         }]
-      },
-      renderChatEmpty: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !threadLoading && messageList && (messageList == null ? void 0 : messageList.length) == 0 && /* @__PURE__ */ React__default.createElement(Box, { p: "$5" }, /* @__PURE__ */ React__default.createElement(Center, { 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
-      }
+      } : {}), {
+        paddingTop: 0
+      })
     }
   ));
 };