@messenger-box/platform-mobile 10.0.3-alpha.16 → 10.0.3-alpha.18

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

@@ -1,4 +1,4 @@
-import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {Spinner,Box,HStack,Image,Button,ButtonText,Avatar,AvatarFallbackText,AvatarImage,Text}from'@admin-layout/gluestack-ui-mobile';import {Platform,TouchableHighlight}from'react-native';import {useNavigation,useIsFocused,useFocusEffect}from'@react-navigation/native';import {navigationRef}from'@common-stack/client-react';import {useSelector}from'react-redux';import {uniqBy,orderBy,startCase}from'lodash-es';import*as ImagePicker from'expo-image-picker';import {encode}from'base-64';import {Ionicons,MaterialCommunityIcons}from'@expo/vector-icons';import {GiftedChat,Actions,MessageText,Send}from'react-native-gifted-chat';import {RoomType,PreDefinedRole}from'common';import {useAddDirectChannelMutation,useSendMessagesMutation,useSendExpoNotificationOnPostMutation,useMessagesQuery,OnChatMessageAddedDocument}from'common/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';var __defProp = Object.defineProperty;
+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;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -46,6 +46,186 @@ 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,
@@ -56,31 +236,95 @@ const ConversationViewComponent = (_a) => {
     "role",
     "isShowThreadMessage"
   ]);
-  var _a2;
+  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 [channelMessages, setChannelMessages] = useState([]);
+  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 [totalCount, setTotalCount] = useState(0);
-  const [selectedImage, setImage] = useState("");
   const currentRoute = navigationRef.isReady() ? (_a2 = navigationRef) == null ? void 0 : _a2.getCurrentRoute() : null;
-  const [channelId, setChannelId] = useState((rest == null ? void 0 : rest.isCreateNewChannel) ? null : ChannelId);
-  const [loadingOldMessages, setLoadingOldMessages] = useState(false);
   const navigation = useNavigation();
-  const [files, setFiles] = useState([]);
-  const [images, setImages] = useState([]);
-  const [msg, setMsg] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
-  const [imageLoading, setImageLoading] = useState(false);
-  const [expoTokens, setExpoTokens] = useState([]);
+  const [selectedImage, setImage] = useState("");
   const [isShowImageViewer, setImageViewer] = useState(false);
   const [imageObject, setImageObject] = useState({});
-  const [skip, setSkip] = useState(0);
   const messageRootListRef = useRef(null);
   const isFocused = useIsFocused();
-  const [addDirectChannel, {
-    loading: addDirectChannaleLoading
-  }] = useAddDirectChannelMutation();
+  const [addDirectChannel] = useAddDirectChannelMutation();
   const {
     startUpload
   } = useUploadFilesNative();
@@ -94,97 +338,457 @@ const ConversationViewComponent = (_a) => {
     subscribeToMore
   } = useMessagesQuery({
     variables: {
-      channelId: channelId == null ? void 0 : channelId.toString(),
+      channelId: (_b2 = state.context.channelId) == null ? void 0 : _b2.toString(),
       parentId: null,
       limit: MESSAGES_PER_PAGE,
-      skip
+      skip: state.context.skip
     },
-    skip: !channelId,
+    skip: !state.context.channelId,
     fetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-first",
-    refetchWritePolicy: "merge"
+    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);
+      }
+    },
+    onError: (error) => {
+      console.error("MESSAGE QUERY ERROR:", error);
+    }
   });
+  const fetchMessagesDirectly = useCallback(async () => {
+    var _a3;
+    const channelId = safeGetContext().channelId;
+    if (!channelId) {
+      console.warn("Cannot fetch messages: No channel ID");
+      return;
+    }
+    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
+      });
+    }
+  }, [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
+        }
+      });
+      if (!((_c2 = (_b3 = response == null ? void 0 : response.data) == null ? void 0 : _b3.messages) == null ? void 0 : _c2.data)) {
+        return {
+          error: "No messages returned"
+        };
+      }
+      return {
+        messages: response.data.messages.data
+      };
+    } catch (error) {
+      return {
+        error: String(error)
+      };
+    }
+  }, [state.context.channelId, state.context.channelMessages.length, fetchMoreMessages]);
+  const sendMessageImpl = useCallback(async () => {
+    var _a3;
+    try {
+      const notificationData = {
+        url: config.INBOX_MESSEGE_PATH,
+        params: {
+          channelId: state.context.channelId,
+          hideTabBar: true
+        },
+        screen: "DialogMessages",
+        other: {
+          sound: Platform.OS === "android" ? void 0 : "default"
+        }
+      };
+      const response = await sendMsg({
+        variables: {
+          channelId: state.context.channelId,
+          content: state.context.messageText,
+          notificationParams: notificationData
+        }
+      });
+      return {
+        message: (_a3 = response.data) == null ? void 0 : _a3.sendMessage
+      };
+    } catch (error) {
+      return {
+        error: String(error)
+      };
+    }
+  }, [state.context.channelId, state.context.messageText, sendMsg]);
+  const onSelectImages = async () => {
+    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
+    safeSend({
+      type: Actions.START_LOADING
+    });
+    try {
+      console.log("Starting image picker...");
+      let imageSource = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [4, 3],
+        quality: 0.8,
+        base64: true,
+        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];
+        if (!selectedAsset) {
+          console.error("No asset found in selected image");
+          safeSend({
+            type: Actions.STOP_LOADING
+          });
+          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]
+          }
+        });
+        console.log("Image state updated successfully");
+      } else {
+        console.log("Image selection cancelled");
+        safeSend({
+          type: Actions.STOP_LOADING
+        });
+      }
+    } catch (error) {
+      console.error("Error selecting image:", error);
+      safeSend({
+        type: Actions.STOP_LOADING
+      });
+    }
+  };
+  const sendMessageWithFileImpl = useCallback(async () => {
+    var _a3, _b3, _c2, _d2, _e2, _f2;
+    try {
+      console.log("Executing sendMessageWithFileImpl");
+      const postId = objectId();
+      console.log("Generated postId for file upload:", postId);
+      const notificationData = {
+        url: config.INBOX_MESSEGE_PATH,
+        params: {
+          channelId: state.context.channelId,
+          hideTabBar: true
+        },
+        screen: "DialogMessages",
+        other: {
+          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
+          }
+        },
+        createUploadLink: {
+          variables: {
+            postId
+          }
+        }
+      });
+      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) => {
+        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)) + "..."
+          }));
+        }
+        setTimeout(() => {
+          safeSend({
+            type: Actions.CLEAR_IMAGE
+          });
+        }, 100);
+      } else {
+        console.error("Failed to send message with file:", response == null ? void 0 : response.errors);
+      }
+      return {
+        message: (_f2 = response.data) == null ? void 0 : _f2.sendMessage
+      };
+    } catch (error) {
+      console.error("Error in sendMessageWithFileImpl:", error);
+      return {
+        error: String(error)
+      };
+    }
+  }, [state.context.channelId, state.context.messageText, state.context.images, startUpload, sendMsg, safeSend]);
+  const createDirectChannelImpl = useCallback(async () => {
+    var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2;
+    try {
+      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)) {
+        return {
+          error: "Invalid channel data"
+        };
+      }
+      const response = await addDirectChannel({
+        variables: {
+          receiver: [...(_f2 = (_e2 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _e2.userIds) != null ? _f2 : []],
+          displayName: "DIRECT CHANNEL"
+        }
+      });
+      if (!((_h2 = (_g2 = response == null ? void 0 : response.data) == null ? void 0 : _g2.createDirectChannel) == null ? void 0 : _h2.id)) {
+        return {
+          error: "Failed to create channel"
+        };
+      }
+      const newChannelId = response.data.createDirectChannel.id;
+      const notificationData = {
+        url: config.INBOX_MESSEGE_PATH,
+        params: {
+          channelId: newChannelId,
+          hideTabBar: true
+        },
+        screen: "DialogMessages",
+        other: {
+          sound: Platform.OS === "android" ? void 0 : "default"
+        }
+      };
+      await sendMsg({
+        variables: {
+          channelId: newChannelId,
+          content: state.context.messageText,
+          notificationParams: notificationData
+        }
+      });
+      return {
+        channelId: newChannelId
+      };
+    } catch (error) {
+      return {
+        error: String(error)
+      };
+    }
+  }, [rest, state.context.messageText, addDirectChannel, sendMsg]);
+  useEffect(() => {
+  }, [state.value, sendMsg, refetch, fetchMoreMessages, addDirectChannel, startUpload, rest, state.context]);
   React__default.useEffect(() => {
     return () => {
-      setChannelMessages([]);
+      send({
+        type: Actions.CLEAR_MESSAGES
+      });
     };
   }, []);
   useFocusEffect(React__default.useCallback(() => {
-    setSkip(0);
-    if (channelId) {
-      refetch({
-        channelId: channelId == null ? void 0 : channelId.toString(),
-        parentId: null,
-        limit: MESSAGES_PER_PAGE,
-        skip: 0
-      }).then(({
-        data: data2
-      }) => {
-        if (!(data2 == null ? void 0 : data2.messages)) {
-          return;
+    if (state.context.channelId) {
+      send({
+        type: Actions.INITIAL_CONTEXT,
+        data: {
+          channelId: state.context.channelId
         }
-        const {
-          data: messages,
-          totalCount: totalCount2
-        } = data2.messages;
-        setTotalCount(totalCount2);
-        setChannelMessages(messages);
       });
     }
     return () => {
-      setChannelId(null);
-      setTotalCount(0);
-      setSkip(0);
+      send({
+        type: Actions.CLEAR_MESSAGES
+      });
     };
-  }, [channelId, isFocused]));
+  }, [state.context.channelId, isFocused]));
   React__default.useEffect(() => {
     var _a3;
     const currentChannelId = ChannelId || ((_a3 = currentRoute == null ? void 0 : currentRoute.params) == null ? void 0 : _a3.channelId);
-    setChannelId(currentChannelId);
+    if (currentChannelId) {
+      console.log("Setting initial channel ID:", currentChannelId);
+      send({
+        type: Actions.INITIAL_CONTEXT,
+        data: {
+          channelId: currentChannelId
+        }
+      });
+    }
   }, [ChannelId, currentRoute]);
   React__default.useEffect(() => {
-    if (selectedImage)
-      setImageLoading(false);
-  }, [selectedImage]);
+    if (state.context.selectedImage) {
+      send({
+        type: Actions.STOP_LOADING
+      });
+    }
+  }, [state.context.selectedImage]);
   useEffect(() => {
-    var _a3;
+    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: messeageTotalCount
+        totalCount: messageTotalCount
       } = data.messages;
-      console.log("messeageTotalCount", messeageTotalCount, " totalCount=", totalCount);
-      if (messages && messages.length > 0 && messeageTotalCount > totalCount || messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0)) {
-        setChannelMessages((oldMessages) => uniqBy([...messages, ...oldMessages], ({
-          id
-        }) => id));
-        setTotalCount(messeageTotalCount);
-      }
-      if (loadingOldMessages && channelMessages)
-        setLoadingOldMessages(false);
-    }
-  }, [data, loadingOldMessages, channelMessages, totalCount]);
-  const onFetchOld = useCallback(async () => {
-    if (totalCount > channelMessages.length && !loadingOldMessages) {
-      setLoadEarlierMsg(true);
-      try {
-        const response = await fetchMoreMessages({
-          variables: {
-            channelId: channelId == null ? void 0 : channelId.toString(),
-            parentId: null,
-            skip: channelMessages.length
+      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 (response == null ? void 0 : response.data) {
-          setSkip(channelMessages.length);
-          setLoadEarlierMsg(false);
-          setLoadingOldMessages(true);
+        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
+          }));
         }
-      } catch (error) {
-        setLoadEarlierMsg(false);
+        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);
       }
     }
-  }, [totalCount, channelMessages]);
+  }, [data]);
+  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)) {
+      fetchOldDebounceRef.current = true;
+      send({
+        type: Actions.FETCH_MORE_MESSAGES
+      });
+      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);
   const isCloseToTop = ({
     layoutMeasurement,
     contentOffset,
@@ -193,245 +797,176 @@ const ConversationViewComponent = (_a) => {
     const paddingToTop = 60;
     return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
   };
-  const dataURLtoFile = (dataurl, filename) => {
-    var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = encode(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n);
+  const 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;
     }
-    return new File([u8arr], filename, {
-      type: mime
-    });
-  };
-  const onSelectImages = async () => {
-    var _a3;
-    setImageLoading(true);
-    let imageSource = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      allowsEditing: true,
-      aspect: [4, 3],
-      quality: 1,
-      base64: true
-    });
-    if (!imageSource.canceled) {
-      const image = "data:image/jpeg;base64," + ((_a3 = imageSource == null ? void 0 : imageSource.assets[0]) == null ? void 0 : _a3.base64);
-      setImage(image);
-      const file = dataURLtoFile(image, "inputImage.jpg");
-      setFiles((files2) => files2.concat(file));
-      setImages((images2) => images2.concat(imageSource == null ? void 0 : imageSource.assets[0]));
-    }
-    if (imageSource.canceled)
-      setLoading(false);
-  };
-  const createDirectChannel = useCallback((msg2) => {
-    var _a3, _b2, _c, _d, _e, _f, _g, _h;
-    if ((rest == null ? void 0 : rest.isCreateNewChannel) && ((_a3 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _a3.type) === ((_b2 = RoomType) == null ? void 0 : _b2.Direct) && ((_d = (_c = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _c.userIds) == null ? void 0 : _d.length) > 0) {
-      (_h = (_g = addDirectChannel({
-        variables: {
-          receiver: [...(_f = (_e = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _e.userIds) != null ? _f : []],
-          displayName: "DIRECT CHANNEL"
-        }
-      })) == null ? void 0 : _g.then(async (res) => {
-        var _a4, _b3, _c2, _d2, _e2, _f2, _g2, _h2;
-        if ((_b3 = (_a4 = res == null ? void 0 : res.data) == null ? void 0 : _a4.createDirectChannel) == null ? void 0 : _b3.id) {
-          setChannelId((_d2 = (_c2 = res == null ? void 0 : res.data) == null ? void 0 : _c2.createDirectChannel) == null ? void 0 : _d2.id);
-          const notificationData = {
-            url: config.INBOX_MESSEGE_PATH,
-            params: {
-              channelId: (_f2 = (_e2 = res == null ? void 0 : res.data) == null ? void 0 : _e2.createDirectChannel) == null ? void 0 : _f2.id,
-              hideTabBar: true
-            },
-            screen: "DialogMessages",
-            other: {
-              sound: Platform.OS === "android" ? void 0 : "default"
-            }
-          };
-          setLoading(true);
-          await sendMsg({
-            variables: {
-              channelId: (_h2 = (_g2 = res == null ? void 0 : res.data) == null ? void 0 : _g2.createDirectChannel) == null ? void 0 : _h2.id,
-              content: msg2,
-              notificationParams: notificationData
-            },
-            update: (cache, {
-              data: data2,
-              errors
-            }) => {
-              if (!data2 || errors) {
-                setLoading(false);
-                return;
-              }
-              setChannelToTop(channelToTop + 1);
-              setLoading(false);
-              setMsg("");
-            }
-          });
-        }
-      })) == null ? void 0 : _h.catch((e) => console.log("error", JSON.stringify(e)));
+    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;
     }
-  }, [rest]);
-  const handleSend = useCallback(async (message) => {
-    var _a3;
-    if (!channelId)
+    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 (!message && message != " " && images.length == 0)
+    }
+    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;
-    const notificationData = {
-      url: config.INBOX_MESSEGE_PATH,
-      params: {
-        channelId,
-        hideTabBar: true
-      },
-      screen: "DialogMessages",
-      other: {
-        sound: Platform.OS === "android" ? void 0 : "default"
-      }
-    };
-    if (images && images.length > 0) {
-      const postId = objectId();
-      setLoading(true);
-      const uploadResponse = await startUpload({
-        file: images,
-        saveUploadedFile: {
-          variables: {
-            postId
-          }
-        },
-        createUploadLink: {
-          variables: {
-            postId
-          }
-        }
+    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 (uploadResponse == null ? void 0 : uploadResponse.error)
-        setLoading(false);
-      const uploadedFiles = uploadResponse.data;
-      if (uploadResponse.data) {
-        setImage("");
-        setFiles([]);
-        setImages([]);
-        const files2 = (_a3 = uploadedFiles == null ? void 0 : uploadedFiles.map((f) => f.id)) != null ? _a3 : null;
-        await sendMsg({
-          variables: {
-            postId,
-            channelId,
-            content: message,
-            files: files2,
-            notificationParams: notificationData
-          },
-          update: (cache, {
-            data: data2,
-            errors
-          }) => {
-            if (!data2 || errors) {
-              setLoading(false);
-              return;
-            }
-            const newMessage = data2 == null ? void 0 : data2.sendMessage;
-            setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-              id
-            }) => id));
-            setTotalCount((t) => t + 1);
-            setChannelToTop(channelToTop + 1);
-            setLoading(false);
-            setMsg("");
+      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
           }
         });
       }
-    } else {
-      setLoading(true);
-      await sendMsg({
-        variables: {
-          channelId,
-          content: message,
-          notificationParams: notificationData
-        },
-        update: (cache, {
-          data: data2,
-          errors
-        }) => {
-          if (!data2 || errors) {
-            setLoading(false);
-            return;
-          }
-          const newMessage = data2 == null ? void 0 : data2.sendMessage;
-          setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-            id
-          }) => id));
-          setTotalCount((t) => t + 1);
-          setChannelToTop(channelToTop + 1);
-          setLoading(false);
-          setMsg("");
-        }
-      });
+    } 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);
     }
-  }, [setChannelMessages, channelId, images, channelToTop, expoTokens]);
+    return () => {
+      if (timeoutId)
+        clearTimeout(timeoutId);
+    };
+  }, [state.context.channelId, state.context.channelMessages, fetchMessagesWithFallback]);
   const messageList = useMemo(() => {
-    let res = [];
-    const filteredMessages = channelMessages && (channelMessages == null ? void 0 : channelMessages.length) > 0 ? uniqBy([...channelMessages], ({
+    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 [];
+    }
+    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, ({
       id
-    }) => id) : [];
-    if (channelId && (filteredMessages == null ? void 0 : filteredMessages.length) > 0) {
-      orderBy(channelMessages, ["createdAt"], ["desc"]).map((msg2) => {
-        var _a3, _b2, _c, _d;
-        let message = {
-          _id: "",
-          text: "",
-          createdAt: 0,
-          user: {
-            _id: "",
-            name: "",
-            avatar: ""
-          },
-          type: ""
-        };
-        const date = new Date(msg2.createdAt);
-        message._id = msg2.id;
-        message.text = msg2.message;
-        message.createdAt = date;
-        message.user = {
-          _id: msg2.author.id,
-          name: msg2.author.givenName + " " + msg2.author.familyName,
-          avatar: (_a3 = msg2.author) == null ? void 0 : _a3.picture
-        }, message.image = (_c = (_b2 = msg2.files) == null ? void 0 : _b2.data[0]) == null ? void 0 : _c.url, message.sent = msg2 == null ? void 0 : msg2.isDelivered, message.received = msg2 == null ? void 0 : msg2.isRead;
-        message.type = msg2 == null ? void 0 : msg2.type;
-        message.propsConfiguration = msg2 == null ? void 0 : msg2.propsConfiguration;
-        message.replies = (_d = msg2 == null ? void 0 : msg2.replies) != null ? _d : [];
-        message.isShowThreadMessage = isShowThreadMessage;
-        res.push(message);
-      });
+    }) => id);
+    if (filteredMessages.length === 0) {
+      return [];
     }
-    return (res == null ? void 0 : res.length) > 0 ? uniqBy([...res], ({
-      _id
-    }) => _id) : [];
-  }, [channelMessages, channelId]);
-  const renderSend = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Send, __spreadProps(__spreadValues({}, props), { disabled: channelId || (rest == null ? void 0 : rest.isCreateNewChannel) ? false : true }), /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(MaterialCommunityIcons, { name: "send-circle", style: {
-      marginBottom: 5,
-      marginRight: 5
-    }, size: 32, color: channelId || (rest == null ? void 0 : rest.isCreateNewChannel) ? "#2e64e5" : "#b8b2b2" })));
-  };
-  const renderMessageText = (props) => {
-    var _a3, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U;
+    return orderBy(filteredMessages, ["createdAt"], ["desc"]).map((msg) => {
+      var _a4, _b4, _c3, _d3, _e3, _f3;
+      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);
+        }
+      }
+      return {
+        _id: msg.id,
+        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) || ""
+        },
+        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: (_f3 = msg == null ? void 0 : msg.replies) != null ? _f3 : [],
+        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]);
+  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;
     const {
       currentMessage
     } = props;
-    const lastReply = ((_b2 = (_a3 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _a3.data) == null ? void 0 : _b2.length) > 0 ? (_d = (_c = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _c.data) == null ? void 0 : _d[0] : null;
+    const lastReply = ((_b3 = (_a3 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _a3.data) == null ? void 0 : _b3.length) > 0 ? (_d2 = (_c2 = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _c2.data) == null ? void 0 : _d2[0] : null;
     if (currentMessage.type === "ALERT") {
-      const attachment = (_f = (_e = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _e.contents) == null ? void 0 : _f.attachment;
+      const attachment = (_f2 = (_e2 = currentMessage == null ? void 0 : currentMessage.propsConfiguration) == null ? void 0 : _e2.contents) == null ? void 0 : _f2.attachment;
       let action = "";
       let actionId = "";
       let params = {};
-      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;
+      if ((_g2 = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _g2.extraParams) {
+        const extraParams = (_h2 = attachment == null ? void 0 : attachment.callToAction) == null ? void 0 : _h2.extraParams;
+        const route = (_i2 = extraParams == null ? void 0 : extraParams.route) != null ? _i2 : null;
         let path = null;
         let param = null;
         if (role && role == PreDefinedRole.Guest) {
-          path = ((_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;
+          path = ((_j2 = route == null ? void 0 : route.guest) == null ? void 0 : _j2.name) ? (_l2 = (_k2 = route == null ? void 0 : route.guest) == null ? void 0 : _k2.name) != null ? _l2 : null : null;
+          param = ((_m2 = route == null ? void 0 : route.guest) == null ? void 0 : _m2.params) ? (_o2 = (_n2 = route == null ? void 0 : route.guest) == null ? void 0 : _n2.params) != null ? _o2 : null : null;
         } else if (role && role == PreDefinedRole.Owner) {
-          path = ((_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;
+          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;
         } 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;
@@ -445,16 +980,7 @@ const ConversationViewComponent = (_a) => {
           reservationId: actionId
         };
       }
-      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (attachment == null ? void 0 : attachment.callToAction) && action ? /* @__PURE__ */ React__default.createElement(Box, { className: `bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2` }, /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          variant: "outline",
-          size: "sm",
-          className: `border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`,
-          onPress: () => action && params && navigation.navigate(action, params)
-        },
-        /* @__PURE__ */ React__default.createElement(ButtonText, { className: `color-[${CALL_TO_ACTION_TEXT_COLOR}]` }, attachment.callToAction.title)
-      ), /* @__PURE__ */ React__default.createElement(MessageText, __spreadProps(__spreadValues({}, props), { textStyle: {
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (attachment == null ? void 0 : attachment.callToAction) && action ? /* @__PURE__ */ React__default.createElement(Box, { className: `bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2` }, /* @__PURE__ */ React__default.createElement(Button, { variant: "outline", size: "sm", className: `border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`, 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: {
         left: {
           marginLeft: 5,
           color: CALL_TO_ACTION_TEXT_COLOR,
@@ -463,9 +989,10 @@ 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,
+            channelId: (_a4 = state == null ? void 0 : state.context) == null ? void 0 : _a4.channelId,
             title: "Message",
             postParentId: currentMessage == null ? void 0 : currentMessage._id,
             isPostParentIdThread: true
@@ -475,16 +1002,16 @@ const ConversationViewComponent = (_a) => {
           marginLeft: 5
         }
       } })), ((_E = (_D = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _D.data) == null ? void 0 : _E.length) > 0 && /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-1 items-center" }, /* @__PURE__ */ React__default.createElement(HStack, null, (_J = (_I = (_H = (_G = (_F = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _F.data) == null ? void 0 : _G.filter((v, i, a) => a.findIndex((t) => {
-        var _a4, _b3;
-        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b3 = v == null ? void 0 : v.author) == null ? void 0 : _b3.id);
+        var _a4, _b4;
+        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b4 = v == null ? void 0 : v.author) == null ? void 0 : _b4.id);
       }) === i)) == null ? void 0 : _H.slice(0, 2)) == null ? void 0 : _I.reverse()) == null ? void 0 : _J.map((p, i) => {
-        var _a4, _b3, _c2;
-        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversations-view-key-" + i, size: "sm", className: "bg-transparent" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b3 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b3.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
+        var _a4, _b4, _c3;
+        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversations-view-key-" + i, size: "sm", className: "bg-transparent" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b4 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b4.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
           borderRadius: 6,
           borderWidth: 2,
           borderColor: "#fff"
         }, source: {
-          uri: (_c2 = p == null ? void 0 : p.author) == null ? void 0 : _c2.picture
+          uri: (_c3 = p == null ? void 0 : p.author) == null ? void 0 : _c3.picture
         } }));
       })), /* @__PURE__ */ React__default.createElement(Text, { style: {
         fontSize: 12
@@ -495,9 +1022,10 @@ 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,
+            channelId: (_a4 = state == null ? void 0 : state.context) == null ? void 0 : _a4.channelId,
             title: "Message",
             postParentId: currentMessage == null ? void 0 : currentMessage._id,
             isPostParentIdThread: true
@@ -507,16 +1035,16 @@ const ConversationViewComponent = (_a) => {
           marginLeft: 5
         }
       } })), ((_N = (_M = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _M.data) == null ? void 0 : _N.length) > 0 && /* @__PURE__ */ React__default.createElement(HStack, { space: "sm", className: "px-1 items-center" }, /* @__PURE__ */ React__default.createElement(HStack, null, (_S = (_R = (_Q = (_P = (_O = currentMessage == null ? void 0 : currentMessage.replies) == null ? void 0 : _O.data) == null ? void 0 : _P.filter((v, i, a) => a.findIndex((t) => {
-        var _a4, _b3;
-        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b3 = v == null ? void 0 : v.author) == null ? void 0 : _b3.id);
+        var _a4, _b4;
+        return ((_a4 = t == null ? void 0 : t.author) == null ? void 0 : _a4.id) === ((_b4 = v == null ? void 0 : v.author) == null ? void 0 : _b4.id);
       }) === i)) == null ? void 0 : _Q.slice(0, 2)) == null ? void 0 : _R.reverse()) == null ? void 0 : _S.map((p, i) => {
-        var _a4, _b3, _c2;
-        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversation-replies-key-" + i, className: "bg-transparent", size: "sm" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b3 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b3.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
+        var _a4, _b4, _c3;
+        return /* @__PURE__ */ React__default.createElement(Avatar, { key: "conversation-replies-key-" + i, className: "bg-transparent", size: "sm" }, /* @__PURE__ */ React__default.createElement(AvatarFallbackText, null, startCase((_b4 = (_a4 = p == null ? void 0 : p.author) == null ? void 0 : _a4.username) == null ? void 0 : _b4.charAt(0))), /* @__PURE__ */ React__default.createElement(AvatarImage, { alt: "user image", style: {
           borderRadius: 6,
           borderWidth: 2,
           borderColor: "#fff"
         }, source: {
-          uri: (_c2 = p == null ? void 0 : p.author) == null ? void 0 : _c2.picture
+          uri: (_c3 = p == null ? void 0 : p.author) == null ? void 0 : _c3.picture
         } }));
       })), /* @__PURE__ */ React__default.createElement(Text, { style: {
         fontSize: 12
@@ -524,27 +1052,88 @@ 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, __spreadProps(__spreadValues({}, props), { icon: () => /* @__PURE__ */ React__default.createElement(Ionicons, { name: "image", size: 30, color: "black", onPress: onSelectImages }) }));
-  };
-  const renderAccessory = (props) => {
-    return /* @__PURE__ */ React__default.createElement(Box, null, selectedImage !== "" ? /* @__PURE__ */ React__default.createElement(HStack, { className: "items-center" }, /* @__PURE__ */ React__default.createElement(Image, { key: selectedImage, alt: "image", source: {
-      uri: selectedImage
-    }, size: "xs", className: "ml-3" }), /* @__PURE__ */ React__default.createElement(
-      Button,
-      {
-        variant: "solid",
-        className: "bg-transparent",
-        onPress: () => {
-          setFiles([]);
-          setImage("");
-          setImages([]);
+    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
         }
-      },
-      /* @__PURE__ */ React__default.createElement(ButtonText, { className: "color-black" }, "Cancel")
-    )) : null);
+      })
+    );
   };
+  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",
+      flexDirection: "row",
+      alignItems: "center",
+      margin: 0,
+      paddingBottom: 0,
+      paddingTop: 5,
+      position: "absolute",
+      bottom: 0,
+      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,
+      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]);
   const setImageViewerObject = (obj, v) => {
     setImageObject(obj);
     setImageViewer(v);
@@ -556,22 +1145,13 @@ const ConversationViewComponent = (_a) => {
       image,
       _id
     } = imageObject;
-    return /* @__PURE__ */ React__default.createElement(
-      CachedImage,
-      {
-        style: {
-          width: "100%",
-          height: "100%"
-        },
-        resizeMode: "cover",
-        cacheKey: `${_id}-slack-bubble-imageKey`,
-        source: {
-          uri: image,
-          expiresIn: 86400
-        },
-        alt: "image"
-      }
-    );
+    return /* @__PURE__ */ React__default.createElement(CachedImage, { style: {
+      width: "100%",
+      height: "100%"
+    }, resizeMode: "cover", cacheKey: `${_id}-slack-bubble-imageKey`, source: {
+      uri: image,
+      expiresIn: 86400
+    }, alt: "image" });
   }, [imageObject]);
   const renderMessage = useCallback((props) => {
     return /* @__PURE__ */ React__default.createElement(Message, __spreadProps(__spreadValues({}, props), { isShowImageViewer, setImageViewer: setImageViewerObject }));
@@ -581,9 +1161,8 @@ const ConversationViewComponent = (_a) => {
     nativeEvent
   }) => {
     onScroll = true;
-    console.log("scroll top");
-    if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > (channelMessages == null ? void 0 : channelMessages.length)) {
-      await onFetchOld();
+    if (isCloseToTop(nativeEvent)) {
+      onFetchOld();
     }
   };
   const onEndReached = () => {
@@ -592,65 +1171,260 @@ const ConversationViewComponent = (_a) => {
       return;
     onScroll = false;
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, loadEarlierMsg && /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }), /* @__PURE__ */ React__default.createElement(
+  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;
+          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);
+  const listViewProps = useMemo(() => ({
+    onEndReached,
+    onEndReachedThreshold: 0.5,
+    onMomentumScrollBegin,
+    removeClippedSubviews: true,
+    initialNumToRender: 10,
+    maxToRenderPerBatch: 10,
+    windowSize: 10
+  }), [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"
+    } }));
+  }, []);
+  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(
     GiftedChat,
     {
       ref: messageRootListRef,
-      wrapInSafeArea: false,
-      renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }),
+      wrapInSafeArea: true,
+      renderLoading: () => /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }),
       messages: messageList,
-      listViewProps: {
-        onEndReached,
-        onEndReachedThreshold: 0.5,
-        onMomentumScrollBegin
-      },
-      onSend: (messages) => {
-        var _a3, _b2, _c, _d, _e, _f;
-        return (rest == null ? void 0 : rest.isCreateNewChannel) && !channelId ? ((_a3 = rest == null ? void 0 : rest.newChannelData) == null ? void 0 : _a3.type) === ((_b2 = RoomType) == null ? void 0 : _b2.Direct) ? createDirectChannel((_d = (_c = messages[0]) == null ? void 0 : _c.text) != null ? _d : " ") : null : channelId && handleSend((_f = (_e = messages[0]) == null ? void 0 : _e.text) != null ? _f : " ");
-      },
-      text: msg ? msg : " ",
-      onInputTextChanged: (text) => setMsg(text),
-      renderFooter: () => loading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }) : imageLoading ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "$blue500" }) : "",
+      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
+        }
+      }),
+      renderFooter: () => safeContextProperty("loading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : safeContextProperty("imageLoading") ? /* @__PURE__ */ React__default.createElement(Spinner, { color: "#3b82f6" }) : "",
       scrollToBottom: true,
       user: {
         _id: (auth == null ? void 0 : auth.id) || ""
       },
-      isTyping: true,
-      alwaysShowSend: loading ? false : true,
+      isTyping: false,
+      alwaysShowSend: true,
       renderSend,
       renderMessageText,
+      renderInputToolbar,
       minInputToolbarHeight: 50,
-      renderActions: channelId && renderActions,
-      renderAccessory,
+      renderActions: safeContextProperty("channelId") && renderActions,
+      renderAccessory: !!((_p = state == null ? void 0 : state.context) == null ? void 0 : _p.selectedImage) ? renderAccessory : void 0,
       renderMessage,
-      renderChatFooter: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(ImageViewerModal, { isVisible: isShowImageViewer, setVisible: setImageViewer, modalContent }), /* @__PURE__ */ React__default.createElement(SubscriptionHandler, { channelId: channelId == null ? void 0 : channelId.toString(), subscribeToNewMessages: () => subscribeToMore({
-        document: OnChatMessageAddedDocument,
-        variables: {
-          channelId: channelId == null ? void 0 : channelId.toString()
+      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
         },
-        updateQuery: (prev, {
-          subscriptionData
-        }) => {
-          var _a3, _b2, _c, _d, _e;
-          if (!subscriptionData.data)
-            return prev;
-          setSkip(0);
-          const newMessage = (_a3 = subscriptionData == null ? void 0 : subscriptionData.data) == null ? void 0 : _a3.chatMessageAdded;
-          ((_b2 = prev == null ? void 0 : prev.messages) == null ? void 0 : _b2.data) ? [...prev.messages.data, newMessage] : [];
-          const totalMsgCount = ((_c = prev == null ? void 0 : prev.messages) == null ? void 0 : _c.totalCount) + 1;
-          setChannelMessages((oldMessages) => uniqBy([...oldMessages, newMessage], ({
-            id
-          }) => id));
-          setTotalCount(totalMsgCount);
-          const merged = __spreadProps(__spreadValues({}, prev), {
-            messages: __spreadProps(__spreadValues({}, prev == null ? void 0 : prev.messages), {
-              data: [...(_e = (_d = prev == null ? void 0 : prev.messages) == null ? void 0 : _d.data) != null ? _e : [], newMessage],
-              totalCount: totalMsgCount
-            })
-          });
-          return merged;
-        }
-      }) })),
+        multiline: true,
+        returnKeyType: "default",
+        enablesReturnKeyAutomatically: true,
+        placeholderTextColor: colors.gray[400]
+      },
+      minComposerHeight: 36,
+      maxComposerHeight: 100,
+      isKeyboardInternallyHandled: true,
+      placeholder: "Type a message...",
       lightboxProps: {
         underlayColor: "transparent",
         springConfig: {
@@ -658,7 +1432,8 @@ const ConversationViewComponent = (_a) => {
           friction: 9e4
         },
         disabled: true
-      }
+      },
+      infiniteScroll: false
     }
   ));
 };