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

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

@@ -12,7 +12,7 @@ import {
     Spinner,
     Text,
 } from '@admin-layout/gluestack-ui-mobile';
-import { Platform, TouchableHighlight } from 'react-native';
+import { Platform, TouchableHighlight, SafeAreaView, View } from 'react-native';
 import { useFocusEffect, useIsFocused, useNavigation } from '@react-navigation/native';
 import { navigationRef } from '@common-stack/client-react';
 import { useSelector } from 'react-redux';
@@ -20,7 +20,7 @@ import { orderBy, startCase, uniqBy } from 'lodash-es';
 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 } from 'react-native-gifted-chat';
+import { Actions, GiftedChat, IMessage, MessageText, Send, Composer, InputToolbar } from 'react-native-gifted-chat';
 import { PreDefinedRole, RoomType, IExpoNotificationData, IFileInfo } from 'common';
 import {
     OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
@@ -37,6 +37,20 @@ 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';
+
+// Define an extended interface for ImagePickerAsset with url property
+interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
+    url?: string;
+    fileName?: string;
+    mimeType?: string;
+}
 
 const {
     MESSAGES_PER_PAGE,
@@ -76,35 +90,348 @@ 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);
-    const [channelMessages, setChannelMessages] = useState<any>([]);
+
+    // 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]);
+
+    // 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,
+        };
+    }, []);
+
+    // Use cleanup function to prevent setting state after unmount
+    useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+
     const auth: any = useSelector(userSelector);
-    const [totalCount, setTotalCount] = useState<any>(0);
-    const [selectedImage, setImage] = useState<string>('');
     const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
-    const [channelId, setChannelId] = useState<any>(rest?.isCreateNewChannel ? null : ChannelId);
-    const [loadingOldMessages, setLoadingOldMessages] = useState<boolean>(false);
     const navigation = useNavigation<any>();
-    const [files, setFiles] = useState<File[]>([]);
-    const [images, setImages] = useState<ImagePicker.ImagePickerAsset[]>([]);
-    const [msg, setMsg] = useState<string>('');
-    const [loading, setLoading] = useState(false);
-    const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
-    const [imageLoading, setImageLoading] = useState(false);
-    const [expoTokens, setExpoTokens] = useState<any[]>([]);
+    const [selectedImage, setImage] = useState<string>('');
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
-    const [skip, setSkip] = useState(0);
     const messageRootListRef = useRef<any>(null);
     const isFocused = useIsFocused();
 
-    const [addDirectChannel, { loading: addDirectChannaleLoading }] = useAddDirectChannelMutation();
-
+    const [addDirectChannel] = useAddDirectChannelMutation();
     const { startUpload } = useUploadFilesNative();
-
     const [sendMsg] = useSendMessagesMutation();
-
     const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
 
     const {
@@ -115,119 +442,473 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
         subscribeToMore,
     }: any = useMessagesQuery({
         variables: {
-            channelId: channelId?.toString(),
+            channelId: state.context.channelId?.toString(),
             parentId: null,
             limit: MESSAGES_PER_PAGE,
-            skip: skip,
+            skip: state.context.skip,
         },
-        skip: !channelId,
+        skip: !state.context.channelId,
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         refetchWritePolicy: 'merge',
+        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);
+            }
+        },
+        onError: (error) => {
+            console.error('MESSAGE QUERY ERROR:', error);
+        },
     });
 
-    // const {
-    //     data: channelsDetail,
-    //     loading: channelLoading,
-    //     refetch: refetchChannelDetail,
-    // } = useViewChannelDetailQuery({
-    //     variables: {
-    //         id: channelId?.toString(),
-    //     },
-    // });
-    // const { data: users } = useGetAllUsersQuery();
+    // 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;
+        }
+
+        try {
+            console.log('💫 FETCHING messages for channel:', channelId);
+
+            // Use loading state to prevent duplicate fetches
+            send({ type: ConversationActions.START_LOADING });
+
+            const response = await refetch({
+                channelId: channelId.toString(),
+                parentId: null,
+                limit: MESSAGES_PER_PAGE,
+                skip: 0,
+            });
+
+            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 });
+            }
+        } catch (error) {
+            console.error('ERROR fetching messages:', error);
+            send({ type: ConversationActions.STOP_LOADING });
+        }
+    }, [safeGetContext, refetch, safeSend]);
+
+    const fetchMoreMessagesImpl = useCallback(async () => {
+        try {
+            const response = await fetchMoreMessages({
+                variables: {
+                    channelId: state.context.channelId?.toString(),
+                    parentId: null,
+                    skip: state.context.channelMessages.length,
+                },
+            });
+
+            if (!response?.data?.messages?.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 () => {
+        try {
+            const notificationData: IExpoNotificationData = {
+                url: config.INBOX_MESSEGE_PATH,
+                params: { channelId: state.context.channelId, hideTabBar: true },
+                screen: 'DialogMessages',
+                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
+            };
+
+            const response = await sendMsg({
+                variables: {
+                    channelId: state.context.channelId,
+                    content: state.context.messageText,
+                    notificationParams: notificationData,
+                },
+            });
+
+            return { message: response.data?.sendMessage };
+        } catch (error) {
+            return { error: String(error) };
+        }
+    }, [state.context.channelId, state.context.messageText, sendMsg]);
+
+    // Fix the image selection process to ensure proper format for upload
+    const onSelectImages = async () => {
+        safeSend({ type: ConversationActions.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?.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 });
+                    return;
+                }
+
+                // Create a base64 image string for preview
+                const base64Data = selectedAsset.base64;
+                const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : selectedAsset.uri;
+
+                // Format the asset for upload service requirements
+                const asset: ExtendedImagePickerAsset = {
+                    ...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,
+                });
+
+                // 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');
+            } else {
+                console.log('Image selection cancelled');
+                safeSend({ type: ConversationActions.STOP_LOADING });
+            }
+        } catch (error) {
+            console.error('Error selecting image:', error);
+            safeSend({ type: ConversationActions.STOP_LOADING });
+        }
+    };
+
+    // Update the sendMessageWithFileImpl function to fix image uploads
+    const sendMessageWithFileImpl = useCallback(async () => {
+        try {
+            console.log('Executing sendMessageWithFileImpl');
+
+            // Generate a unique post ID for the message
+            const postId = objectId();
+            console.log('Generated postId for file upload:', postId);
+
+            // Prepare notification data
+            const notificationData: IExpoNotificationData = {
+                url: config.INBOX_MESSEGE_PATH,
+                params: { channelId: state.context.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');
+                return { error: 'No images available to upload' };
+            }
+
+            // Format the images for upload if needed
+            const imagesToUpload = state.context.images.map((img) => {
+                // Ensure the image has all required properties
+                return {
+                    ...img,
+                    uri: img.uri || img.url, // Use either uri or url
+                    type: 'image/jpeg',
+                    name: img.fileName || `image_${Date.now()}.jpg`,
+                };
+            });
+
+            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) + '...',
+                })),
+            );
+
+            // Upload the files
+            console.log('Starting file upload...');
+            const uploadResponse = await startUpload({
+                file: imagesToUpload,
+                saveUploadedFile: {
+                    variables: { postId },
+                },
+                createUploadLink: {
+                    variables: { postId },
+                },
+            });
+
+            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);
+                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
+                    files,
+                    notificationParams: notificationData,
+                },
+            });
+
+            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);
+            }
+
+            return { message: response.data?.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 () => {
+        try {
+            if (
+                !rest?.isCreateNewChannel ||
+                rest?.newChannelData?.type !== RoomType?.Direct ||
+                !rest?.newChannelData?.userIds?.length
+            ) {
+                return { error: 'Invalid channel data' };
+            }
+
+            const response = await addDirectChannel({
+                variables: {
+                    receiver: [...(rest?.newChannelData?.userIds ?? [])],
+                    displayName: 'DIRECT CHANNEL',
+                },
+            });
+
+            if (!response?.data?.createDirectChannel?.id) {
+                return { error: 'Failed to create channel' };
+            }
+
+            const newChannelId = response.data.createDirectChannel.id;
+
+            const notificationData: IExpoNotificationData = {
+                url: config.INBOX_MESSEGE_PATH,
+                params: { channelId: newChannelId, hideTabBar: true },
+                screen: 'DialogMessages',
+                other: { sound: Platform.OS === 'android' ? undefined : '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]);
+
+    // 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 () => {
-            setChannelMessages([]);
+            send({ type: ConversationActions.CLEAR_MESSAGES });
         };
     }, []);
 
     useFocusEffect(
         React.useCallback(() => {
-            // Do something when the screen is focused
-            setSkip(0);
-            //  refetchChannelDetail({ id: channelId?.toString() });
-            if (channelId) {
-                refetch({
-                    channelId: channelId?.toString(),
-                    parentId: null,
-                    limit: MESSAGES_PER_PAGE,
-                    skip: 0,
-                }).then(({ data }) => {
-                    if (!data?.messages) {
-                        return;
-                    }
-                    const { data: messages, totalCount }: any = data.messages;
-                    setTotalCount(totalCount);
-                    setChannelMessages(messages);
-                });
+            if (state.context.channelId) {
+                send({ type: ConversationActions.INITIAL_CONTEXT, data: { channelId: state.context.channelId } });
             }
             return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-                setChannelId(null);
-                setTotalCount(0);
-                setSkip(0);
+                send({ type: ConversationActions.CLEAR_MESSAGES });
             };
-        }, [channelId, isFocused]),
+        }, [state.context.channelId, isFocused]),
     );
 
     React.useEffect(() => {
         const currentChannelId = ChannelId || currentRoute?.params?.channelId;
-        setChannelId(currentChannelId);
+        if (currentChannelId) {
+            console.log('Setting initial channel ID:', currentChannelId);
+            send({ type: ConversationActions.INITIAL_CONTEXT, data: { channelId: currentChannelId } });
+        }
     }, [ChannelId, currentRoute]);
 
     React.useEffect(() => {
-        if (selectedImage) setImageLoading(false);
-    }, [selectedImage]);
+        if (state.context.selectedImage) {
+            send({ type: ConversationActions.STOP_LOADING });
+        }
+    }, [state.context.selectedImage]);
 
     useEffect(() => {
         if (data?.messages?.data) {
-            const { data: messages, totalCount: messeageTotalCount } = data.messages;
-            console.log('messeageTotalCount', messeageTotalCount, ' totalCount=', totalCount);
+            console.log('📩 QUERY DATA CHANGED - Messages received:', data.messages.data.length);
+            const { data: messages, totalCount: messageTotalCount } = data.messages;
 
-            if (
-                (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
-                (messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))
-            ) {
-                setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
-                setTotalCount(messeageTotalCount);
-            }
+            if (messages && messages.length > 0) {
+                console.log('📩 QUERY DATA - Setting channel messages, count:', messages.length);
 
-            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?.toString(),
-                        parentId: null,
-                        skip: channelMessages.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,
                     },
                 });
-                if (response?.data) {
-                    setSkip(channelMessages.length);
-                    setLoadEarlierMsg(false);
-                    setLoadingOldMessages(true);
+
+                // 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,
+                        }),
+                    );
                 }
-            } catch (error: any) {
-                setLoadEarlierMsg(false);
+
+                // 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]);
+
+    // Optimize onFetchOld by adding debounce logic
+    const onFetchOld = useCallback(() => {
+        // Prevent multiple rapid calls
+        if (fetchOldDebounceRef.current) return;
 
-            // ?.then((res: any) => {
-            //     setLoadingOldMessages(true);
-            // });
+        // Check if we need to fetch more messages
+        if (
+            state?.context?.totalCount > state?.context?.channelMessages?.length &&
+            !state?.context?.loadingOldMessages
+        ) {
+            // Set debounce
+            fetchOldDebounceRef.current = true;
+
+            // Send fetch event
+            send({ type: ConversationActions.FETCH_MORE_MESSAGES });
+
+            // Clear debounce after a timeout
+            setTimeout(() => {
+                fetchOldDebounceRef.current = false;
+            }, 1000);
         }
-    }, [totalCount, channelMessages]);
+    }, [state?.context?.totalCount, state?.context?.channelMessages, state?.context?.loadingOldMessages]);
 
-    // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
-    //     return contentOffset.y <= 100; // 100px from top
-    // };
+    // Add debounce ref
+    const fetchOldDebounceRef = useRef(false);
 
     const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
         const paddingToTop = 60;
@@ -246,454 +927,492 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
         return new File([u8arr], filename, { type: mime });
     };
 
-    const onSelectImages = async () => {
-        setImageLoading(true);
-        let imageSource: any = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ImagePicker.MediaTypeOptions.Images,
-            allowsEditing: true,
-            aspect: [4, 3],
-            quality: 1,
-            base64: true,
-        });
-        // if (!imageSource.cancelled) {
-        //     const image = 'data:image/jpeg;base64,' + imageSource?.base64;
-        //     setImage(image);
-        //     const file = dataURLtoFile(image, 'inputImage.jpg');
-        //     setFiles((files) => files.concat(file));
-        //     setImages((images) => images.concat(imageSource as ImagePicker.ImageInfo));
-        // }
-        // if (imageSource.cancelled) setLoading(false);
-
-        if (!imageSource.canceled) {
-            const image = 'data:image/jpeg;base64,' + imageSource?.assets[0]?.base64;
-            setImage(image);
-            const file = dataURLtoFile(image, 'inputImage.jpg');
-            setFiles((files) => files.concat(file));
-            setImages((images) => images.concat(imageSource?.assets[0] as ImagePicker.ImagePickerAsset));
-        }
+    // Fix the render send function to ensure it works for image-only messages
+    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;
 
-        if (imageSource.canceled) setLoading(false);
-    };
-
-    const createDirectChannel = useCallback(
-        (msg: string) => {
-            if (
-                rest?.isCreateNewChannel &&
-                rest?.newChannelData?.type === RoomType?.Direct &&
-                rest?.newChannelData?.userIds?.length > 0
-            ) {
-                addDirectChannel({
-                    variables: {
-                        receiver: [...(rest?.newChannelData?.userIds ?? [])],
-                        displayName: 'DIRECT CHANNEL',
-                    },
-                })
-                    ?.then(async (res) => {
-                        if (res?.data?.createDirectChannel?.id) {
-                            setChannelId(res?.data?.createDirectChannel?.id);
-                            const notificationData: IExpoNotificationData = {
-                                url: config.INBOX_MESSEGE_PATH,
-                                params: { channelId: res?.data?.createDirectChannel?.id, hideTabBar: true },
-                                screen: 'DialogMessages',
-                                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
-                            };
-                            setLoading(true);
-                            await sendMsg({
-                                variables: {
-                                    channelId: res?.data?.createDirectChannel?.id,
-                                    content: msg,
-                                    notificationParams: notificationData,
-                                },
-                                update: (cache, { data, errors }: any) => {
-                                    if (!data || errors) {
-                                        setLoading(false);
-                                        return;
-                                    }
-                                    setChannelToTop(channelToTop + 1);
-                                    setLoading(false);
-                                    setMsg('');
-                                },
-                            });
-                        }
-                    })
-                    ?.catch((e: any) => console.log('error', JSON.stringify(e)));
-            }
+            return (
+                <Send
+                    {...props}
+                    disabled={!canSend}
+                    containerStyle={{
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: 40,
+                        width: 44,
+                        marginRight: 4,
+                        marginBottom: 0,
+                        marginLeft: 4,
+                    }}
+                >
+                    <View style={{ padding: 4 }}>
+                        <MaterialCommunityIcons
+                            name="send-circle"
+                            size={32}
+                            color={canSend ? colors.blue[500] : colors.gray[400]}
+                        />
+                    </View>
+                </Send>
+            );
         },
-        [rest],
+        [state?.context?.channelId, state?.context?.images, rest?.isCreateNewChannel],
     );
 
+    // Fix the handleSend function to properly handle image-only messages
     const handleSend = useCallback(
-        async (message: string) => {
-            if (!channelId) return;
-            if (!message && message != ' ' && images.length == 0) return;
+        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 notificationData: IExpoNotificationData = {
-                url: config.INBOX_MESSEGE_PATH,
-                params: { channelId, hideTabBar: true },
-                screen: 'DialogMessages',
-                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
-            };
+            // 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');
+                return;
+            }
 
-            if (images && images.length > 0) {
-                const postId = objectId();
+            // 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;
 
-                setLoading(true);
-                const uploadResponse = await startUpload({
-                    file: images,
-                    saveUploadedFile: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                    createUploadLink: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                });
-                if (uploadResponse?.error) setLoading(false);
-                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-
-                if (uploadResponse.data) {
-                    setImage('');
-                    setFiles([]);
-                    setImages([]);
-                    //setLoading(false);
-                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
-                    await sendMsg({
-                        variables: {
-                            postId,
-                            channelId,
-                            content: message,
-                            files,
-                            notificationParams: notificationData,
-                        },
-                        update: (cache, { data, errors }: any) => {
-                            if (!data || errors) {
-                                setLoading(false);
-                                return;
-                            }
-                            //Temporary fix.....//
-                            const newMessage: any = data?.sendMessage;
-                            setChannelMessages((oldMessages: any) =>
-                                uniqBy([...oldMessages, newMessage], ({ id }) => id),
-                            );
-                            setTotalCount((t) => t + 1);
-                            //Temporary fix.....//
-
-                            setChannelToTop(channelToTop + 1);
-                            setLoading(false);
-                            setMsg('');
-                        },
-                    });
+            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 } });
+
+            // Handle direct channel creation if needed
+            if (rest?.isCreateNewChannel && !state.context.channelId) {
+                if (rest?.newChannelData?.type === RoomType?.Direct) {
+                    safeSend({ type: ConversationActions.CREATE_DIRECT_CHANNEL });
                 }
+                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 });
             } else {
-                setLoading(true);
-                await sendMsg({
-                    variables: {
-                        channelId,
-                        content: message,
-                        notificationParams: notificationData,
-                    },
-                    update: (cache, { data, errors }: any) => {
-                        if (!data || errors) {
-                            setLoading(false);
-                            return;
-                        }
-                        //Temporary fix.....//
-                        const newMessage: any = data?.sendMessage;
-                        setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, newMessage], ({ id }) => id));
-                        setTotalCount((t) => t + 1);
-                        //Temporary fix.....//
-
-                        setChannelToTop(channelToTop + 1);
-                        setLoading(false);
-                        setMsg('');
-                    },
-                });
+                console.log('Sending text-only message');
+                safeSend({ type: ConversationActions.SEND_MESSAGE });
             }
         },
-        [setChannelMessages, channelId, images, channelToTop, expoTokens],
+        [state.context.channelId, state.context.images, rest?.isCreateNewChannel, rest?.newChannelData?.type, safeSend],
     );
 
-    const messageList = useMemo(() => {
-        let currentDate = '';
-        let res: any = [];
-        const filteredMessages =
-            channelMessages && channelMessages?.length > 0 ? uniqBy([...channelMessages], ({ id }: any) => id) : [];
-        if (channelId && filteredMessages?.length > 0) {
-            orderBy(channelMessages, ['createdAt'], ['desc']).map((msg) => {
-                let message: IMessageProps = {
-                    _id: '',
-                    text: '',
-                    createdAt: 0,
-                    user: {
-                        _id: '',
-                        name: '',
-                        avatar: '',
+    // 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,
                     },
-                    type: '',
-                };
-                const date = new Date(msg.createdAt);
-                message._id = msg.id;
-                message.text = msg.message;
-                message.createdAt = date;
-                (message.user = {
-                    _id: msg.author.id,
-                    name: msg.author.givenName + ' ' + msg.author.familyName,
-                    avatar: msg.author?.picture,
+                });
+            }
+        } 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 [];
+        }
+
+        // Log the first message for debugging
+        if (state.context.channelMessages[0]) {
+            const sampleMsg = state.context.channelMessages[0];
+            console.log(
+                '📷 Sample message files:',
+                JSON.stringify({
+                    hasFiles: !!sampleMsg.files,
+                    fileCount: sampleMsg.files?.data?.length || 0,
+                    fileUrl: sampleMsg.files?.data?.[0]?.url || 'none',
                 }),
-                    (message.image = msg.files?.data[0]?.url),
-                    (message.sent = msg?.isDelivered),
-                    (message.received = msg?.isRead);
-                message.type = msg?.type;
-                message.propsConfiguration = msg?.propsConfiguration;
-                message.replies = msg?.replies ?? [];
-                message.isShowThreadMessage = isShowThreadMessage;
-                res.push(message);
-            });
+            );
         }
-        return res?.length > 0 ? uniqBy([...res], ({ _id }: any) => _id) : [];
-        //return res;
-    }, [channelMessages, channelId]);
 
-    const renderSend = (props) => {
-        return (
-            <Send {...props} disabled={channelId || rest?.isCreateNewChannel ? false : true}>
-                <Box>
-                    <MaterialCommunityIcons
-                        name="send-circle"
-                        style={{ marginBottom: 5, marginRight: 5 }}
-                        size={32}
-                        color={channelId || rest?.isCreateNewChannel ? '#2e64e5' : '#b8b2b2'}
-                    />
-                </Box>
-            </Send>
-        );
-    };
+        // Use a more efficient approach - pre-filter messages once
+        const filteredMessages = uniqBy(state.context.channelMessages, ({ id }) => id);
 
-    const renderMessageText = (props: any) => {
-        const { currentMessage } = props;
-        const lastReply: any = currentMessage?.replies?.data?.length > 0 ? currentMessage?.replies?.data?.[0] : null;
-
-        if (currentMessage.type === 'ALERT') {
-            const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
-            let action: string = '';
-            let actionId: any = '';
-            let params: any = {};
-
-            if (attachment?.callToAction?.extraParams) {
-                const extraParams: any = attachment?.callToAction?.extraParams;
-                const route: any = extraParams?.route ?? null;
-                let path: any = null;
-                let param: any = null;
-                if (role && role == PreDefinedRole.Guest) {
-                    path = route?.guest?.name ? route?.guest?.name ?? null : null;
-                    param = route?.guest?.params ? route?.guest?.params ?? null : null;
-                } else if (role && role == PreDefinedRole.Owner) {
-                    path = route?.host?.name ? route?.host?.name ?? null : null;
-                    param = route?.host?.params ? route?.host?.params ?? null : null;
-                } else {
-                    path = route?.host?.name ? route?.host?.name ?? null : null;
-                    param = route?.host?.params ? route?.host?.params ?? null : null;
-                }
+        // 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);
 
-                action = path;
-                params = { ...param };
-            } else if (attachment?.callToAction?.link) {
-                action = CALL_TO_ACTION_PATH;
-                actionId = attachment?.callToAction?.link.split('/').pop();
-                params = { reservationId: actionId };
+            // 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;
+                    console.log('📷 Found image URL for message', msg.id, ':', imageUrl);
+                }
             }
 
-            return (
-                <>
-                    {attachment?.callToAction && action ? (
-                        <Box className={`bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2`}>
-                            <Button
-                                variant={'outline'}
-                                size={'sm'}
-                                className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`}
-                                onPress={() => action && params && navigation.navigate(action, params)}
-                                // onPress={() => navigation.navigate(action, { reservationId: actionId })}
-                            >
-                                <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
-                                    {attachment.callToAction.title}
-                                </ButtonText>
-                            </Button>
-                            <MessageText
-                                {...props}
-                                textStyle={{
-                                    left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 },
+            // 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, state?.context?.channelId, isShowThreadMessage]);
+
+    // Memoize the renderMessageText function
+    const renderMessageText = useCallback(
+        (props: any) => {
+            const { currentMessage } = props;
+            const lastReply: any =
+                currentMessage?.replies?.data?.length > 0 ? currentMessage?.replies?.data?.[0] : null;
+
+            if (currentMessage.type === 'ALERT') {
+                const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
+                let action: string = '';
+                let actionId: any = '';
+                let params: any = {};
+
+                if (attachment?.callToAction?.extraParams) {
+                    const extraParams: any = attachment?.callToAction?.extraParams;
+                    const route: any = extraParams?.route ?? null;
+                    let path: any = null;
+                    let param: any = null;
+                    if (role && role == PreDefinedRole.Guest) {
+                        path = route?.guest?.name ? route?.guest?.name ?? null : null;
+                        param = route?.guest?.params ? route?.guest?.params ?? null : null;
+                    } else if (role && role == PreDefinedRole.Owner) {
+                        path = route?.host?.name ? route?.host?.name ?? null : null;
+                        param = route?.host?.params ? route?.host?.params ?? null : null;
+                    } else {
+                        path = route?.host?.name ? route?.host?.name ?? null : null;
+                        param = route?.host?.params ? route?.host?.params ?? null : null;
+                    }
+
+                    action = path;
+                    params = { ...param };
+                } else if (attachment?.callToAction?.link) {
+                    action = CALL_TO_ACTION_PATH;
+                    actionId = attachment?.callToAction?.link.split('/').pop();
+                    params = { reservationId: actionId };
+                }
+
+                return (
+                    <>
+                        {attachment?.callToAction && action ? (
+                            <Box className={`bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2`}>
+                                <Button
+                                    variant={'outline'}
+                                    size={'sm'}
+                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`}
+                                    onPress={() => action && params && navigation.navigate(action, params)}
+                                >
+                                    <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
+                                        {attachment.callToAction.title}
+                                    </ButtonText>
+                                </Button>
+                                <MessageText
+                                    {...props}
+                                    textStyle={{
+                                        left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 },
+                                    }}
+                                />
+                            </Box>
+                        ) : (
+                            <TouchableHighlight
+                                underlayColor={'#c0c0c0'}
+                                style={{ width: '100%' }}
+                                onPress={() => {
+                                    if (currentMessage?.isShowThreadMessage)
+                                        navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                            channelId: state?.context?.channelId,
+                                            title: 'Message',
+                                            postParentId: currentMessage?._id,
+                                            isPostParentIdThread: true,
+                                        });
                                 }}
-                            />
-                        </Box>
-                    ) : (
-                        <TouchableHighlight
-                            underlayColor={'#c0c0c0'}
-                            style={{ width: '100%' }}
-                            onPress={() => {
-                                if (currentMessage?.isShowThreadMessage)
-                                    navigation.navigate(config.THREAD_MESSEGE_PATH, {
-                                        channelId: channelId,
-                                        title: 'Message',
-                                        postParentId: currentMessage?._id,
-                                        isPostParentIdThread: true,
-                                    });
-                            }}
-                        >
-                            <>
-                                <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
-                                {currentMessage?.replies?.data?.length > 0 && (
-                                    <HStack space={'sm'} className="px-1 items-center">
-                                        <HStack>
-                                            {currentMessage?.replies?.data
-                                                ?.filter(
-                                                    (v: any, i: any, a: any) =>
-                                                        a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
-                                                )
-                                                ?.slice(0, 2)
-                                                ?.reverse()
-                                                ?.map((p: any, i: Number) => (
-                                                    <Avatar
-                                                        key={'conversations-view-key-' + i}
-                                                        size={'sm'}
-                                                        className="bg-transparent"
-                                                    >
-                                                        <AvatarFallbackText>
-                                                            {startCase(p?.author?.username?.charAt(0))}
-                                                        </AvatarFallbackText>
-                                                        <AvatarImage
-                                                            alt="user image"
-                                                            style={{
-                                                                borderRadius: 6,
-                                                                borderWidth: 2,
-                                                                borderColor: '#fff',
-                                                            }}
-                                                            source={{
-                                                                uri: p?.author?.picture,
-                                                            }}
-                                                        />
-                                                    </Avatar>
-                                                ))}
+                            >
+                                <>
+                                    <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                                    {currentMessage?.replies?.data?.length > 0 && (
+                                        <HStack space={'sm'} className="px-1 items-center">
+                                            <HStack>
+                                                {currentMessage?.replies?.data
+                                                    ?.filter(
+                                                        (v: any, i: any, a: any) =>
+                                                            a.findIndex((t: any) => t?.author?.id === v?.author?.id) ===
+                                                            i,
+                                                    )
+                                                    ?.slice(0, 2)
+                                                    ?.reverse()
+                                                    ?.map((p: any, i: Number) => (
+                                                        <Avatar
+                                                            key={'conversations-view-key-' + i}
+                                                            size={'sm'}
+                                                            className="bg-transparent"
+                                                        >
+                                                            <AvatarFallbackText>
+                                                                {startCase(p?.author?.username?.charAt(0))}
+                                                            </AvatarFallbackText>
+                                                            <AvatarImage
+                                                                alt="user image"
+                                                                style={{
+                                                                    borderRadius: 6,
+                                                                    borderWidth: 2,
+                                                                    borderColor: '#fff',
+                                                                }}
+                                                                source={{
+                                                                    uri: p?.author?.picture,
+                                                                }}
+                                                            />
+                                                        </Avatar>
+                                                    ))}
+                                            </HStack>
+                                            <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                                {currentMessage?.replies?.totalCount}{' '}
+                                                {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                            </Text>
+                                            <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                                {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                            </Text>
                                         </HStack>
-                                        <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
-                                            {currentMessage?.replies?.totalCount}{' '}
-                                            {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
-                                        </Text>
-                                        <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
-                                            {lastReply ? createdAtText(lastReply?.createdAt) : ''}
-                                        </Text>
-                                    </HStack>
-                                )}
-                            </>
-                        </TouchableHighlight>
-                    )}
-                    {/* <MessageText
-                        {...props}
-                        textStyle={{ left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 } }}
-                    /> */}
-                </>
-            );
-        } else {
-            return (
-                <TouchableHighlight
-                    underlayColor={'#c0c0c0'}
-                    style={{ width: '100%' }}
-                    onPress={() => {
-                        if (currentMessage?.isShowThreadMessage)
-                            navigation.navigate(config.THREAD_MESSEGE_PATH, {
-                                channelId: channelId,
-                                title: 'Message',
-                                postParentId: currentMessage?._id,
-                                isPostParentIdThread: true,
-                            });
-                    }}
-                >
-                    <>
-                        <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
-                        {currentMessage?.replies?.data?.length > 0 && (
-                            <HStack space={'sm'} className="px-1 items-center">
-                                <HStack>
-                                    {currentMessage?.replies?.data
-                                        ?.filter(
-                                            (v: any, i: any, a: any) =>
-                                                a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
-                                        )
-                                        ?.slice(0, 2)
-                                        ?.reverse()
-                                        ?.map((p: any, i: Number) => (
-                                            <Avatar
-                                                key={'conversation-replies-key-' + i}
-                                                className="bg-transparent"
-                                                size={'sm'}
-                                            >
-                                                <AvatarFallbackText>
-                                                    {startCase(p?.author?.username?.charAt(0))}
-                                                </AvatarFallbackText>
-                                                <AvatarImage
-                                                    alt="user image"
-                                                    style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                                                    source={{
-                                                        uri: p?.author?.picture,
-                                                    }}
-                                                />
-                                            </Avatar>
-                                        ))}
-                                </HStack>
-                                <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
-                                    {currentMessage?.replies?.totalCount}{' '}
-                                    {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
-                                </Text>
-                                <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
-                                    {lastReply ? createdAtText(lastReply?.createdAt) : ''}
-                                </Text>
-                            </HStack>
+                                    )}
+                                </>
+                            </TouchableHighlight>
                         )}
                     </>
-                </TouchableHighlight>
-            );
-        }
-    };
+                );
+            } else {
+                return (
+                    <TouchableHighlight
+                        underlayColor={'#c0c0c0'}
+                        style={{ width: '100%' }}
+                        onPress={() => {
+                            if (currentMessage?.isShowThreadMessage)
+                                navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                    channelId: state?.context?.channelId,
+                                    title: 'Message',
+                                    postParentId: currentMessage?._id,
+                                    isPostParentIdThread: true,
+                                });
+                        }}
+                    >
+                        <>
+                            <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                            {currentMessage?.replies?.data?.length > 0 && (
+                                <HStack space={'sm'} className="px-1 items-center">
+                                    <HStack>
+                                        {currentMessage?.replies?.data
+                                            ?.filter(
+                                                (v: any, i: any, a: any) =>
+                                                    a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
+                                            )
+                                            ?.slice(0, 2)
+                                            ?.reverse()
+                                            ?.map((p: any, i: Number) => (
+                                                <Avatar
+                                                    key={'conversation-replies-key-' + i}
+                                                    className="bg-transparent"
+                                                    size={'sm'}
+                                                >
+                                                    <AvatarFallbackText>
+                                                        {startCase(p?.author?.username?.charAt(0))}
+                                                    </AvatarFallbackText>
+                                                    <AvatarImage
+                                                        alt="user image"
+                                                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                                        source={{
+                                                            uri: p?.author?.picture,
+                                                        }}
+                                                    />
+                                                </Avatar>
+                                            ))}
+                                    </HStack>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                        {currentMessage?.replies?.totalCount}{' '}
+                                        {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                    </Text>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                        {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                    </Text>
+                                </HStack>
+                            )}
+                        </>
+                    </TouchableHighlight>
+                );
+            }
+        },
+        [navigation, state?.context?.channelId, role],
+    );
 
     const renderActions = (props) => {
         return (
             <Actions
                 {...props}
-                icon={() => <Ionicons name={'image'} size={30} color={'black'} onPress={onSelectImages} />}
+                options={{
+                    ['Choose from Library']: onSelectImages,
+                    ['Cancel']: () => {}, // Add this option to make the sheet dismissible
+                }}
+                optionTintColor="#000000"
+                cancelButtonIndex={1} // Set the Cancel option as the cancel button
+                icon={() => (
+                    <Box
+                        style={{
+                            width: 32,
+                            height: 32,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <Ionicons name="image" size={24} color={colors.blue[500]} />
+                    </Box>
+                )}
+                containerStyle={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: 8,
+                    marginBottom: 0,
+                }}
             />
         );
     };
 
-    const renderAccessory = (props) => {
-        return (
-            <Box>
-                {selectedImage !== '' ? (
-                    <HStack className="items-center">
+    // Create a more visible and reliable image preview with cancel button
+    const renderAccessory = useCallback(
+        (props) => {
+            const selectedImage = safeContextProperty('selectedImage', '');
+
+            if (!selectedImage) {
+                return null;
+            }
+
+            return (
+                <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,
+                    }}
+                >
+                    <View
+                        style={{
+                            flex: 1,
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingHorizontal: 15,
+                        }}
+                    >
                         <Image
-                            key={selectedImage}
-                            alt={'image'}
-                            source={{ uri: selectedImage }}
+                            key={state?.context?.selectedImage}
+                            alt={'selected image'}
+                            source={{ uri: state?.context?.selectedImage }}
+                            style={{
+                                width: 36,
+                                height: 36,
+                                borderRadius: 5,
+                                marginRight: 15,
+                            }}
                             size={'xs'}
-                            className="ml-3"
                         />
-                        <Button
-                            variant={'solid'}
-                            className="bg-transparent"
-                            //colorScheme={'secondary'}
-                            onPress={() => {
-                                setFiles([]);
-                                setImage('');
-                                setImages([]);
+
+                        <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,
                             }}
                         >
-                            <ButtonText className="color-black">Cancel</ButtonText>
-                        </Button>
-                    </HStack>
-                ) : null}
-            </Box>
-        );
-    };
+                            <Text style={{ color: 'white', fontWeight: 'bold' }}>X</Text>
+                        </TouchableHighlight>
+                    </View>
+                </View>
+            );
+        },
+        [state?.context?.selectedImage, safeSend],
+    );
 
     const setImageViewerObject = (obj: any, v: boolean) => {
         setImageObject(obj);
@@ -707,11 +1426,9 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
             <CachedImage
                 style={{ width: '100%', height: '100%' }}
                 resizeMode={'cover'}
-                // cacheKey={`${_id}-conversation-modal-image-key`}
                 cacheKey={`${_id}-slack-bubble-imageKey`}
                 source={{
                     uri: image,
-                    //headers: `Authorization: Bearer ${token}`,
                     expiresIn: 86400,
                 }}
                 alt={'image'}
@@ -721,22 +1438,7 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
 
     const renderMessage = useCallback(
         (props: any) => {
-            // const {
-            //     currentMessage: { text: currText },
-            // } = props;
-
-            //let messageTextStyle: any;
-
-            // Make "pure emoji" messages much bigger than plain text.
-            // if (currText && emojiUtils.isPureEmojiString(currText)) {
-            //   messageTextStyle = {
-            //     fontSize: 28,
-            //     // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
-            //     lineHeight: Platform.OS === 'android' ? 34 : 30,
-            //   }
-            // }
-
-            // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
+            // Use memo to prevent unnecessary re-renders of each message
             return (
                 <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
             );
@@ -744,164 +1446,331 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
         [isShowImageViewer],
     );
 
-    // const renderMessage = (props: any) => {
-    //     // const {
-    //     //     currentMessage: { text: currText },
-    //     // } = props;
-
-    //     //let messageTextStyle: any;
-
-    //     // Make "pure emoji" messages much bigger than plain text.
-    //     // if (currText && emojiUtils.isPureEmojiString(currText)) {
-    //     //   messageTextStyle = {
-    //     //     fontSize: 28,
-    //     //     // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
-    //     //     lineHeight: Platform.OS === 'android' ? 34 : 30,
-    //     //   }
-    //     // }
-
-    //     // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
-    //     return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
-    // };
-
     let onScroll = false;
 
+    // Optimize onMomentumScrollBegin for better scroll performance
     const onMomentumScrollBegin = async ({ nativeEvent }: any) => {
+        // Set scroll state
         onScroll = true;
-        console.log('scroll top');
-        if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > channelMessages?.length) {
-            await onFetchOld();
+
+        // Use the debounced fetch function to prevent excessive calls
+        if (isCloseToTop(nativeEvent)) {
+            onFetchOld();
         }
     };
 
     const onEndReached = () => {
         console.log('on end reached');
         if (!onScroll) return;
-        // load messages, show ActivityIndicator
         onScroll = false;
-        // setLoadingOldMessages(true);
     };
 
+    // 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;
+
+                                // Send update to state machine using a timeout to break the render cycle
+                                setTimeout(() => {
+                                    safeSend({
+                                        type: ConversationActions.SET_CHANNEL_MESSAGES,
+                                        data: {
+                                            messages: uniqBy(
+                                                [...state.context.channelMessages, newMessage],
+                                                ({ id }) => id,
+                                            ),
+                                            totalCount: (prev?.messages?.totalCount || 0) + 1,
+                                        },
+                                    });
+                                }, 0);
+
+                                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
+    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: 10, // Reduce number in each render batch
+            windowSize: 10, // Reduce the window size
+        }),
+        [onEndReached, onMomentumScrollBegin],
+    );
+
+    // Add a loader for when more messages are being loaded
+    const renderLoadEarlier = useCallback(() => {
+        return state?.context?.loadingOldMessages ? (
+            <View
+                style={{
+                    padding: 10,
+                    backgroundColor: 'rgba(255,255,255,0.8)',
+                    borderRadius: 10,
+                    marginTop: 10,
+                }}
+            >
+                <Spinner size="small" color="#3b82f6" />
+            </View>
+        ) : null;
+    }, [state?.context?.loadingOldMessages]);
+
+    // Add renderInputToolbar function
+    const renderInputToolbar = useCallback((props) => {
+        return (
+            <InputToolbar
+                {...props}
+                containerStyle={{
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: colors.gray[200],
+                    paddingHorizontal: 4,
+                    paddingVertical: 0,
+                    paddingTop: 2,
+                    marginBottom: 0,
+                    marginTop: 0,
+                }}
+                primaryStyle={{
+                    alignItems: 'center',
+                }}
+            />
+        );
+    }, []);
+
+    // Return optimized component with performance improvements
     return (
-        <>
-            {loadEarlierMsg && <Spinner color={'$blue500'} />}
+        <View
+            style={{
+                flex: 1,
+                backgroundColor: 'white',
+            }}
+        >
+            {state?.matches && state.matches(BaseState.FetchMessages) && <Spinner color={'#3b82f6'} />}
 
             <GiftedChat
                 ref={messageRootListRef}
-                wrapInSafeArea={false}
-                renderLoading={() => <Spinner color={'$blue500'} />}
+                wrapInSafeArea={true}
+                renderLoading={() => <Spinner color={'#3b82f6'} />}
                 messages={messageList}
                 listViewProps={{
-                    onEndReached: onEndReached,
-                    onEndReachedThreshold: 0.5,
-                    onMomentumScrollBegin: onMomentumScrollBegin,
+                    ...listViewProps,
+                    contentContainerStyle: {
+                        paddingBottom: 10,
+                    },
+                    keyboardShouldPersistTaps: 'handled',
                 }}
-                // listViewProps={{
-                //     scrollEventThrottle: 400,
-                //     onScroll: ({ nativeEvent }) => { console.log('scroll')
-                //       if (!loadingOldMessages  && isCloseToTop(nativeEvent)) {
-                //         onFetchOld();
-                //       }
-                //     }
-                //   }}
-                onSend={(messages) =>
-                    rest?.isCreateNewChannel && !channelId
-                        ? rest?.newChannelData?.type === RoomType?.Direct
-                            ? createDirectChannel(messages[0]?.text ?? ' ')
-                            : null
-                        : channelId && handleSend(messages[0]?.text ?? ' ')
+                onSend={handleSend}
+                text={safeContextProperty('messageText', ' ') || ' '}
+                onInputTextChanged={(text) =>
+                    safeSend({ type: ConversationActions.SET_MESSAGE_TEXT, data: { messageText: text } })
                 }
-                text={msg ? msg : ' '}
-                onInputTextChanged={(text) => setMsg(text)}
                 renderFooter={() =>
-                    loading ? <Spinner color={'$blue500'} /> : imageLoading ? <Spinner color={'$blue500'} /> : ''
+                    safeContextProperty('loading') ? (
+                        <Spinner color={'#3b82f6'} />
+                    ) : safeContextProperty('imageLoading') ? (
+                        <Spinner color={'#3b82f6'} />
+                    ) : (
+                        ''
+                    )
                 }
                 scrollToBottom
                 user={{
-                    // _id: currentUser?.id || '',
                     _id: auth?.id || '',
                 }}
-                isTyping={true}
-                alwaysShowSend={loading ? false : true}
-                //onLoadEarlier={onFetchOld}
-                //infiniteScroll={true}
+                isTyping={false} // Setting to false to reduce animations
+                alwaysShowSend={true} // Always show send button regardless of text content
                 renderSend={renderSend}
-                // loadEarlier={data?.messages?.totalCount > channelMessages.length}
-                //isLoadingEarlier={loadEarlierMsg}
-                //extraData={{ isLoadingEarlier: loadingOldMessages }}
-                // renderLoadEarlier={() =>
-                //     !loadEarlierMsg && (
-                //         <Center py={2}>
-                //             <Button
-                //                 onPress={() => onFetchOld()}
-                //                 variant={'outline'}
-                //                 _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
-                //             >
-                //                 Load earlier messages
-                //             </Button>
-                //         </Center>
-                //     )
-                // }
                 renderMessageText={renderMessageText}
+                renderInputToolbar={renderInputToolbar}
                 minInputToolbarHeight={50}
-                renderActions={channelId && renderActions}
-                renderAccessory={renderAccessory}
+                renderActions={safeContextProperty('channelId') && renderActions}
+                renderAccessory={!!state?.context?.selectedImage ? renderAccessory : undefined}
                 renderMessage={renderMessage}
-                renderChatFooter={() => (
-                    <>
-                        <ImageViewerModal
-                            isVisible={isShowImageViewer}
-                            setVisible={setImageViewer}
-                            modalContent={modalContent}
-                        />
-                        <SubscriptionHandler
-                            channelId={channelId?.toString()}
-                            subscribeToNewMessages={() =>
-                                subscribeToMore({
-                                    document: CHAT_MESSAGE_ADDED,
-                                    variables: {
-                                        channelId: channelId?.toString(),
-                                    },
-                                    updateQuery: (prev, { subscriptionData }: any) => {
-                                        if (!subscriptionData.data) return prev;
-                                        setSkip(0);
-                                        const newMessage: any = subscriptionData?.data?.chatMessageAdded;
-                                        const previousData = prev?.messages?.data
-                                            ? [...prev.messages.data, newMessage]
-                                            : [];
-                                        const totalMsgCount = prev?.messages?.totalCount + 1;
-                                        setChannelMessages((oldMessages: any) =>
-                                            uniqBy([...oldMessages, newMessage], ({ id }) => id),
-                                        );
-                                        setTotalCount(totalMsgCount);
-                                        const merged = {
-                                            ...prev,
-                                            messages: {
-                                                ...prev?.messages,
-                                                data: [...(prev?.messages?.data ?? []), newMessage],
-                                                totalCount: totalMsgCount,
-                                            },
-                                        };
-                                        return merged;
-                                        // return Object.assign({}, prev, {
-                                        //     messages: {
-                                        //         data: [...prev.messages.data, newMessage],
-                                        //         totalCount: prev.messages.totalCount + 1,
-                                        //     },
-                                        // });
-                                    },
-                                })
-                            }
-                        />
-                    </>
-                )}
+                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
+                textInputProps={{
+                    style: {
+                        borderWidth: 1,
+                        borderColor: colors.gray[300],
+                        backgroundColor: '#f8f8f8',
+                        borderRadius: 20,
+                        minHeight: 36,
+                        maxHeight: 80,
+                        color: '#000',
+                        padding: 8,
+                        paddingHorizontal: 15,
+                        fontSize: 16,
+                        flex: 1,
+                        marginVertical: 2,
+                        marginBottom: 0,
+                    },
+                    multiline: true,
+                    returnKeyType: 'default',
+                    enablesReturnKeyAutomatically: true,
+                    placeholderTextColor: colors.gray[400],
+                }}
+                minComposerHeight={36}
+                maxComposerHeight={100}
+                isKeyboardInternallyHandled={true}
+                placeholder="Type a message..."
                 lightboxProps={{
                     underlayColor: 'transparent',
                     springConfig: { tension: 90000, friction: 90000 },
                     disabled: true,
                 }}
+                infiniteScroll={false} // Disable automatic loading
             />
-        </>
+        </View>
     );
 };