@messenger-box/platform-mobile 10.0.3-alpha.34 → 10.0.3-alpha.37

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 {Box,Button,ButtonText,HStack,Avatar,AvatarFallbackText,AvatarImage,Text,Image,Spinner,Skeleton}from'@admin-layout/gluestack-ui-mobile';import {Platform,View,TouchableHighlight}from'react-native';import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {navigationRef}from'@common-stack/client-react';import {useSelector}from'react-redux';import {uniqBy,orderBy,startCase}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {MaterialCommunityIcons,Ionicons}from'@expo/vector-icons';import {Send,MessageText,InputToolbar,GiftedChat,Actions}from'react-native-gifted-chat';import {FileRefType,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 colors from'tailwindcss/colors';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -46,189 +46,9 @@ const createdAtText = (value) => {
     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 stateWithMatches = useMemo(() => {
-    return __spreadProps(__spreadValues({}, state), {
-      matches: (checkState) => {
-        return state.value === checkState;
-      }
-    });
-  }, [state]);
-  return [stateWithMatches, send];
-}
 const ConversationViewComponent = (_a) => {
   var _b = _a, {
-    channelId: ChannelId,
+    channelId: initialChannelId,
     role,
     isShowThreadMessage
   } = _b, rest = __objRest(_b, [
@@ -236,93 +56,23 @@ const ConversationViewComponent = (_a) => {
     "role",
     "isShowThreadMessage"
   ]);
-  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
-  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 [channelId, setChannelId] = useState(initialChannelId || null);
+  const [messageText, setMessageText] = useState("");
+  const [skip, setSkip] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [loadingOldMessages, setLoadingOldMessages] = useState(false);
+  const [error, setError] = useState(null);
+  const [selectedImage, setSelectedImage] = useState("");
+  const [images, setImages] = useState([]);
   const [isShowImageViewer, setImageViewer] = useState(false);
   const [imageObject, setImageObject] = useState({});
   const messageRootListRef = useRef(null);
+  const isMounted = useRef(true);
+  const fetchOldDebounceRef = useRef(false);
+  const auth = useSelector(userSelector);
+  const currentRoute = navigationRef.isReady() ? (_a2 = navigationRef) == null ? void 0 : _a2.getCurrentRoute() : null;
+  const navigation = useNavigation();
   const isFocused = useIsFocused();
   const [addDirectChannel] = useAddDirectChannelMutation();
   const {
@@ -338,89 +88,67 @@ const ConversationViewComponent = (_a) => {
     subscribeToMore
   } = useMessagesQuery({
     variables: {
-      channelId: (_b2 = state.context.channelId) == null ? void 0 : _b2.toString(),
+      channelId: channelId == null ? void 0 : channelId.toString(),
       parentId: null,
       limit: MESSAGES_PER_PAGE,
-      skip: state.context.skip
+      skip
     },
-    skip: !state.context.channelId,
+    skip: !channelId,
     fetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-first",
     refetchWritePolicy: "merge",
+    notifyOnNetworkStatusChange: true,
     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);
-      }
     },
-    onError: (error) => {
-      console.error("MESSAGE QUERY ERROR:", error);
+    onError: (error2) => {
+      setError(String(error2));
     }
   });
-  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);
     }
-    try {
-      console.log("\u{1F4AB} FETCHING messages for channel:", channelId);
-      send({
-        type: Actions.START_LOADING
-      });
-      const response = await refetch({
-        channelId: 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
-      });
+  }, [initialChannelId, currentRoute]);
+  useFocusEffect(React__default.useCallback(() => {
+    if (channelId) {
+      refetch();
     }
-  }, [safeGetContext, refetch, safeSend]);
+    return () => {
+    };
+  }, [channelId, isFocused, refetch]));
+  useEffect(() => {
+    if (selectedImage) {
+      setLoading(false);
+    }
+  }, [selectedImage]);
   const fetchMoreMessagesImpl = useCallback(async () => {
-    var _a3, _b3, _c2;
+    var _a3, _b3;
     try {
+      setLoadingOldMessages(true);
       const response = await fetchMoreMessages({
         variables: {
-          channelId: (_a3 = state.context.channelId) == null ? void 0 : _a3.toString(),
+          channelId: channelId == null ? void 0 : channelId.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)) {
+      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 +156,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, fetchMoreMessages]);
   const sendMessageImpl = useCallback(async () => {
     var _a3;
     try {
+      const currentMessageText = messageText;
+      setMessageText("");
       const notificationData = {
         url: config.INBOX_MESSEGE_PATH,
         params: {
-          channelId: state.context.channelId,
+          channelId,
           hideTabBar: true
         },
         screen: "DialogMessages",
@@ -448,29 +180,75 @@ const ConversationViewComponent = (_a) => {
           sound: Platform.OS === "android" ? void 0 : "default"
         }
       };
+      const messageId = objectId();
+      const optimisticMessage = {
+        __typename: "Post",
+        id: messageId,
+        message: currentMessageText,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        author: {
+          __typename: "UserAccount",
+          id: auth == null ? void 0 : auth.id,
+          givenName: (auth == null ? void 0 : auth.givenName) || "",
+          familyName: (auth == null ? void 0 : auth.familyName) || "",
+          picture: (auth == null ? void 0 : auth.picture) || "",
+          username: (auth == null ? void 0 : auth.username) || "",
+          email: (auth == null ? void 0 : auth.email) || "",
+          alias: [],
+          tokens: []
+        },
+        isDelivered: true,
+        isRead: false,
+        type: "TEXT",
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: channelId
+        },
+        propsConfiguration: {
+          __typename: "MachineConfiguration",
+          resource: ""
+        },
+        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
         }
       });
       return {
         message: (_a3 = response.data) == null ? void 0 : _a3.sendMessage
       };
-    } catch (error) {
+    } catch (error2) {
+      setLoading(false);
+      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
-    });
+    var _a3;
+    setLoading(true);
     try {
-      console.log("Starting image picker...");
       let imageSource = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ImagePicker.MediaTypeOptions.Images,
         allowsEditing: true,
@@ -480,19 +258,9 @@ const ConversationViewComponent = (_a) => {
         exif: false
       });
       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];
+        const selectedAsset = (_a3 = imageSource == null ? void 0 : imageSource.assets) == null ? void 0 : _a3[0];
         if (!selectedAsset) {
-          console.error("No asset found in selected image");
-          safeSend({
-            type: Actions.STOP_LOADING
-          });
+          setLoading(false);
           return;
         }
         const base64Data = selectedAsset.base64;
@@ -502,43 +270,26 @@ const ConversationViewComponent = (_a) => {
           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]
-          }
-        });
-        console.log("Image state updated successfully");
+        setSelectedImage(previewImage);
+        setImages([asset]);
       } 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 sendMessageWithFileImpl = useCallback(async () => {
-    var _a3, _b3, _c2, _d2, _e2, _f2;
+    var _a3, _b3, _c2, _d2, _e, _f, _g, _h, _i;
     try {
-      console.log("Executing sendMessageWithFileImpl");
+      setLoading(true);
       const postId = objectId();
-      console.log("Generated postId for file upload:", postId);
+      setUploadingMessageId(postId);
       const notificationData = {
         url: config.INBOX_MESSEGE_PATH,
         params: {
-          channelId: state.context.channelId,
+          channelId,
           hideTabBar: true
         },
         screen: "DialogMessages",
@@ -546,31 +297,87 @@ 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");
+      if (!images || images.length === 0) {
+        setLoading(false);
+        setUploadingMessageId(null);
         return {
           error: "No images available to upload"
         };
       }
-      const imagesToUpload = state.context.images.map((img) => {
+      const imagesToUpload = 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 currentMessageText = messageText;
+      setMessageText("");
+      const optimisticFileInfo = {
+        __typename: "FileInfo",
+        id: objectId(),
+        url: selectedImage,
+        name: ((_a3 = imagesToUpload[0]) == null ? void 0 : _a3.name) || "image.jpg",
+        extension: "jpg",
+        mimeType: "image/jpeg",
+        size: 0,
+        refType: FileRefType.Post,
+        height: ((_b3 = imagesToUpload[0]) == null ? void 0 : _b3.height) || 0,
+        width: ((_c2 = imagesToUpload[0]) == null ? void 0 : _c2.width) || 0
+      };
+      const optimisticMessage = {
+        __typename: "Post",
+        id: postId,
+        message: currentMessageText || " ",
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        author: {
+          __typename: "UserAccount",
+          id: auth == null ? void 0 : auth.id,
+          givenName: (auth == null ? void 0 : auth.givenName) || "",
+          familyName: (auth == null ? void 0 : auth.familyName) || "",
+          picture: (auth == null ? void 0 : auth.picture) || "",
+          username: (auth == null ? void 0 : auth.username) || "",
+          email: (auth == null ? void 0 : auth.email) || "",
+          alias: [],
+          tokens: []
+        },
+        isDelivered: true,
+        isRead: false,
+        type: "TEXT",
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: channelId
+        },
+        propsConfiguration: {
+          __typename: "MachineConfiguration",
+          resource: ""
+        },
+        props: {},
+        files: {
+          __typename: "FilesInfo",
+          data: [{
+            __typename: "FileInfo",
+            id: objectId(),
+            url: selectedImage,
+            name: ((_d2 = imagesToUpload[0]) == null ? void 0 : _d2.name) || "image.jpg",
+            extension: "jpg",
+            mimeType: "image/jpeg",
+            size: 0,
+            refType: FileRefType.Post,
+            height: ((_e = imagesToUpload[0]) == null ? void 0 : _e.height) || 0,
+            width: ((_f = imagesToUpload[0]) == null ? void 0 : _f.width) || 0
+          }],
+          totalCount: 1
+        },
+        replies: {
+          __typename: "Messages",
+          data: [],
+          totalCount: 0
+        }
+      };
       const uploadResponse = await startUpload({
         file: imagesToUpload,
         saveUploadedFile: {
@@ -584,85 +391,72 @@ const ConversationViewComponent = (_a) => {
           }
         }
       });
-      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);
+        setLoading(false);
+        setUploadingMessageId(null);
         return {
           error: String(uploadResponse.error)
         };
       }
       const uploadedFiles = uploadResponse.data;
-      console.log("Uploaded files:", uploadedFiles ? JSON.stringify(uploadedFiles.map((f) => {
-        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 files = (_g = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _g : null;
       const response = await sendMsg({
         variables: {
           postId,
-          channelId: state.context.channelId,
-          content: state.context.messageText || " ",
+          channelId,
+          content: currentMessageText || " ",
           files,
           notificationParams: notificationData
+        },
+        optimisticResponse: {
+          __typename: "Mutation",
+          sendMessage: optimisticMessage
         }
       });
-      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)) + "..."
-          }));
-        }
-        setTimeout(() => {
-          safeSend({
-            type: Actions.CLEAR_IMAGE
-          });
-        }, 100);
-      } else {
-        console.error("Failed to send message with file:", response == null ? void 0 : response.errors);
+      if ((_h = response == null ? void 0 : response.data) == null ? void 0 : _h.sendMessage) {
+        setSelectedImage("");
+        setImages([]);
       }
+      setLoading(false);
+      setUploadingMessageId(null);
       return {
-        message: (_f2 = response.data) == null ? void 0 : _f2.sendMessage
+        message: (_i = response.data) == null ? void 0 : _i.sendMessage
       };
-    } catch (error) {
-      console.error("Error in sendMessageWithFileImpl:", error);
+    } catch (error2) {
+      setLoading(false);
+      setUploadingMessageId(null);
+      setError(String(error2));
       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]);
   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);
         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);
         return {
           error: "Failed to create channel"
         };
       }
       const newChannelId = response.data.createDirectChannel.id;
+      setChannelId(newChannelId);
       const notificationData = {
         url: config.INBOX_MESSEGE_PATH,
         params: {
@@ -674,121 +468,83 @@ const ConversationViewComponent = (_a) => {
           sound: Platform.OS === "android" ? void 0 : "default"
         }
       };
+      const messageId = objectId();
+      const optimisticMessage = {
+        __typename: "Post",
+        id: messageId,
+        message: currentMessageText,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        author: {
+          __typename: "UserAccount",
+          id: auth == null ? void 0 : auth.id,
+          givenName: (auth == null ? void 0 : auth.givenName) || "",
+          familyName: (auth == null ? void 0 : auth.familyName) || "",
+          picture: (auth == null ? void 0 : auth.picture) || "",
+          username: (auth == null ? void 0 : auth.username) || "",
+          email: (auth == null ? void 0 : auth.email) || "",
+          alias: [],
+          tokens: []
+        },
+        isDelivered: true,
+        isRead: false,
+        type: "TEXT",
+        parentId: null,
+        fromServer: false,
+        channel: {
+          __typename: "Channel",
+          id: newChannelId
+        },
+        propsConfiguration: {
+          __typename: "MachineConfiguration",
+          resource: ""
+        },
+        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
         }
       });
+      setLoading(false);
       return {
         channelId: newChannelId
       };
-    } catch (error) {
+    } catch (error2) {
+      setLoading(false);
+      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 (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,121 +553,21 @@ 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;
-    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");
+    if (!channelMessages || channelMessages.length === 0) {
       return [];
     }
-    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, _b3, _c2, _d2, _e2, _f2;
+      var _a3, _b3, _c2, _d2, _e, _f;
       const date = new Date(msg.createdAt);
       let imageUrl = null;
-      if (((_a4 = msg.files) == null ? void 0 : _a4.data) && msg.files.data.length > 0) {
+      if (((_a3 = msg.files) == null ? void 0 : _a3.data) && msg.files.data.length > 0) {
         const fileData = msg.files.data[0];
         if (fileData && fileData.url) {
           imageUrl = fileData.url;
@@ -924,40 +580,79 @@ const ConversationViewComponent = (_a) => {
         user: {
           _id: ((_b3 = msg.author) == null ? void 0 : _b3.id) || "",
           name: `${((_c2 = msg.author) == null ? void 0 : _c2.givenName) || ""} ${((_d2 = msg.author) == null ? void 0 : _d2.familyName) || ""}`,
-          avatar: ((_e2 = msg.author) == null ? void 0 : _e2.picture) || ""
+          avatar: ((_e = msg.author) == null ? void 0 : _e.picture) || ""
         },
         image: imageUrl,
         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: (_f2 = msg == null ? void 0 : msg.replies) != null ? _f2 : [],
+        replies: (_f = msg == null ? void 0 : msg.replies) != null ? _f : [],
         isShowThreadMessage
       };
     });
-  }, [(_i = state == null ? void 0 : state.context) == null ? void 0 : _i.channelMessages, isShowThreadMessage]);
+  }, [channelMessages, isShowThreadMessage]);
+  const renderSend = useCallback((props) => {
+    const hasContent = !!props.text || (images == null ? void 0 : images.length) > 0;
+    const canSend = (channelId || (rest == null ? void 0 : rest.isCreateNewChannel)) && hasContent;
+    return /* @__PURE__ */ React__default.createElement(Send, __spreadProps(__spreadValues({}, props), { disabled: !canSend, containerStyle: {
+      justifyContent: "center",
+      alignItems: "center",
+      height: 40,
+      width: 44,
+      marginRight: 4,
+      marginBottom: 0,
+      marginLeft: 4
+    } }), /* @__PURE__ */ React__default.createElement(View, { style: {
+      padding: 4
+    } }, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", size: 32, color: canSend ? colors.blue[500] : colors.gray[400] })));
+  }, [channelId, images, rest == null ? void 0 : rest.isCreateNewChannel]);
+  const 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)) {
+        createDirectChannelImpl();
+      }
+      return;
+    }
+    if (hasImages) {
+      sendMessageWithFileImpl();
+    } else {
+      sendMessageImpl();
+    }
+  }, [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, _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;
+    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.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;
+      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 = (_t = route == null ? void 0 : route.host) == null ? void 0 : _t.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;
@@ -980,10 +675,9 @@ const ConversationViewComponent = (_a) => {
       } }))) : /* @__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,
+            channelId,
             title: "Message",
             postParentId: currentMessage == null ? void 0 : currentMessage._id,
             isPostParentIdThread: true
@@ -1013,10 +707,9 @@ 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,
+            channelId,
             title: "Message",
             postParentId: currentMessage == null ? void 0 : currentMessage._id,
             isPostParentIdThread: true
@@ -1043,10 +736,10 @@ const ConversationViewComponent = (_a) => {
         fontSize: 12
       }, className: "font-bold color-gray-500" }, lastReply ? createdAtText(lastReply == null ? void 0 : lastReply.createdAt) : ""))));
     }
-  }, [navigation, (_j = state == null ? void 0 : state.context) == null ? void 0 : _j.channelId, role]);
+  }, [navigation, channelId, role]);
   const renderActions = (props) => {
     return /* @__PURE__ */ React__default.createElement(
-      Actions$1,
+      Actions,
       __spreadProps(__spreadValues({}, props), {
         options: {
           ["Choose from Library"]: onSelectImages,
@@ -1070,68 +763,93 @@ const ConversationViewComponent = (_a) => {
       })
     );
   };
-  const renderAccessory = useCallback((props) => {
-    var _a3, _b3;
-    const selectedImage2 = safeContextProperty("selectedImage", "");
-    if (!selectedImage2) {
+  const renderAccessory = useCallback(() => {
+    var _a3;
+    if (!selectedImage) {
       return null;
     }
     return /* @__PURE__ */ React__default.createElement(View, { style: {
-      height: 50,
-      padding: 3,
+      height: 70,
       backgroundColor: "white",
       borderTopWidth: 1,
       borderTopColor: "#e0e0e0",
       flexDirection: "row",
       alignItems: "center",
       margin: 0,
-      paddingBottom: 0,
-      paddingTop: 5,
+      padding: 0,
+      paddingVertical: 0,
       position: "absolute",
-      bottom: 0,
+      bottom: Platform.OS === "ios" ? 105 : 95,
       left: 0,
       right: 0,
-      zIndex: 999
-    } }, /* @__PURE__ */ React__default.createElement(View, { style: {
-      flex: 1,
-      flexDirection: "row",
-      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,
+      zIndex: 1,
       elevation: 3,
       shadowColor: "#000",
       shadowOffset: {
         width: 0,
-        height: 1
+        height: -1
       },
-      shadowOpacity: 0.3,
+      shadowOpacity: 0.05,
       shadowRadius: 2
+    } }, /* @__PURE__ */ React__default.createElement(View, { style: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: 15,
+      paddingRight: 5
+    } }, /* @__PURE__ */ React__default.createElement(View, { style: {
+      width: 56,
+      height: 56,
+      marginRight: 15,
+      borderRadius: 4,
+      backgroundColor: colors.gray[200],
+      overflow: "hidden",
+      borderWidth: 1,
+      borderColor: "#e0e0e0"
+    } }, /* @__PURE__ */ React__default.createElement(Image, { key: selectedImage, alt: "selected image", source: {
+      uri: selectedImage
+    }, style: {
+      width: "100%",
+      height: "100%"
+    }, size: "md" }), loading && /* @__PURE__ */ React__default.createElement(View, { style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(255, 255, 255, 0.7)",
+      justifyContent: "center",
+      alignItems: "center"
+    } }, /* @__PURE__ */ React__default.createElement(Spinner, { size: "small", color: colors.blue[500] }))), /* @__PURE__ */ React__default.createElement(View, { style: {
+      flex: 1
     } }, /* @__PURE__ */ React__default.createElement(Text, { style: {
-      color: "white",
-      fontWeight: "bold"
-    } }, "X"))));
-  }, [(_k = state == null ? void 0 : state.context) == null ? void 0 : _k.selectedImage, safeSend]);
+      fontSize: 14,
+      fontWeight: "400",
+      color: colors.gray[800]
+    } }, ((_a3 = images[0]) == null ? void 0 : _a3.fileName) || "image_" + new Date().getTime() + ".jpg"), /* @__PURE__ */ React__default.createElement(Text, { style: {
+      fontSize: 12,
+      color: colors.gray[500],
+      marginTop: 2
+    } }, loading ? "Preparing..." : "Ready to send")), /* @__PURE__ */ React__default.createElement(TouchableHighlight, { underlayColor: "rgba(0,0,0,0.1)", onPress: () => {
+      setSelectedImage("");
+      setImages([]);
+    }, style: {
+      backgroundColor: colors.red[500],
+      borderRadius: 24,
+      width: 36,
+      height: 36,
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: 10
+    } }, /* @__PURE__ */ React__default.createElement(Ionicons, { name: "close", size: 20, color: "white" }))));
+  }, [selectedImage, loading, 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
@@ -1139,14 +857,42 @@ 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" });
   }, [imageObject]);
   const renderMessage = useCallback((props) => {
+    const isUploading = props.currentMessage._id === uploadingMessageId && loading;
+    if (isUploading && props.currentMessage.image) {
+      return /* @__PURE__ */ React__default.createElement(View, { style: {
+        padding: 10,
+        marginBottom: 10,
+        marginRight: 10,
+        alignSelf: "flex-end",
+        borderRadius: 15,
+        backgroundColor: colors.gray[100],
+        maxWidth: "80%"
+      } }, props.currentMessage.text && props.currentMessage.text.trim() !== "" && /* @__PURE__ */ React__default.createElement(Box, { style: {
+        height: 15,
+        borderRadius: 4,
+        backgroundColor: colors.gray[200],
+        overflow: "hidden",
+        marginBottom: 8
+      } }, /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rounded", style: {
+        flex: 1
+      } })), /* @__PURE__ */ React__default.createElement(Box, { style: {
+        height: 150,
+        width: 150,
+        borderRadius: 10,
+        backgroundColor: colors.gray[200],
+        overflow: "hidden"
+      } }, /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rounded", style: {
+        flex: 1
+      } })));
+    }
     return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
-  }, [isShowImageViewer]);
+  }, [isShowImageViewer, uploadingMessageId, loading]);
   let onScroll = false;
   const onMomentumScrollBegin = async ({
     nativeEvent
@@ -1157,185 +903,18 @@ const ConversationViewComponent = (_a) => {
     }
   };
   const onEndReached = () => {
-    console.log("on end reached");
     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;
-          });
-        }
-      }
-    }
-  }, [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);
-  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;
-          queueMicrotask(() => {
-            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
-              }
-            });
-          });
-          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, (_l = state == null ? void 0 : state.context) == null ? void 0 : _l.channelId, (_m = state == null ? void 0 : state.context) == null ? void 0 : _m.channelMessages, subscribeToMore, safeSend]);
-  const lastProcessedMessageRef = useRef(null);
-  const listViewProps = useMemo(() => ({
-    onEndReached,
-    onEndReachedThreshold: 0.5,
-    onMomentumScrollBegin,
-    removeClippedSubviews: true,
-    initialNumToRender: 10,
-    maxToRenderPerBatch: 7,
-    windowSize: 7,
-    updateCellsBatchingPeriod: 50,
-    keyExtractor: (item) => item._id
-  }), [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: {
+    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;
-  }, [(_n = state == null ? void 0 : state.context) == null ? void 0 : _n.loadingOldMessages]);
+  }, [loadingOldMessages]);
   const renderInputToolbar = useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(InputToolbar, __spreadProps(__spreadValues({}, props), { containerStyle: {
       backgroundColor: "white",
@@ -1350,10 +929,32 @@ const ConversationViewComponent = (_a) => {
       alignItems: "center"
     } }));
   }, []);
+  const imageViewerModal = useMemo(() => /* @__PURE__ */ React__default.createElement(ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent }), [isShowImageViewer, modalContent]);
+  const subscriptionHandler = useMemo(() => /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { channelId: channelId == null ? void 0 : channelId.toString(), subscribeToNewMessages: () => subscribeToMore({
+    document: OnChatMessageAddedDocument,
+    variables: {
+      channelId: channelId == null ? void 0 : channelId.toString()
+    }
+  }) }), [channelId, subscribeToMore, auth == null ? void 0 : auth.id]);
+  const renderChatFooter = useCallback(() => {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, imageViewerModal, subscriptionHandler);
+  }, [imageViewerModal, subscriptionHandler]);
+  const listViewProps = useMemo(() => ({
+    onEndReached,
+    onEndReachedThreshold: 0.5,
+    onMomentumScrollBegin,
+    removeClippedSubviews: true,
+    initialNumToRender: 10,
+    maxToRenderPerBatch: 7,
+    windowSize: 7,
+    updateCellsBatchingPeriod: 50,
+    keyExtractor: (item) => item._id
+  }), [onEndReached, onMomentumScrollBegin]);
   return /* @__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(
+    backgroundColor: "white",
+    position: "relative"
+  } }, messageLoading && /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }), selectedImage ? renderAccessory() : null, /* @__PURE__ */ React__default.createElement(
     GiftedChat,
     {
       ref: messageRootListRef,
@@ -1362,19 +963,13 @@ const ConversationViewComponent = (_a) => {
       messages: messageList,
       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: selectedImage ? 90 : 0
         }
       }),
-      renderFooter: () => safeContextProperty("loading") || safeContextProperty("imageLoading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : null,
+      onSend: handleSend,
+      text: messageText || " ",
+      onInputTextChanged: (text) => setMessageText(text),
+      renderFooter: () => loading && !images.length ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : null,
       scrollToBottom: true,
       user: {
         _id: (auth == null ? void 0 : auth.id) || ""
@@ -1385,14 +980,13 @@ const ConversationViewComponent = (_a) => {
       renderMessageText,
       renderInputToolbar,
       minInputToolbarHeight: 50,
-      renderActions: safeContextProperty("channelId") && renderActions,
-      renderAccessory: !!((_o = state == null ? void 0 : state.context) == null ? void 0 : _o.selectedImage) ? renderAccessory : void 0,
+      renderActions: channelId && renderActions,
       renderMessage,
       renderChatFooter,
       renderLoadEarlier,
-      loadEarlier: ((_p = state == null ? void 0 : state.context) == null ? void 0 : _p.totalCount) > ((_r = (_q = state == null ? void 0 : state.context) == null ? void 0 : _q.channelMessages) == null ? void 0 : _r.length),
-      isLoadingEarlier: (_s = state == null ? void 0 : state.context) == null ? void 0 : _s.loadingOldMessages,
-      bottomOffset: Platform.OS === "ios" ? 10 : 0,
+      loadEarlier: totalCount > channelMessages.length,
+      isLoadingEarlier: loadingOldMessages,
+      bottomOffset: Platform.OS === "ios" ? selectedImage ? 90 : 10 : 0,
       textInputProps: {
         style: {
           borderWidth: 1,
@@ -1436,11 +1030,16 @@ const SubscriptionHandler = ({
 }) => {
   const channelIdRef = useRef(channelId);
   useEffect(() => {
-    if (channelId && channelId !== channelIdRef.current) {
-      channelIdRef.current = channelId;
-      console.log("Setting up subscription for channel:", channelId);
-      return subscribeToNewMessages();
+    if (!channelId) {
+      return;
     }
+    const unsubscribe = subscribeToNewMessages();
+    channelIdRef.current = channelId;
+    return () => {
+      if (unsubscribe && typeof unsubscribe === "function") {
+        unsubscribe();
+      }
+    };
   }, [channelId, subscribeToNewMessages]);
   return null;
 };