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

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

@@ -1,1782 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    Box,
-    Button,
-    ButtonText,
-    HStack,
-    Icon,
-    Image,
-    Spinner,
-    Text,
-} from '@admin-layout/gluestack-ui-mobile';
-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';
-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, Composer, InputToolbar } from 'react-native-gifted-chat';
-import { PreDefinedRole, RoomType, IExpoNotificationData, IFileInfo } from 'common';
-import {
-    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    useMessagesQuery,
-    useSendExpoNotificationOnPostMutation,
-    useSendMessagesMutation,
-    useViewChannelDetailQuery,
-    useAddDirectChannelMutation,
-} from 'common/graphql';
-import { useUploadFilesNative } from '@messenger-box/platform-client';
-import { objectId } from '@messenger-box/core';
-import { userSelector } from '@adminide-stack/user-auth0-client';
-import { 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,
-    CALL_TO_ACTION_BOX_BGCOLOR,
-    CALL_TO_ACTION_PATH,
-    CALL_TO_ACTION_BUTTON_BORDERCOLOR,
-    CALL_TO_ACTION_TEXT_COLOR,
-} = config;
-
-const createdAtText = (value: string) => {
-    if (!value) return '';
-    let date = new Date(value);
-    if (isToday(date)) return 'Today';
-    if (isYesterday(date)) return 'Yesterday';
-    return format(new Date(value), 'MMM dd, yyyy');
-};
-
-interface ISubscriptionHandlerProps {
-    subscribeToNewMessages: () => any;
-    channelId: string;
-}
-
-interface IMessageProps extends IMessage {
-    type: string;
-    propsConfiguration?: any;
-    replies?: any;
-    isShowThreadMessage?: boolean;
-}
-
-export interface AlertMessageAttachmentsInterface {
-    title: string;
-    isTitleHtml: boolean;
-    icon: string;
-    callToAction: {
-        title: string;
-        link: string;
-    };
-}
-
-// Create a safer version of useMachine to handle potential errors
-function useSafeMachine(machine) {
-    // Define the state type
-    interface SafeStateType {
-        context: {
-            channelId: any;
-            channelMessages: any[];
-            totalCount: number;
-            skip: number;
-            loading: boolean;
-            loadingOldMessages: boolean;
-            error: any;
-            selectedImage: string;
-            files: any[];
-            images: any[];
-            messageText: string;
-            imageLoading: boolean;
-        };
-        value: string;
-        matches?: (stateValue: string) => boolean;
-    }
-
-    // Initialize with default state
-    const [state, setState] = useState<SafeStateType>({
-        context: {
-            channelId: null,
-            channelMessages: [],
-            totalCount: 0,
-            skip: 0,
-            loading: false,
-            loadingOldMessages: false,
-            error: null,
-            selectedImage: '',
-            files: [],
-            images: [],
-            messageText: '',
-            imageLoading: false,
-        },
-        value: 'idle',
-    });
-
-    // Create a safe send function
-    const send = useCallback((event) => {
-        try {
-            // Log event for debugging
-            console.log('Event received:', event.type);
-
-            // Handle specific events manually
-            if (event.type === ConversationActions.INITIAL_CONTEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelId: event.data?.channelId || null,
-                    },
-                    value: BaseState.FetchMessages,
-                }));
-            } else if (event.type === ConversationActions.SET_CHANNEL_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelMessages: event.data?.messages || [],
-                        totalCount: event.data?.totalCount || 0,
-                        loading: false,
-                        loadingOldMessages: false,
-                    },
-                    value: 'active',
-                }));
-            } else if (event.type === ConversationActions.CLEAR_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelMessages: [],
-                        totalCount: 0,
-                    },
-                }));
-            } else if (event.type === ConversationActions.SET_MESSAGE_TEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        messageText: event.data?.messageText || '',
-                    },
-                }));
-            } else if (event.type === ConversationActions.FETCH_MORE_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loadingOldMessages: true,
-                    },
-                    value: MainState.FetchMoreMessages,
-                }));
-            } else if (event.type === ConversationActions.SET_IMAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedImage: event.data?.image || '',
-                        images: event.data?.images || [],
-                        imageLoading: false,
-                    },
-                }));
-            } else if (event.type === ConversationActions.CLEAR_IMAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedImage: '',
-                        images: [],
-                    },
-                }));
-            } else if (event.type === ConversationActions.START_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                }));
-            } else if (event.type === ConversationActions.STOP_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                    },
-                }));
-            } else if (event.type === ConversationActions.SEND_MESSAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                    value: MainState.SendMessage,
-                }));
-            } else if (event.type === ConversationActions.SEND_MESSAGE_WITH_FILE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                    value: MainState.SendMessageWithFile,
-                }));
-            } else if (event.type === ConversationActions.CREATE_DIRECT_CHANNEL) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                    value: MainState.CreateDirectChannel,
-                }));
-            } else if (event.type === 'SEND_MESSAGE_SUCCESS' || event.type === 'SEND_MESSAGE_WITH_FILE_SUCCESS') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        messageText: '',
-                        images: [],
-                        selectedImage: '',
-                    },
-                    value: 'active',
-                }));
-            } else if (event.type === 'CREATE_DIRECT_CHANNEL_SUCCESS') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        channelId: event.data?.channelId || prev.context.channelId,
-                        messageText: '',
-                    },
-                    value: BaseState.FetchMessages,
-                }));
-            } else if (event.type === 'FETCH_MORE_MESSAGES_SUCCESS') {
-                setState((prev) => {
-                    const newMessages = event.data?.messages || [];
-                    return {
-                        ...prev,
-                        context: {
-                            ...prev.context,
-                            loadingOldMessages: false,
-                            channelMessages: uniqBy([...prev.context.channelMessages, ...newMessages], ({ id }) => id),
-                        },
-                        value: 'active',
-                    };
-                });
-            } else if (event.type === 'ERROR') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        loadingOldMessages: false,
-                        error: event.data?.message || 'Unknown error',
-                    },
-                    value: 'error',
-                }));
-            }
-        } catch (error) {
-            console.error('Error in send function:', error);
-        }
-    }, []);
-
-    // Add a custom matches function to the state
-    const stateWithMatches = useMemo(() => {
-        return {
-            ...state,
-            matches: (checkState) => {
-                return state.value === checkState;
-            },
-        };
-    }, [state]);
-
-    // Return as a tuple to match useMachine API
-    return [stateWithMatches, send] as const;
-}
-
-const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMessage, ...rest }: any) => {
-    const [channelToTop, setChannelToTop] = useState(0);
-
-    // Create a ref to track if component is mounted
-    const isMountedRef = useRef(true);
-
-    // Use our safer custom implementation instead of the problematic useMachine
-    const [state, send] = useSafeMachine(conversationXstate);
-
-    // Define safe functions first to avoid "used before declaration" errors
-    const safeContext = useCallback(() => {
-        try {
-            return state?.context || {};
-        } catch (error) {
-            console.error('Error accessing state.context:', error);
-            return {};
-        }
-    }, [state]);
-
-    const safeContextProperty = useCallback(
-        (property, defaultValue = null) => {
-            try {
-                return state?.context?.[property] ?? defaultValue;
-            } catch (error) {
-                console.error(`Error accessing state.context.${property}:`, error);
-                return defaultValue;
-            }
-        },
-        [state],
-    );
-
-    const safeMatches = useCallback(
-        (stateValue) => {
-            try {
-                return state?.matches?.(stateValue) || false;
-            } catch (error) {
-                console.error(`Error calling state.matches with ${stateValue}:`, error);
-                return false;
-            }
-        },
-        [state],
-    );
-
-    const safeSend = useCallback(
-        (event) => {
-            try {
-                send(event);
-            } catch (error) {
-                console.error('Error sending event to state machine:', error, event);
-            }
-        },
-        [send],
-    );
-
-    // Immediately set initial context if needed
-    useEffect(() => {
-        if (ChannelId) {
-            console.log('Setting initial channel ID on mount:', ChannelId);
-            try {
-                send({
-                    type: ConversationActions.INITIAL_CONTEXT,
-                    data: { channelId: ChannelId },
-                });
-            } catch (error) {
-                console.error('Error sending initial context:', error);
-            }
-        }
-    }, []);
-
-    // Use a ref to track the current machine snapshot for safer access
-    const stateRef = useRef(state);
-
-    // Keep the ref updated with the latest snapshot
-    useEffect(() => {
-        stateRef.current = state;
-    }, [state]);
-
-    // 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 currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
-    const navigation = useNavigation<any>();
-    const [selectedImage, setImage] = useState<string>('');
-    const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
-    const [imageObject, setImageObject] = useState<any>({});
-    const messageRootListRef = useRef<any>(null);
-    const isFocused = useIsFocused();
-
-    const [addDirectChannel] = useAddDirectChannelMutation();
-    const { startUpload } = useUploadFilesNative();
-    const [sendMsg] = useSendMessagesMutation();
-    const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
-
-    const {
-        data,
-        loading: messageLoading,
-        refetch,
-        fetchMore: fetchMoreMessages,
-        subscribeToMore,
-    }: any = useMessagesQuery({
-        variables: {
-            channelId: state.context.channelId?.toString(),
-            parentId: null,
-            limit: MESSAGES_PER_PAGE,
-            skip: state.context.skip,
-        },
-        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);
-        },
-    });
-
-    // 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 () => {
-            send({ type: ConversationActions.CLEAR_MESSAGES });
-        };
-    }, []);
-
-    useFocusEffect(
-        React.useCallback(() => {
-            if (state.context.channelId) {
-                send({ type: ConversationActions.INITIAL_CONTEXT, data: { channelId: state.context.channelId } });
-            }
-            return () => {
-                send({ type: ConversationActions.CLEAR_MESSAGES });
-            };
-        }, [state.context.channelId, isFocused]),
-    );
-
-    React.useEffect(() => {
-        const currentChannelId = ChannelId || currentRoute?.params?.channelId;
-        if (currentChannelId) {
-            console.log('Setting initial channel ID:', currentChannelId);
-            send({ type: ConversationActions.INITIAL_CONTEXT, data: { channelId: currentChannelId } });
-        }
-    }, [ChannelId, currentRoute]);
-
-    React.useEffect(() => {
-        if (state.context.selectedImage) {
-            send({ type: ConversationActions.STOP_LOADING });
-        }
-    }, [state.context.selectedImage]);
-
-    useEffect(() => {
-        if (data?.messages?.data) {
-            console.log('📩 QUERY DATA CHANGED - Messages received:', data.messages.data.length);
-            const { data: messages, totalCount: messageTotalCount } = data.messages;
-
-            if (messages && messages.length > 0) {
-                console.log('📩 QUERY DATA - Setting channel messages, count:', messages.length);
-
-                // First try dispatching the update through XState
-                send({
-                    type: ConversationActions.SET_CHANNEL_MESSAGES,
-                    data: {
-                        messages: uniqBy([...messages, ...state.context.channelMessages], ({ id }) => id),
-                        totalCount: messageTotalCount,
-                    },
-                });
-
-                // Debug: Log the first message to verify data format
-                if (messages[0]) {
-                    const sample = messages[0];
-                    console.log(
-                        '📩 SAMPLE MESSAGE:',
-                        JSON.stringify({
-                            id: sample.id,
-                            message: sample.message,
-                            author: {
-                                id: sample.author?.id,
-                                name: `${sample.author?.givenName} ${sample.author?.familyName}`,
-                            },
-                            createdAt: sample.createdAt,
-                        }),
-                    );
-                }
-
-                // Check if the state machine actually updated (debug only)
-                setTimeout(() => {
-                    if (state.context.channelMessages?.length === 0) {
-                        console.warn('⚠️ STATE NOT UPDATED after message data received - may need fallback');
-                    }
-                }, 500);
-            }
-        }
-    }, [data]);
-
-    // Optimize onFetchOld by adding debounce logic
-    const onFetchOld = useCallback(() => {
-        // Prevent multiple rapid calls
-        if (fetchOldDebounceRef.current) return;
-
-        // 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);
-        }
-    }, [state?.context?.totalCount, state?.context?.channelMessages, state?.context?.loadingOldMessages]);
-
-    // Add debounce ref
-    const fetchOldDebounceRef = useRef(false);
-
-    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
-        const paddingToTop = 60;
-        return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
-    };
-
-    const dataURLtoFile = (dataurl: any, filename: any) => {
-        var arr = dataurl.split(','),
-            mime = arr[0].match(/:(.*?);/)[1],
-            bstr = atob(arr[1]),
-            n = bstr.length,
-            u8arr = new Uint8Array(n);
-        while (n--) {
-            u8arr[n] = bstr.charCodeAt(n);
-        }
-        return new File([u8arr], filename, { type: mime });
-    };
-
-    // 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;
-
-            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>
-            );
-        },
-        [state?.context?.channelId, state?.context?.images, rest?.isCreateNewChannel],
-    );
-
-    // Fix the handleSend function to properly handle image-only messages
-    const handleSend = useCallback(
-        async (messages) => {
-            // Extract message text from GiftedChat messages array
-            const messageText = messages && messages.length > 0 ? messages[0]?.text || ' ' : ' ';
-            console.log('Sending message:', messageText);
-            console.log('Images:', state.context.images?.length);
-
-            // 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;
-            }
-
-            // 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;
-
-            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 {
-                console.log('Sending text-only message');
-                safeSend({ type: ConversationActions.SEND_MESSAGE });
-            }
-        },
-        [state.context.channelId, state.context.images, rest?.isCreateNewChannel, rest?.newChannelData?.type, safeSend],
-    );
-
-    // Update fetchMessagesWithFallback to not use fallback state
-    const fetchMessagesWithFallback = useCallback(async () => {
-        if (!state.context.channelId) return;
-
-        try {
-            console.log('🔄 DIRECT FETCH: Using direct approach for channel:', state.context.channelId);
-
-            const response = await refetch({
-                channelId: state.context.channelId?.toString(),
-                parentId: null,
-                limit: MESSAGES_PER_PAGE,
-                skip: 0,
-            });
-
-            if (response?.data?.messages?.data) {
-                const messages = response.data.messages.data;
-                console.log('✅ DIRECT FETCH: Got messages:', messages.length);
-
-                // Skip fallback and send directly to state machine
-                send({
-                    type: ConversationActions.SET_CHANNEL_MESSAGES,
-                    data: {
-                        messages,
-                        totalCount: response.data.messages.totalCount,
-                    },
-                });
-            }
-        } catch (error) {
-            console.error('❌ DIRECT FETCH ERROR:', error);
-        }
-    }, [state.context.channelId, refetch]);
-
-    // Auto-trigger fallback if needed
-    useEffect(() => {
-        let timeoutId: NodeJS.Timeout;
-
-        if (state.context.channelId && state.context.channelMessages.length === 0) {
-            timeoutId = setTimeout(() => {
-                console.log('⚠️ ACTIVATING FALLBACK - XState not updating after timeout');
-                fetchMessagesWithFallback();
-            }, 3000); // Wait 3 seconds for normal flow to work
-        }
-
-        return () => {
-            if (timeoutId) clearTimeout(timeoutId);
-        };
-    }, [state.context.channelId, state.context.channelMessages, fetchMessagesWithFallback]);
-
-    // Optimize the messageList calculation for better performance
-    const messageList = useMemo(() => {
-        // Only recalculate when these dependencies change
-        console.log('🔄 CALCULATING MESSAGE LIST - Optimized version');
-
-        // Short-circuit if no messages to process
-        if (!state?.context?.channelMessages || state.context.channelMessages.length === 0) {
-            console.log('No messages to process');
-            return [];
-        }
-
-        // 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',
-                }),
-            );
-        }
-
-        // Use a more efficient approach - pre-filter messages once
-        const filteredMessages = uniqBy(state.context.channelMessages, ({ id }) => id);
-
-        // Skip processing if no filtered messages
-        if (filteredMessages.length === 0) {
-            return [];
-        }
-
-        // Transform messages only once and return
-        return orderBy(filteredMessages, ['createdAt'], ['desc']).map((msg) => {
-            const date = new Date(msg.createdAt);
-
-            // Extract image URL from files data
-            let imageUrl = null;
-            if (msg.files?.data && msg.files.data.length > 0) {
-                const fileData = msg.files.data[0];
-                if (fileData && fileData.url) {
-                    imageUrl = fileData.url;
-                    console.log('📷 Found image URL for message', msg.id, ':', imageUrl);
-                }
-            }
-
-            // 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,
-                                        });
-                                }}
-                            >
-                                <>
-                                    <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>
-                                    )}
-                                </>
-                            </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}
-                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,
-                }}
-            />
-        );
-    };
-
-    // 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={state?.context?.selectedImage}
-                            alt={'selected image'}
-                            source={{ uri: state?.context?.selectedImage }}
-                            style={{
-                                width: 36,
-                                height: 36,
-                                borderRadius: 5,
-                                marginRight: 15,
-                            }}
-                            size={'xs'}
-                        />
-
-                        <TouchableHighlight
-                            underlayColor="#dddddd"
-                            onPress={() => safeSend({ type: ConversationActions.CLEAR_IMAGE })}
-                            style={{
-                                backgroundColor: '#f44336',
-                                paddingVertical: 2,
-                                paddingHorizontal: 5,
-                                borderRadius: 5,
-                                marginLeft: 10,
-                                elevation: 3,
-                                shadowColor: '#000',
-                                shadowOffset: { width: 0, height: 1 },
-                                shadowOpacity: 0.3,
-                                shadowRadius: 2,
-                            }}
-                        >
-                            <Text style={{ color: 'white', fontWeight: 'bold' }}>X</Text>
-                        </TouchableHighlight>
-                    </View>
-                </View>
-            );
-        },
-        [state?.context?.selectedImage, safeSend],
-    );
-
-    const setImageViewerObject = (obj: any, v: boolean) => {
-        setImageObject(obj);
-        setImageViewer(v);
-    };
-
-    const modalContent = React.useMemo(() => {
-        if (!imageObject) return <></>;
-        const { image, _id } = imageObject;
-        return (
-            <CachedImage
-                style={{ width: '100%', height: '100%' }}
-                resizeMode={'cover'}
-                cacheKey={`${_id}-slack-bubble-imageKey`}
-                source={{
-                    uri: image,
-                    expiresIn: 86400,
-                }}
-                alt={'image'}
-            />
-        );
-    }, [imageObject]);
-
-    const renderMessage = useCallback(
-        (props: any) => {
-            // Use memo to prevent unnecessary re-renders of each message
-            return (
-                <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
-            );
-        },
-        [isShowImageViewer],
-    );
-
-    let onScroll = false;
-
-    // Optimize onMomentumScrollBegin for better scroll performance
-    const onMomentumScrollBegin = async ({ nativeEvent }: any) => {
-        // Set scroll state
-        onScroll = true;
-
-        // Use the debounced fetch function to prevent excessive calls
-        if (isCloseToTop(nativeEvent)) {
-            onFetchOld();
-        }
-    };
-
-    const onEndReached = () => {
-        console.log('on end reached');
-        if (!onScroll) return;
-        onScroll = false;
-    };
-
-    // Add debug logging to help diagnose the issue
-    useEffect(() => {
-        console.log('Current channel ID:', state.context.channelId);
-        console.log('Current state:', state.value);
-        console.log('Channel messages count:', state.context.channelMessages.length);
-    }, [state.context.channelId, state.value, state.context.channelMessages]);
-
-    // Fix the infinite update loop in useEffect monitoring state changes
-    useEffect(() => {
-        // Only trigger effect if we have a specific state to handle
-        // Check if function exists and if we're in a valid state before calling implementation functions
-        if (state && typeof state.matches === 'function') {
-            if (state.matches(BaseState.FetchMessages)) {
-                console.log('In FetchMessages state, attempting to fetch messages');
-                // Use a ref to track if we've already fetched for this state update
-                if (!fetchInProgressRef.current) {
-                    fetchInProgressRef.current = true;
-                    fetchMessagesDirectly().finally(() => {
-                        fetchInProgressRef.current = false;
-                    });
-                }
-            } else if (state.matches(MainState.FetchMoreMessages)) {
-                if (!fetchMoreInProgressRef.current) {
-                    fetchMoreInProgressRef.current = true;
-                    fetchMoreMessagesImpl().then((result) => {
-                        if (result.error) {
-                            console.error('Error fetching more messages:', result.error);
-                            safeSend({ type: 'ERROR', data: { message: result.error } });
-                        } else {
-                            safeSend({ type: 'FETCH_MORE_MESSAGES_SUCCESS', data: result });
-                        }
-                        fetchMoreInProgressRef.current = false;
-                    });
-                }
-            } else if (state.matches(MainState.SendMessage)) {
-                if (!sendInProgressRef.current) {
-                    sendInProgressRef.current = true;
-                    sendMessageImpl().then((result) => {
-                        if (result.error) {
-                            console.error('Error sending message:', result.error);
-                            safeSend({ type: 'ERROR', data: { message: result.error } });
-                        } else {
-                            safeSend({ type: 'SEND_MESSAGE_SUCCESS', data: result });
-                        }
-                        sendInProgressRef.current = false;
-                    });
-                }
-            } else if (state.matches(MainState.SendMessageWithFile)) {
-                if (!sendFileInProgressRef.current) {
-                    sendFileInProgressRef.current = true;
-                    sendMessageWithFileImpl().then((result) => {
-                        if (result.error) {
-                            console.error('Error sending message with file:', result.error);
-                            safeSend({ type: 'ERROR', data: { message: result.error } });
-                        } else {
-                            safeSend({ type: 'SEND_MESSAGE_WITH_FILE_SUCCESS', data: result });
-                        }
-                        sendFileInProgressRef.current = false;
-                    });
-                }
-            } else if (state.matches(MainState.CreateDirectChannel)) {
-                if (!createChannelInProgressRef.current) {
-                    createChannelInProgressRef.current = true;
-                    createDirectChannelImpl().then((result) => {
-                        if (result.error) {
-                            console.error('Error creating direct channel:', result.error);
-                            safeSend({ type: 'ERROR', data: { message: result.error } });
-                        } else {
-                            safeSend({ type: 'CREATE_DIRECT_CHANNEL_SUCCESS', data: result });
-                        }
-                        createChannelInProgressRef.current = false;
-                    });
-                }
-            }
-        }
-    }, [
-        state?.value,
-        fetchMessagesDirectly,
-        fetchMoreMessagesImpl,
-        sendMessageImpl,
-        sendMessageWithFileImpl,
-        createDirectChannelImpl,
-        safeSend,
-    ]);
-
-    // Add refs to prevent duplicate operations
-    const fetchInProgressRef = useRef(false);
-    const fetchMoreInProgressRef = useRef(false);
-    const sendInProgressRef = useRef(false);
-    const sendFileInProgressRef = useRef(false);
-    const createChannelInProgressRef = useRef(false);
-
-    // Fix subscription handler to prevent infinite updates
-    const renderChatFooter = useCallback(() => {
-        return (
-            <>
-                <ImageViewerModal
-                    isVisible={isShowImageViewer}
-                    setVisible={setImageViewer}
-                    modalContent={modalContent}
-                />
-                <SubscriptionHandler
-                    channelId={state?.context?.channelId?.toString()}
-                    subscribeToNewMessages={() =>
-                        subscribeToMore({
-                            document: CHAT_MESSAGE_ADDED,
-                            variables: {
-                                channelId: state?.context?.channelId?.toString(),
-                            },
-                            updateQuery: (prev, { subscriptionData }: any) => {
-                                if (!subscriptionData?.data?.chatMessageAdded) return prev;
-
-                                const newMessage = subscriptionData.data.chatMessageAdded;
-                                const currentMessages = prev?.messages?.data || [];
-
-                                // Check if message already exists to prevent duplicates
-                                if (currentMessages.some((msg) => msg.id === newMessage.id)) {
-                                    return prev; // Skip update if message already exists
-                                }
-
-                                // Use a ref to track the last processed message ID to prevent duplicate processing
-                                if (lastProcessedMessageRef.current === newMessage.id) {
-                                    return prev;
-                                }
-
-                                lastProcessedMessageRef.current = newMessage.id;
-
-                                // 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 (
-        <View
-            style={{
-                flex: 1,
-                backgroundColor: 'white',
-            }}
-        >
-            {state?.matches && state.matches(BaseState.FetchMessages) && <Spinner color={'#3b82f6'} />}
-
-            <GiftedChat
-                ref={messageRootListRef}
-                wrapInSafeArea={true}
-                renderLoading={() => <Spinner color={'#3b82f6'} />}
-                messages={messageList}
-                listViewProps={{
-                    ...listViewProps,
-                    contentContainerStyle: {
-                        paddingBottom: 10,
-                    },
-                    keyboardShouldPersistTaps: 'handled',
-                }}
-                onSend={handleSend}
-                text={safeContextProperty('messageText', ' ') || ' '}
-                onInputTextChanged={(text) =>
-                    safeSend({ type: ConversationActions.SET_MESSAGE_TEXT, data: { messageText: text } })
-                }
-                renderFooter={() =>
-                    safeContextProperty('loading') ? (
-                        <Spinner color={'#3b82f6'} />
-                    ) : safeContextProperty('imageLoading') ? (
-                        <Spinner color={'#3b82f6'} />
-                    ) : (
-                        ''
-                    )
-                }
-                scrollToBottom
-                user={{
-                    _id: auth?.id || '',
-                }}
-                isTyping={false} // Setting to false to reduce animations
-                alwaysShowSend={true} // Always show send button regardless of text content
-                renderSend={renderSend}
-                renderMessageText={renderMessageText}
-                renderInputToolbar={renderInputToolbar}
-                minInputToolbarHeight={50}
-                renderActions={safeContextProperty('channelId') && renderActions}
-                renderAccessory={!!state?.context?.selectedImage ? renderAccessory : undefined}
-                renderMessage={renderMessage}
-                renderChatFooter={renderChatFooter}
-                renderLoadEarlier={renderLoadEarlier}
-                loadEarlier={state?.context?.totalCount > state?.context?.channelMessages?.length}
-                isLoadingEarlier={state?.context?.loadingOldMessages}
-                bottomOffset={Platform.OS === 'ios' ? 10 : 0} // Reduce bottom offset
-                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>
-    );
-};
-
-const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: ISubscriptionHandlerProps) => {
-    useEffect(() => subscribeToNewMessages(), [channelId]);
-    return <></>;
-};
-
-export const ConversationView = React.memo(ConversationViewComponent);