@messenger-box/platform-mobile 10.0.3-alpha.5 → 10.0.3-alpha.54

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

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {Spinner,Box,HStack,Image,Button,ButtonText,Avatar,AvatarFallbackText,AvatarImage,Text}from'@admin-layout/gluestack-ui-mobile';import {Platform,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 {encode}from'base-64';import {Ionicons,MaterialCommunityIcons}from'@expo/vector-icons';import {GiftedChat,Actions,MessageText,Send}from'react-native-gifted-chat';import {RoomType,PreDefinedRole}from'common';import {useAddDirectChannelMutation,useSendMessagesMutation,useSendExpoNotificationOnPostMutation,useMessagesQuery,OnChatMessageAddedDocument}from'common/lib/generated/generated.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';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,9 +46,59 @@ 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: ChannelId,
+    channelId: initialChannelId,
     role,
     isShowThreadMessage
   } = _b, rest = __objRest(_b, [
@@ -56,371 +106,887 @@ const ConversationViewComponent = (_a) => {
     "role",
     "isShowThreadMessage"
   ]);
-  var _a2;
-  const [channelToTop, setChannelToTop] = useState(0);
-  const [channelMessages, setChannelMessages] = useState([]);
-  const auth = useSelector(userSelector);
-  const [totalCount, setTotalCount] = useState(0);
-  const [selectedImage, setImage] = useState("");
-  const currentRoute = navigationRef.isReady() ? (_a2 = navigationRef) == null ? void 0 : _a2.getCurrentRoute() : null;
-  const [channelId, setChannelId] = useState((rest == null ? void 0 : rest.isCreateNewChannel) ? null : ChannelId);
+  var _a2, _b2, _c, _d;
+  const {
+    params
+  } = useRoute();
+  const [channelId, setChannelId] = useState(initialChannelId || null);
+  const [messageText, setMessageText] = useState("");
+  const [loading, setLoading] = useState(false);
   const [loadingOldMessages, setLoadingOldMessages] = useState(false);
-  const navigation = useNavigation();
-  const [files, setFiles] = useState([]);
+  const [error, setError] = useState(null);
+  const [selectedImage, setSelectedImage] = useState("");
   const [images, setImages] = useState([]);
-  const [msg, setMsg] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
-  const [imageLoading, setImageLoading] = useState(false);
-  const [expoTokens, setExpoTokens] = useState([]);
   const [isShowImageViewer, setImageViewer] = useState(false);
   const [imageObject, setImageObject] = useState({});
-  const [skip, setSkip] = useState(0);
+  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, shallowEqual);
+  const currentRoute = navigationRef.isReady() ? (_a2 = navigationRef) == null ? void 0 : _a2.getCurrentRoute() : null;
+  const navigation = useNavigation();
   const isFocused = useIsFocused();
-  const [addDirectChannel, {
-    loading: addDirectChannaleLoading
-  }] = 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
+    },
+    subscriptionDocument: CHAT_MESSAGE_ADDED,
+    subscriptionVariables: {
+      channelId: channelId == null ? void 0 : channelId.toString()
     },
-    skip: !channelId,
-    fetchPolicy: "cache-and-network",
-    nextFetchPolicy: "cache-first",
-    refetchWritePolicy: "merge"
+    updateQuery: void 0,
+    onError: (err) => setError(String(err))
   });
-  React__default.useEffect(() => {
+  const channelMessages = useMemo(() => {
+    var _a3;
+    return ((_a3 = data == null ? void 0 : data.messages) == null ? void 0 : _a3.data) || [];
+  }, [(_b2 = data == null ? void 0 : data.messages) == null ? void 0 : _b2.data]);
+  const totalCount = useMemo(() => {
+    var _a3;
+    return ((_a3 = data == null ? void 0 : data.messages) == null ? void 0 : _a3.totalCount) || 0;
+  }, [(_c = data == null ? void 0 : data.messages) == null ? void 0 : _c.totalCount]);
+  useEffect(() => {
     return () => {
-      setChannelMessages([]);
+      isMounted.current = false;
     };
   }, []);
+  useEffect(() => {
+    var _a3;
+    const currentChannelId = initialChannelId || ((_a3 = currentRoute == null ? void 0 : currentRoute.params) == null ? void 0 : _a3.channelId);
+    if (currentChannelId) {
+      setChannelId(currentChannelId);
+    }
+  }, [initialChannelId, currentRoute]);
   useFocusEffect(React__default.useCallback(() => {
-    setSkip(0);
     if (channelId) {
-      refetch({
+      refetch();
+    }
+  }, [isFocused, refetch]));
+  const fetchMoreMessagesImpl = useCallback(async () => {
+    var _a3, _b3;
+    try {
+      setLoadingOldMessages(true);
+      const response = await refetch({
         channelId: channelId == null ? void 0 : channelId.toString(),
         parentId: null,
         limit: MESSAGES_PER_PAGE,
-        skip: 0
-      }).then(({
-        data: data2
-      }) => {
-        if (!(data2 == null ? void 0 : data2.messages)) {
-          return;
-        }
-        const {
-          data: messages,
-          totalCount: totalCount2
-        } = data2.messages;
-        setTotalCount(totalCount2);
-        setChannelMessages(messages);
+        skip: channelMessages.length
       });
-    }
-    return () => {
-      setChannelId(null);
-      setTotalCount(0);
-      setSkip(0);
-    };
-  }, [channelId, isFocused]));
-  React__default.useEffect(() => {
-    var _a3;
-    const currentChannelId = ChannelId || ((_a3 = currentRoute == null ? void 0 : currentRoute.params) == null ? void 0 : _a3.channelId);
-    setChannelId(currentChannelId);
-  }, [ChannelId, currentRoute]);
-  React__default.useEffect(() => {
-    if (selectedImage)
-      setImageLoading(false);
-  }, [selectedImage]);
-  useEffect(() => {
-    var _a3;
-    if ((_a3 = data == null ? void 0 : data.messages) == null ? void 0 : _a3.data) {
-      const {
-        data: messages,
-        totalCount: messeageTotalCount
-      } = data.messages;
-      console.log("messeageTotalCount", messeageTotalCount, " totalCount=", totalCount);
-      if (messages && messages.length > 0 && messeageTotalCount > totalCount || messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0)) {
-        setChannelMessages((oldMessages) => uniqBy([...messages, ...oldMessages], ({
-          id
-        }) => id));
-        setTotalCount(messeageTotalCount);
+      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 {
+          error: "No messages returned"
+        };
       }
-      if (loadingOldMessages && channelMessages)
-        setLoadingOldMessages(false);
+      return {
+        messages: response.data.messages.data
+      };
+    } catch (error2) {
+      setLoadingOldMessages(false);
+      setError(String(error2));
+      return {
+        error: String(error2)
+      };
     }
-  }, [data, loadingOldMessages, channelMessages, totalCount]);
-  const onFetchOld = useCallback(async () => {
-    if (totalCount > channelMessages.length && !loadingOldMessages) {
-      setLoadEarlierMsg(true);
-      try {
-        const response = await fetchMoreMessages({
-          variables: {
-            channelId: channelId == null ? void 0 : channelId.toString(),
-            parentId: null,
-            skip: channelMessages.length
+  }, [channelId, channelMessages.length, refetch]);
+  const sendMessageImpl = useCallback(async () => {
+    var _a3, _b3, _c2, _d2, _e, _f, _g, _h;
+    try {
+      const currentMessageText = messageText;
+      setMessageText("");
+      const notificationData = {
+        url: config.INBOX_MESSEGE_PATH,
+        params: {
+          channelId,
+          hideTabBar: true
+        },
+        screen: "DialogMessages",
+        other: {
+          sound: Platform.OS === "android" ? void 0 : "default"
+        }
+      };
+      const messageId = objectId();
+      const optimisticMessage = {
+        __typename: "Post",
+        id: messageId,
+        message: currentMessageText,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        author: {
+          __typename: "UserAccount",
+          id: auth == null ? void 0 : auth.id,
+          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,
+        isRead: false,
+        type: "TEXT",
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: channelId
+        },
+        propsConfiguration: {
+          __typename: "MachineConfiguration",
+          id: null,
+          resource: "",
+          contents: null,
+          keys: null,
+          target: null,
+          overrides: null
+        },
+        props: {},
+        files: {
+          __typename: "FilesInfo",
+          data: [],
+          totalCount: 0
+        },
+        replies: {
+          __typename: "Messages",
+          data: [],
+          totalCount: 0
+        }
+      };
+      const response = await sendMsg({
+        variables: {
+          channelId,
+          content: currentMessageText,
+          notificationParams: notificationData
+        },
+        optimisticResponse: {
+          __typename: "Mutation",
+          sendMessage: optimisticMessage
+        },
+        update: (cache, {
+          data: data2
+        }) => {
+          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
+                }
+              }
+            });
+          } 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: (_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)
+      };
+    }
+  }, [channelId, messageText, sendMsg, auth]);
+  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 (response == null ? void 0 : response.data) {
-          setSkip(channelMessages.length);
-          setLoadEarlierMsg(false);
-          setLoadingOldMessages(true);
+        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);
         }
-      } catch (error) {
-        setLoadEarlierMsg(false);
+      } else {
+        setLoading(false);
       }
+    } catch (error2) {
+      setLoading(false);
     }
-  }, [totalCount, channelMessages]);
-  const isCloseToTop = ({
-    layoutMeasurement,
-    contentOffset,
-    contentSize
-  }) => {
-    const paddingToTop = 60;
-    return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
   };
-  const dataURLtoFile = (dataurl, filename) => {
-    var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = encode(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n);
+  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);
     }
-    return new File([u8arr], filename, {
-      type: mime
+  }, [images]);
+  useToast();
+  const removeMessageFromUI = useCallback((messageId) => {
+    setPendingUploads((prev) => {
+      const newPending = __spreadValues({}, prev);
+      delete newPending[messageId];
+      return newPending;
     });
-  };
-  const onSelectImages = async () => {
-    var _a3;
-    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," + ((_a3 = imageSource == null ? void 0 : imageSource.assets[0]) == null ? void 0 : _a3.base64);
-      setImage(image);
-      const file = dataURLtoFile(image, "inputImage.jpg");
-      setFiles((files2) => files2.concat(file));
-      setImages((images2) => images2.concat(imageSource == null ? void 0 : imageSource.assets[0]));
-    }
-    if (imageSource.canceled)
+    setIsUploadingImage(false);
+  }, []);
+  const sendMessageWithFileImpl = useCallback(async () => {
+    var _a3, _b3, _c2, _d2, _e, _f, _g;
+    try {
+      const postId = objectId();
+      setIsUploadingImage(true);
       setLoading(false);
-  };
-  const createDirectChannel = useCallback((msg2) => {
-    var _a3, _b2, _c, _d, _e, _f, _g, _h;
-    if ((rest == null ? void 0 : rest.isCreateNewChannel) && ((_a3 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _a3.type) === ((_b2 = RoomType) == null ? void 0 : _b2.Direct) && ((_d = (_c = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _c.userIds) == null ? void 0 : _d.length) > 0) {
-      (_h = (_g = addDirectChannel({
-        variables: {
-          receiver: [...(_f = (_e = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _e.userIds) != null ? _f : []],
-          displayName: "DIRECT CHANNEL"
+      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: {
+          channelId,
+          hideTabBar: true
+        },
+        screen: "DialogMessages",
+        other: {
+          sound: Platform.OS === "android" ? void 0 : "default"
         }
-      })) == null ? void 0 : _g.then(async (res) => {
-        var _a4, _b3, _c2, _d2, _e2, _f2, _g2, _h2;
-        if ((_b3 = (_a4 = res == null ? void 0 : res.data) == null ? void 0 : _a4.createDirectChannel) == null ? void 0 : _b3.id) {
-          setChannelId((_d2 = (_c2 = res == null ? void 0 : res.data) == null ? void 0 : _c2.createDirectChannel) == null ? void 0 : _d2.id);
-          const notificationData = {
-            url: config.INBOX_MESSEGE_PATH,
-            params: {
-              channelId: (_f2 = (_e2 = res == null ? void 0 : res.data) == null ? void 0 : _e2.createDirectChannel) == null ? void 0 : _f2.id,
-              hideTabBar: true
-            },
-            screen: "DialogMessages",
-            other: {
-              sound: Platform.OS === "android" ? void 0 : "default"
-            }
-          };
-          setLoading(true);
-          await sendMsg({
-            variables: {
-              channelId: (_h2 = (_g2 = res == null ? void 0 : res.data) == null ? void 0 : _g2.createDirectChannel) == null ? void 0 : _h2.id,
-              content: msg2,
-              notificationParams: notificationData
+      };
+      const optimisticMessage = {
+        __typename: "Post",
+        id: postId,
+        message: currentMessageText || " ",
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        author: {
+          __typename: "UserAccount",
+          id: auth == null ? void 0 : auth.id,
+          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,
+        isRead: false,
+        type: "TEXT",
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: channelId
+        },
+        propsConfiguration: {
+          __typename: "MachineConfiguration",
+          id: null,
+          resource: "",
+          contents: null,
+          keys: null,
+          target: null,
+          overrides: null
+        },
+        props: {},
+        files: {
+          __typename: "FilesInfo",
+          data: imageUris.map((uri, index) => ({
+            __typename: "FileInfo",
+            id: `temp-file-${index}-${postId}`,
+            url: uri,
+            name: `image-${index}.jpg`,
+            extension: "jpg",
+            mimeType: "image/jpeg",
+            size: 0,
+            height: 300,
+            width: 300,
+            channel: null,
+            post: null,
+            refType: FileRefType.Post
+          })),
+          totalCount: imageUris.length
+        },
+        replies: {
+          __typename: "Messages",
+          data: [],
+          totalCount: 0
+        }
+      };
+      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
+              }
             },
-            update: (cache, {
-              data: data2,
-              errors
-            }) => {
-              if (!data2 || errors) {
-                setLoading(false);
-                return;
+            createUploadLink: {
+              variables: {
+                postId
               }
-              setChannelToTop(channelToTop + 1);
-              setLoading(false);
-              setMsg("");
             }
           });
+          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;
+          }
+          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;
+                }
+                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);
+                }
+              }
+            });
+          } 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);
         }
-      })) == null ? void 0 : _h.catch((e) => console.log("error", JSON.stringify(e)));
-    }
-  }, [rest]);
-  const handleSend = useCallback(async (message) => {
-    var _a3;
-    if (!channelId)
-      return;
-    if (!message && message != " " && images.length == 0)
-      return;
-    const notificationData = {
-      url: config.INBOX_MESSEGE_PATH,
-      params: {
-        channelId,
-        hideTabBar: true
-      },
-      screen: "DialogMessages",
-      other: {
-        sound: Platform.OS === "android" ? void 0 : "default"
+      }, 0);
+      return {
+        success: true
+      };
+    } catch (error2) {
+      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";
       }
-    };
-    if (images && images.length > 0) {
-      const postId = objectId();
+      setNotificationType("error");
+      setErrorMessage(errorMsg);
+      setError(String(error2));
+      setIsUploadingImage(false);
+      setLoading(false);
+      return {
+        error: String(error2)
+      };
+    }
+  }, [channelId, messageText, images, selectedImage, startUpload, sendMsg, auth, removeMessageFromUI]);
+  const createDirectChannelImpl = useCallback(async () => {
+    var _a3, _b3, _c2, _d2, _e, _f, _g, _h;
+    try {
       setLoading(true);
-      const uploadResponse = await startUpload({
-        file: images,
-        saveUploadedFile: {
-          variables: {
-            postId
-          }
-        },
-        createUploadLink: {
-          variables: {
-            postId
-          }
+      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"
+        };
+      }
+      const currentMessageText = messageText;
+      setMessageText("");
+      const response = await addDirectChannel({
+        variables: {
+          receiver: [...(_f = (_e = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _e.userIds) != null ? _f : []],
+          displayName: "DIRECT CHANNEL"
         }
       });
-      if (uploadResponse == null ? void 0 : uploadResponse.error)
+      if (!((_h = (_g = response == null ? void 0 : response.data) == null ? void 0 : _g.createDirectChannel) == null ? void 0 : _h.id)) {
         setLoading(false);
-      const uploadedFiles = uploadResponse.data;
-      if (uploadResponse.data) {
-        setImage("");
-        setFiles([]);
-        setImages([]);
-        const files2 = (_a3 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _a3 : null;
-        await sendMsg({
-          variables: {
-            postId,
-            channelId,
-            content: message,
-            files: files2,
-            notificationParams: notificationData
-          },
-          update: (cache, {
-            data: data2,
-            errors
-          }) => {
-            if (!data2 || errors) {
-              setLoading(false);
-              return;
-            }
-            const newMessage = data2 == null ? void 0 : data2.sendMessage;
-            setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-              id
-            }) => id));
-            setTotalCount((t) => t + 1);
-            setChannelToTop(channelToTop + 1);
-            setLoading(false);
-            setMsg("");
-          }
-        });
+        setNotificationType("error");
+        setErrorMessage(__DEV__ ? "Failed to create channel" : "Unable to create conversation");
+        return {
+          error: "Failed to create channel"
+        };
       }
-    } else {
-      setLoading(true);
+      const newChannelId = response.data.createDirectChannel.id;
+      setChannelId(newChannelId);
+      const notificationData = {
+        url: config.INBOX_MESSEGE_PATH,
+        params: {
+          channelId: newChannelId,
+          hideTabBar: true
+        },
+        screen: "DialogMessages",
+        other: {
+          sound: Platform.OS === "android" ? void 0 : "default"
+        }
+      };
+      const messageId = objectId();
+      const optimisticMessage = {
+        __typename: "Post",
+        id: messageId,
+        message: currentMessageText,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        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: [],
+          tokens: (auth == null ? void 0 : auth.token) ? [...auth == null ? void 0 : auth.token] : []
+        },
+        isDelivered: true,
+        isRead: false,
+        type: "TEXT",
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: newChannelId
+        },
+        propsConfiguration: {
+          __typename: "MachineConfiguration",
+          id: null,
+          resource: "",
+          contents: null,
+          keys: null,
+          target: null,
+          overrides: null
+        },
+        props: {},
+        files: {
+          __typename: "FilesInfo",
+          data: [],
+          totalCount: 0
+        },
+        replies: {
+          __typename: "Messages",
+          data: [],
+          totalCount: 0
+        }
+      };
       await sendMsg({
         variables: {
-          channelId,
-          content: message,
+          channelId: newChannelId,
+          content: currentMessageText,
           notificationParams: notificationData
         },
+        optimisticResponse: {
+          __typename: "Mutation",
+          sendMessage: optimisticMessage
+        },
         update: (cache, {
-          data: data2,
-          errors
+          data: data2
         }) => {
-          if (!data2 || errors) {
-            setLoading(false);
+          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);
+            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);
           }
-          const newMessage = data2 == null ? void 0 : data2.sendMessage;
-          setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-            id
-          }) => id));
-          setTotalCount((t) => t + 1);
-          setChannelToTop(channelToTop + 1);
-          setLoading(false);
-          setMsg("");
         }
       });
+      setLoading(false);
+      return {
+        channelId: newChannelId
+      };
+    } 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)
+      };
     }
-  }, [setChannelMessages, channelId, images, channelToTop, expoTokens]);
+  }, [rest, messageText, addDirectChannel, sendMsg, auth]);
+  const onFetchOld = useCallback(() => {
+    if (fetchOldDebounceRef.current)
+      return;
+    if (totalCount > channelMessages.length && !loadingOldMessages) {
+      fetchOldDebounceRef.current = true;
+      fetchMoreMessagesImpl();
+      setTimeout(() => {
+        fetchOldDebounceRef.current = false;
+      }, 1e3);
+    }
+  }, [totalCount, channelMessages.length, loadingOldMessages, fetchMoreMessagesImpl]);
+  const isCloseToTop = ({
+    layoutMeasurement,
+    contentOffset,
+    contentSize
+  }) => {
+    const paddingToTop = 60;
+    return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
+  };
   const messageList = useMemo(() => {
-    let res = [];
-    const filteredMessages = channelMessages && (channelMessages == null ? void 0 : channelMessages.length) > 0 ? uniqBy([...channelMessages], ({
+    const pendingMessages = Object.values(pendingUploads);
+    if (!channelMessages || channelMessages.length === 0) {
+      return pendingMessages;
+    }
+    const filteredMessages = uniqBy(channelMessages, ({
       id
-    }) => id) : [];
-    if (channelId && (filteredMessages == null ? void 0 : filteredMessages.length) > 0) {
-      orderBy(channelMessages, ["createdAt"], ["desc"]).map((msg2) => {
-        var _a3, _b2, _c, _d;
-        let message = {
-          _id: "",
-          text: "",
-          createdAt: 0,
-          user: {
-            _id: "",
-            name: "",
-            avatar: ""
-          },
-          type: ""
-        };
-        const date = new Date(msg2.createdAt);
-        message._id = msg2.id;
-        message.text = msg2.message;
-        message.createdAt = date;
-        message.user = {
-          _id: msg2.author.id,
-          name: msg2.author.givenName + " " + msg2.author.familyName,
-          avatar: (_a3 = msg2.author) == null ? void 0 : _a3.picture
-        }, message.image = (_c = (_b2 = msg2.files) == null ? void 0 : _b2.data[0]) == null ? void 0 : _c.url, message.sent = msg2 == null ? void 0 : msg2.isDelivered, message.received = msg2 == null ? void 0 : msg2.isRead;
-        message.type = msg2 == null ? void 0 : msg2.type;
-        message.propsConfiguration = msg2 == null ? void 0 : msg2.propsConfiguration;
-        message.replies = (_d = msg2 == null ? void 0 : msg2.replies) != null ? _d : [];
-        message.isShowThreadMessage = isShowThreadMessage;
-        res.push(message);
-      });
+    }) => id);
+    const serverMessages = orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg) => {
+      var _a3, _b3, _c2, _d2, _e;
+      const date = new Date(msg.createdAt);
+      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) {
+          imageUrls = filesData.filter((fileData) => fileData && typeof fileData === "object" && fileData.url).map((fileData) => fileData.url);
+          if (imageUrls.length > 0) {
+            primaryImageUrl = imageUrls[0];
+          }
+        }
+      }
+      return {
+        _id: msg.id,
+        text: msg.message,
+        createdAt: date,
+        user: {
+          _id: ((_a3 = msg.author) == null ? void 0 : _a3.id) || "",
+          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: primaryImageUrl,
+        images: imageUrls,
+        sent: msg == null ? void 0 : msg.isDelivered,
+        received: msg == null ? void 0 : msg.isRead,
+        type: msg == null ? void 0 : msg.type,
+        propsConfiguration: msg == null ? void 0 : msg.propsConfiguration,
+        replies: (_e = msg == null ? void 0 : msg.replies) != null ? _e : [],
+        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;
+    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);
     }
-    return (res == null ? void 0 : res.length) > 0 ? uniqBy([...res], ({
-      _id
-    }) => _id) : [];
-  }, [channelMessages, channelId]);
-  const renderSend = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Send, __spreadProps(__spreadValues({}, props), { disabled: channelId || (rest == null ? void 0 : rest.isCreateNewChannel) ? false : true }), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", style: {
-      marginBottom: 5,
-      marginRight: 5
-    }, size: 32, color: channelId || (rest == null ? void 0 : rest.isCreateNewChannel) ? "#2e64e5" : "#b8b2b2" })));
-  };
-  const renderMessageText = (props) => {
-    var _a3, _b2, _c, _d, _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;
+  }, [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) || " " : " ";
+    if (!channelId && !(rest == null ? void 0 : rest.isCreateNewChannel)) {
+      return;
+    }
+    const hasText = !!newMessageText && newMessageText !== " ";
+    const hasImages = images && images.length > 0;
+    if (!hasText && !hasImages) {
+      return;
+    }
+    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)) {
+        await createDirectChannelImpl();
+      }
+      setIsUploadingImage(false);
+      setLoading(false);
+      return;
+    }
+    if (hasImages) {
+      await sendMessageWithFileImpl();
+    } else {
+      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;
     const {
       currentMessage
     } = props;
-    const lastReply = ((_b2 = (_a3 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _a3.data) == null ? void 0 : _b2.length) > 0 ? (_d = (_c = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _c.data) == null ? void 0 : _d[0] : null;
+    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;
@@ -437,30 +1003,24 @@ 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, { 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 && params && navigation.navigate(action, params)
-        },
-        /* @__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(MessageText, __spreadProps(__spreadValues({}, props), { containerStyle: {
+        left: {
+          paddingLeft: 0,
+          marginLeft: 0
+        }
+      }, textStyle: {
         left: {
-          marginLeft: 5,
-          color: CALL_TO_ACTION_TEXT_COLOR,
-          paddingHorizontal: 2
+          marginLeft: 0
         }
-      } }))) : /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#c0c0c0", style: {
+      } })), /* @__PURE__ */ React__default.createElement(Button, { variant: "outline", size: "sm", className: `border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}] my-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(TouchableHighlight, { underlayColor: "#c0c0c0", style: {
         width: "100%"
       }, onPress: () => {
         if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage)
@@ -474,23 +1034,23 @@ const ConversationViewComponent = (_a) => {
         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", px: "$1", alignItems: "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 _a4, _b3;
-        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b3 = v == null ? void 0 : v.author) == null ? void 0 : _b3.id);
+      } })), ((_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 _a4, _b4;
+        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b4 = v == null ? void 0 : v.author) == null ? void 0 : _b4.id);
       }) === i)) == null ? void 0 : _H.slice(0, 2)) == null ? void 0 : _I.reverse()) == null ? void 0 : _J.map((p, i) => {
-        var _a4, _b3, _c2;
-        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversations-view-key-" + i, bg: "transparent", size: "sm" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b3 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b3.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
+        var _a4, _b4, _c3;
+        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversations-view-key-" + i, size: "sm", className: "bg-transparent" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b4 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b4.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
           borderRadius: 6,
           borderWidth: 2,
           borderColor: "#fff"
         }, source: {
-          uri: (_c2 = p == null ? void 0 : p.author) == null ? void 0 : _c2.picture
+          uri: (_c3 = p == null ? void 0 : p.author) == null ? void 0 : _c3.picture
         } }));
       })), /* @__PURE__ */ React__default.createElement(Text, { style: {
         fontSize: 12
-      }, fontWeight: "$bold", color: "$blue800" }, (_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: {
+      }, 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
-      }, fontWeight: "$bold", color: "$trueGray500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : "")))));
+      }, 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%"
@@ -506,72 +1066,97 @@ const ConversationViewComponent = (_a) => {
         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", px: "$1", alignItems: "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 _a4, _b3;
-        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b3 = v == null ? void 0 : v.author) == null ? void 0 : _b3.id);
+      } })), ((_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 _a4, _b4;
+        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b4 = v == null ? void 0 : v.author) == null ? void 0 : _b4.id);
       }) === i)) == null ? void 0 : _Q.slice(0, 2)) == null ? void 0 : _R.reverse()) == null ? void 0 : _S.map((p, i) => {
-        var _a4, _b3, _c2;
-        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversation-replies-key-" + i, bg: "transparent", size: "sm" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b3 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b3.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
+        var _a4, _b4, _c3;
+        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversation-replies-key-" + i, className: "bg-transparent", size: "sm" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b4 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b4.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
           borderRadius: 6,
           borderWidth: 2,
           borderColor: "#fff"
         }, source: {
-          uri: (_c2 = p == null ? void 0 : p.author) == null ? void 0 : _c2.picture
+          uri: (_c3 = p == null ? void 0 : p.author) == null ? void 0 : _c3.picture
         } }));
       })), /* @__PURE__ */ React__default.createElement(Text, { style: {
         fontSize: 12
-      }, fontWeight: "$bold", color: "$blue800" }, (_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: {
+      }, 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
-      }, fontWeight: "$bold", color: "$trueGray500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
+      }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
     }
-  };
-  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, channelId, role]);
+  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, { source: {
+      uri: img.uri || img.url
+    }, style: {
+      width: "100%",
+      height: "100%"
+    }, 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();
         }
-      },
-      /* @__PURE__ */ React__default.createElement(ButtonText, { color: "$black" }, "Cancel")
-    )) : null);
-  };
+      }
+    }, 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]);
   const setImageViewerObject = (obj, v) => {
     setImageObject(obj);
     setImageViewer(v);
   };
   const modalContent = React__default.useMemo(() => {
-    if (!imageObject)
-      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+    if (!imageObject || !imageObject.image)
+      return 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"
-      }
-    );
+    return /* @__PURE__ */ React__default.createElement(CachedImage, { style: {
+      width: "100%",
+      height: "100%"
+    }, resizeMode: "cover", cacheKey: `${_id}-modal-imageKey`, source: {
+      uri: image,
+      expiresIn: 86400
+    }, alt: "image" });
   }, [imageObject]);
   const renderMessage = useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
@@ -581,92 +1166,184 @@ const ConversationViewComponent = (_a) => {
     nativeEvent
   }) => {
     onScroll = true;
-    console.log("scroll top");
-    if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages == null ? void 0 : channelMessages.length)) {
-      await onFetchOld();
+    if (isCloseToTop(nativeEvent)) {
+      onFetchOld();
     }
   };
   const onEndReached = () => {
-    console.log("on end reached");
     if (!onScroll)
       return;
     onScroll = false;
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, loadEarlierMsg && /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }), /* @__PURE__ */ React__default.createElement(
-    GiftedChat,
+  const renderLoadEarlier = useCallback(() => {
+    return loadingOldMessages ? /* @__PURE__ */ React__default.createElement(View, { style: {
+      padding: 10,
+      backgroundColor: "rgba(255,255,255,0.8)",
+      borderRadius: 10,
+      marginTop: 10
+    } }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: "#3b82f6" })) : null;
+  }, [loadingOldMessages]);
+  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 renderChatFooter = useCallback(() => {
+    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,
+    onMomentumScrollBegin,
+    removeClippedSubviews: true,
+    initialNumToRender: 10,
+    maxToRenderPerBatch: 7,
+    windowSize: 7,
+    updateCellsBatchingPeriod: 50,
+    keyExtractor: (item) => item._id
+  }), [onEndReached, onMomentumScrollBegin]);
+  useCallback((message, prefix = "Message") => {
+    var _a3, _b3, _c2, _d2, _e, _f, _g, _h, _i;
+    if (__DEV__) {
+      console.log(`${prefix} ID: ${message == null ? void 0 : message.id}, Has files object: ${!!(message == null ? void 0 : message.files)}, Files typename: ${(_a3 = message == null ? void 0 : message.files) == null ? void 0 : _a3.__typename}, Files data exists: ${!!((_b3 = message == null ? void 0 : message.files) == null ? void 0 : _b3.data)}, Files count: ${((_d2 = (_c2 = message == null ? void 0 : message.files) == null ? void 0 : _c2.data) == null ? void 0 : _d2.length) || 0}`);
+      if (((_e = message == null ? void 0 : message.files) == null ? void 0 : _e.data) && ((_g = (_f = message == null ? void 0 : message.files) == null ? void 0 : _f.data) == null ? void 0 : _g.length) > 0) {
+        const file = (_h = message == null ? void 0 : message.files) == null ? void 0 : _h.data[0];
+        console.log(`File[0] ID: ${file == null ? void 0 : file.id}, URL: ${(_i = file == null ? void 0 : file.url) == null ? void 0 : _i.substring(0, 30)}..., Name: ${file == null ? void 0 : file.name}, Type: ${file == null ? void 0 : file.mimeType}`);
+      }
+    }
+  }, []);
+  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",
+    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,
-      wrapInSafeArea: false,
-      renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }),
+      errorMessage,
+      images,
+      onSelectImages,
+      onRemoveImage: handleRemoveImage,
+      selectedImage,
+      setSelectedImage,
+      isUploadingImage,
+      loading,
+      wrapInSafeArea: true,
+      renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }),
       messages: messageList,
-      listViewProps: {
-        onEndReached,
-        onEndReachedThreshold: 0.5,
-        onMomentumScrollBegin
-      },
-      onSend: (messages) => {
-        var _a3, _b2, _c, _d, _e, _f;
-        return (rest == null ? void 0 : rest.isCreateNewChannel) && !channelId ? ((_a3 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _a3.type) === ((_b2 = RoomType) == null ? void 0 : _b2.Direct) ? createDirectChannel((_d = (_c = messages[0]) == null ? void 0 : _c.text) != null ? _d : " ") : null : channelId && handleSend((_f = (_e = messages[0]) == null ? void 0 : _e.text) != null ? _f : " ");
+      renderAvatar: null,
+      showUserAvatar: false,
+      listViewProps: __spreadProps(__spreadValues({}, listViewProps), {
+        contentContainerStyle: {
+          paddingBottom: inputToolbarHeight
+        }
+      }),
+      onSend: handleSend,
+      text: messageText || " ",
+      onInputTextChanged: (text) => {
+        setMessageText(text);
       },
-      text: msg ? msg : " ",
-      onInputTextChanged: (text) => setMsg(text),
-      renderFooter: () => loading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }) : imageLoading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }) : "",
+      renderFooter: () => isUploadingImage ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : null,
       scrollToBottom: true,
       user: {
         _id: (auth == null ? void 0 : auth.id) || ""
       },
-      isTyping: true,
-      alwaysShowSend: loading ? false : true,
       renderSend,
       renderMessageText,
-      minInputToolbarHeight: 50,
-      renderActions: channelId && 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: channelId == null ? void 0 : channelId.toString(), subscribeToNewMessages: () => subscribeToMore({
-        document: OnChatMessageAddedDocument,
-        variables: {
-          channelId: channelId == null ? void 0 : channelId.toString()
-        },
-        updateQuery: (prev, {
-          subscriptionData
-        }) => {
-          var _a3, _b2, _c, _d, _e;
-          if (!subscriptionData.data)
-            return prev;
-          setSkip(0);
-          const newMessage = (_a3 = subscriptionData == null ? void 0 : subscriptionData.data) == null ? void 0 : _a3.chatMessageAdded;
-          ((_b2 = prev == null ? void 0 : prev.messages) == null ? void 0 : _b2.data) ? [...prev.messages.data, newMessage] : [];
-          const totalMsgCount = ((_c = prev == null ? void 0 : prev.messages) == null ? void 0 : _c.totalCount) + 1;
-          setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-            id
-          }) => id));
-          setTotalCount(totalMsgCount);
-          const merged = __spreadProps(__spreadValues({}, prev), {
-            messages: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.messages), {
-              data: [...(_e = (_d = prev == null ? void 0 : prev.messages) == null ? void 0 : _d.data) != null ? _e : [], newMessage],
-              totalCount: totalMsgCount
-            })
-          });
-          return merged;
-        }
-      }) })),
-      lightboxProps: {
-        underlayColor: "transparent",
-        springConfig: {
-          tension: 9e4,
-          friction: 9e4
-        },
-        disabled: true
-      }
+      renderChatFooter,
+      renderLoadEarlier,
+      loadEarlier: totalCount > channelMessages.length,
+      isLoadingEarlier: loadingOldMessages,
+      placeholder: "Jot something down",
+      infiniteScroll: true
     }
-  ));
-};
-const SubscriptionHandler = ({
-  subscribeToNewMessages,
-  channelId
-}) => {
-  useEffect(() => subscribeToNewMessages(), [channelId]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  )));
 };
-const ConversationView = React__default.memo(ConversationViewComponent);export{ConversationView};//# sourceMappingURL=ConversationView.js.map
+const ConversationView = React__default.memo(ConversationViewComponent, (prevProps, nextProps) => {
+  return prevProps.channelId === nextProps.channelId && prevProps.role === nextProps.role && prevProps.isShowThreadMessage === nextProps.isShowThreadMessage;
+});export{ConversationView};//# sourceMappingURL=ConversationView.js.map