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

package/src/screens/inbox/containers/ConversationView.tsx

@@ -11,6 +11,7 @@ import {
     Image,
     Spinner,
     Text,
+    Skeleton,
 } from '@admin-layout/gluestack-ui-mobile';
 import { Platform, TouchableHighlight, SafeAreaView, View } from 'react-native';
 import { useFocusEffect, useIsFocused, useNavigation } from '@react-navigation/native';
@@ -21,7 +22,7 @@ import * as ImagePicker from 'expo-image-picker';
 import { encode as atob } from 'base-64';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
 import { Actions, GiftedChat, IMessage, MessageText, Send, Composer, InputToolbar } from 'react-native-gifted-chat';
-import { PreDefinedRole, RoomType, IExpoNotificationData, IFileInfo } from 'common';
+import { PreDefinedRole, RoomType, IExpoNotificationData, IFileInfo, FileRefType, PostTypeEnum } from 'common';
 import {
     OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
     useMessagesQuery,
@@ -29,6 +30,7 @@ import {
     useSendMessagesMutation,
     useViewChannelDetailQuery,
     useAddDirectChannelMutation,
+    MessagesDocument,
 } from 'common/graphql';
 import { useUploadFilesNative } from '@messenger-box/platform-client';
 import { objectId } from '@messenger-box/core';
@@ -37,13 +39,8 @@ import { format, isToday, isYesterday } from 'date-fns';
 import { ImageViewerModal, SlackMessage } from '../components/SlackMessageContainer';
 import CachedImage from '../components/CachedImage';
 import { config } from '../config';
-import {
-    conversationXstate,
-    Actions as ConversationActions,
-    BaseState,
-    MainState,
-} from './workflow/conversation-xstate';
 import colors from 'tailwindcss/colors';
+import { v4 as uuidv4 } from 'uuid';
 
 // Define an extended interface for ImagePickerAsset with url property
 interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
@@ -90,477 +87,241 @@ export interface AlertMessageAttachmentsInterface {
     };
 }
 
-// Create a safer version of useMachine to handle potential errors
-function useSafeMachine(machine) {
-    // Define the state type
-    interface SafeStateType {
-        context: {
-            channelId: any;
-            channelMessages: any[];
-            totalCount: number;
-            skip: number;
-            loading: boolean;
-            loadingOldMessages: boolean;
-            error: any;
-            selectedImage: string;
-            files: any[];
-            images: any[];
-            messageText: string;
-            imageLoading: boolean;
-        };
-        value: string;
-        matches?: (stateValue: string) => boolean;
-    }
-
-    // Initialize with default state
-    const [state, setState] = useState<SafeStateType>({
-        context: {
-            channelId: null,
-            channelMessages: [],
-            totalCount: 0,
-            skip: 0,
-            loading: false,
-            loadingOldMessages: false,
-            error: null,
-            selectedImage: '',
-            files: [],
-            images: [],
-            messageText: '',
-            imageLoading: false,
-        },
-        value: 'idle',
-    });
-
-    // Create a safe send function
-    const send = useCallback((event) => {
-        try {
-            // Log event for debugging
-            console.log('Event received:', event.type);
-
-            // Handle specific events manually
-            if (event.type === ConversationActions.INITIAL_CONTEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelId: event.data?.channelId || null,
-                    },
-                    value: BaseState.FetchMessages,
-                }));
-            } else if (event.type === ConversationActions.SET_CHANNEL_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelMessages: event.data?.messages || [],
-                        totalCount: event.data?.totalCount || 0,
-                        loading: false,
-                        loadingOldMessages: false,
-                    },
-                    value: 'active',
-                }));
-            } else if (event.type === ConversationActions.CLEAR_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelMessages: [],
-                        totalCount: 0,
-                    },
-                }));
-            } else if (event.type === ConversationActions.SET_MESSAGE_TEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        messageText: event.data?.messageText || '',
-                    },
-                }));
-            } else if (event.type === ConversationActions.FETCH_MORE_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loadingOldMessages: true,
-                    },
-                    value: MainState.FetchMoreMessages,
-                }));
-            } else if (event.type === ConversationActions.SET_IMAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedImage: event.data?.image || '',
-                        images: event.data?.images || [],
-                        imageLoading: false,
-                    },
-                }));
-            } else if (event.type === ConversationActions.CLEAR_IMAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedImage: '',
-                        images: [],
-                    },
-                }));
-            } else if (event.type === ConversationActions.START_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                }));
-            } else if (event.type === ConversationActions.STOP_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                    },
-                }));
-            } else if (event.type === ConversationActions.SEND_MESSAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                    value: MainState.SendMessage,
-                }));
-            } else if (event.type === ConversationActions.SEND_MESSAGE_WITH_FILE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                    value: MainState.SendMessageWithFile,
-                }));
-            } else if (event.type === ConversationActions.CREATE_DIRECT_CHANNEL) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                    value: MainState.CreateDirectChannel,
-                }));
-            } else if (event.type === 'SEND_MESSAGE_SUCCESS' || event.type === 'SEND_MESSAGE_WITH_FILE_SUCCESS') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        messageText: '',
-                        images: [],
-                        selectedImage: '',
-                    },
-                    value: 'active',
-                }));
-            } else if (event.type === 'CREATE_DIRECT_CHANNEL_SUCCESS') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        channelId: event.data?.channelId || prev.context.channelId,
-                        messageText: '',
-                    },
-                    value: BaseState.FetchMessages,
-                }));
-            } else if (event.type === 'FETCH_MORE_MESSAGES_SUCCESS') {
-                setState((prev) => {
-                    const newMessages = event.data?.messages || [];
-                    return {
-                        ...prev,
-                        context: {
-                            ...prev.context,
-                            loadingOldMessages: false,
-                            channelMessages: uniqBy([...prev.context.channelMessages, ...newMessages], ({ id }) => id),
-                        },
-                        value: 'active',
-                    };
-                });
-            } else if (event.type === 'ERROR') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        loadingOldMessages: false,
-                        error: event.data?.message || 'Unknown error',
-                    },
-                    value: 'error',
-                }));
-            }
-        } catch (error) {
-            console.error('Error in send function:', error);
-        }
-    }, []);
-
-    // Add a custom matches function to the state
-    const stateWithMatches = useMemo(() => {
-        return {
-            ...state,
-            matches: (checkState) => {
-                return state.value === checkState;
-            },
-        };
-    }, [state]);
-
-    // Return as a tuple to match useMachine API
-    return [stateWithMatches, send] as const;
-}
-
-const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMessage, ...rest }: any) => {
-    const [channelToTop, setChannelToTop] = useState(0);
-
-    // Create a ref to track if component is mounted
-    const isMountedRef = useRef(true);
-
-    // Use our safer custom implementation instead of the problematic useMachine
-    const [state, send] = useSafeMachine(conversationXstate);
-
-    // Define safe functions first to avoid "used before declaration" errors
-    const safeContext = useCallback(() => {
-        try {
-            return state?.context || {};
-        } catch (error) {
-            console.error('Error accessing state.context:', error);
-            return {};
-        }
-    }, [state]);
-
-    const safeContextProperty = useCallback(
-        (property, defaultValue = null) => {
-            try {
-                return state?.context?.[property] ?? defaultValue;
-            } catch (error) {
-                console.error(`Error accessing state.context.${property}:`, error);
-                return defaultValue;
-            }
-        },
-        [state],
-    );
-
-    const safeMatches = useCallback(
-        (stateValue) => {
-            try {
-                return state?.matches?.(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],
-    );
-
-    // Immediately set initial context if needed
-    useEffect(() => {
-        if (ChannelId) {
-            console.log('Setting initial channel ID on mount:', ChannelId);
-            try {
-                send({
-                    type: ConversationActions.INITIAL_CONTEXT,
-                    data: { channelId: ChannelId },
-                });
-            } catch (error) {
-                console.error('Error sending initial context:', error);
-            }
-        }
-    }, []);
-
-    // Use a ref to track the current machine snapshot for safer access
-    const stateRef = useRef(state);
-
-    // Keep the ref updated with the latest snapshot
-    useEffect(() => {
-        stateRef.current = state;
-    }, [state]);
+// Fix for the optimistic response types
+type OptimisticPropsConfig = {
+    __typename: 'MachineConfiguration';
+    resource: string;
+};
 
-    // Avoid referencing state.context directly in places that might cause undefined errors
-    const safeGetContext = useCallback(() => {
-        if (stateRef.current && stateRef.current.context) {
-            return stateRef.current.context;
-        }
-        // Return default values if context is undefined
-        return {
-            channelId: null,
-            channelMessages: [],
-            totalCount: 0,
-            skip: 0,
-            loading: false,
-            loadingOldMessages: false,
-            error: null,
-            selectedImage: '',
-            files: [],
-            images: [],
-            messageText: '',
-            imageLoading: false,
-        };
-    }, []);
+const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowThreadMessage, ...rest }: any) => {
+    // Core state management using React hooks instead of XState
+    const [channelId, setChannelId] = useState<string | null>(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<string | null>(null);
+    const [selectedImage, setSelectedImage] = useState<string>('');
+    const [images, setImages] = useState<any[]>([]);
+    const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
+    const [imageObject, setImageObject] = useState<any>({});
 
-    // Use cleanup function to prevent setting state after unmount
-    useEffect(() => {
-        return () => {
-            isMountedRef.current = false;
-        };
-    }, []);
+    // Create refs for various operations
+    const messageRootListRef = useRef<any>(null);
+    const isMounted = useRef(true);
+    const fetchOldDebounceRef = useRef(false);
 
+    // Navigation and auth
     const auth: any = useSelector(userSelector);
     const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
     const navigation = useNavigation<any>();
-    const [selectedImage, setImage] = useState<string>('');
-    const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
-    const [imageObject, setImageObject] = useState<any>({});
-    const messageRootListRef = useRef<any>(null);
     const isFocused = useIsFocused();
 
+    // Apollo mutations
     const [addDirectChannel] = useAddDirectChannelMutation();
     const { startUpload } = useUploadFilesNative();
     const [sendMsg] = useSendMessagesMutation();
     const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
 
+    // Apollo query for messages
     const {
         data,
         loading: messageLoading,
         refetch,
         fetchMore: fetchMoreMessages,
         subscribeToMore,
-    }: any = useMessagesQuery({
+    } = useMessagesQuery({
         variables: {
-            channelId: state.context.channelId?.toString(),
+            channelId: channelId?.toString(),
             parentId: null,
             limit: MESSAGES_PER_PAGE,
-            skip: state.context.skip,
+            skip: skip,
         },
-        skip: !state.context.channelId,
+        skip: !channelId,
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         refetchWritePolicy: 'merge',
+        notifyOnNetworkStatusChange: true,
         onCompleted: (queryData) => {
-            console.log('MESSAGE QUERY COMPLETED:', queryData);
-            if (queryData?.messages?.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);
-            }
+            // MESSAGE QUERY COMPLETED
         },
         onError: (error) => {
-            console.error('MESSAGE QUERY ERROR:', error);
+            setError(String(error));
         },
     });
 
-    // Modify the fetchMessagesDirectly function to use safe access
-    const fetchMessagesDirectly = useCallback(async () => {
-        const channelId = safeGetContext().channelId;
-        if (!channelId) {
-            console.warn('Cannot fetch messages: No channel ID');
-            return;
-        }
+    // Extract messages from the query data
+    const channelMessages = useMemo(() => {
+        return data?.messages?.data || [];
+    }, [data?.messages?.data]);
 
-        try {
-            console.log('💫 FETCHING messages for channel:', channelId);
+    // Get total message count
+    const totalCount = useMemo(() => {
+        return data?.messages?.totalCount || 0;
+    }, [data?.messages?.totalCount]);
 
-            // Use loading state to prevent duplicate fetches
-            send({ type: ConversationActions.START_LOADING });
+    // Clear messages when component unmounts
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
 
-            const response = await refetch({
-                channelId: channelId.toString(),
-                parentId: null,
-                limit: MESSAGES_PER_PAGE,
-                skip: 0,
-            });
+    // Update channelId from props or navigation params
+    useEffect(() => {
+        const currentChannelId = initialChannelId || currentRoute?.params?.channelId;
+        if (currentChannelId) {
+            setChannelId(currentChannelId);
+        }
+    }, [initialChannelId, currentRoute]);
 
-            if (response?.data?.messages) {
-                const { data: messages, totalCount } = response.data.messages;
-
-                if (messages && messages.length > 0) {
-                    // Batch update to reduce renders
-                    safeSend({
-                        type: ConversationActions.SET_CHANNEL_MESSAGES,
-                        data: { messages, totalCount },
-                    });
-                } else {
-                    console.warn('No messages found for channel', channelId);
-                    // Still clear loading state
-                    send({ type: ConversationActions.STOP_LOADING });
-                }
-            } else {
-                console.warn('Query returned no messages data');
-                send({ type: ConversationActions.STOP_LOADING });
+    // Focus/unfocus behavior
+    useFocusEffect(
+        React.useCallback(() => {
+            if (channelId) {
+                // Refresh messages when screen comes into focus
+                refetch();
             }
-        } catch (error) {
-            console.error('ERROR fetching messages:', error);
-            send({ type: ConversationActions.STOP_LOADING });
+            return () => {
+                // Nothing needed on unfocus
+            };
+        }, [channelId, isFocused, refetch]),
+    );
+
+    // Loading state for image selection
+    useEffect(() => {
+        if (selectedImage) {
+            setLoading(false);
         }
-    }, [safeGetContext, refetch, safeSend]);
+    }, [selectedImage]);
 
+    // Fetch more messages function
     const fetchMoreMessagesImpl = useCallback(async () => {
         try {
+            setLoadingOldMessages(true);
             const response = await fetchMoreMessages({
                 variables: {
-                    channelId: state.context.channelId?.toString(),
+                    channelId: channelId?.toString(),
                     parentId: null,
-                    skip: state.context.channelMessages.length,
+                    skip: channelMessages.length,
                 },
+                // updateQuery: (prev, { fetchMoreResult }) => {
+                //     if (!fetchMoreResult || !fetchMoreResult.messages) return prev;
+
+                //     // Create a new array of all messages deduped by ID
+                //     const combinedMessages = [...prev.messages.data, ...fetchMoreResult.messages.data].filter(
+                //         (message, index, self) => index === self.findIndex((m) => m.id === message.id),
+                //     );
+
+                //     return {
+                //         ...prev,
+                //         messages: {
+                //             ...prev.messages,
+                //             data: combinedMessages,
+                //             totalCount: fetchMoreResult.messages.totalCount,
+                //             __typename: prev.messages.__typename,
+                //         },
+                //     };
+                // },
             });
 
+            setLoadingOldMessages(false);
             if (!response?.data?.messages?.data) {
                 return { error: 'No messages returned' };
             }
 
             return { messages: response.data.messages.data };
         } catch (error) {
+            setLoadingOldMessages(false);
+            setError(String(error));
             return { error: String(error) };
         }
-    }, [state.context.channelId, state.context.channelMessages.length, fetchMoreMessages]);
+    }, [channelId, channelMessages.length, fetchMoreMessages]);
 
+    // Send message function
     const sendMessageImpl = useCallback(async () => {
         try {
+            // Store the current message text and clear input immediately for better UX
+            const currentMessageText = messageText;
+            setMessageText('');
+
             const notificationData: IExpoNotificationData = {
                 url: config.INBOX_MESSEGE_PATH,
-                params: { channelId: state.context.channelId, hideTabBar: true },
+                params: { channelId, hideTabBar: true },
                 screen: 'DialogMessages',
                 other: { sound: Platform.OS === 'android' ? undefined : 'default' },
             };
 
+            // Create optimistic message with consistent structure
+            const messageId = objectId();
+            const optimisticMessage = {
+                __typename: 'Post' as const,
+                id: messageId,
+                message: currentMessageText,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                author: {
+                    __typename: 'UserAccount' as const,
+                    id: auth?.id,
+                    givenName: auth?.givenName || '',
+                    familyName: auth?.familyName || '',
+                    picture: auth?.picture || '',
+                    username: auth?.username || '',
+                    email: auth?.email || '',
+                    alias: [] as string[],
+                    tokens: [],
+                },
+                isDelivered: true,
+                isRead: false,
+                type: 'TEXT' as any,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: channelId,
+                },
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    resource: '' as any, // Cast to any to bypass the URI type check
+                },
+                props: {},
+                files: {
+                    __typename: 'FilesInfo' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+                replies: {
+                    __typename: 'Messages' as const,
+                    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: response.data?.sendMessage };
         } catch (error) {
+            setLoading(false);
+            setError(String(error));
             return { error: String(error) };
         }
-    }, [state.context.channelId, state.context.messageText, sendMsg]);
+    }, [channelId, messageText, sendMsg, auth]);
 
-    // Fix the image selection process to ensure proper format for upload
+    // Image selection handler
     const onSelectImages = async () => {
-        safeSend({ type: ConversationActions.START_LOADING });
+        setLoading(true);
 
         try {
-            console.log('Starting image picker...');
             let imageSource = await ImagePicker.launchImageLibraryAsync({
                 mediaTypes: ImagePicker.MediaTypeOptions.Images,
                 allowsEditing: true,
@@ -571,22 +332,10 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
             });
 
             if (!imageSource?.canceled) {
-                console.log(
-                    'Image selected. Asset details:',
-                    JSON.stringify({
-                        uri: imageSource?.assets?.[0]?.uri?.substring(0, 30) + '...',
-                        width: imageSource?.assets?.[0]?.width,
-                        height: imageSource?.assets?.[0]?.height,
-                        hasBase64: !!imageSource?.assets?.[0]?.base64,
-                        hasUri: !!imageSource?.assets?.[0]?.uri,
-                    }),
-                );
-
                 // Get the asset
                 const selectedAsset = imageSource?.assets?.[0];
                 if (!selectedAsset) {
-                    console.error('No asset found in selected image');
-                    safeSend({ type: ConversationActions.STOP_LOADING });
+                    setLoading(false);
                     return;
                 }
 
@@ -602,58 +351,49 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                     mimeType: 'image/jpeg',
                 };
 
-                console.log('Prepared image asset for upload:', {
-                    hasUrl: !!asset.url,
-                    hasFileName: !!asset.fileName,
-                    hasMimeType: !!asset.mimeType,
-                    previewAvailable: !!previewImage,
-                });
-
                 // Update state with the new image
-                safeSend({
-                    type: ConversationActions.SET_IMAGE,
-                    data: {
-                        image: previewImage,
-                        images: [asset], // Replace existing images with the new one
-                    },
-                });
-
-                console.log('Image state updated successfully');
+                setSelectedImage(previewImage);
+                setImages([asset]);
             } else {
-                console.log('Image selection cancelled');
-                safeSend({ type: ConversationActions.STOP_LOADING });
+                setLoading(false);
             }
         } catch (error) {
-            console.error('Error selecting image:', error);
-            safeSend({ type: ConversationActions.STOP_LOADING });
+            setLoading(false);
         }
     };
 
-    // Update the sendMessageWithFileImpl function to fix image uploads
+    // Add a state variable to track which message should show the skeleton
+    const [uploadingMessageId, setUploadingMessageId] = useState<string | null>(null);
+
+    // Send message with file function - update to set and clear uploadingMessageId
     const sendMessageWithFileImpl = useCallback(async () => {
         try {
-            console.log('Executing sendMessageWithFileImpl');
+            // For file uploads, we still need loading state since we need to wait for the file upload
+            setLoading(true);
 
             // Generate a unique post ID for the message
             const postId = objectId();
-            console.log('Generated postId for file upload:', postId);
+
+            // Set the message ID that should show the skeleton
+            setUploadingMessageId(postId);
 
             // Prepare notification data
             const notificationData: IExpoNotificationData = {
                 url: config.INBOX_MESSEGE_PATH,
-                params: { channelId: state.context.channelId, hideTabBar: true },
+                params: { channelId, hideTabBar: true },
                 screen: 'DialogMessages',
                 other: { sound: Platform.OS === 'android' ? undefined : 'default' },
             };
 
             // Safety check for images
-            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' };
             }
 
             // Format the images for upload if needed
-            const imagesToUpload = state.context.images.map((img) => {
+            const imagesToUpload = images.map((img) => {
                 // Ensure the image has all required properties
                 return {
                     ...img,
@@ -663,20 +403,82 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 };
             });
 
-            console.log(
-                'Formatted images for upload:',
-                imagesToUpload.map((img) => ({
-                    hasUri: !!img.uri,
-                    hasUrl: !!img.url,
-                    hasName: !!img.name,
-                    hasType: !!img.type,
-                    hasFileName: !!img.fileName,
-                    uri: img.uri?.substring(0, 30) + '...',
-                })),
-            );
+            // Store current message text and clear inputs immediately for better UX
+            const currentMessageText = messageText;
+            setMessageText('');
+
+            // Create file info for optimistic response
+            const optimisticFileInfo = {
+                __typename: 'FileInfo' as const,
+                id: objectId(),
+                url: selectedImage,
+                name: imagesToUpload[0]?.name || 'image.jpg',
+                extension: 'jpg',
+                mimeType: 'image/jpeg',
+                size: 0,
+                refType: FileRefType.Post,
+                height: imagesToUpload[0]?.height || 0,
+                width: imagesToUpload[0]?.width || 0,
+            };
+
+            // Create optimistic message with file
+            const optimisticMessage = {
+                __typename: 'Post' as const,
+                id: postId,
+                message: currentMessageText || ' ',
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                author: {
+                    __typename: 'UserAccount' as const,
+                    id: auth?.id,
+                    givenName: auth?.givenName || '',
+                    familyName: auth?.familyName || '',
+                    picture: auth?.picture || '',
+                    username: auth?.username || '',
+                    email: auth?.email || '',
+                    alias: [] as string[],
+                    tokens: [],
+                },
+                isDelivered: true,
+                isRead: false,
+                type: 'TEXT' as any,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: channelId,
+                },
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    resource: '' as any, // Cast to any to bypass the URI type check
+                },
+                props: {},
+                files: {
+                    __typename: 'FilesInfo' as const,
+                    data: [
+                        {
+                            __typename: 'FileInfo' as const,
+                            id: objectId(),
+                            url: selectedImage,
+                            name: imagesToUpload[0]?.name || 'image.jpg',
+                            extension: 'jpg',
+                            mimeType: 'image/jpeg',
+                            size: 0,
+                            refType: FileRefType.Post,
+                            height: imagesToUpload[0]?.height || 0,
+                            width: imagesToUpload[0]?.width || 0,
+                        },
+                    ] as any,
+                    totalCount: 1,
+                },
+                replies: {
+                    __typename: 'Messages' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+            };
 
             // Upload the files
-            console.log('Starting file upload...');
             const uploadResponse = await startUpload({
                 file: imagesToUpload,
                 saveUploadedFile: {
@@ -687,89 +489,66 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 },
             });
 
-            console.log(
-                'Upload response received:',
-                uploadResponse?.data ? 'Has data' : 'No data',
-                'Error:',
-                uploadResponse?.error ? uploadResponse.error : 'None',
-            );
-
             if (uploadResponse?.error) {
-                console.error('Upload error:', uploadResponse.error);
+                setLoading(false);
+                setUploadingMessageId(null);
                 return { error: String(uploadResponse.error) };
             }
 
             // Get uploaded file IDs
             const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-            console.log(
-                'Uploaded files:',
-                uploadedFiles
-                    ? JSON.stringify(uploadedFiles.map((f) => ({ id: f.id, url: f.url?.substring(0, 30) + '...' })))
-                    : 'null',
-            );
-
             const files = uploadedFiles?.map((f: any) => f.id) ?? null;
 
-            console.log('Files uploaded successfully. File IDs:', files);
-
             // Send the message with the uploaded files
-            console.log('Sending message with files:', {
-                postId,
-                channelId: state.context.channelId,
-                content: state.context.messageText || ' ',
-                hasFiles: !!files,
-                fileCount: files?.length || 0,
-            });
-
             const response = await sendMsg({
                 variables: {
                     postId,
-                    channelId: state.context.channelId,
-                    content: state.context.messageText || ' ', // Use a space if no text
+                    channelId,
+                    content: currentMessageText || ' ', // Use a space if no text
                     files,
                     notificationParams: notificationData,
                 },
+                optimisticResponse: {
+                    __typename: 'Mutation',
+                    sendMessage: optimisticMessage,
+                },
             });
 
             if (response?.data?.sendMessage) {
-                console.log('Message with file sent successfully:', response.data.sendMessage.id);
-
-                // Log the file data from the response to verify it's being returned correctly
-                if (response.data.sendMessage.files?.data) {
-                    console.log(
-                        '📷 Message response file data:',
-                        JSON.stringify({
-                            fileCount: response.data.sendMessage.files.data.length,
-                            fileUrl: response.data.sendMessage.files.data[0]?.url?.substring(0, 30) + '...',
-                        }),
-                    );
-                }
-
                 // Clear the images after successful send
-                setTimeout(() => {
-                    safeSend({ type: ConversationActions.CLEAR_IMAGE });
-                }, 100);
-            } else {
-                console.error('Failed to send message with file:', response?.errors);
+                setSelectedImage('');
+                setImages([]);
             }
 
+            setLoading(false);
+            setUploadingMessageId(null);
             return { message: response.data?.sendMessage };
         } catch (error) {
-            console.error('Error in sendMessageWithFileImpl:', error);
+            setLoading(false);
+            setUploadingMessageId(null);
+            setError(String(error));
             return { error: String(error) };
         }
-    }, [state.context.channelId, state.context.messageText, state.context.images, startUpload, sendMsg, safeSend]);
+    }, [channelId, messageText, images, selectedImage, startUpload, sendMsg, auth]);
 
+    // Create direct channel implementation
     const createDirectChannelImpl = useCallback(async () => {
         try {
+            setLoading(true);
             if (
                 !rest?.isCreateNewChannel ||
                 rest?.newChannelData?.type !== RoomType?.Direct ||
                 !rest?.newChannelData?.userIds?.length
             ) {
+                setLoading(false);
                 return { error: 'Invalid channel data' };
             }
 
+            // Store current message text
+            const currentMessageText = messageText;
+            // Clear message text immediately for better UX
+            setMessageText('');
+
             const response = await addDirectChannel({
                 variables: {
                     receiver: [...(rest?.newChannelData?.userIds ?? [])],
@@ -778,10 +557,12 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
             });
 
             if (!response?.data?.createDirectChannel?.id) {
+                setLoading(false);
                 return { error: 'Failed to create channel' };
             }
 
             const newChannelId = response.data.createDirectChannel.id;
+            setChannelId(newChannelId);
 
             const notificationData: IExpoNotificationData = {
                 url: config.INBOX_MESSEGE_PATH,
@@ -790,99 +571,74 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 other: { sound: Platform.OS === 'android' ? undefined : 'default' },
             };
 
+            // Create unique message ID for optimistic response
+            const messageId = objectId();
+
+            // Fix the createDirectChannelImpl optimisticMessage with all required fields
+            const optimisticMessage = {
+                __typename: 'Post' as const,
+                id: messageId,
+                message: currentMessageText,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                author: {
+                    __typename: 'UserAccount' as const,
+                    id: auth?.id,
+                    givenName: auth?.givenName || '',
+                    familyName: auth?.familyName || '',
+                    picture: auth?.picture || '',
+                    username: auth?.username || '',
+                    email: auth?.email || '',
+                    alias: [] as string[],
+                    tokens: [],
+                },
+                isDelivered: true,
+                isRead: false,
+                type: 'TEXT' as any,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: newChannelId,
+                },
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    resource: '' as any, // Cast to any to bypass the URI type check
+                },
+                props: {},
+                files: {
+                    __typename: 'FilesInfo' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+                replies: {
+                    __typename: 'Messages' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+            };
+
+            // Send message in the new channel
             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) {
+            setLoading(false);
+            setError(String(error));
             return { error: String(error) };
         }
-    }, [rest, state.context.messageText, addDirectChannel, sendMsg]);
-
-    // Remove the implementation inside this effect
-    useEffect(() => {
-        // We've moved these implementations to useCallback hooks above
-    }, [state.value, sendMsg, refetch, fetchMoreMessages, addDirectChannel, startUpload, rest, state.context]);
-
-    React.useEffect(() => {
-        return () => {
-            send({ type: ConversationActions.CLEAR_MESSAGES });
-        };
-    }, []);
-
-    useFocusEffect(
-        React.useCallback(() => {
-            if (state.context.channelId) {
-                send({ type: ConversationActions.INITIAL_CONTEXT, data: { channelId: state.context.channelId } });
-            }
-            return () => {
-                send({ type: ConversationActions.CLEAR_MESSAGES });
-            };
-        }, [state.context.channelId, isFocused]),
-    );
-
-    React.useEffect(() => {
-        const currentChannelId = ChannelId || currentRoute?.params?.channelId;
-        if (currentChannelId) {
-            console.log('Setting initial channel ID:', currentChannelId);
-            send({ type: ConversationActions.INITIAL_CONTEXT, data: { channelId: currentChannelId } });
-        }
-    }, [ChannelId, currentRoute]);
-
-    React.useEffect(() => {
-        if (state.context.selectedImage) {
-            send({ type: ConversationActions.STOP_LOADING });
-        }
-    }, [state.context.selectedImage]);
-
-    useEffect(() => {
-        if (data?.messages?.data) {
-            console.log('📩 QUERY DATA CHANGED - Messages received:', data.messages.data.length);
-            const { data: messages, totalCount: messageTotalCount } = data.messages;
-
-            if (messages && messages.length > 0) {
-                console.log('📩 QUERY DATA - Setting channel messages, count:', messages.length);
-
-                // First try dispatching the update through XState
-                send({
-                    type: ConversationActions.SET_CHANNEL_MESSAGES,
-                    data: {
-                        messages: uniqBy([...messages, ...state.context.channelMessages], ({ id }) => id),
-                        totalCount: messageTotalCount,
-                    },
-                });
-
-                // Debug: Log the first message to verify data format
-                if (messages[0]) {
-                    const sample = messages[0];
-                    console.log(
-                        '📩 SAMPLE MESSAGE:',
-                        JSON.stringify({
-                            id: sample.id,
-                            message: sample.message,
-                            author: {
-                                id: sample.author?.id,
-                                name: `${sample.author?.givenName} ${sample.author?.familyName}`,
-                            },
-                            createdAt: sample.createdAt,
-                        }),
-                    );
-                }
-
-                // Check if the state machine actually updated (debug only)
-                setTimeout(() => {
-                    if (state.context.channelMessages?.length === 0) {
-                        console.warn('⚠️ STATE NOT UPDATED after message data received - may need fallback');
-                    }
-                }, 500);
-            }
-        }
-    }, [data]);
+    }, [rest, messageText, addDirectChannel, sendMsg, auth]);
 
     // Optimize onFetchOld by adding debounce logic
     const onFetchOld = useCallback(() => {
@@ -890,49 +646,80 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
         if (fetchOldDebounceRef.current) return;
 
         // Check if we need to fetch more messages
-        if (
-            state?.context?.totalCount > state?.context?.channelMessages?.length &&
-            !state?.context?.loadingOldMessages
-        ) {
+        if (totalCount > channelMessages.length && !loadingOldMessages) {
             // Set debounce
             fetchOldDebounceRef.current = true;
 
-            // Send fetch event
-            send({ type: ConversationActions.FETCH_MORE_MESSAGES });
+            // Fetch more messages
+            fetchMoreMessagesImpl();
 
             // Clear debounce after a timeout
             setTimeout(() => {
                 fetchOldDebounceRef.current = false;
             }, 1000);
         }
-    }, [state?.context?.totalCount, state?.context?.channelMessages, state?.context?.loadingOldMessages]);
-
-    // Add debounce ref
-    const fetchOldDebounceRef = useRef(false);
+    }, [totalCount, channelMessages.length, loadingOldMessages, fetchMoreMessagesImpl]);
 
     const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
         const paddingToTop = 60;
         return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
     };
 
-    const dataURLtoFile = (dataurl: any, filename: any) => {
-        var arr = dataurl.split(','),
-            mime = arr[0].match(/:(.*?);/)[1],
-            bstr = atob(arr[1]),
-            n = bstr.length,
-            u8arr = new Uint8Array(n);
-        while (n--) {
-            u8arr[n] = bstr.charCodeAt(n);
+    // Transform the message data for GiftedChat
+    const messageList = useMemo(() => {
+        // Short-circuit if no messages to process
+        if (!channelMessages || channelMessages.length === 0) {
+            return [];
         }
-        return new File([u8arr], filename, { type: mime });
-    };
 
-    // Fix the render send function to ensure it works for image-only messages
+        // Use a more efficient approach - pre-filter messages once
+        const filteredMessages = uniqBy(channelMessages, ({ id }) => id);
+
+        // Skip processing if no filtered messages
+        if (filteredMessages.length === 0) {
+            return [];
+        }
+
+        // Transform messages only once and return
+        return orderBy(filteredMessages, ['createdAt'], ['desc']).map((msg) => {
+            const date = new Date(msg.createdAt);
+
+            // Extract image URL from files data
+            let imageUrl = null;
+            if (msg.files?.data && msg.files.data.length > 0) {
+                const fileData = msg.files.data[0];
+                if (fileData && fileData.url) {
+                    imageUrl = fileData.url;
+                }
+            }
+
+            // Create message in a more direct way
+            return {
+                _id: msg.id,
+                text: msg.message,
+                createdAt: date,
+                user: {
+                    _id: msg.author?.id || '',
+                    name: `${msg.author?.givenName || ''} ${msg.author?.familyName || ''}`,
+                    avatar: msg.author?.picture || '',
+                },
+                image: imageUrl,
+                sent: msg?.isDelivered,
+                received: msg?.isRead,
+                type: msg?.type,
+                propsConfiguration: msg?.propsConfiguration,
+                replies: msg?.replies ?? [],
+                isShowThreadMessage,
+            };
+        });
+    }, [channelMessages, isShowThreadMessage]);
+
+    // Render the send button
     const renderSend = useCallback(
         (props) => {
             // Enable the send button if there's text OR we have images
-            const hasContent = !!props.text || state?.context?.images?.length > 0;
-            const canSend = (state?.context?.channelId || rest?.isCreateNewChannel) && hasContent;
+            const hasContent = !!props.text || images?.length > 0;
+            const canSend = (channelId || rest?.isCreateNewChannel) && hasContent;
 
             return (
                 <Send
@@ -958,157 +745,58 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 </Send>
             );
         },
-        [state?.context?.channelId, state?.context?.images, rest?.isCreateNewChannel],
+        [channelId, images, rest?.isCreateNewChannel],
     );
 
-    // Fix the handleSend function to properly handle image-only messages
+    // Handle send for messages
     const handleSend = useCallback(
         async (messages) => {
             // Extract message text from GiftedChat messages array
-            const messageText = messages && messages.length > 0 ? messages[0]?.text || ' ' : ' ';
-            console.log('Sending message:', messageText);
-            console.log('Images:', state.context.images?.length);
+            const newMessageText = messages && messages.length > 0 ? messages[0]?.text || ' ' : ' ';
 
             // Check if we can send a message (channel exists or we're creating one)
-            if (!state.context.channelId && !rest?.isCreateNewChannel) {
-                console.log('Cannot send - no channel');
+            if (!channelId && !rest?.isCreateNewChannel) {
                 return;
             }
 
             // Allow sending if we have text OR images (image-only messages are valid)
-            const hasText = !!messageText && messageText !== ' ';
-            const hasImages = state.context.images && state.context.images.length > 0;
+            const hasText = !!newMessageText && newMessageText !== ' ';
+            const hasImages = images && images.length > 0;
 
             if (!hasText && !hasImages) {
-                console.log('Nothing to send - no text or images');
                 return;
             }
 
-            // Set the message text in the state (even if empty for image-only messages)
-            safeSend({ type: ConversationActions.SET_MESSAGE_TEXT, data: { messageText } });
+            // Update the message text state - now handled in send functions for better UX
+            setMessageText(newMessageText);
 
             // Handle direct channel creation if needed
-            if (rest?.isCreateNewChannel && !state.context.channelId) {
+            if (rest?.isCreateNewChannel && !channelId) {
                 if (rest?.newChannelData?.type === RoomType?.Direct) {
-                    safeSend({ type: ConversationActions.CREATE_DIRECT_CHANNEL });
+                    createDirectChannelImpl();
                 }
                 return;
             }
 
             // Send message with or without image based on state
             if (hasImages) {
-                console.log('Sending message with file');
-                safeSend({ type: ConversationActions.SEND_MESSAGE_WITH_FILE });
+                sendMessageWithFileImpl();
             } else {
-                console.log('Sending text-only message');
-                safeSend({ type: ConversationActions.SEND_MESSAGE });
+                sendMessageImpl();
             }
         },
-        [state.context.channelId, state.context.images, rest?.isCreateNewChannel, rest?.newChannelData?.type, safeSend],
+        [
+            channelId,
+            images,
+            rest?.isCreateNewChannel,
+            rest?.newChannelData?.type,
+            createDirectChannelImpl,
+            sendMessageWithFileImpl,
+            sendMessageImpl,
+        ],
     );
 
-    // Update fetchMessagesWithFallback to not use fallback state
-    const fetchMessagesWithFallback = useCallback(async () => {
-        if (!state.context.channelId) return;
-
-        try {
-            console.log('🔄 DIRECT FETCH: Using direct approach for channel:', state.context.channelId);
-
-            const response = await refetch({
-                channelId: state.context.channelId?.toString(),
-                parentId: null,
-                limit: MESSAGES_PER_PAGE,
-                skip: 0,
-            });
-
-            if (response?.data?.messages?.data) {
-                const messages = response.data.messages.data;
-                console.log('✅ DIRECT FETCH: Got messages:', messages.length);
-
-                // Skip fallback and send directly to state machine
-                send({
-                    type: ConversationActions.SET_CHANNEL_MESSAGES,
-                    data: {
-                        messages,
-                        totalCount: response.data.messages.totalCount,
-                    },
-                });
-            }
-        } catch (error) {
-            console.error('❌ DIRECT FETCH ERROR:', error);
-        }
-    }, [state.context.channelId, refetch]);
-
-    // Auto-trigger fallback if needed
-    useEffect(() => {
-        let timeoutId: NodeJS.Timeout;
-
-        if (state.context.channelId && state.context.channelMessages.length === 0) {
-            timeoutId = setTimeout(() => {
-                console.log('⚠️ ACTIVATING FALLBACK - XState not updating after timeout');
-                fetchMessagesWithFallback();
-            }, 3000); // Wait 3 seconds for normal flow to work
-        }
-
-        return () => {
-            if (timeoutId) clearTimeout(timeoutId);
-        };
-    }, [state.context.channelId, state.context.channelMessages, fetchMessagesWithFallback]);
-
-    // Optimize the messageList calculation for better performance
-    const messageList = useMemo(() => {
-        // Only recalculate when these dependencies change
-        console.log('🔄 CALCULATING MESSAGE LIST - Optimized version');
-
-        // Short-circuit if no messages to process
-        if (!state?.context?.channelMessages || state.context.channelMessages.length === 0) {
-            console.log('No messages to process');
-            return [];
-        }
-
-        // Use a more efficient approach - pre-filter messages once
-        const filteredMessages = uniqBy(state.context.channelMessages, ({ id }) => id);
-
-        // Skip processing if no filtered messages
-        if (filteredMessages.length === 0) {
-            return [];
-        }
-
-        // Transform messages only once and return
-        return orderBy(filteredMessages, ['createdAt'], ['desc']).map((msg) => {
-            const date = new Date(msg.createdAt);
-
-            // Extract image URL from files data
-            let imageUrl = null;
-            if (msg.files?.data && msg.files.data.length > 0) {
-                const fileData = msg.files.data[0];
-                if (fileData && fileData.url) {
-                    imageUrl = fileData.url;
-                }
-            }
-
-            // Create message in a more direct way
-            return {
-                _id: msg.id,
-                text: msg.message,
-                createdAt: date,
-                user: {
-                    _id: msg.author?.id || '',
-                    name: `${msg.author?.givenName || ''} ${msg.author?.familyName || ''}`,
-                    avatar: msg.author?.picture || '',
-                },
-                image: imageUrl,
-                sent: msg?.isDelivered,
-                received: msg?.isRead,
-                type: msg?.type,
-                propsConfiguration: msg?.propsConfiguration,
-                replies: msg?.replies ?? [],
-                isShowThreadMessage,
-            };
-        });
-    }, [state?.context?.channelMessages, isShowThreadMessage]);
-
-    // Memoize the renderMessageText function
+    // Render message text with customizations for alerts and replies
     const renderMessageText = useCallback(
         (props: any) => {
             const { currentMessage } = props;
@@ -1173,7 +861,7 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                                 onPress={() => {
                                     if (currentMessage?.isShowThreadMessage)
                                         navigation.navigate(config.THREAD_MESSEGE_PATH, {
-                                            channelId: state?.context?.channelId,
+                                            channelId: channelId,
                                             title: 'Message',
                                             postParentId: currentMessage?._id,
                                             isPostParentIdThread: true,
@@ -1238,7 +926,7 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                         onPress={() => {
                             if (currentMessage?.isShowThreadMessage)
                                 navigation.navigate(config.THREAD_MESSEGE_PATH, {
-                                    channelId: state?.context?.channelId,
+                                    channelId: channelId,
                                     title: 'Message',
                                     postParentId: currentMessage?._id,
                                     isPostParentIdThread: true,
@@ -1290,9 +978,10 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 );
             }
         },
-        [navigation, state?.context?.channelId, role],
+        [navigation, channelId, role],
     );
 
+    // Render action buttons (including image upload)
     const renderActions = (props) => {
         return (
             <Actions
@@ -1326,79 +1015,115 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
     };
 
     // Create a more visible and reliable image preview with cancel button
-    const renderAccessory = useCallback(
-        (props) => {
-            const selectedImage = safeContextProperty('selectedImage', '');
-
-            if (!selectedImage) {
-                return null;
-            }
+    const renderAccessory = useCallback(() => {
+        if (!selectedImage) {
+            return null;
+        }
 
-            return (
+        return (
+            <View
+                style={{
+                    height: 70,
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: '#e0e0e0',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    margin: 0,
+                    padding: 0,
+                    paddingVertical: 0,
+                    position: 'absolute',
+                    bottom: Platform.OS === 'ios' ? 105 : 95, // Position well above the input area
+                    left: 0,
+                    right: 0,
+                    zIndex: 1,
+                    elevation: 3,
+                    shadowColor: '#000',
+                    shadowOffset: { width: 0, height: -1 },
+                    shadowOpacity: 0.05,
+                    shadowRadius: 2,
+                }}
+            >
                 <View
                     style={{
-                        height: 50,
-                        padding: 3,
-                        backgroundColor: 'white',
-                        borderTopWidth: 1,
-                        borderTopColor: '#e0e0e0',
+                        flex: 1,
                         flexDirection: 'row',
                         alignItems: 'center',
-                        margin: 0,
-                        paddingBottom: 0,
-                        paddingTop: 5,
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        zIndex: 999,
+                        paddingLeft: 15,
+                        paddingRight: 5,
                     }}
                 >
                     <View
                         style={{
-                            flex: 1,
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            paddingHorizontal: 15,
+                            width: 56,
+                            height: 56,
+                            marginRight: 15,
+                            borderRadius: 4,
+                            backgroundColor: colors.gray[200],
+                            overflow: 'hidden',
+                            borderWidth: 1,
+                            borderColor: '#e0e0e0',
                         }}
                     >
                         <Image
-                            key={state?.context?.selectedImage}
+                            key={selectedImage}
                             alt={'selected image'}
-                            source={{ uri: state?.context?.selectedImage }}
+                            source={{ uri: selectedImage }}
                             style={{
-                                width: 36,
-                                height: 36,
-                                borderRadius: 5,
-                                marginRight: 15,
+                                width: '100%',
+                                height: '100%',
                             }}
-                            size={'xs'}
+                            size={'md'}
                         />
+                        {loading && (
+                            <View
+                                style={{
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                }}
+                            >
+                                <Spinner size="small" color={colors.blue[500]} />
+                            </View>
+                        )}
+                    </View>
 
-                        <TouchableHighlight
-                            underlayColor="#dddddd"
-                            onPress={() => safeSend({ type: ConversationActions.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,
-                            }}
-                        >
-                            <Text style={{ color: 'white', fontWeight: 'bold' }}>X</Text>
-                        </TouchableHighlight>
+                    <View style={{ flex: 1 }}>
+                        <Text style={{ fontSize: 14, fontWeight: '400', color: colors.gray[800] }}>
+                            {images[0]?.fileName || 'image_' + new Date().getTime() + '.jpg'}
+                        </Text>
+                        <Text style={{ fontSize: 12, color: colors.gray[500], marginTop: 2 }}>
+                            {loading ? 'Preparing...' : 'Ready to send'}
+                        </Text>
                     </View>
+
+                    <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,
+                        }}
+                    >
+                        <Ionicons name="close" size={20} color="white" />
+                    </TouchableHighlight>
                 </View>
-            );
-        },
-        [state?.context?.selectedImage, safeSend],
-    );
+            </View>
+        );
+    }, [selectedImage, loading, images]);
 
     const setImageViewerObject = (obj: any, v: boolean) => {
         setImageObject(obj);
@@ -1406,13 +1131,14 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
     };
 
     const modalContent = React.useMemo(() => {
-        if (!imageObject) return <></>;
+        if (!imageObject || !imageObject.image) return null;
         const { image, _id } = imageObject;
+
         return (
             <CachedImage
                 style={{ width: '100%', height: '100%' }}
                 resizeMode={'cover'}
-                cacheKey={`${_id}-slack-bubble-imageKey`}
+                cacheKey={`${_id}-modal-imageKey`}
                 source={{
                     uri: image,
                     expiresIn: 86400,
@@ -1422,14 +1148,60 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
         );
     }, [imageObject]);
 
+    // Create a skeleton component for message bubbles with images
     const renderMessage = useCallback(
         (props: any) => {
+            // Check if this message ID matches the uploading message ID
+            const isUploading = props.currentMessage._id === uploadingMessageId && loading;
+
+            if (isUploading && props.currentMessage.image) {
+                // Return a custom message skeleton during upload
+                return (
+                    <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() !== '' && (
+                            <Box
+                                style={{
+                                    height: 15,
+                                    borderRadius: 4,
+                                    backgroundColor: colors.gray[200],
+                                    overflow: 'hidden',
+                                    marginBottom: 8,
+                                }}
+                            >
+                                <Skeleton variant="rounded" style={{ flex: 1 }} />
+                            </Box>
+                        )}
+                        <Box
+                            style={{
+                                height: 150,
+                                width: 150,
+                                borderRadius: 10,
+                                backgroundColor: colors.gray[200],
+                                overflow: 'hidden',
+                            }}
+                        >
+                            <Skeleton variant="rounded" style={{ flex: 1 }} />
+                        </Box>
+                    </View>
+                );
+            }
+
             // Use memo to prevent unnecessary re-renders of each message
             return (
                 <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
             );
         },
-        [isShowImageViewer],
+        [isShowImageViewer, uploadingMessageId, loading],
     );
 
     let onScroll = false;
@@ -1446,197 +1218,13 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
     };
 
     const onEndReached = () => {
-        console.log('on end reached');
         if (!onScroll) return;
         onScroll = false;
     };
 
-    // Add debug logging to help diagnose the issue
-    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]);
-
-    // Fix the infinite update loop in useEffect monitoring state changes
-    useEffect(() => {
-        // Only trigger effect if we have a specific state to handle
-        // Check if function exists and if we're in a valid state before calling implementation functions
-        if (state && typeof state.matches === 'function') {
-            if (state.matches(BaseState.FetchMessages)) {
-                console.log('In FetchMessages state, attempting to fetch messages');
-                // Use a ref to track if we've already fetched for this state update
-                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?.value,
-        fetchMessagesDirectly,
-        fetchMoreMessagesImpl,
-        sendMessageImpl,
-        sendMessageWithFileImpl,
-        createDirectChannelImpl,
-        safeSend,
-    ]);
-
-    // Add refs to prevent duplicate operations
-    const fetchInProgressRef = useRef(false);
-    const fetchMoreInProgressRef = useRef(false);
-    const sendInProgressRef = useRef(false);
-    const sendFileInProgressRef = useRef(false);
-    const createChannelInProgressRef = useRef(false);
-
-    // Fix subscription handler to prevent infinite updates
-    const renderChatFooter = useCallback(() => {
-        return (
-            <>
-                <ImageViewerModal
-                    isVisible={isShowImageViewer}
-                    setVisible={setImageViewer}
-                    modalContent={modalContent}
-                />
-                <SubscriptionHandler
-                    channelId={state?.context?.channelId?.toString()}
-                    subscribeToNewMessages={() =>
-                        subscribeToMore({
-                            document: CHAT_MESSAGE_ADDED,
-                            variables: {
-                                channelId: state?.context?.channelId?.toString(),
-                            },
-                            updateQuery: (prev, { subscriptionData }: any) => {
-                                if (!subscriptionData?.data?.chatMessageAdded) return prev;
-
-                                const newMessage = subscriptionData.data.chatMessageAdded;
-                                const currentMessages = prev?.messages?.data || [];
-
-                                // Check if message already exists to prevent duplicates
-                                if (currentMessages.some((msg) => msg.id === newMessage.id)) {
-                                    return prev; // Skip update if message already exists
-                                }
-
-                                // Use a ref to track the last processed message ID to prevent duplicate processing
-                                if (lastProcessedMessageRef.current === newMessage.id) {
-                                    return prev;
-                                }
-
-                                lastProcessedMessageRef.current = newMessage.id;
-
-                                // Use a batch update strategy to avoid frequent re-renders
-                                queueMicrotask(() => {
-                                    safeSend({
-                                        type: ConversationActions.SET_CHANNEL_MESSAGES,
-                                        data: {
-                                            messages: uniqBy(
-                                                [...state.context.channelMessages, newMessage],
-                                                ({ id }) => id,
-                                            ),
-                                            totalCount: (prev?.messages?.totalCount || 0) + 1,
-                                        },
-                                    });
-                                });
-
-                                return {
-                                    ...prev,
-                                    messages: {
-                                        ...prev?.messages,
-                                        data: [...currentMessages, newMessage],
-                                        totalCount: (prev?.messages?.totalCount || 0) + 1,
-                                    },
-                                };
-                            },
-                        })
-                    }
-                />
-            </>
-        );
-    }, [
-        isShowImageViewer,
-        modalContent,
-        state?.context?.channelId,
-        state?.context?.channelMessages,
-        subscribeToMore,
-        safeSend,
-    ]);
-
-    // Add ref to track last processed message
-    const lastProcessedMessageRef = useRef(null);
-
-    // Add optimized listViewProps to reduce re-renders and improve list performance
-    const listViewProps = useMemo(
-        () => ({
-            onEndReached: onEndReached,
-            onEndReachedThreshold: 0.5,
-            onMomentumScrollBegin: onMomentumScrollBegin,
-            removeClippedSubviews: true, // Improve performance by unmounting components when not visible
-            initialNumToRender: 10, // Reduce initial render amount
-            maxToRenderPerBatch: 7, // Reduce number in each render batch
-            windowSize: 7, // Reduce the window size
-            updateCellsBatchingPeriod: 50, // Batch cell updates to improve scrolling
-            keyExtractor: (item) => item._id, // Add explicit key extractor
-        }),
-        [onEndReached, onMomentumScrollBegin],
-    );
-
     // Add a loader for when more messages are being loaded
     const renderLoadEarlier = useCallback(() => {
-        return state?.context?.loadingOldMessages ? (
+        return loadingOldMessages ? (
             <View
                 style={{
                     padding: 10,
@@ -1648,7 +1236,7 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 <Spinner size="small" color="#3b82f6" />
             </View>
         ) : null;
-    }, [state?.context?.loadingOldMessages]);
+    }, [loadingOldMessages]);
 
     // Add renderInputToolbar function
     const renderInputToolbar = useCallback((props) => {
@@ -1672,15 +1260,106 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
         );
     }, []);
 
+    // Create a memoized ImageViewerModal component
+    const imageViewerModal = useMemo(
+        () => (
+            <ImageViewerModal isVisible={isShowImageViewer} setVisible={setImageViewer} modalContent={modalContent} />
+        ),
+        [isShowImageViewer, modalContent],
+    );
+
+    // Create a memoized subscription handler component
+    const subscriptionHandler = useMemo(
+        () => (
+            <SubscriptionHandler
+                channelId={channelId?.toString()}
+                subscribeToNewMessages={() =>
+                    subscribeToMore({
+                        document: CHAT_MESSAGE_ADDED,
+                        variables: {
+                            channelId: channelId?.toString(),
+                        },
+                        // updateQuery: (prev, { subscriptionData }: any) => {
+                        //     try {
+                        //         // Check if we have valid subscription data
+                        //         if (!subscriptionData?.data?.chatMessageAdded) {
+                        //             return prev;
+                        //         }
+
+                        //         const newMessage = subscriptionData.data.chatMessageAdded;
+
+                        //         // Check if message is from current user - skip update as it's handled by optimistic UI
+                        //         if (newMessage.author?.id === auth?.id) {
+                        //             return prev;
+                        //         }
+
+                        //         // Check if we already have this message to avoid duplicates
+                        //         const currentMessages = prev?.messages?.data || [];
+                        //         if (currentMessages.some((msg) => msg.id === newMessage.id)) {
+                        //             return prev;
+                        //         }
+
+                        //         // Update Apollo cache
+                        //         const updatedData = {
+                        //             ...prev,
+                        //             messages: {
+                        //                 ...prev.messages,
+                        //                 data: [newMessage, ...currentMessages],
+                        //                 totalCount: (prev?.messages?.totalCount || 0) + 1,
+                        //             },
+                        //         };
+
+                        //         return updatedData;
+                        //     } catch (error) {
+                        //         return prev;
+                        //     }
+                        // },
+                    })
+                }
+            />
+        ),
+        [channelId, subscribeToMore, auth?.id],
+    );
+
+    // Create a memoized renderChatFooter function
+    const renderChatFooter = useCallback(() => {
+        return (
+            <>
+                {imageViewerModal}
+                {subscriptionHandler}
+            </>
+        );
+    }, [imageViewerModal, subscriptionHandler]);
+
+    // Add optimized listViewProps to reduce re-renders and improve list performance
+    const listViewProps = useMemo(
+        () => ({
+            onEndReached: onEndReached,
+            onEndReachedThreshold: 0.5,
+            onMomentumScrollBegin: onMomentumScrollBegin,
+            removeClippedSubviews: true, // Improve performance by unmounting components when not visible
+            initialNumToRender: 10, // Reduce initial render amount
+            maxToRenderPerBatch: 7, // Reduce number in each render batch
+            windowSize: 7, // Reduce the window size
+            updateCellsBatchingPeriod: 50, // Batch cell updates to improve scrolling
+            keyExtractor: (item) => item._id, // Add explicit key extractor
+        }),
+        [onEndReached, onMomentumScrollBegin],
+    );
+
     // Return optimized component with performance improvements
     return (
         <View
             style={{
                 flex: 1,
                 backgroundColor: 'white',
+                position: 'relative',
             }}
         >
-            {state?.matches && state.matches(BaseState.FetchMessages) && <Spinner color={'#3b82f6'} />}
+            {messageLoading && <Spinner color={'#3b82f6'} />}
+
+            {/* Render the image preview directly in the container so it's properly positioned */}
+            {selectedImage ? renderAccessory() : null}
 
             <GiftedChat
                 ref={messageRootListRef}
@@ -1690,20 +1369,13 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 listViewProps={{
                     ...listViewProps,
                     contentContainerStyle: {
-                        paddingBottom: 10,
+                        paddingBottom: selectedImage ? 90 : 0, // Add padding at the bottom when image is selected
                     },
-                    keyboardShouldPersistTaps: 'handled',
                 }}
                 onSend={handleSend}
-                text={safeContextProperty('messageText', ' ') || ' '}
-                onInputTextChanged={(text) =>
-                    safeSend({ type: ConversationActions.SET_MESSAGE_TEXT, data: { messageText: text } })
-                }
-                renderFooter={() =>
-                    safeContextProperty('loading') || safeContextProperty('imageLoading') ? (
-                        <Spinner color={'#3b82f6'} />
-                    ) : null
-                }
+                text={messageText || ' '}
+                onInputTextChanged={(text) => setMessageText(text)}
+                renderFooter={() => (loading && !images.length ? <Spinner color={'#3b82f6'} /> : null)}
                 scrollToBottom
                 user={{
                     _id: auth?.id || '',
@@ -1714,14 +1386,13 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 renderMessageText={renderMessageText}
                 renderInputToolbar={renderInputToolbar}
                 minInputToolbarHeight={50}
-                renderActions={safeContextProperty('channelId') && renderActions}
-                renderAccessory={!!state?.context?.selectedImage ? renderAccessory : undefined}
+                renderActions={channelId && renderActions}
                 renderMessage={renderMessage}
                 renderChatFooter={renderChatFooter}
                 renderLoadEarlier={renderLoadEarlier}
-                loadEarlier={state?.context?.totalCount > state?.context?.channelMessages?.length}
-                isLoadingEarlier={state?.context?.loadingOldMessages}
-                bottomOffset={Platform.OS === 'ios' ? 10 : 0} // Reduce bottom offset
+                loadEarlier={totalCount > channelMessages.length}
+                isLoadingEarlier={loadingOldMessages}
+                bottomOffset={Platform.OS === 'ios' ? (selectedImage ? 90 : 10) : 0} // Adjust bottom offset based on image preview
                 textInputProps={{
                     style: {
                         borderWidth: 1,
@@ -1759,15 +1430,27 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
 };
 
 const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: ISubscriptionHandlerProps) => {
-    // Use memo for the channelId dependency to prevent unnecessary subscriptions
+    // Store the channelId in a ref to track changes
     const channelIdRef = useRef(channelId);
 
     useEffect(() => {
-        if (channelId && channelId !== channelIdRef.current) {
-            channelIdRef.current = channelId;
-            console.log('Setting up subscription for channel:', channelId);
-            return subscribeToNewMessages();
+        // Don't set up subscription if there's no channel ID
+        if (!channelId) {
+            return;
         }
+
+        // Call the subscribe function and store the unsubscribe function
+        const unsubscribe = subscribeToNewMessages();
+
+        // Update the ref with the current channelId
+        channelIdRef.current = channelId;
+
+        // Return cleanup function
+        return () => {
+            if (unsubscribe && typeof unsubscribe === 'function') {
+                unsubscribe();
+            }
+        };
     }, [channelId, subscribeToNewMessages]);
 
     return null;