@messenger-box/platform-mobile 10.0.3-alpha.20 → 10.0.3-alpha.201

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

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useCallback,useEffect,useMemo}from'react';import {Box,Button,ButtonText,HStack,Avatar,AvatarFallbackText,AvatarImage,Text,Image,Spinner}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'base-64';import {MaterialCommunityIcons,Ionicons}from'@expo/vector-icons';import {Send,MessageText,InputToolbar,GiftedChat,Actions as Actions$1}from'react-native-gifted-chat';import {RoomType,PreDefinedRole}from'common';import {useAddDirectChannelMutation,useSendMessagesMutation,useSendExpoNotificationOnPostMutation,useMessagesQuery,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 {Actions,BaseState,MainState}from'./workflow/conversation-xstate.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,VStack,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 {PostTypeEnum,FileRefType,RoomType,PreDefinedRole}from'common';import {useAddDirectChannel,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';import PaymentMessage from'../components/SlackMessageContainer/PaymentMessage.js';import {useSendMessagesMutation}from'common/graphql';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -37,390 +37,167 @@ const {
   CALL_TO_ACTION_TEXT_COLOR
 } = config;
 const createdAtText = (value) => {
-  if (!value)
-    return "";
+  if (!value) return "";
   let date = new Date(value);
-  if (isToday(date))
-    return "Today";
-  if (isYesterday(date))
-    return "Yesterday";
+  if (isToday(date)) return "Today";
+  if (isYesterday(date)) return "Yesterday";
   return format(new Date(value), "MMM dd, yyyy");
 };
-function useSafeMachine(machine) {
-  const [state, setState] = useState({
-    context: {
-      channelId: null,
-      channelMessages: [],
-      totalCount: 0,
-      skip: 0,
-      loading: false,
-      loadingOldMessages: false,
-      error: null,
-      selectedImage: "",
-      files: [],
-      images: [],
-      messageText: "",
-      imageLoading: false
-    },
-    value: "idle"
-  });
-  const send = useCallback((event) => {
-    try {
-      console.log("Event received:", event.type);
-      if (event.type === Actions.INITIAL_CONTEXT) {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              channelId: ((_a = event.data) == null ? void 0 : _a.channelId) || null
-            }),
-            value: BaseState.FetchMessages
-          });
-        });
-      } else if (event.type === Actions.SET_CHANNEL_MESSAGES) {
-        setState((prev) => {
-          var _a, _b;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              channelMessages: ((_a = event.data) == null ? void 0 : _a.messages) || [],
-              totalCount: ((_b = event.data) == null ? void 0 : _b.totalCount) || 0,
-              loading: false,
-              loadingOldMessages: false
-            }),
-            value: "active"
-          });
-        });
-      } else if (event.type === Actions.CLEAR_MESSAGES) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            channelMessages: [],
-            totalCount: 0
-          })
-        }));
-      } else if (event.type === Actions.SET_MESSAGE_TEXT) {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              messageText: ((_a = event.data) == null ? void 0 : _a.messageText) || ""
-            })
-          });
-        });
-      } else if (event.type === Actions.FETCH_MORE_MESSAGES) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loadingOldMessages: true
-          }),
-          value: MainState.FetchMoreMessages
-        }));
-      } else if (event.type === Actions.SET_IMAGE) {
-        setState((prev) => {
-          var _a, _b;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              selectedImage: ((_a = event.data) == null ? void 0 : _a.image) || "",
-              images: ((_b = event.data) == null ? void 0 : _b.images) || [],
-              imageLoading: false
-            })
-          });
-        });
-      } else if (event.type === Actions.CLEAR_IMAGE) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            selectedImage: "",
-            images: []
-          })
-        }));
-      } else if (event.type === Actions.START_LOADING) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: true
-          })
-        }));
-      } else if (event.type === Actions.STOP_LOADING) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: false
-          })
-        }));
-      } else if (event.type === Actions.SEND_MESSAGE) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: true
-          }),
-          value: MainState.SendMessage
-        }));
-      } else if (event.type === Actions.SEND_MESSAGE_WITH_FILE) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: true
-          }),
-          value: MainState.SendMessageWithFile
-        }));
-      } else if (event.type === Actions.CREATE_DIRECT_CHANNEL) {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: true
-          }),
-          value: MainState.CreateDirectChannel
-        }));
-      } else if (event.type === "SEND_MESSAGE_SUCCESS" || event.type === "SEND_MESSAGE_WITH_FILE_SUCCESS") {
-        setState((prev) => __spreadProps(__spreadValues({}, prev), {
-          context: __spreadProps(__spreadValues({}, prev.context), {
-            loading: false,
-            messageText: "",
-            images: [],
-            selectedImage: ""
-          }),
-          value: "active"
-        }));
-      } else if (event.type === "CREATE_DIRECT_CHANNEL_SUCCESS") {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              loading: false,
-              channelId: ((_a = event.data) == null ? void 0 : _a.channelId) || prev.context.channelId,
-              messageText: ""
-            }),
-            value: BaseState.FetchMessages
-          });
-        });
-      } else if (event.type === "FETCH_MORE_MESSAGES_SUCCESS") {
-        setState((prev) => {
-          var _a;
-          const newMessages = ((_a = event.data) == null ? void 0 : _a.messages) || [];
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              loadingOldMessages: false,
-              channelMessages: uniqBy([...prev.context.channelMessages, ...newMessages], ({
-                id
-              }) => id)
-            }),
-            value: "active"
-          });
-        });
-      } else if (event.type === "ERROR") {
-        setState((prev) => {
-          var _a;
-          return __spreadProps(__spreadValues({}, prev), {
-            context: __spreadProps(__spreadValues({}, prev.context), {
-              loading: false,
-              loadingOldMessages: false,
-              error: ((_a = event.data) == null ? void 0 : _a.message) || "Unknown error"
-            }),
-            value: "error"
-          });
-        });
-      }
-    } catch (error) {
-      console.error("Error in send function:", error);
-    }
+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);
   }, []);
-  const stateWithMatches = useMemo(() => {
-    return __spreadProps(__spreadValues({}, state), {
-      matches: (checkState) => {
-        return state.value === checkState;
-      }
-    });
-  }, [state]);
-  return [stateWithMatches, send];
-}
+  return /* @__PURE__ */ React__default.createElement(Animated.View, { style: {
+    position: "absolute",
+    top: 10,
+    left: 10,
+    right: 10,
+    backgroundColor: 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
+    isShowThreadMessage,
+    isPaymentChatUI
   } = _b, rest = __objRest(_b, [
     "channelId",
     "role",
-    "isShowThreadMessage"
+    "isShowThreadMessage",
+    "isPaymentChatUI"
   ]);
-  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
-  const [channelToTop, setChannelToTop] = useState(0);
-  const isMountedRef = useRef(true);
-  const [state, send] = useSafeMachine();
-  useCallback(() => {
-    try {
-      return (state == null ? void 0 : state.context) || {};
-    } catch (error) {
-      console.error("Error accessing state.context:", error);
-      return {};
-    }
-  }, [state]);
-  const safeContextProperty = useCallback((property, defaultValue = null) => {
-    var _a3, _b3;
-    try {
-      return (_b3 = (_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3[property]) != null ? _b3 : defaultValue;
-    } catch (error) {
-      console.error(`Error accessing state.context.${property}:`, error);
-      return defaultValue;
-    }
-  }, [state]);
-  useCallback((stateValue) => {
-    var _a3;
-    try {
-      return ((_a3 = state == null ? void 0 : state.matches) == null ? void 0 : _a3.call(state, stateValue)) || false;
-    } catch (error) {
-      console.error(`Error calling state.matches with ${stateValue}:`, error);
-      return false;
-    }
-  }, [state]);
-  const safeSend = useCallback((event) => {
-    try {
-      send(event);
-    } catch (error) {
-      console.error("Error sending event to state machine:", error, event);
-    }
-  }, [send]);
-  useEffect(() => {
-    if (ChannelId) {
-      console.log("Setting initial channel ID on mount:", ChannelId);
-      try {
-        send({
-          type: Actions.INITIAL_CONTEXT,
-          data: {
-            channelId: ChannelId
-          }
-        });
-      } catch (error) {
-        console.error("Error sending initial context:", error);
-      }
-    }
-  }, []);
-  const stateRef = useRef(state);
-  useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
-  const safeGetContext = useCallback(() => {
-    if (stateRef.current && stateRef.current.context) {
-      return stateRef.current.context;
-    }
-    return {
-      channelId: null,
-      channelMessages: [],
-      totalCount: 0,
-      skip: 0,
-      loading: false,
-      loadingOldMessages: false,
-      error: null,
-      selectedImage: "",
-      files: [],
-      images: [],
-      messageText: "",
-      imageLoading: false
-    };
-  }, []);
-  useEffect(() => {
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-  const auth = useSelector(userSelector);
-  const currentRoute = navigationRef.isReady() ? (_a2 = navigationRef) == null ? void 0 : _a2.getCurrentRoute() : null;
-  const navigation = useNavigation();
-  const [selectedImage, setImage] = useState("");
+  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 [error, setError] = useState(null);
+  const [selectedImage, setSelectedImage] = useState("");
+  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, 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 [sendExpoNotification] = useSendExpoNotification();
+  const [skip, setSkip] = useState(0);
   const {
     data,
     loading: messageLoading,
     refetch,
-    fetchMore: fetchMoreMessages,
-    subscribeToMore
-  } = useMessagesQuery({
-    variables: {
-      channelId: (_b2 = state.context.channelId) == null ? void 0 : _b2.toString(),
+    subscribe
+  } = useInboxMessages({
+    useQueryHook: useChannelMessagesQuery,
+    queryVariables: {
+      channelId: channelId == null ? void 0 : channelId.toString(),
       parentId: null,
       limit: MESSAGES_PER_PAGE,
-      skip: state.context.skip
+      skip,
+      // Use skip state for pagination
+      orgName: params == null ? void 0 : params.orgName
     },
-    skip: !state.context.channelId,
-    fetchPolicy: "cache-and-network",
-    nextFetchPolicy: "cache-first",
-    refetchWritePolicy: "merge",
-    onCompleted: (queryData) => {
-      var _a3;
-      console.log("MESSAGE QUERY COMPLETED:", queryData);
-      if ((_a3 = queryData == null ? void 0 : queryData.messages) == null ? void 0 : _a3.data) {
-        console.log("Raw message data from query:", JSON.stringify(queryData.messages.data).substring(0, 100) + "...");
-        console.log("Message count from query:", queryData.messages.data.length);
-        console.log("Total count from query:", queryData.messages.totalCount);
-      }
+    subscriptionDocument: CHAT_MESSAGE_ADDED,
+    subscriptionVariables: {
+      channelId: channelId == null ? void 0 : channelId.toString()
     },
-    onError: (error) => {
-      console.error("MESSAGE QUERY ERROR:", error);
-    }
+    updateQuery: void 0,
+    // Provide custom updateQuery if needed
+    onError: (err) => setError(String(err))
   });
-  const fetchMessagesDirectly = useCallback(async () => {
+  const channelMessages = useMemo(() => {
     var _a3;
-    const channelId = safeGetContext().channelId;
-    if (!channelId) {
-      console.warn("Cannot fetch messages: No channel ID");
-      return;
+    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 () => {
+      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(() => {
+    if (channelId) {
+      refetch();
+    }
+  }, [isFocused, refetch]));
+  const fetchMoreMessagesImpl = useCallback(async () => {
+    var _a3, _b3;
     try {
-      console.log("\u{1F4AB} FETCHING messages for channel:", channelId);
-      send({
-        type: Actions.START_LOADING
-      });
+      setLoadingOldMessages(true);
       const response = await refetch({
-        channelId: channelId.toString(),
+        channelId: channelId == null ? void 0 : channelId.toString(),
         parentId: null,
         limit: MESSAGES_PER_PAGE,
-        skip: 0
-      });
-      if ((_a3 = response == null ? void 0 : response.data) == null ? void 0 : _a3.messages) {
-        const {
-          data: messages,
-          totalCount
-        } = response.data.messages;
-        if (messages && messages.length > 0) {
-          safeSend({
-            type: Actions.SET_CHANNEL_MESSAGES,
-            data: {
-              messages,
-              totalCount
-            }
-          });
-        } else {
-          console.warn("No messages found for channel", channelId);
-          send({
-            type: Actions.STOP_LOADING
-          });
-        }
-      } else {
-        console.warn("Query returned no messages data");
-        send({
-          type: Actions.STOP_LOADING
-        });
-      }
-    } catch (error) {
-      console.error("ERROR fetching messages:", error);
-      send({
-        type: Actions.STOP_LOADING
-      });
-    }
-  }, [safeGetContext, refetch, safeSend]);
-  const fetchMoreMessagesImpl = useCallback(async () => {
-    var _a3, _b3, _c2;
-    try {
-      const response = await fetchMoreMessages({
-        variables: {
-          channelId: (_a3 = state.context.channelId) == null ? void 0 : _a3.toString(),
-          parentId: null,
-          skip: state.context.channelMessages.length
-        }
+        skip: channelMessages.length
       });
-      if (!((_c2 = (_b3 = response == null ? void 0 : response.data) == null ? void 0 : _b3.messages) == null ? void 0 : _c2.data)) {
+      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"
         };
@@ -428,19 +205,23 @@ const ConversationViewComponent = (_a) => {
       return {
         messages: response.data.messages.data
       };
-    } catch (error) {
+    } catch (error2) {
+      setLoadingOldMessages(false);
+      setError(String(error2));
       return {
-        error: String(error)
+        error: String(error2)
       };
     }
-  }, [state.context.channelId, state.context.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("");
       const notificationData = {
         url: config.INBOX_MESSEGE_PATH,
         params: {
-          channelId: state.context.channelId,
+          channelId,
           hideTabBar: true
         },
         screen: "DialogMessages",
@@ -448,97 +229,239 @@ const ConversationViewComponent = (_a) => {
           sound: Platform.OS === "android" ? void 0 : "default"
         }
       };
+      const messageId = objectId();
+      const optimisticMessage = {
+        __typename: "Post",
+        id: messageId,
+        message: currentMessageText,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedAt: (/* @__PURE__ */ 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: PostTypeEnum.Simple,
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: channelId
+        },
+        // Required fields that Apollo expects in the cache
+        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: state.context.channelId,
-          content: state.context.messageText,
+          channelId,
+          content: currentMessageText,
           notificationParams: notificationData
+        },
+        optimisticResponse: {
+          __typename: "Mutation",
+          sendMessage: optimisticMessage
+        },
+        // Let the type policies handle the cache update automatically
+        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
+                  // Just send the count for this single message
+                }
+              }
+            });
+          } 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 (error) {
+    } 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(error)
+        error: String(error2)
       };
     }
-  }, [state.context.channelId, state.context.messageText, sendMsg]);
+  }, [channelId, messageText, sendMsg, auth]);
   const onSelectImages = async () => {
-    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
-    safeSend({
-      type: Actions.START_LOADING
-    });
+    setLoading(true);
     try {
-      console.log("Starting image picker...");
       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
+        // Enable multiple selection
       });
       if (!(imageSource == null ? void 0 : imageSource.canceled)) {
-        console.log("Image selected. Asset details:", JSON.stringify({
-          uri: ((_c2 = (_b3 = (_a3 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _a3[0]) == null ? void 0 : _b3.uri) == null ? void 0 : _c2.substring(0, 30)) + "...",
-          width: (_e2 = (_d2 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _d2[0]) == null ? void 0 : _e2.width,
-          height: (_g2 = (_f2 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _f2[0]) == null ? void 0 : _g2.height,
-          hasBase64: !!((_i2 = (_h2 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _h2[0]) == null ? void 0 : _i2.base64),
-          hasUri: !!((_k2 = (_j2 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _j2[0]) == null ? void 0 : _k2.uri)
-        }));
-        const selectedAsset = (_l2 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _l2[0];
-        if (!selectedAsset) {
-          console.error("No asset found in selected image");
-          safeSend({
-            type: Actions.STOP_LOADING
-          });
+        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"
-        });
-        console.log("Prepared image asset for upload:", {
-          hasUrl: !!asset.url,
-          hasFileName: !!asset.fileName,
-          hasMimeType: !!asset.mimeType,
-          previewAvailable: !!previewImage
-        });
-        safeSend({
-          type: Actions.SET_IMAGE,
-          data: {
-            image: previewImage,
-            images: [asset]
-          }
+        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;
         });
-        console.log("Image state updated successfully");
+        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 {
-        console.log("Image selection cancelled");
-        safeSend({
-          type: Actions.STOP_LOADING
-        });
+        setLoading(false);
       }
-    } catch (error) {
-      console.error("Error selecting image:", error);
-      safeSend({
-        type: Actions.STOP_LOADING
-      });
+    } catch (error2) {
+      setLoading(false);
     }
   };
+  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, _e2, _f2;
+    var _a3, _b3, _c2, _d2, _e, _f, _g;
     try {
-      console.log("Executing sendMessageWithFileImpl");
       const postId = objectId();
-      console.log("Generated postId for file upload:", 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: /* @__PURE__ */ 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],
+        // First image for compatibility with GiftedChat
+        images: imageUris,
+        // All images for our custom renderer
+        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: state.context.channelId,
+          channelId,
           hideTabBar: true
         },
         screen: "DialogMessages",
@@ -546,123 +469,234 @@ const ConversationViewComponent = (_a) => {
           sound: Platform.OS === "android" ? void 0 : "default"
         }
       };
-      if (!state.context.images || state.context.images.length === 0) {
-        console.error("No images found in state");
-        return {
-          error: "No images available to upload"
-        };
-      }
-      const imagesToUpload = state.context.images.map((img) => {
-        return __spreadProps(__spreadValues({}, img), {
-          uri: img.uri || img.url,
-          type: "image/jpeg",
-          name: img.fileName || `image_${Date.now()}.jpg`
-        });
-      });
-      console.log("Formatted images for upload:", imagesToUpload.map((img) => {
-        var _a4;
-        return {
-          hasUri: !!img.uri,
-          hasUrl: !!img.url,
-          hasName: !!img.name,
-          hasType: !!img.type,
-          hasFileName: !!img.fileName,
-          uri: ((_a4 = img.uri) == null ? void 0 : _a4.substring(0, 30)) + "..."
-        };
-      }));
-      console.log("Starting file upload...");
-      const uploadResponse = await startUpload({
-        file: imagesToUpload,
-        saveUploadedFile: {
-          variables: {
-            postId
-          }
+      const optimisticMessage = {
+        __typename: "Post",
+        id: postId,
+        message: currentMessageText || " ",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedAt: (/* @__PURE__ */ 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: []
         },
-        createUploadLink: {
-          variables: {
-            postId
-          }
+        isDelivered: true,
+        isRead: false,
+        type: PostTypeEnum.Simple,
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: channelId
+        },
+        // Required fields that Apollo expects in the cache
+        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
         }
-      });
-      console.log("Upload response received:", (uploadResponse == null ? void 0 : uploadResponse.data) ? "Has data" : "No data", "Error:", (uploadResponse == null ? void 0 : uploadResponse.error) ? uploadResponse.error : "None");
-      if (uploadResponse == null ? void 0 : uploadResponse.error) {
-        console.error("Upload error:", uploadResponse.error);
-        return {
-          error: String(uploadResponse.error)
-        };
-      }
-      const uploadedFiles = uploadResponse.data;
-      console.log("Uploaded files:", uploadedFiles ? JSON.stringify(uploadedFiles.map((f) => {
+      };
+      setTimeout(async () => {
         var _a4;
-        return {
-          id: f.id,
-          url: ((_a4 = f.url) == null ? void 0 : _a4.substring(0, 30)) + "..."
-        };
-      })) : "null");
-      const files = (_a3 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _a3 : null;
-      console.log("Files uploaded successfully. File IDs:", files);
-      console.log("Sending message with files:", {
-        postId,
-        channelId: state.context.channelId,
-        content: state.context.messageText || " ",
-        hasFiles: !!files,
-        fileCount: (files == null ? void 0 : files.length) || 0
-      });
-      const response = await sendMsg({
-        variables: {
-          postId,
-          channelId: state.context.channelId,
-          content: state.context.messageText || " ",
-          files,
-          notificationParams: notificationData
-        }
-      });
-      if ((_b3 = response == null ? void 0 : response.data) == null ? void 0 : _b3.sendMessage) {
-        console.log("Message with file sent successfully:", response.data.sendMessage.id);
-        if ((_c2 = response.data.sendMessage.files) == null ? void 0 : _c2.data) {
-          console.log("\u{1F4F7} Message response file data:", JSON.stringify({
-            fileCount: response.data.sendMessage.files.data.length,
-            fileUrl: ((_e2 = (_d2 = response.data.sendMessage.files.data[0]) == null ? void 0 : _d2.url) == null ? void 0 : _e2.substring(0, 30)) + "..."
+        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`
           }));
-        }
-        setTimeout(() => {
-          safeSend({
-            type: Actions.CLEAR_IMAGE
+          const uploadResponse = await startUpload({
+            file: imagesToUpload,
+            saveUploadedFile: {
+              variables: {
+                postId
+              }
+            },
+            createUploadLink: {
+              variables: {
+                postId
+              }
+            }
           });
-        }, 100);
-      } else {
-        console.error("Failed to send message with file:", response == null ? void 0 : response.errors);
-      }
+          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
+                        // Just one message
+                      }
+                    }
+                  });
+                  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);
+        }
+      }, 0);
       return {
-        message: (_f2 = response.data) == null ? void 0 : _f2.sendMessage
+        success: true
       };
-    } catch (error) {
-      console.error("Error in sendMessageWithFileImpl:", error);
+    } 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";
+      }
+      setNotificationType("error");
+      setErrorMessage(errorMsg);
+      setError(String(error2));
+      setIsUploadingImage(false);
+      setLoading(false);
       return {
-        error: String(error)
+        error: String(error2)
       };
     }
-  }, [state.context.channelId, state.context.messageText, state.context.images, startUpload, sendMsg, safeSend]);
+  }, [channelId, messageText, images, selectedImage, startUpload, sendMsg, auth, removeMessageFromUI]);
   const createDirectChannelImpl = useCallback(async () => {
-    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2;
+    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"
         };
       }
+      const currentMessageText = messageText;
+      setMessageText("");
       const response = await addDirectChannel({
         variables: {
-          receiver: [...(_f2 = (_e2 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _e2.userIds) != null ? _f2 : []],
+          receiver: [...(_f = (_e = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _e.userIds) != null ? _f : []],
           displayName: "DIRECT CHANNEL"
         }
       });
-      if (!((_h2 = (_g2 = response == null ? void 0 : response.data) == null ? void 0 : _g2.createDirectChannel) == null ? void 0 : _h2.id)) {
+      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"
         };
       }
       const newChannelId = response.data.createDirectChannel.id;
+      setChannelId(newChannelId);
       const notificationData = {
         url: config.INBOX_MESSEGE_PATH,
         params: {
@@ -674,121 +708,126 @@ const ConversationViewComponent = (_a) => {
           sound: Platform.OS === "android" ? void 0 : "default"
         }
       };
+      const messageId = objectId();
+      const optimisticMessage = {
+        __typename: "Post",
+        id: messageId,
+        message: currentMessageText,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedAt: (/* @__PURE__ */ 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: PostTypeEnum.Simple,
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: newChannelId
+        },
+        // Required fields that Apollo expects in the cache
+        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: newChannelId,
-          content: state.context.messageText,
+          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: 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);
+          }
         }
       });
+      setLoading(false);
       return {
         channelId: newChannelId
       };
-    } catch (error) {
+    } 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(error)
+        error: String(error2)
       };
     }
-  }, [rest, state.context.messageText, addDirectChannel, sendMsg]);
-  useEffect(() => {
-  }, [state.value, sendMsg, refetch, fetchMoreMessages, addDirectChannel, startUpload, rest, state.context]);
-  React__default.useEffect(() => {
-    return () => {
-      send({
-        type: Actions.CLEAR_MESSAGES
-      });
-    };
-  }, []);
-  useFocusEffect(React__default.useCallback(() => {
-    if (state.context.channelId) {
-      send({
-        type: Actions.INITIAL_CONTEXT,
-        data: {
-          channelId: state.context.channelId
-        }
-      });
-    }
-    return () => {
-      send({
-        type: Actions.CLEAR_MESSAGES
-      });
-    };
-  }, [state.context.channelId, isFocused]));
-  React__default.useEffect(() => {
-    var _a3;
-    const currentChannelId = ChannelId || ((_a3 = currentRoute == null ? void 0 : currentRoute.params) == null ? void 0 : _a3.channelId);
-    if (currentChannelId) {
-      console.log("Setting initial channel ID:", currentChannelId);
-      send({
-        type: Actions.INITIAL_CONTEXT,
-        data: {
-          channelId: currentChannelId
-        }
-      });
-    }
-  }, [ChannelId, currentRoute]);
-  React__default.useEffect(() => {
-    if (state.context.selectedImage) {
-      send({
-        type: Actions.STOP_LOADING
-      });
-    }
-  }, [state.context.selectedImage]);
-  useEffect(() => {
-    var _a3, _b3, _c2, _d2;
-    if ((_a3 = data == null ? void 0 : data.messages) == null ? void 0 : _a3.data) {
-      console.log("\u{1F4E9} QUERY DATA CHANGED - Messages received:", data.messages.data.length);
-      const {
-        data: messages,
-        totalCount: messageTotalCount
-      } = data.messages;
-      if (messages && messages.length > 0) {
-        console.log("\u{1F4E9} QUERY DATA - Setting channel messages, count:", messages.length);
-        send({
-          type: Actions.SET_CHANNEL_MESSAGES,
-          data: {
-            messages: uniqBy([...messages, ...state.context.channelMessages], ({
-              id
-            }) => id),
-            totalCount: messageTotalCount
-          }
-        });
-        if (messages[0]) {
-          const sample = messages[0];
-          console.log("\u{1F4E9} SAMPLE MESSAGE:", JSON.stringify({
-            id: sample.id,
-            message: sample.message,
-            author: {
-              id: (_b3 = sample.author) == null ? void 0 : _b3.id,
-              name: `${(_c2 = sample.author) == null ? void 0 : _c2.givenName} ${(_d2 = sample.author) == null ? void 0 : _d2.familyName}`
-            },
-            createdAt: sample.createdAt
-          }));
-        }
-        setTimeout(() => {
-          var _a4;
-          if (((_a4 = state.context.channelMessages) == null ? void 0 : _a4.length) === 0) {
-            console.warn("\u26A0\uFE0F STATE NOT UPDATED after message data received - may need fallback");
-          }
-        }, 500);
-      }
-    }
-  }, [data]);
+  }, [rest, messageText, addDirectChannel, sendMsg, auth]);
   const onFetchOld = useCallback(() => {
-    var _a3, _b3, _c2, _d2;
-    if (fetchOldDebounceRef.current)
-      return;
-    if (((_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3.totalCount) > ((_c2 = (_b3 = state == null ? void 0 : state.context) == null ? void 0 : _b3.channelMessages) == null ? void 0 : _c2.length) && !((_d2 = state == null ? void 0 : state.context) == null ? void 0 : _d2.loadingOldMessages)) {
+    if (fetchOldDebounceRef.current) return;
+    if (totalCount > channelMessages.length && !loadingOldMessages) {
       fetchOldDebounceRef.current = true;
-      send({
-        type: Actions.FETCH_MORE_MESSAGES
-      });
+      fetchMoreMessagesImpl();
       setTimeout(() => {
         fetchOldDebounceRef.current = false;
       }, 1e3);
     }
-  }, [(_c = state == null ? void 0 : state.context) == null ? void 0 : _c.totalCount, (_d = state == null ? void 0 : state.context) == null ? void 0 : _d.channelMessages, (_e = state == null ? void 0 : state.context) == null ? void 0 : _e.loadingOldMessages]);
-  const fetchOldDebounceRef = useRef(false);
+  }, [totalCount, channelMessages.length, loadingOldMessages, fetchMoreMessagesImpl]);
   const isCloseToTop = ({
     layoutMeasurement,
     contentOffset,
@@ -797,133 +836,29 @@ const ConversationViewComponent = (_a) => {
     const paddingToTop = 60;
     return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
   };
-  const renderSend = useCallback((props) => {
-    var _a3, _b3, _c2;
-    const hasContent = !!props.text || ((_b3 = (_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3.images) == null ? void 0 : _b3.length) > 0;
-    const canSend = (((_c2 = state == null ? void 0 : state.context) == null ? void 0 : _c2.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] })));
-  }, [(_f = state == null ? void 0 : state.context) == null ? void 0 : _f.channelId, (_g = state == null ? void 0 : state.context) == null ? void 0 : _g.images, rest == null ? void 0 : rest.isCreateNewChannel]);
-  const handleSend = useCallback(async (messages) => {
-    var _a3, _b3, _c2, _d2;
-    const messageText = messages && messages.length > 0 ? ((_a3 = messages[0]) == null ? void 0 : _a3.text) || " " : " ";
-    console.log("Sending message:", messageText);
-    console.log("Images:", (_b3 = state.context.images) == null ? void 0 : _b3.length);
-    if (!state.context.channelId && !(rest == null ? void 0 : rest.isCreateNewChannel)) {
-      console.log("Cannot send - no channel");
-      return;
-    }
-    const hasText = !!messageText && messageText !== " ";
-    const hasImages = state.context.images && state.context.images.length > 0;
-    if (!hasText && !hasImages) {
-      console.log("Nothing to send - no text or images");
-      return;
-    }
-    safeSend({
-      type: Actions.SET_MESSAGE_TEXT,
-      data: {
-        messageText
-      }
-    });
-    if ((rest == null ? void 0 : rest.isCreateNewChannel) && !state.context.channelId) {
-      if (((_c2 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _c2.type) === ((_d2 = RoomType) == null ? void 0 : _d2.Direct)) {
-        safeSend({
-          type: Actions.CREATE_DIRECT_CHANNEL
-        });
-      }
-      return;
-    }
-    if (hasImages) {
-      console.log("Sending message with file");
-      safeSend({
-        type: Actions.SEND_MESSAGE_WITH_FILE
-      });
-    } else {
-      console.log("Sending text-only message");
-      safeSend({
-        type: Actions.SEND_MESSAGE
-      });
-    }
-  }, [state.context.channelId, state.context.images, rest == null ? void 0 : rest.isCreateNewChannel, (_h = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _h.type, safeSend]);
-  const fetchMessagesWithFallback = useCallback(async () => {
-    var _a3, _b3, _c2;
-    if (!state.context.channelId)
-      return;
-    try {
-      console.log("\u{1F504} DIRECT FETCH: Using direct approach for channel:", state.context.channelId);
-      const response = await refetch({
-        channelId: (_a3 = state.context.channelId) == null ? void 0 : _a3.toString(),
-        parentId: null,
-        limit: MESSAGES_PER_PAGE,
-        skip: 0
-      });
-      if ((_c2 = (_b3 = response == null ? void 0 : response.data) == null ? void 0 : _b3.messages) == null ? void 0 : _c2.data) {
-        const messages = response.data.messages.data;
-        console.log("\u2705 DIRECT FETCH: Got messages:", messages.length);
-        send({
-          type: Actions.SET_CHANNEL_MESSAGES,
-          data: {
-            messages,
-            totalCount: response.data.messages.totalCount
-          }
-        });
-      }
-    } catch (error) {
-      console.error("\u274C DIRECT FETCH ERROR:", error);
-    }
-  }, [state.context.channelId, refetch]);
-  useEffect(() => {
-    let timeoutId;
-    if (state.context.channelId && state.context.channelMessages.length === 0) {
-      timeoutId = setTimeout(() => {
-        console.log("\u26A0\uFE0F ACTIVATING FALLBACK - XState not updating after timeout");
-        fetchMessagesWithFallback();
-      }, 3e3);
-    }
-    return () => {
-      if (timeoutId)
-        clearTimeout(timeoutId);
-    };
-  }, [state.context.channelId, state.context.channelMessages, fetchMessagesWithFallback]);
   const messageList = useMemo(() => {
-    var _a3, _b3, _c2, _d2, _e2, _f2;
-    console.log("\u{1F504} CALCULATING MESSAGE LIST - Optimized version");
-    if (!((_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3.channelMessages) || state.context.channelMessages.length === 0) {
-      console.log("No messages to process");
-      return [];
+    const pendingMessages = Object.values(pendingUploads);
+    if (!channelMessages || channelMessages.length === 0) {
+      return pendingMessages;
     }
-    if (state.context.channelMessages[0]) {
-      const sampleMsg = state.context.channelMessages[0];
-      console.log("\u{1F4F7} Sample message files:", JSON.stringify({
-        hasFiles: !!sampleMsg.files,
-        fileCount: ((_c2 = (_b3 = sampleMsg.files) == null ? void 0 : _b3.data) == null ? void 0 : _c2.length) || 0,
-        fileUrl: ((_f2 = (_e2 = (_d2 = sampleMsg.files) == null ? void 0 : _d2.data) == null ? void 0 : _e2[0]) == null ? void 0 : _f2.url) || "none"
-      }));
-    }
-    const filteredMessages = uniqBy(state.context.channelMessages, ({
+    const filteredMessages = uniqBy(channelMessages, ({
       id
     }) => id);
-    if (filteredMessages.length === 0) {
-      return [];
-    }
-    return orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg) => {
-      var _a4, _b4, _c3, _d3, _e3, _f3;
+    const serverMessages = orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg) => {
+      var _a3, _b3, _c2, _d2, _e;
       const date = new Date(msg.createdAt);
-      let imageUrl = null;
-      if (((_a4 = msg.files) == null ? void 0 : _a4.data) && msg.files.data.length > 0) {
-        const fileData = msg.files.data[0];
-        if (fileData && fileData.url) {
-          imageUrl = fileData.url;
-          console.log("\u{1F4F7} Found image URL for message", msg.id, ":", imageUrl);
+      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 {
@@ -931,73 +866,178 @@ const ConversationViewComponent = (_a) => {
         text: msg.message,
         createdAt: date,
         user: {
-          _id: ((_b4 = msg.author) == null ? void 0 : _b4.id) || "",
-          name: `${((_c3 = msg.author) == null ? void 0 : _c3.givenName) || ""} ${((_d3 = msg.author) == null ? void 0 : _d3.familyName) || ""}`,
-          avatar: ((_e3 = msg.author) == null ? void 0 : _e3.picture) || ""
+          _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: imageUrl,
+        image: primaryImageUrl,
+        images: imageUrls,
+        // Store all images for custom rendering
         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: (_f3 = msg == null ? void 0 : msg.replies) != null ? _f3 : [],
+        replies: (_e = msg == null ? void 0 : msg.replies) != null ? _e : [],
         isShowThreadMessage
       };
-    });
-  }, [(_i = state == null ? void 0 : state.context) == null ? void 0 : _i.channelMessages, (_j = state == null ? void 0 : state.context) == null ? void 0 : _j.channelId, 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);
+    }
+  }, [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, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _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;
+    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 = ((_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 = (_f2 = (_e2 = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _e2.contents) == null ? void 0 : _f2.attachment;
+      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 = {};
-      if ((_g2 = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _g2.extraParams) {
-        const extraParams = (_h2 = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _h2.extraParams;
-        const route = (_i2 = extraParams == null ? void 0 : extraParams.route) != null ? _i2 : null;
+      let 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;
         let path = null;
         let param = null;
         if (role && role == PreDefinedRole.Guest) {
-          path = ((_j2 = route == null ? void 0 : route.guest) == null ? void 0 : _j2.name) ? (_l2 = (_k2 = route == null ? void 0 : route.guest) == null ? void 0 : _k2.name) != null ? _l2 : null : null;
-          param = ((_m2 = route == null ? void 0 : route.guest) == null ? void 0 : _m2.params) ? (_o2 = (_n2 = route == null ? void 0 : route.guest) == null ? void 0 : _n2.params) != null ? _o2 : null : null;
+          path = ((_j = route == null ? void 0 : route.guest) == null ? void 0 : _j.name) ? (_l = (_k = route == null ? void 0 : route.guest) == null ? void 0 : _k.name) != null ? _l : null : null;
+          param = ((_m = route == null ? void 0 : route.guest) == null ? void 0 : _m.params) ? (_o = (_n = route == null ? void 0 : route.guest) == null ? void 0 : _n.params) != null ? _o : null : null;
         } else if (role && role == PreDefinedRole.Owner) {
-          path = ((_p2 = route == null ? void 0 : route.host) == null ? void 0 : _p2.name) ? (_r2 = (_q2 = route == null ? void 0 : route.host) == null ? void 0 : _q2.name) != null ? _r2 : null : null;
-          param = ((_s2 = route == null ? void 0 : route.host) == null ? void 0 : _s2.params) ? (_u = (_t2 = route == null ? void 0 : route.host) == null ? void 0 : _t2.params) != null ? _u : null : null;
+          path = ((_p = route == null ? void 0 : route.host) == null ? void 0 : _p.name) ? (_r = (_q = route == null ? void 0 : route.host) == null ? void 0 : _q.name) != null ? _r : null : null;
+          param = ((_s = route == null ? void 0 : route.host) == null ? void 0 : _s.params) ? (_u = (_t = route == null ? void 0 : route.host) == null ? void 0 : _t.params) != null ? _u : null : null;
         } else {
           path = ((_v = route == null ? void 0 : route.host) == null ? void 0 : _v.name) ? (_x = (_w = route == null ? void 0 : route.host) == null ? void 0 : _w.name) != null ? _x : null : null;
           param = ((_y = route == null ? void 0 : route.host) == null ? void 0 : _y.params) ? (_A = (_z = route == null ? void 0 : route.host) == null ? void 0 : _z.params) != null ? _A : null : null;
         }
         action = path;
-        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(View, 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: () => {
-        var _a4;
-        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage)
-          navigation.navigate(config.THREAD_MESSEGE_PATH, {
-            channelId: (_a4 = state == null ? void 0 : state.context) == null ? void 0 : _a4.channelId,
-            title: "Message",
-            postParentId: currentMessage == null ? void 0 : currentMessage._id,
-            isPostParentIdThread: true
-          });
-      } }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage) navigation.navigate(config.THREAD_MESSEGE_PATH, {
+          channelId,
+          title: "Message",
+          postParentId: currentMessage == null ? void 0 : currentMessage._id,
+          isPostParentIdThread: true
+        });
+      } }, /* @__PURE__ */ React__default.createElement(View, null, /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
         left: {
           marginLeft: 5
         }
@@ -1022,15 +1062,13 @@ const ConversationViewComponent = (_a) => {
       return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#c0c0c0", style: {
         width: "100%"
       }, onPress: () => {
-        var _a4;
-        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage)
-          navigation.navigate(config.THREAD_MESSEGE_PATH, {
-            channelId: (_a4 = state == null ? void 0 : state.context) == null ? void 0 : _a4.channelId,
-            title: "Message",
-            postParentId: currentMessage == null ? void 0 : currentMessage._id,
-            isPostParentIdThread: true
-          });
-      } }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage) navigation.navigate(config.THREAD_MESSEGE_PATH, {
+          channelId,
+          title: "Message",
+          postParentId: currentMessage == null ? void 0 : currentMessage._id,
+          isPostParentIdThread: true
+        });
+      } }, /* @__PURE__ */ React__default.createElement(View, null, /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
         left: {
           marginLeft: 5
         }
@@ -1052,95 +1090,66 @@ const ConversationViewComponent = (_a) => {
         fontSize: 12
       }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
     }
-  }, [navigation, (_k = state == null ? void 0 : state.context) == null ? void 0 : _k.channelId, role]);
-  const renderActions = (props) => {
-    return /* @__PURE__ */ React__default.createElement(
-      Actions$1,
-      __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((props) => {
-    var _a3, _b3;
-    const selectedImage2 = safeContextProperty("selectedImage", "");
-    if (!selectedImage2) {
-      return null;
-    }
-    return /* @__PURE__ */ React__default.createElement(View, { style: {
-      height: 50,
-      padding: 3,
-      backgroundColor: "white",
-      borderTopWidth: 1,
-      borderTopColor: "#e0e0e0",
+  }, [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",
-      margin: 0,
-      paddingBottom: 0,
-      paddingTop: 5,
+      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();
+        }
+      }
+    }, style: {
       position: "absolute",
-      bottom: 0,
-      left: 0,
-      right: 0,
-      zIndex: 999
-    } }, /* @__PURE__ */ React__default.createElement(View, { style: {
-      flex: 1,
-      flexDirection: "row",
+      top: -1,
+      right: -1,
+      backgroundColor: "rgba(0,0,0,0.6)",
+      borderRadius: 12,
+      width: 20,
+      height: 20,
       alignItems: "center",
-      paddingHorizontal: 15
-    } }, /* @__PURE__ */ React__default.createElement(Image, { key: (_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3.selectedImage, alt: "selected image", source: {
-      uri: (_b3 = state == null ? void 0 : state.context) == null ? void 0 : _b3.selectedImage
-    }, style: {
-      width: 36,
-      height: 36,
-      borderRadius: 5,
-      marginRight: 15
-    }, size: "xs" }), /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#dddddd", onPress: () => safeSend({
-      type: Actions.CLEAR_IMAGE
-    }), style: {
-      backgroundColor: "#f44336",
-      paddingVertical: 2,
-      paddingHorizontal: 5,
-      borderRadius: 5,
-      marginLeft: 10,
-      elevation: 3,
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: 1
-      },
-      shadowOpacity: 0.3,
-      shadowRadius: 2
-    } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
-      color: "white",
-      fontWeight: "bold"
-    } }, "X"))));
-  }, [(_l = state == null ? void 0 : state.context) == null ? void 0 : _l.selectedImage, safeSend]);
+      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
@@ -1148,7 +1157,7 @@ const ConversationViewComponent = (_a) => {
     return /* @__PURE__ */ React__default.createElement(CachedImage, { style: {
       width: "100%",
       height: "100%"
-    }, resizeMode: "cover", cacheKey: `${_id}-slack-bubble-imageKey`, source: {
+    }, resizeMode: "cover", cacheKey: `${_id}-modal-imageKey`, source: {
       uri: image,
       expiresIn: 86400
     }, alt: "image" });
@@ -1156,6 +1165,98 @@ const ConversationViewComponent = (_a) => {
   const renderMessage = useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
   }, [isShowImageViewer]);
+  const renderPaymentMessageText = useCallback((props) => {
+    var _a3, _b3, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    const {
+      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 === "PAYMENT") {
+      const paymentDetails = ((_e = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _e.payment) || {};
+      const amount = paymentDetails.amount || (currentMessage == null ? void 0 : currentMessage.amount);
+      const currency = paymentDetails.currency || (currentMessage == null ? void 0 : currentMessage.currency) || "$";
+      const status = paymentDetails.status || (currentMessage == null ? void 0 : currentMessage.status) || "Completed";
+      const paymentNote = paymentDetails.note || (currentMessage == null ? void 0 : currentMessage.text);
+      return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#e0f7fa", style: {
+        width: "100%"
+      }, onPress: () => {
+        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage) navigation.navigate(config.THREAD_MESSEGE_PATH, {
+          channelId,
+          title: "Message",
+          postParentId: currentMessage == null ? void 0 : currentMessage._id,
+          isPostParentIdThread: true
+        });
+      } }, /* @__PURE__ */ React__default.createElement(Box, { style: {
+        backgroundColor: "#e0f7fa",
+        borderRadius: 16,
+        padding: 12,
+        marginVertical: 2,
+        borderWidth: 1,
+        borderColor: "#26c6da",
+        flexDirection: "row",
+        alignItems: "center"
+      } }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "credit-card-check", size: 28, color: "#00838f", style: {
+        marginRight: 10
+      } }), /* @__PURE__ */ React__default.createElement(VStack, { style: {
+        flex: 1
+      } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontWeight: "bold",
+        color: "#00838f",
+        fontSize: 16
+      } }, amount ? `${currency}${amount}` : "Payment"), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        color: "#00838f",
+        fontSize: 13,
+        marginTop: 2
+      } }, status), paymentNote && /* @__PURE__ */ React__default.createElement(Text, { style: {
+        color: "#444",
+        fontSize: 13,
+        marginTop: 4
+      } }, paymentNote))));
+    } else {
+      return /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "#c0c0c0", style: {
+        width: "100%"
+      }, onPress: () => {
+        if (currentMessage == null ? void 0 : currentMessage.isShowThreadMessage) navigation.navigate(config.THREAD_MESSEGE_PATH, {
+          channelId,
+          title: "Message",
+          postParentId: currentMessage == null ? void 0 : currentMessage._id,
+          isPostParentIdThread: true
+        });
+      } }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+        left: {
+          marginLeft: 5
+        }
+      } })), ((_g = (_f = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _f.data) == null ? void 0 : _g.length) > 0 && /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-1 items-center" }, /* @__PURE__ */ React__default.createElement(HStack, null, (_l = (_k = (_j = (_i = (_h = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _h.data) == null ? void 0 : _i.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 : _j.slice(0, 2)) == null ? void 0 : _k.reverse()) == null ? void 0 : _l.map((p, i) => {
+        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: (_c3 = p == null ? void 0 : p.author) == null ? void 0 : _c3.picture
+        } }));
+      })), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontSize: 12
+      }, className: "font-bold color-blue-800" }, (_m = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _m.totalCount, " ", ((_n = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _n.totalCount) == 1 ? "reply" : "replies"), /* @__PURE__ */ React__default.createElement(Text, { style: {
+        fontSize: 12
+      }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
+    }
+  }, [navigation, channelId, role]);
+  const renderPaymentMessage = useCallback((props) => {
+    const {
+      currentMessage
+    } = props;
+    if ((currentMessage == null ? void 0 : currentMessage.type) === "PAYMENT") {
+      return /* @__PURE__ */ React__default.createElement(PaymentMessage, __spreadProps(__spreadValues({}, props), { navigation, channelId, config }));
+    }
+    return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
+  }, [isShowImageViewer, channelId, navigation]);
   let onScroll = false;
   const onMomentumScrollBegin = async ({
     nativeEvent
@@ -1166,282 +1267,186 @@ const ConversationViewComponent = (_a) => {
     }
   };
   const onEndReached = () => {
-    console.log("on end reached");
-    if (!onScroll)
-      return;
+    if (!onScroll) return;
     onScroll = false;
   };
-  useEffect(() => {
-    console.log("Current channel ID:", state.context.channelId);
-    console.log("Current state:", state.value);
-    console.log("Channel messages count:", state.context.channelMessages.length);
-  }, [state.context.channelId, state.value, state.context.channelMessages]);
-  useEffect(() => {
-    if (state && typeof state.matches === "function") {
-      if (state.matches(BaseState.FetchMessages)) {
-        console.log("In FetchMessages state, attempting to fetch messages");
-        if (!fetchInProgressRef.current) {
-          fetchInProgressRef.current = true;
-          fetchMessagesDirectly().finally(() => {
-            fetchInProgressRef.current = false;
-          });
-        }
-      } else if (state.matches(MainState.FetchMoreMessages)) {
-        if (!fetchMoreInProgressRef.current) {
-          fetchMoreInProgressRef.current = true;
-          fetchMoreMessagesImpl().then((result) => {
-            if (result.error) {
-              console.error("Error fetching more messages:", result.error);
-              safeSend({
-                type: "ERROR",
-                data: {
-                  message: result.error
-                }
-              });
-            } else {
-              safeSend({
-                type: "FETCH_MORE_MESSAGES_SUCCESS",
-                data: result
-              });
-            }
-            fetchMoreInProgressRef.current = false;
-          });
-        }
-      } else if (state.matches(MainState.SendMessage)) {
-        if (!sendInProgressRef.current) {
-          sendInProgressRef.current = true;
-          sendMessageImpl().then((result) => {
-            if (result.error) {
-              console.error("Error sending message:", result.error);
-              safeSend({
-                type: "ERROR",
-                data: {
-                  message: result.error
-                }
-              });
-            } else {
-              safeSend({
-                type: "SEND_MESSAGE_SUCCESS",
-                data: result
-              });
-            }
-            sendInProgressRef.current = false;
-          });
-        }
-      } else if (state.matches(MainState.SendMessageWithFile)) {
-        if (!sendFileInProgressRef.current) {
-          sendFileInProgressRef.current = true;
-          sendMessageWithFileImpl().then((result) => {
-            if (result.error) {
-              console.error("Error sending message with file:", result.error);
-              safeSend({
-                type: "ERROR",
-                data: {
-                  message: result.error
-                }
-              });
-            } else {
-              safeSend({
-                type: "SEND_MESSAGE_WITH_FILE_SUCCESS",
-                data: result
-              });
-            }
-            sendFileInProgressRef.current = false;
-          });
-        }
-      } else if (state.matches(MainState.CreateDirectChannel)) {
-        if (!createChannelInProgressRef.current) {
-          createChannelInProgressRef.current = true;
-          createDirectChannelImpl().then((result) => {
-            if (result.error) {
-              console.error("Error creating direct channel:", result.error);
-              safeSend({
-                type: "ERROR",
-                data: {
-                  message: result.error
-                }
-              });
-            } else {
-              safeSend({
-                type: "CREATE_DIRECT_CHANNEL_SUCCESS",
-                data: result
-              });
-            }
-            createChannelInProgressRef.current = false;
-          });
-        }
+  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,
+    //minHeight: 36,
+    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) || isUploadingImage || loading ? 0.5 : 1,
+        opacity: !messageText.trim() && images.length === 0 ? 0.5 : 1
       }
-    }
-  }, [state == null ? void 0 : state.value, fetchMessagesDirectly, fetchMoreMessagesImpl, sendMessageImpl, sendMessageWithFileImpl, createDirectChannelImpl, safeSend]);
-  const fetchInProgressRef = useRef(false);
-  const fetchMoreInProgressRef = useRef(false);
-  const sendInProgressRef = useRef(false);
-  const sendFileInProgressRef = useRef(false);
-  const createChannelInProgressRef = useRef(false);
+    },
+    /* @__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(() => {
-    var _a3, _b3;
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent }), /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { channelId: (_b3 = (_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3.channelId) == null ? void 0 : _b3.toString(), subscribeToNewMessages: () => {
-      var _a4, _b4;
-      return subscribeToMore({
-        document: OnChatMessageAddedDocument,
-        variables: {
-          channelId: (_b4 = (_a4 = state == null ? void 0 : state.context) == null ? void 0 : _a4.channelId) == null ? void 0 : _b4.toString()
-        },
-        updateQuery: (prev, {
-          subscriptionData
-        }) => {
-          var _a5, _b5, _c2;
-          if (!((_a5 = subscriptionData == null ? void 0 : subscriptionData.data) == null ? void 0 : _a5.chatMessageAdded))
-            return prev;
-          const newMessage = subscriptionData.data.chatMessageAdded;
-          const currentMessages = ((_b5 = prev == null ? void 0 : prev.messages) == null ? void 0 : _b5.data) || [];
-          if (currentMessages.some((msg) => msg.id === newMessage.id)) {
-            return prev;
-          }
-          if (lastProcessedMessageRef.current === newMessage.id) {
-            return prev;
-          }
-          lastProcessedMessageRef.current = newMessage.id;
-          setTimeout(() => {
-            var _a6;
-            safeSend({
-              type: Actions.SET_CHANNEL_MESSAGES,
-              data: {
-                messages: uniqBy([...state.context.channelMessages, newMessage], ({
-                  id
-                }) => id),
-                totalCount: (((_a6 = prev == null ? void 0 : prev.messages) == null ? void 0 : _a6.totalCount) || 0) + 1
-              }
-            });
-          }, 0);
-          return __spreadProps(__spreadValues({}, prev), {
-            messages: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.messages), {
-              data: [...currentMessages, newMessage],
-              totalCount: (((_c2 = prev == null ? void 0 : prev.messages) == null ? void 0 : _c2.totalCount) || 0) + 1
-            })
-          });
-        }
-      });
-    } }));
-  }, [isShowImageViewer, modalContent, (_m = state == null ? void 0 : state.context) == null ? void 0 : _m.channelId, (_n = state == null ? void 0 : state.context) == null ? void 0 : _n.channelMessages, subscribeToMore, safeSend]);
-  const lastProcessedMessageRef = useRef(null);
+    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,
+    // Improve performance by unmounting components when not visible
     initialNumToRender: 10,
-    maxToRenderPerBatch: 10,
-    windowSize: 10
+    // Reduce initial render amount
+    maxToRenderPerBatch: 7,
+    // Reduce number in each render batch
+    windowSize: 7,
+    // Reduce the window size
+    updateCellsBatchingPeriod: 50,
+    // Batch cell updates to improve scrolling
+    keyExtractor: (item) => item._id
+    // Add explicit key extractor
   }), [onEndReached, onMomentumScrollBegin]);
-  const renderLoadEarlier = useCallback(() => {
-    var _a3;
-    return ((_a3 = state == null ? void 0 : state.context) == null ? void 0 : _a3.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;
-  }, [(_o = state == null ? void 0 : state.context) == null ? void 0 : _o.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"
-    } }));
+  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(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"
-  } }, (state == null ? void 0 : state.matches) && state.matches(BaseState.FetchMessages) && /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }), /* @__PURE__ */ React__default.createElement(
-    GiftedChat,
+    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,
+      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: 10
-        },
-        keyboardShouldPersistTaps: "handled"
-      }),
-      onSend: handleSend,
-      text: safeContextProperty("messageText", " ") || " ",
-      onInputTextChanged: (text) => safeSend({
-        type: Actions.SET_MESSAGE_TEXT,
-        data: {
-          messageText: text
+          paddingBottom: inputToolbarHeight
         }
       }),
-      renderFooter: () => safeContextProperty("loading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : safeContextProperty("imageLoading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : "",
+      onSend: handleSend,
+      text: messageText || " ",
+      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: safeContextProperty("channelId") && renderActions,
-      renderAccessory: !!((_p = state == null ? void 0 : state.context) == null ? void 0 : _p.selectedImage) ? renderAccessory : void 0,
-      renderMessage,
+      renderMessageText: isPaymentChatUI ? renderPaymentMessageText : renderMessageText,
+      renderMessage: isPaymentChatUI ? renderPaymentMessage : renderMessage,
       renderChatFooter,
       renderLoadEarlier,
-      loadEarlier: ((_q = state == null ? void 0 : state.context) == null ? void 0 : _q.totalCount) > ((_s = (_r = state == null ? void 0 : state.context) == null ? void 0 : _r.channelMessages) == null ? void 0 : _s.length),
-      isLoadingEarlier: (_t = state == null ? void 0 : state.context) == null ? void 0 : _t.loadingOldMessages,
-      bottomOffset: Platform.OS === "ios" ? 10 : 0,
-      textInputProps: {
-        style: {
-          borderWidth: 1,
-          borderColor: colors.gray[300],
-          backgroundColor: "#f8f8f8",
-          borderRadius: 20,
-          minHeight: 36,
-          maxHeight: 80,
-          color: "#000",
-          padding: 8,
-          paddingHorizontal: 15,
-          fontSize: 16,
-          flex: 1,
-          marginVertical: 2,
-          marginBottom: 0
-        },
-        multiline: true,
-        returnKeyType: "default",
-        enablesReturnKeyAutomatically: true,
-        placeholderTextColor: colors.gray[400]
-      },
-      minComposerHeight: 36,
-      maxComposerHeight: 100,
-      isKeyboardInternallyHandled: true,
-      placeholder: "Type a message...",
-      lightboxProps: {
-        underlayColor: "transparent",
-        springConfig: {
-          tension: 9e4,
-          friction: 9e4
-        },
-        disabled: true
-      },
-      infiniteScroll: false
+      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 && prevProps.isPaymentChatUI === nextProps.isPaymentChatUI;
+});export{ConversationView};//# sourceMappingURL=ConversationView.js.map