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

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

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useMemo,useEffect,useCallback}from'react';import {Box,Button,ButtonText,HStack,Avatar,AvatarFallbackText,AvatarImage,Text,Image,Spinner,Skeleton}from'@admin-layout/gluestack-ui-mobile';import {Platform,View,TouchableHighlight}from'react-native';import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {navigationRef}from'@common-stack/client-react';import {useSelector}from'react-redux';import {uniqBy,orderBy,startCase}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {MaterialCommunityIcons,Ionicons}from'@expo/vector-icons';import {Send,MessageText,InputToolbar,GiftedChat,Actions}from'react-native-gifted-chat';import {RoomType,PreDefinedRole}from'common';import {useAddDirectChannelMutation,useSendMessagesMutation,useSendExpoNotificationOnPostMutation,useMessagesQuery,MessagesDocument,OnChatMessageAddedDocument}from'common/graphql';import {useUploadFilesNative}from'@messenger-box/platform-client';import {objectId}from'@messenger-box/core';import {userSelector}from'@adminide-stack/user-auth0-client';import {isToday,isYesterday,format}from'date-fns';import Message from'../components/SlackMessageContainer/SlackMessage.js';import ImageViewerModal from'../components/SlackMessageContainer/ImageViewerModal.js';import CachedImage from'../components/CachedImage/index.js';import {config}from'../config/config.js';import colors from'tailwindcss/colors';var __defProp = Object.defineProperty;
+import React__default,{useState,useRef,useMemo,useEffect,useCallback}from'react';import {useToast,Box,Button,ButtonText,HStack,Avatar,AvatarFallbackText,AvatarImage,Text,ScrollView,Image,Spinner}from'@admin-layout/gluestack-ui-mobile';import {Platform,View,TouchableHighlight,TouchableOpacity,TextInput,KeyboardAvoidingView,Animated}from'react-native';import {useRoute,useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {navigationRef}from'@common-stack/client-react';import {useSelector,shallowEqual}from'react-redux';import {uniqBy,orderBy,startCase}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {MaterialCommunityIcons,Ionicons,MaterialIcons}from'@expo/vector-icons';import {Send,MessageText}from'react-native-gifted-chat';import {FileRefType,RoomType,PreDefinedRole}from'common';import {useAddDirectChannel,useSendChannelMessage,useSendExpoNotification,MESSAGES_DOCUMENT,CHAT_MESSAGE_ADDED,useChannelMessagesQuery}from'../../../queries/inboxQueries.js';import {useUploadFilesNative}from'@messenger-box/platform-client';import {objectId}from'@messenger-box/core';import {userSelector}from'@adminide-stack/user-auth0-client';import {isToday,isYesterday,format}from'date-fns';import Message from'../components/SlackMessageContainer/SlackMessage.js';import ImageViewerModal from'../components/SlackMessageContainer/ImageViewerModal.js';import CachedImage from'../components/CachedImage/index.js';import {config}from'../config/config.js';import colors from'tailwindcss/colors';import {SubscriptionHandler}from'../components/SubscriptionHandler.js';import {useInboxMessages}from'../hooks/useInboxMessages.js';import'react-native-reanimated';import'expo-constants';import {GiftedChatInboxComponent}from'../components/GiftedChatInboxComponent.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -46,6 +46,56 @@ const createdAtText = (value) => {
     return "Yesterday";
   return format(new Date(value), "MMM dd, yyyy");
 };
+const ErrorNotification = ({
+  message,
+  onClose,
+  type = "error"
+}) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const bgColor = type === "error" ? "#f44336" : "#ff9800";
+  const title = type === "error" ? "Error" : "Warning";
+  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: bgColor,
+    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"
+  } }, title), /* @__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));
+};
+Platform.OS === "ios" ? 20 : 0;
 const ConversationViewComponent = (_a) => {
   var _b = _a, {
     channelId: initialChannelId,
@@ -57,9 +107,11 @@ const ConversationViewComponent = (_a) => {
     "isShowThreadMessage"
   ]);
   var _a2, _b2, _c, _d;
+  const {
+    params
+  } = useRoute();
   const [channelId, setChannelId] = useState(initialChannelId || null);
   const [messageText, setMessageText] = useState("");
-  const [skip, setSkip] = useState(0);
   const [loading, setLoading] = useState(false);
   const [loadingOldMessages, setLoadingOldMessages] = useState(false);
   const [error, setError] = useState(null);
@@ -67,40 +119,45 @@ const ConversationViewComponent = (_a) => {
   const [images, setImages] = useState([]);
   const [isShowImageViewer, setImageViewer] = useState(false);
   const [imageObject, setImageObject] = useState({});
+  const [errorMessage, setErrorMessage] = useState("");
+  const [notificationType, setNotificationType] = useState("error");
+  const [isActionSheetVisible, setActionSheetVisible] = useState(false);
+  const [bottomMargin, setBottomMargin] = useState(0);
   const messageRootListRef = useRef(null);
+  const textInputRef = useRef(null);
   const isMounted = useRef(true);
   const fetchOldDebounceRef = useRef(false);
-  const auth = useSelector(userSelector);
+  const auth = useSelector(userSelector, shallowEqual);
   const currentRoute = navigationRef.isReady() ? (_a2 = navigationRef) == null ? void 0 : _a2.getCurrentRoute() : null;
   const navigation = useNavigation();
   const isFocused = useIsFocused();
-  const [addDirectChannel] = useAddDirectChannelMutation();
+  const [addDirectChannel] = useAddDirectChannel();
   const {
     startUpload
   } = useUploadFilesNative();
-  const [sendMsg] = useSendMessagesMutation();
-  const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+  const [sendMsg] = useSendChannelMessage();
+  const [sendExpoNotification] = useSendExpoNotification();
+  const [skip, setSkip] = useState(0);
   const {
     data,
     loading: messageLoading,
     refetch,
-    fetchMore: fetchMoreMessages,
-    subscribeToMore
-  } = useMessagesQuery({
-    variables: {
+    subscribe
+  } = useInboxMessages({
+    useQueryHook: useChannelMessagesQuery,
+    queryVariables: {
       channelId: channelId == null ? void 0 : channelId.toString(),
       parentId: null,
       limit: MESSAGES_PER_PAGE,
-      skip
+      skip,
+      orgName: params == null ? void 0 : params.orgName
     },
-    skip: !channelId,
-    fetchPolicy: "cache-and-network",
-    nextFetchPolicy: "cache-first",
-    refetchWritePolicy: "merge",
-    notifyOnNetworkStatusChange: true,
-    onError: (error2) => {
-      setError(String(error2));
-    }
+    subscriptionDocument: CHAT_MESSAGE_ADDED,
+    subscriptionVariables: {
+      channelId: channelId == null ? void 0 : channelId.toString()
+    },
+    updateQuery: void 0,
+    onError: (err) => setError(String(err))
   });
   const channelMessages = useMemo(() => {
     var _a3;
@@ -126,25 +183,18 @@ const ConversationViewComponent = (_a) => {
     if (channelId) {
       refetch();
     }
-    return () => {
-    };
-  }, [channelId, isFocused, refetch]));
-  useEffect(() => {
-    if (selectedImage) {
-      setLoading(false);
-    }
-  }, [selectedImage]);
+  }, [isFocused, refetch]));
   const fetchMoreMessagesImpl = useCallback(async () => {
     var _a3, _b3;
     try {
       setLoadingOldMessages(true);
-      const response = await fetchMoreMessages({
-        variables: {
-          channelId: channelId == null ? void 0 : channelId.toString(),
-          parentId: null,
-          skip: channelMessages.length
-        }
+      const response = await refetch({
+        channelId: channelId == null ? void 0 : channelId.toString(),
+        parentId: null,
+        limit: MESSAGES_PER_PAGE,
+        skip: channelMessages.length
       });
+      setSkip(channelMessages.length);
       setLoadingOldMessages(false);
       if (!((_b3 = (_a3 = response == null ? void 0 : response.data) == null ? void 0 : _a3.messages) == null ? void 0 : _b3.data)) {
         return {
@@ -161,9 +211,9 @@ const ConversationViewComponent = (_a) => {
         error: String(error2)
       };
     }
-  }, [channelId, channelMessages.length, fetchMoreMessages]);
+  }, [channelId, channelMessages.length, refetch]);
   const sendMessageImpl = useCallback(async () => {
-    var _a3;
+    var _a3, _b3, _c2, _d2, _e, _f, _g, _h;
     try {
       const currentMessageText = messageText;
       setMessageText("");
@@ -188,12 +238,13 @@ const ConversationViewComponent = (_a) => {
         author: {
           __typename: "UserAccount",
           id: auth == null ? void 0 : auth.id,
-          picture: (auth == null ? void 0 : auth.picture) || "",
-          givenName: (auth == null ? void 0 : auth.givenName) || "",
-          familyName: (auth == null ? void 0 : auth.familyName) || "",
-          email: (auth == null ? void 0 : auth.email) || "",
-          username: (auth == null ? void 0 : auth.username) || "",
-          alias: [],
+          givenName: ((_a3 = auth == null ? void 0 : auth.profile) == null ? void 0 : _a3.given_name) || "",
+          familyName: ((_b3 = auth == null ? void 0 : auth.profile) == null ? void 0 : _b3.family_name) || "",
+          email: ((_c2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _c2.email) || "",
+          username: ((_d2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _d2.nickname) || "",
+          fullName: ((_e = auth == null ? void 0 : auth.profile) == null ? void 0 : _e.name) || "",
+          picture: ((_f = auth == null ? void 0 : auth.profile) == null ? void 0 : _f.picture) || "",
+          alias: [(_g = auth == null ? void 0 : auth.authUserId) != null ? _g : ""],
           tokens: []
         },
         isDelivered: true,
@@ -234,45 +285,51 @@ const ConversationViewComponent = (_a) => {
         update: (cache, {
           data: data2
         }) => {
-          if (data2 == null ? void 0 : data2.sendMessage) {
-            try {
-              const existingData = cache.readQuery({
-                query: MessagesDocument,
-                variables: {
-                  channelId: channelId == null ? void 0 : channelId.toString(),
-                  parentId: null,
-                  limit: MESSAGES_PER_PAGE,
-                  skip: 0
+          if (!(data2 == null ? void 0 : data2.sendMessage))
+            return;
+          try {
+            cache.writeQuery({
+              query: MESSAGES_DOCUMENT,
+              variables: {
+                channelId: channelId == null ? void 0 : channelId.toString(),
+                parentId: null,
+                limit: MESSAGES_PER_PAGE,
+                skip: 0
+              },
+              data: {
+                messages: {
+                  __typename: "Messages",
+                  messagesRefId: channelId,
+                  data: [data2.sendMessage],
+                  totalCount: 1
                 }
-              });
-              if (!existingData)
-                return;
-              cache.writeQuery({
-                query: MessagesDocument,
-                variables: {
-                  channelId: channelId == null ? void 0 : channelId.toString(),
-                  parentId: null,
-                  limit: MESSAGES_PER_PAGE,
-                  skip: 0
-                },
-                data: {
-                  messages: __spreadProps(__spreadValues({}, existingData.messages), {
-                    data: [data2.sendMessage, ...existingData.messages.data],
-                    totalCount: (existingData.messages.totalCount || 0) + 1
-                  })
-                }
-              });
-            } catch (error2) {
-              console.error("Error updating cache:", error2);
+              }
+            });
+          } catch (error2) {
+            console.error("Error updating cache:", error2);
+            let errorMsg = "Failed to update message cache";
+            if (__DEV__ && error2) {
+              errorMsg = error2.message ? error2.message.replace("[ApolloError: ", "").replace("]", "") : "Cache update failed";
             }
+            setNotificationType("error");
+            setErrorMessage(errorMsg);
           }
         }
       });
+      setIsUploadingImage(false);
+      setLoading(false);
       return {
-        message: (_a3 = response.data) == null ? void 0 : _a3.sendMessage
+        message: (_h = response.data) == null ? void 0 : _h.sendMessage
       };
     } catch (error2) {
       setLoading(false);
+      setIsUploadingImage(false);
+      let errorMsg = "Failed to send message";
+      if (__DEV__ && error2) {
+        errorMsg = error2.message ? error2.message.replace("[ApolloError: ", "").replace("]", "") : "Message sending failed";
+      }
+      setNotificationType("error");
+      setErrorMessage(errorMsg);
       setError(String(error2));
       return {
         error: String(error2)
@@ -280,32 +337,42 @@ const ConversationViewComponent = (_a) => {
     }
   }, [channelId, messageText, sendMsg, auth]);
   const onSelectImages = async () => {
-    var _a3;
     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 = (_a3 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _a3[0];
-        if (!selectedAsset) {
+        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;
         });
-        setSelectedImage(previewImage);
-        setImages([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]);
+        if (!isActionSheetVisible) {
+          setActionSheetVisible(true);
+        }
       } else {
         setLoading(false);
       }
@@ -314,12 +381,72 @@ const ConversationViewComponent = (_a) => {
     }
   };
   const [uploadingMessageId, setUploadingMessageId] = useState(null);
+  const [pendingUploads, setPendingUploads] = useState({});
+  const [uploadErrors, setUploadErrors] = useState({});
+  const [isUploadingImage, setIsUploadingImage] = useState(false);
+  useEffect(() => {
+    if (images.length === 0) {
+      setIsUploadingImage(false);
+    }
+  }, [images]);
+  useToast();
+  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 sendMessageWithFileImpl = useCallback(async () => {
-    var _a3, _b3, _c2, _d2, _e, _f;
+    var _a3, _b3, _c2, _d2, _e, _f, _g;
     try {
-      setLoading(true);
       const postId = objectId();
-      setUploadingMessageId(postId);
+      setIsUploadingImage(true);
+      setLoading(false);
+      setUploadingMessageId(null);
+      if (!images || images.length === 0) {
+        setIsUploadingImage(false);
+        setLoading(false);
+        return {
+          error: "No images available to upload"
+        };
+      }
+      const currentMessageText = messageText;
+      const currentImages = [...images];
+      const imageUris = currentImages.map((img) => img.uri || img.url);
+      setMessageText("");
+      setSelectedImage("");
+      setImages([]);
+      const clientMessage = {
+        _id: postId,
+        text: currentMessageText || " ",
+        createdAt: new Date(),
+        user: {
+          _id: (auth == null ? void 0 : auth.id) || "",
+          name: `${(auth == null ? void 0 : auth.givenName) || ""} ${(auth == null ? void 0 : auth.familyName) || ""}`,
+          avatar: (auth == null ? void 0 : auth.picture) || ""
+        },
+        image: imageUris[0],
+        images: imageUris,
+        sent: true,
+        received: true,
+        pending: false,
+        type: "TEXT",
+        replies: {
+          data: [],
+          totalCount: 0
+        },
+        isShowThreadMessage: false
+      };
+      setPendingUploads((prev) => __spreadProps(__spreadValues({}, prev), {
+        [postId]: clientMessage
+      }));
       const notificationData = {
         url: config.INBOX_MESSEGE_PATH,
         params: {
@@ -331,23 +458,6 @@ const ConversationViewComponent = (_a) => {
           sound: Platform.OS === "android" ? void 0 : "default"
         }
       };
-      if (!images || images.length === 0) {
-        setLoading(false);
-        setUploadingMessageId(null);
-        return {
-          error: "No images available to upload"
-        };
-      }
-      const imagesToUpload = images.map((img) => {
-        return __spreadProps(__spreadValues({}, img), {
-          uri: img.uri || img.url,
-          type: "image/jpeg",
-          name: img.fileName || `image_${Date.now()}.jpg`
-        });
-      });
-      const currentMessageText = messageText;
-      setMessageText("");
-      const fileId = objectId();
       const optimisticMessage = {
         __typename: "Post",
         id: postId,
@@ -357,12 +467,13 @@ const ConversationViewComponent = (_a) => {
         author: {
           __typename: "UserAccount",
           id: auth == null ? void 0 : auth.id,
-          picture: (auth == null ? void 0 : auth.picture) || "",
-          givenName: (auth == null ? void 0 : auth.givenName) || "",
-          familyName: (auth == null ? void 0 : auth.familyName) || "",
-          email: (auth == null ? void 0 : auth.email) || "",
-          username: (auth == null ? void 0 : auth.username) || "",
-          alias: [],
+          givenName: ((_a3 = auth == null ? void 0 : auth.profile) == null ? void 0 : _a3.given_name) || "",
+          familyName: ((_b3 = auth == null ? void 0 : auth.profile) == null ? void 0 : _b3.family_name) || "",
+          email: ((_c2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _c2.email) || "",
+          username: ((_d2 = auth == null ? void 0 : auth.profile) == null ? void 0 : _d2.nickname) || "",
+          fullName: ((_e = auth == null ? void 0 : auth.profile) == null ? void 0 : _e.name) || "",
+          picture: ((_f = auth == null ? void 0 : auth.profile) == null ? void 0 : _f.picture) || "",
+          alias: [(_g = auth == null ? void 0 : auth.authUserId) != null ? _g : ""],
           tokens: []
         },
         isDelivered: true,
@@ -381,20 +492,21 @@ const ConversationViewComponent = (_a) => {
         props: {},
         files: {
           __typename: "FilesInfo",
-          data: [{
+          data: imageUris.map((uri, index) => ({
             __typename: "FileInfo",
-            id: fileId,
-            url: selectedImage,
-            name: ((_a3 = imagesToUpload[0]) == null ? void 0 : _a3.name) || "image.jpg",
+            id: `temp-file-${index}-${postId}`,
+            url: uri,
+            name: `image-${index}.jpg`,
             extension: "jpg",
             mimeType: "image/jpeg",
-            height: ((_b3 = imagesToUpload[0]) == null ? void 0 : _b3.height) || 0,
-            width: ((_c2 = imagesToUpload[0]) == null ? void 0 : _c2.width) || 0,
-            size: ((_d2 = imagesToUpload[0]) == null ? void 0 : _d2.fileSize) || 0,
-            refType: "Post",
-            ref: postId
-          }],
-          totalCount: 1
+            size: 0,
+            height: 300,
+            width: 300,
+            channel: null,
+            post: null,
+            refType: FileRefType.Post
+          })),
+          totalCount: imageUris.length
         },
         replies: {
           __typename: "Messages",
@@ -402,137 +514,149 @@ const ConversationViewComponent = (_a) => {
           totalCount: 0
         }
       };
-      const uploadResponse = await startUpload({
-        file: imagesToUpload,
-        saveUploadedFile: {
-          variables: {
-            postId
-          }
-        },
-        createUploadLink: {
-          variables: {
-            postId
+      setTimeout(async () => {
+        var _a4;
+        try {
+          const imagesToUpload = currentImages.map((img) => __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
+              }
+            },
+            createUploadLink: {
+              variables: {
+                postId
+              }
+            }
+          });
+          if (uploadResponse == null ? void 0 : uploadResponse.error) {
+            console.error("Upload error:", uploadResponse.error);
+            let errorMsg = "Failed to upload image. Please try again.";
+            if (__DEV__ && uploadResponse.error) {
+              errorMsg = typeof uploadResponse.error === "string" ? uploadResponse.error : uploadResponse.error.message || errorMsg;
+            }
+            setNotificationType("error");
+            setErrorMessage(errorMsg);
+            setUploadErrors((prev) => __spreadProps(__spreadValues({}, prev), {
+              [postId]: errorMsg
+            }));
+            removeMessageFromUI(postId);
+            setIsUploadingImage(false);
+            setLoading(false);
+            return;
           }
-        }
-      });
-      if (uploadResponse == null ? void 0 : uploadResponse.error) {
-        setLoading(false);
-        setUploadingMessageId(null);
-        return {
-          error: String(uploadResponse.error)
-        };
-      }
-      const uploadedFiles = uploadResponse.data;
-      const files = (_e = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _e : null;
-      const realMessage = __spreadProps(__spreadValues({}, optimisticMessage), {
-        files: {
-          __typename: "FilesInfo",
-          data: uploadedFiles.map((file) => ({
-            __typename: "FileInfo",
-            id: file.id,
-            url: file.url,
-            name: file.name,
-            extension: file.extension,
-            mimeType: file.mimeType,
-            height: file.height,
-            width: file.width,
-            size: file.size,
-            refType: file.refType,
-            ref: postId
-          })),
-          totalCount: uploadedFiles.length
-        }
-      });
-      const response = await sendMsg({
-        variables: {
-          postId,
-          channelId,
-          content: currentMessageText || " ",
-          files,
-          notificationParams: notificationData
-        },
-        optimisticResponse: {
-          __typename: "Mutation",
-          sendMessage: realMessage
-        },
-        update: (cache, {
-          data: data2
-        }) => {
-          if (data2 == null ? void 0 : data2.sendMessage) {
-            try {
-              const existingData = cache.readQuery({
-                query: MessagesDocument,
-                variables: {
-                  channelId: channelId == null ? void 0 : channelId.toString(),
-                  parentId: null,
-                  limit: MESSAGES_PER_PAGE,
-                  skip: 0
-                }
-              });
-              if (!existingData)
-                return;
-              const messageWithFiles = __spreadProps(__spreadValues({}, data2.sendMessage), {
-                files: data2.sendMessage.files || {
-                  __typename: "FilesInfo",
-                  data: uploadedFiles.map((file) => ({
-                    __typename: "FileInfo",
-                    id: file.id,
-                    url: file.url,
-                    name: file.name,
-                    extension: file.extension,
-                    mimeType: file.mimeType,
-                    height: file.height,
-                    width: file.width,
-                    size: file.size,
-                    refType: file.refType,
-                    ref: postId
-                  })),
-                  totalCount: uploadedFiles.length
+          const uploadedFiles = uploadResponse.data;
+          const fileIds = (_a4 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _a4 : null;
+          if ((fileIds == null ? void 0 : fileIds.length) > 0) {
+            await sendMsg({
+              variables: {
+                postId,
+                channelId,
+                content: currentMessageText || " ",
+                files: fileIds,
+                notificationParams: notificationData
+              },
+              optimisticResponse: {
+                __typename: "Mutation",
+                sendMessage: optimisticMessage
+              },
+              update: (cache, {
+                data: data2
+              }) => {
+                var _a5, _b4;
+                if (!(data2 == null ? void 0 : data2.sendMessage)) {
+                  setIsUploadingImage(false);
+                  setLoading(false);
+                  return;
                 }
-              });
-              cache.writeQuery({
-                query: MessagesDocument,
-                variables: {
-                  channelId: channelId == null ? void 0 : channelId.toString(),
-                  parentId: null,
-                  limit: MESSAGES_PER_PAGE,
-                  skip: 0
-                },
-                data: {
-                  messages: __spreadProps(__spreadValues({}, existingData.messages), {
-                    data: [messageWithFiles, ...existingData.messages.data],
-                    totalCount: (existingData.messages.totalCount || 0) + 1
-                  })
+                try {
+                  cache.writeQuery({
+                    query: MESSAGES_DOCUMENT,
+                    variables: {
+                      channelId: channelId == null ? void 0 : channelId.toString(),
+                      parentId: null,
+                      limit: MESSAGES_PER_PAGE,
+                      skip: 0
+                    },
+                    data: {
+                      messages: {
+                        __typename: "Messages",
+                        messagesRefId: channelId,
+                        data: [data2.sendMessage],
+                        totalCount: 1
+                      }
+                    }
+                  });
+                  const serverMessage = data2.sendMessage;
+                  const hasServerImage = (_b4 = (_a5 = serverMessage == null ? void 0 : serverMessage.files) == null ? void 0 : _a5.data) == null ? void 0 : _b4.some((file) => file.url);
+                  if (hasServerImage) {
+                    removeMessageFromUI(postId);
+                  }
+                  setIsUploadingImage(false);
+                  setLoading(false);
+                } catch (error2) {
+                  console.error("Cache update error:", error2);
+                  let errorMsg = "Failed to update message.";
+                  if (__DEV__ && error2) {
+                    errorMsg = error2.message ? error2.message.replace("[ApolloError: ", "").replace("]", "") : "Cache update failed";
+                  }
+                  setNotificationType("error");
+                  setErrorMessage(errorMsg);
+                  setIsUploadingImage(false);
+                  setLoading(false);
                 }
-              });
-              setSelectedImage("");
-              setImages([]);
-            } catch (error2) {
-              console.error("Error updating cache:", error2);
-            }
+              }
+            });
+          } else {
+            setIsUploadingImage(false);
+            setLoading(false);
           }
+        } catch (error2) {
+          console.error("Background process error:", error2);
+          let errorMsg = "Failed to send image. Please try again.";
+          if (__DEV__ && error2) {
+            errorMsg = error2.message ? error2.message.replace("[ApolloError: ", "").replace("]", "") : "Background process failed";
+          }
+          setNotificationType("error");
+          setErrorMessage(errorMsg);
+          removeMessageFromUI(postId);
+          setIsUploadingImage(false);
+          setLoading(false);
         }
-      });
-      setLoading(false);
-      setUploadingMessageId(null);
+      }, 0);
       return {
-        message: (_f = response.data) == null ? void 0 : _f.sendMessage
+        success: true
       };
     } catch (error2) {
-      setLoading(false);
-      setUploadingMessageId(null);
+      console.error("Send message error:", error2);
+      let errorMsg = "Failed to process image. Please try again.";
+      if (__DEV__ && error2) {
+        errorMsg = error2.message ? error2.message.replace("[ApolloError: ", "").replace("]", "") : "Image processing failed";
+      }
+      setNotificationType("error");
+      setErrorMessage(errorMsg);
       setError(String(error2));
+      setIsUploadingImage(false);
+      setLoading(false);
       return {
         error: String(error2)
       };
     }
-  }, [channelId, messageText, images, selectedImage, startUpload, sendMsg, auth]);
+  }, [channelId, messageText, images, selectedImage, startUpload, sendMsg, auth, removeMessageFromUI]);
   const createDirectChannelImpl = useCallback(async () => {
     var _a3, _b3, _c2, _d2, _e, _f, _g, _h;
     try {
       setLoading(true);
       if (!(rest == null ? void 0 : rest.isCreateNewChannel) || ((_a3 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _a3.type) !== ((_b3 = RoomType) == null ? void 0 : _b3.Direct) || !((_d2 = (_c2 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _c2.userIds) == null ? void 0 : _d2.length)) {
         setLoading(false);
+        setNotificationType("error");
+        setErrorMessage(__DEV__ ? "Invalid channel data" : "Unable to create conversation");
         return {
           error: "Invalid channel data"
         };
@@ -547,6 +671,8 @@ const ConversationViewComponent = (_a) => {
       });
       if (!((_h = (_g = response == null ? void 0 : response.data) == null ? void 0 : _g.createDirectChannel) == null ? void 0 : _h.id)) {
         setLoading(false);
+        setNotificationType("error");
+        setErrorMessage(__DEV__ ? "Failed to create channel" : "Unable to create conversation");
         return {
           error: "Failed to create channel"
         };
@@ -580,7 +706,7 @@ const ConversationViewComponent = (_a) => {
           email: (auth == null ? void 0 : auth.email) || "",
           username: (auth == null ? void 0 : auth.username) || "",
           alias: [],
-          tokens: []
+          tokens: (auth == null ? void 0 : auth.token) ? [...auth == null ? void 0 : auth.token] : []
         },
         isDelivered: true,
         isRead: false,
@@ -620,28 +746,34 @@ const ConversationViewComponent = (_a) => {
         update: (cache, {
           data: data2
         }) => {
-          if (data2 == null ? void 0 : data2.sendMessage) {
-            try {
-              cache.writeQuery({
-                query: MessagesDocument,
-                variables: {
-                  channelId: newChannelId,
-                  parentId: null,
-                  limit: MESSAGES_PER_PAGE,
-                  skip: 0
-                },
-                data: {
-                  messages: {
-                    __typename: "Messages",
-                    messagesRefId: newChannelId,
-                    data: [data2.sendMessage],
-                    totalCount: 1
-                  }
+          if (!(data2 == null ? void 0 : data2.sendMessage))
+            return;
+          try {
+            cache.writeQuery({
+              query: MESSAGES_DOCUMENT,
+              variables: {
+                channelId: newChannelId,
+                parentId: null,
+                limit: MESSAGES_PER_PAGE,
+                skip: 0
+              },
+              data: {
+                messages: {
+                  __typename: "Messages",
+                  messagesRefId: newChannelId,
+                  data: [data2.sendMessage],
+                  totalCount: 1
                 }
-              });
-            } catch (error2) {
-              console.error("Error updating cache:", error2);
+              }
+            });
+          } catch (error2) {
+            console.error("Error updating cache:", error2);
+            let errorMsg = "Failed to update message cache";
+            if (__DEV__ && error2) {
+              errorMsg = error2.message ? error2.message.replace("[ApolloError: ", "").replace("]", "") : "Cache update failed";
             }
+            setNotificationType("error");
+            setErrorMessage(errorMsg);
           }
         }
       });
@@ -651,6 +783,12 @@ const ConversationViewComponent = (_a) => {
       };
     } catch (error2) {
       setLoading(false);
+      let errorMsg = "Failed to create conversation";
+      if (__DEV__ && error2) {
+        errorMsg = error2.message ? error2.message.replace("[ApolloError: ", "").replace("]", "") : "Channel creation failed";
+      }
+      setNotificationType("error");
+      setErrorMessage(errorMsg);
       setError(String(error2));
       return {
         error: String(error2)
@@ -677,25 +815,27 @@ const ConversationViewComponent = (_a) => {
     return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
   };
   const messageList = useMemo(() => {
+    const pendingMessages = Object.values(pendingUploads);
     if (!channelMessages || channelMessages.length === 0) {
-      return [];
+      return pendingMessages;
     }
     const filteredMessages = uniqBy(channelMessages, ({
       id
     }) => id);
-    if (filteredMessages.length === 0) {
-      return [];
-    }
-    return orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg) => {
+    const serverMessages = orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg) => {
       var _a3, _b3, _c2, _d2, _e;
       const date = new Date(msg.createdAt);
-      let imageUrl = null;
+      if (pendingUploads[msg.id]) {
+        return null;
+      }
+      let imageUrls = [];
+      let primaryImageUrl = null;
       if (msg.files && typeof msg.files === "object") {
         const filesData = msg.files.data || (Array.isArray(msg.files) ? msg.files : null);
         if (filesData && filesData.length > 0) {
-          const fileData = filesData[0];
-          if (fileData && typeof fileData === "object" && fileData.url) {
-            imageUrl = fileData.url;
+          imageUrls = filesData.filter((fileData) => fileData && typeof fileData === "object" && fileData.url).map((fileData) => fileData.url);
+          if (imageUrls.length > 0) {
+            primaryImageUrl = imageUrls[0];
           }
         }
       }
@@ -708,7 +848,8 @@ const ConversationViewComponent = (_a) => {
           name: `${((_b3 = msg.author) == null ? void 0 : _b3.givenName) || ""} ${((_c2 = msg.author) == null ? void 0 : _c2.familyName) || ""}`,
           avatar: ((_d2 = msg.author) == null ? void 0 : _d2.picture) || ""
         },
-        image: imageUrl,
+        image: primaryImageUrl,
+        images: imageUrls,
         sent: msg == null ? void 0 : msg.isDelivered,
         received: msg == null ? void 0 : msg.isRead,
         type: msg == null ? void 0 : msg.type,
@@ -716,23 +857,74 @@ const ConversationViewComponent = (_a) => {
         replies: (_e = msg == null ? void 0 : msg.replies) != null ? _e : [],
         isShowThreadMessage
       };
-    });
-  }, [channelMessages, isShowThreadMessage]);
+    }).filter(Boolean);
+    return [...pendingMessages, ...serverMessages];
+  }, [channelMessages, pendingUploads, isShowThreadMessage]);
   const renderSend = useCallback((props) => {
     const hasContent = !!props.text || (images == null ? void 0 : images.length) > 0;
     const canSend = (channelId || (rest == null ? void 0 : rest.isCreateNewChannel)) && hasContent;
-    return /* @__PURE__ */ React__default.createElement(Send, __spreadProps(__spreadValues({}, props), { disabled: !canSend, containerStyle: {
-      justifyContent: "center",
-      alignItems: "center",
-      height: 40,
-      width: 44,
-      marginRight: 4,
-      marginBottom: 0,
-      marginLeft: 4
-    } }), /* @__PURE__ */ React__default.createElement(View, { style: {
-      padding: 4
-    } }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", size: 32, color: canSend ? colors.blue[500] : colors.gray[400] })));
-  }, [channelId, images, rest == null ? void 0 : rest.isCreateNewChannel]);
+    const isDisabled = !canSend;
+    return /* @__PURE__ */ React__default.createElement(
+      Send,
+      __spreadProps(__spreadValues({}, props), {
+        containerStyle: {
+          justifyContent: "center",
+          alignItems: "center",
+          height: 40,
+          width: 44,
+          marginRight: 4,
+          marginBottom: 0,
+          marginLeft: 4
+        }
+      }),
+      /* @__PURE__ */ React__default.createElement(View, { style: {
+        padding: 4
+      } }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", size: 32, color: isDisabled ? colors.gray[400] : colors.blue[500] }))
+    );
+  }, [channelId, images, rest == null ? void 0 : rest.isCreateNewChannel, isUploadingImage, loading, isActionSheetVisible]);
+  useCallback(() => {
+    console.log("Opening action sheet");
+    setActionSheetVisible(true);
+  }, []);
+  useEffect(() => {
+    console.log("Action sheet visibility:", isActionSheetVisible);
+    if (isActionSheetVisible) {
+      setBottomMargin(0);
+    }
+  }, [isActionSheetVisible]);
+  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]);
+  const [textUpdatedInActionSheet, setTextUpdatedInActionSheet] = useState(false);
+  useCallback(() => {
+    setTextUpdatedInActionSheet(true);
+    setActionSheetVisible(false);
+    setBottomMargin(0);
+  }, []);
+  useEffect(() => {
+    if (!isActionSheetVisible && textUpdatedInActionSheet) {
+      console.log("Action sheet closed with text:", messageText);
+      setTextUpdatedInActionSheet(false);
+      const currentText = messageText;
+      setMessageText("");
+      setTimeout(() => {
+        setMessageText(currentText);
+      }, 50);
+    }
+  }, [isActionSheetVisible, textUpdatedInActionSheet]);
+  useEffect(() => {
+    if (isActionSheetVisible && Platform.OS === "ios") {
+      console.log("Action sheet is visible, should show the input and options");
+    }
+  }, [isActionSheetVisible]);
   const handleSend = useCallback(async (messages) => {
     var _a3, _b3, _c2;
     const newMessageText = messages && messages.length > 0 ? ((_a3 = messages[0]) == null ? void 0 : _a3.text) || " " : " ";
@@ -747,15 +939,24 @@ const ConversationViewComponent = (_a) => {
     setMessageText(newMessageText);
     if ((rest == null ? void 0 : rest.isCreateNewChannel) && !channelId) {
       if (((_b3 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _b3.type) === ((_c2 = RoomType) == null ? void 0 : _c2.Direct)) {
-        createDirectChannelImpl();
+        await createDirectChannelImpl();
       }
+      setIsUploadingImage(false);
+      setLoading(false);
       return;
     }
     if (hasImages) {
-      sendMessageWithFileImpl();
+      await sendMessageWithFileImpl();
     } else {
-      sendMessageImpl();
+      await sendMessageImpl();
     }
+    setIsUploadingImage(false);
+    setLoading(false);
+    setTimeout(() => {
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+    }, 100);
   }, [channelId, images, rest == null ? void 0 : rest.isCreateNewChannel, (_d = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _d.type, createDirectChannelImpl, sendMessageWithFileImpl, sendMessageImpl]);
   const renderMessageText = useCallback((props) => {
     var _a3, _b3, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _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;
@@ -763,11 +964,14 @@ const ConversationViewComponent = (_a) => {
       currentMessage
     } = props;
     const lastReply = ((_b3 = (_a3 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _a3.data) == null ? void 0 : _b3.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 = (_f = (_e = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _e.contents) == null ? void 0 : _f.attachment;
       let action = "";
       let actionId = "";
-      let params = {};
+      let params2 = {};
       if ((_g = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _g.extraParams) {
         const extraParams = (_h = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _h.extraParams;
         const route = (_i = extraParams == null ? void 0 : extraParams.route) != null ? _i : null;
@@ -784,15 +988,15 @@ const ConversationViewComponent = (_a) => {
           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;
-        params = __spreadValues({}, param);
+        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();
-        params = {
+        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 && params && navigation.navigate(action, params) }, /* @__PURE__ */ React__default.createElement(ButtonText, { className: `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}] mt-2 rounded-full `, 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,
@@ -863,112 +1067,60 @@ const ConversationViewComponent = (_a) => {
       }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
     }
   }, [navigation, channelId, role]);
-  const renderActions = (props) => {
-    return /* @__PURE__ */ React__default.createElement(
-      Actions,
-      __spreadProps(__spreadValues({}, props), {
-        options: {
-          ["Choose from Library"]: onSelectImages,
-          ["Cancel"]: () => {
-          }
-        },
-        optionTintColor: "#000000",
-        cancelButtonIndex: 1,
-        icon: () => /* @__PURE__ */ React__default.createElement(Box, { style: {
-          width: 32,
-          height: 32,
-          alignItems: "center",
-          justifyContent: "center"
-        } }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "image", size: 24, color: colors.blue[500] })),
-        containerStyle: {
-          alignItems: "center",
-          justifyContent: "center",
-          marginLeft: 8,
-          marginBottom: 0
-        }
-      })
-    );
-  };
-  const renderAccessory = useCallback(() => {
-    var _a3;
-    if (!selectedImage) {
+  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, { 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]
-    } }, ((_a3 = images[0]) == null ? void 0 : _a3.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: () => {
-      setSelectedImage("");
-      setImages([]);
+    }, alt: `selected image ${index + 1}` }), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => {
+      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();
+        }
+      }
     }, 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]);
   const setImageViewerObject = (obj, v) => {
     setImageObject(obj);
     setImageViewer(v);
@@ -989,36 +1141,8 @@ const ConversationViewComponent = (_a) => {
     }, alt: "image" });
   }, [imageObject]);
   const renderMessage = useCallback((props) => {
-    const isUploading = props.currentMessage._id === uploadingMessageId && loading;
-    if (isUploading && props.currentMessage.image) {
-      return /* @__PURE__ */ React__default.createElement(View, { style: {
-        padding: 10,
-        marginBottom: 10,
-        marginRight: 10,
-        alignSelf: "flex-end",
-        borderRadius: 15,
-        backgroundColor: colors.gray[100],
-        maxWidth: "80%"
-      } }, props.currentMessage.text && props.currentMessage.text.trim() !== "" && /* @__PURE__ */ React__default.createElement(Box, { style: {
-        height: 15,
-        borderRadius: 4,
-        backgroundColor: colors.gray[200],
-        overflow: "hidden",
-        marginBottom: 8
-      } }, /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rounded", style: {
-        flex: 1
-      } })), /* @__PURE__ */ React__default.createElement(Box, { style: {
-        height: 150,
-        width: 150,
-        borderRadius: 10,
-        backgroundColor: colors.gray[200],
-        overflow: "hidden"
-      } }, /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rounded", style: {
-        flex: 1
-      } })));
-    }
     return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
-  }, [isShowImageViewer, uploadingMessageId, loading]);
+  }, [isShowImageViewer]);
   let onScroll = false;
   const onMomentumScrollBegin = async ({
     nativeEvent
@@ -1041,30 +1165,94 @@ const ConversationViewComponent = (_a) => {
       marginTop: 10
     } }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: "#3b82f6" })) : null;
   }, [loadingOldMessages]);
-  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"
-    } }));
-  }, []);
+  const [inputToolbarHeight, setInputToolbarHeight] = useState(30);
+  useCallback((props) => /* @__PURE__ */ React__default.createElement(View, { style: {
+    backgroundColor: "#fff",
+    paddingBottom: 4,
+    paddingTop: 4
+  } }, /* @__PURE__ */ React__default.createElement(View, { style: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 44,
+    maxHeight: 56,
+    backgroundColor: "#fff",
+    borderRadius: 22,
+    marginHorizontal: 8,
+    paddingHorizontal: 8,
+    borderTopWidth: 1,
+    borderTopColor: "#e0e0e0"
+  } }, /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: onSelectImages, style: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 8
+  } }, /* @__PURE__ */ React__default.createElement(MaterialIcons, { name: "add", size: 24, color: "#888" })), /* @__PURE__ */ React__default.createElement(TextInput, { ref: textInputRef, style: {
+    flex: 1,
+    maxHeight: 44,
+    backgroundColor: "transparent",
+    color: "#444",
+    paddingHorizontal: 8,
+    paddingVertical: 0,
+    alignSelf: "center",
+    textAlignVertical: "center"
+  }, placeholder: "Jot something down", placeholderTextColor: colors.gray[400], multiline: true, value: messageText, onChangeText: setMessageText }), /* @__PURE__ */ React__default.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => handleSend([{
+        text: messageText
+      }]),
+      disabled: false,
+      style: {
+        marginLeft: 8,
+        opacity: !messageText.trim() && images.length === 0 ? 0.5 : 1
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      MaterialCommunityIcons,
+      {
+        name: "send-circle",
+        size: 32,
+        color: !messageText.trim() && images.length === 0 ? colors.gray[400] : colors.blue[500]
+      }
+    )
+  )), images && images.length > 0 && /* @__PURE__ */ React__default.createElement(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: {
+    marginTop: 4,
+    marginLeft: 8
+  } }, images.map((img, index) => /* @__PURE__ */ React__default.createElement(View, { key: `image-preview-${index}`, style: {
+    width: 48,
+    height: 48,
+    marginRight: 8,
+    borderRadius: 6,
+    overflow: "hidden",
+    position: "relative",
+    backgroundColor: colors.gray[200]
+  } }, /* @__PURE__ */ React__default.createElement(Image, { source: {
+    uri: img.uri || img.url
+  }, style: {
+    width: "100%",
+    height: "100%"
+  }, alt: `selected image ${index + 1}` }), /* @__PURE__ */ React__default.createElement(TouchableOpacity, { onPress: () => {
+    handleRemoveImage(index);
+  }, style: {
+    position: "absolute",
+    top: 2,
+    right: 2,
+    backgroundColor: "rgba(0,0,0,0.6)",
+    borderRadius: 10,
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center"
+  } }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "close", size: 14, color: "white" })))))), [onSelectImages, messageText, images, isUploadingImage, loading, handleSend, handleRemoveImage]);
   const imageViewerModal = useMemo(() => /* @__PURE__ */ React__default.createElement(ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent }), [isShowImageViewer, modalContent]);
-  const subscriptionHandler = useMemo(() => /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { channelId: channelId == null ? void 0 : channelId.toString(), subscribeToNewMessages: () => subscribeToMore({
-    document: OnChatMessageAddedDocument,
-    variables: {
-      channelId: channelId == null ? void 0 : channelId.toString()
-    }
-  }) }), [channelId, subscribeToMore, auth == null ? void 0 : auth.id]);
   const renderChatFooter = useCallback(() => {
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, imageViewerModal, subscriptionHandler);
-  }, [imageViewerModal, subscriptionHandler]);
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, imageViewerModal, /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { subscribeToMore: subscribe, document: CHAT_MESSAGE_ADDED, variables: {
+      channelId: channelId == null ? void 0 : channelId.toString()
+    }, updateQuery: void 0 }));
+  }, [imageViewerModal, subscribe]);
   const listViewProps = useMemo(() => ({
     onEndReached,
     onEndReachedThreshold: 0.5,
@@ -1086,98 +1274,57 @@ const ConversationViewComponent = (_a) => {
       }
     }
   }, []);
-  return /* @__PURE__ */ React__default.createElement(View, { style: {
+  return /* @__PURE__ */ React__default.createElement(KeyboardAvoidingView, { style: {
+    flex: 1,
+    justifyContent: "flex-end"
+  }, behavior: Platform.OS === "ios" ? "padding" : "height", keyboardVerticalOffset: Platform.OS === "ios" ? 64 : 0 }, /* @__PURE__ */ React__default.createElement(View, { style: {
     flex: 1,
     backgroundColor: "white",
-    position: "relative"
-  } }, messageLoading && /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }), selectedImage ? renderAccessory() : null, /* @__PURE__ */ React__default.createElement(
-    GiftedChat,
+    position: "relative",
+    marginBottom: images.length > 0 ? 5 : bottomMargin
+  } }, errorMessage ? /* @__PURE__ */ React__default.createElement(ErrorNotification, { message: errorMessage, onClose: () => setErrorMessage(""), type: notificationType }) : null, messageLoading && /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }), /* @__PURE__ */ React__default.createElement(
+    GiftedChatInboxComponent,
     {
       ref: messageRootListRef,
+      errorMessage,
+      images,
+      onSelectImages,
+      onRemoveImage: handleRemoveImage,
+      selectedImage,
+      setSelectedImage,
+      isUploadingImage,
+      loading,
       wrapInSafeArea: true,
       renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }),
       messages: messageList,
+      renderAvatar: null,
+      showUserAvatar: false,
       listViewProps: __spreadProps(__spreadValues({}, listViewProps), {
         contentContainerStyle: {
-          paddingBottom: selectedImage ? 90 : 0
+          paddingBottom: inputToolbarHeight
         }
       }),
       onSend: handleSend,
       text: messageText || " ",
-      onInputTextChanged: (text) => setMessageText(text),
-      renderFooter: () => loading && !images.length ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : null,
+      onInputTextChanged: (text) => {
+        setMessageText(text);
+      },
+      renderFooter: () => isUploadingImage ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : null,
       scrollToBottom: true,
       user: {
         _id: (auth == null ? void 0 : auth.id) || ""
       },
-      isTyping: false,
-      alwaysShowSend: true,
       renderSend,
       renderMessageText,
-      renderInputToolbar,
-      minInputToolbarHeight: 50,
-      renderActions: channelId && renderActions,
       renderMessage,
       renderChatFooter,
       renderLoadEarlier,
       loadEarlier: totalCount > channelMessages.length,
       isLoadingEarlier: loadingOldMessages,
-      bottomOffset: Platform.OS === "ios" ? selectedImage ? 90 : 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,
-      isKeyboardInternallyHandled: true,
-      placeholder: "Type a message...",
-      lightboxProps: {
-        underlayColor: "transparent",
-        springConfig: {
-          tension: 9e4,
-          friction: 9e4
-        },
-        disabled: true
-      },
-      infiniteScroll: false
-    }
-  ));
-};
-const SubscriptionHandler = ({
-  subscribeToNewMessages,
-  channelId
-}) => {
-  const channelIdRef = useRef(channelId);
-  useEffect(() => {
-    if (!channelId) {
-      return;
+      placeholder: "Jot something down",
+      infiniteScroll: true
     }
-    const unsubscribe = subscribeToNewMessages();
-    channelIdRef.current = channelId;
-    return () => {
-      if (unsubscribe && typeof unsubscribe === "function") {
-        unsubscribe();
-      }
-    };
-  }, [channelId, subscribeToNewMessages]);
-  return null;
+  )));
 };
 const ConversationView = React__default.memo(ConversationViewComponent, (prevProps, nextProps) => {
   return prevProps.channelId === nextProps.channelId && prevProps.role === nextProps.role && prevProps.isShowThreadMessage === nextProps.isShowThreadMessage;