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

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

@@ -1,2312 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-    Center,
-    Avatar,
-    AvatarFallbackText,
-    AvatarImage,
-    Box,
-    Button,
-    ButtonText,
-    VStack,
-    HStack,
-    Icon,
-    Image,
-    Spinner,
-    Text,
-} from '@admin-layout/gluestack-ui-mobile';
-import { Platform, Linking, SafeAreaView, View, TouchableHighlight, Alert } from 'react-native';
-import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
-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, MaterialIcons } from '@expo/vector-icons';
-import { Actions, GiftedChat, IMessage, MessageText, Send, Composer, InputToolbar } from 'react-native-gifted-chat';
-import { IPost, IPostThread, PreDefinedRole, IExpoNotificationData, IFileInfo } from 'common';
-import {
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    useCreatePostThreadMutation,
-    useOnThreadChatMessageAddedSubscription,
-    useSendExpoNotificationOnPostMutation,
-    useSendThreadMessageMutation,
-    useThreadMessagesLazyQuery,
-    useGetPostThreadLazyQuery,
-} from 'common/graphql';
-import { useUploadFilesNative } from '@messenger-box/platform-client';
-import { objectId } from '@messenger-box/core';
-import { format, isToday, isYesterday } from 'date-fns';
-import { userSelector } from '@adminide-stack/user-auth0-client';
-import { config } from '../config';
-import { ImageViewerModal, SlackMessage } from '../components/SlackMessageContainer';
-import CachedImage from '../components/CachedImage';
-import colors from 'tailwindcss/colors';
-import {
-    threadConversationXstate,
-    Actions as ThreadActions,
-    BaseState,
-    MainState,
-} from './workflow/thread-conversation-xstate';
-
-// 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 '';
-
-    try {
-        // Validate the date before processing
-        const timestamp = new Date(value).getTime();
-        if (isNaN(timestamp)) {
-            console.warn(`Invalid date value in createdAtText: ${value}`);
-            return 'Unknown date';
-        }
-
-        let date = new Date(value);
-        if (isToday(date)) return 'Today';
-        if (isYesterday(date)) return 'Yesterday';
-        return format(date, 'MMM dd, yyyy');
-    } catch (error) {
-        console.error(`Error processing date in createdAtText: ${value}`, error);
-        return 'Unknown date';
-    }
-};
-
-// Create a safer version of useMachine to handle potential errors
-function useSafeMachine(machine) {
-    // Define the state type
-    interface SafeStateType {
-        context: {
-            channelId: any;
-            postParentId: any;
-            role: any;
-            threadMessages: any[];
-            totalCount: number;
-            skip: number;
-            loading: boolean;
-            loadingOldMessages: boolean;
-            error: any;
-            selectedImage: string;
-            files: any[];
-            images: any[];
-            messageText: string;
-            imageLoading: boolean;
-            postThread: any;
-            threadPost: any[];
-            isScrollToBottom: boolean;
-        };
-        value: string;
-        matches?: (stateValue: string) => boolean;
-    }
-
-    // Initialize with default state
-    const [state, setState] = useState<SafeStateType>({
-        context: {
-            channelId: null,
-            postParentId: null,
-            role: null,
-            threadMessages: [],
-            totalCount: 0,
-            skip: 0,
-            loading: false,
-            loadingOldMessages: false,
-            error: null,
-            selectedImage: '',
-            files: [],
-            images: [],
-            messageText: '',
-            imageLoading: false,
-            postThread: null,
-            threadPost: [],
-            isScrollToBottom: false,
-        },
-        value: 'idle',
-    });
-
-    // Create a safe send function
-    const send = useCallback((event) => {
-        try {
-            // Log event for debugging
-            console.log('Thread Event received:', event.type);
-
-            // Handle specific events manually
-            if (event.type === ThreadActions.INITIAL_CONTEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelId: event.data?.channelId || null,
-                        postParentId: event.data?.postParentId || null,
-                        role: event.data?.role || null,
-                    },
-                    value: BaseState.FetchThreadMessages,
-                }));
-            } else if (event.type === ThreadActions.SET_THREAD_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        threadMessages: event.data?.messages || [],
-                        totalCount: event.data?.totalCount || 0,
-                        loading: false,
-                        loadingOldMessages: false,
-                        threadPost: event.data?.threadPost || [],
-                        postThread: event.data?.postThread || null,
-                    },
-                    value: 'active',
-                }));
-            } else if (event.type === ThreadActions.CLEAR_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        threadMessages: [],
-                        totalCount: 0,
-                    },
-                }));
-            } else if (event.type === ThreadActions.SET_MESSAGE_TEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        messageText: event.data?.messageText || '',
-                    },
-                }));
-            } else if (event.type === ThreadActions.FETCH_MORE_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loadingOldMessages: true,
-                    },
-                    value: MainState.FetchMoreMessages,
-                }));
-            } else if (event.type === ThreadActions.SET_IMAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedImage: event.data?.image || '',
-                        images: event.data?.images || [],
-                        files: event.data?.files || [],
-                        imageLoading: false,
-                    },
-                }));
-            } else if (event.type === ThreadActions.CLEAR_IMAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedImage: '',
-                        images: [],
-                        files: [],
-                    },
-                }));
-            } else if (event.type === ThreadActions.START_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                }));
-            } else if (event.type === ThreadActions.STOP_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        loadingOldMessages:
-                            event.data?.loadingOldMessages === false ? false : prev.context.loadingOldMessages,
-                    },
-                }));
-            } else if (event.type === ThreadActions.SEND_THREAD_MESSAGE) {
-                console.log('Sending message event with text:', event.data?.messageText);
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                        // Keep the message text until we're done sending
-                        messageText: event.data?.messageText || prev.context.messageText,
-                    },
-                    value: MainState.SendThreadMessage,
-                }));
-            } else if (event.type === ThreadActions.SEND_THREAD_MESSAGE_WITH_FILE) {
-                console.log('Sending message with file event, text:', event.data?.messageText);
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                        // Keep the message text until we're done sending
-                        messageText: event.data?.messageText || prev.context.messageText,
-                    },
-                    value: MainState.SendThreadMessageWithFile,
-                }));
-            } else if (
-                event.type === 'SEND_THREAD_MESSAGE_SUCCESS' ||
-                event.type === 'SEND_THREAD_MESSAGE_WITH_FILE_SUCCESS'
-            ) {
-                console.log('Handling send success event:', event.type, 'with message:', event.data?.message?.id);
-                setState((prev) => {
-                    // Make sure we have the message data
-                    if (!event.data?.message) {
-                        console.warn('Send success event without message data');
-                        return {
-                            ...prev,
-                            context: {
-                                ...prev.context,
-                                loading: false,
-                                messageText: '', // Clear input
-                                images: [],
-                                selectedImage: '',
-                                files: [],
-                            },
-                            value: 'active',
-                        };
-                    }
-
-                    // Add the new message to our threadMessages
-                    const newMessage = event.data.message;
-                    const updatedMessages = [newMessage, ...prev.context.threadMessages];
-
-                    console.log('Updated thread messages list after send, now has', updatedMessages.length, 'messages');
-
-                    return {
-                        ...prev,
-                        context: {
-                            ...prev.context,
-                            loading: false,
-                            messageText: '', // Always clear input text after sending
-                            images: [],
-                            selectedImage: '',
-                            files: [],
-                            threadMessages: updatedMessages,
-                            totalCount: prev.context.totalCount + 1,
-                        },
-                        value: 'active',
-                    };
-                });
-            } else if (event.type === 'FETCH_MORE_MESSAGES_SUCCESS') {
-                setState((prev) => {
-                    const newMessages = event.data?.messages || [];
-                    const apiTotalCount = event.data?.totalCount;
-                    console.log(
-                        `Merging ${newMessages.length} older messages with ${prev.context.threadMessages.length} existing messages`,
-                    );
-
-                    // Debug: Log the dates of the messages for troubleshooting
-                    if (newMessages.length > 0) {
-                        try {
-                            console.log(
-                                'First new message date:',
-                                !isNaN(new Date(newMessages[0].createdAt).getTime())
-                                    ? new Date(newMessages[0].createdAt).toISOString()
-                                    : 'Invalid date',
-                            );
-                            console.log(
-                                'Last new message date:',
-                                !isNaN(new Date(newMessages[newMessages.length - 1].createdAt).getTime())
-                                    ? new Date(newMessages[newMessages.length - 1].createdAt).toISOString()
-                                    : 'Invalid date',
-                            );
-                        } catch (error) {
-                            console.error('Error logging new message dates:', error);
-                        }
-                    }
-
-                    if (prev.context.threadMessages.length > 0) {
-                        try {
-                            console.log(
-                                'First existing message date:',
-                                !isNaN(new Date(prev.context.threadMessages[0].createdAt).getTime())
-                                    ? new Date(prev.context.threadMessages[0].createdAt).toISOString()
-                                    : 'Invalid date',
-                            );
-                            console.log(
-                                'Last existing message date:',
-                                !isNaN(
-                                    new Date(
-                                        prev.context.threadMessages[prev.context.threadMessages.length - 1].createdAt,
-                                    ).getTime(),
-                                )
-                                    ? new Date(
-                                          prev.context.threadMessages[prev.context.threadMessages.length - 1].createdAt,
-                                      ).toISOString()
-                                    : 'Invalid date',
-                            );
-                        } catch (error) {
-                            console.error('Error logging existing message dates:', error);
-                        }
-                    }
-
-                    // If no new messages returned but total count says there should be more
-                    if (newMessages.length === 0 && prev.context.totalCount > prev.context.threadMessages.length) {
-                        console.log('No new messages found despite totalCount indicating more should exist');
-
-                        // Adjust totalCount to match reality
-                        return {
-                            ...prev,
-                            context: {
-                                ...prev.context,
-                                loadingOldMessages: false,
-                                totalCount: prev.context.threadMessages.length,
-                            },
-                            value: 'active',
-                        };
-                    }
-
-                    // Make sure we don't add duplicate messages
-                    const combinedMessages = uniqBy([...prev.context.threadMessages, ...newMessages], 'id');
-
-                    // GiftedChat expects messages sorted by date (newest first)
-                    const sortedMessages = orderBy(
-                        combinedMessages,
-                        [
-                            (msg) => {
-                                try {
-                                    // Safely access and convert date
-                                    return !isNaN(new Date(msg.createdAt).getTime())
-                                        ? new Date(msg.createdAt).getTime()
-                                        : 0; // Default to oldest if invalid
-                                } catch (error) {
-                                    console.error(`Error sorting message by date: ${msg.id}`, error);
-                                    return 0; // Default to oldest if error
-                                }
-                            },
-                        ],
-                        ['desc'],
-                    );
-
-                    // Use the total count from the API response if available, otherwise keep the current count
-                    const newTotalCount =
-                        typeof apiTotalCount === 'number'
-                            ? apiTotalCount
-                            : Math.max(sortedMessages.length, prev.context.totalCount);
-
-                    console.log(
-                        `Total messages after merge and sort: ${sortedMessages.length}, totalCount: ${newTotalCount}`,
-                    );
-
-                    return {
-                        ...prev,
-                        context: {
-                            ...prev.context,
-                            loadingOldMessages: false,
-                            threadMessages: sortedMessages,
-                            totalCount: newTotalCount,
-                        },
-                        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 thread conversation 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;
-}
-
-interface IMessageProps extends IMessage {
-    type: string;
-    propsConfiguration?: any;
-}
-
-export interface AlertMessageAttachmentsInterface {
-    title: string;
-    isTitleHtml: boolean;
-    icon: string;
-    callToAction: {
-        title: string;
-        link: string;
-    };
-}
-
-interface IThreadSubscriptionHandlerProps {
-    subscribeToNewMessages: () => any;
-    channelId: string;
-}
-
-const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any): JSX.Element => {
-    const { params } = useRoute<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(threadConversationXstate);
-
-    // 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],
-    );
-
-    // 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]);
-
-    const auth: any = useSelector(userSelector);
-    const [selectedImage, setImage] = useState<string>('');
-    const navigation = useNavigation<any>();
-    const [files, setFiles] = useState<File[]>([]);
-    const [images, setImages] = useState<ImagePicker.ImagePickerAsset[]>([]);
-    const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
-    const [imageObject, setImageObject] = useState<any>({});
-    const [parentId, setParentId] = useState<any>(postParentId);
-    const [expoTokens, setExpoTokens] = useState<any[]>([]);
-    const threadMessageListRef = useRef<any>(null);
-
-    // const [sendThreadMessage] = useSendThreadMessageMutation();
-    const [sendThreadMessage] = useCreatePostThreadMutation();
-    const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
-    const { startUpload } = useUploadFilesNative();
-
-    const [
-        getThreadMessages,
-        { data, loading: threadLoading, fetchMore: fetchMoreMessages, refetch: refetchThreadMessages, subscribeToMore },
-    ] = useGetPostThreadLazyQuery({ fetchPolicy: 'cache-and-network' });
-
-    // Add a function to force refresh all messages
-    const forceRefreshMessages = useCallback(() => {
-        console.log('Force refreshing all messages');
-
-        // Clear the current messages first
-        safeSend({
-            type: ThreadActions.CLEAR_MESSAGES,
-        });
-
-        // Then trigger a refetch
-        if (channelId && parentId) {
-            safeSend({
-                type: ThreadActions.START_LOADING,
-                data: { loading: true },
-            });
-
-            getThreadMessages({
-                variables: {
-                    channelId: channelId?.toString(),
-                    role: role?.toString(),
-                    postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-                    selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                    limit: 50, // Use larger limit that proved to work
-                },
-            })
-                .then(({ data }) => {
-                    if (data?.getPostThread) {
-                        const threads: any = data.getPostThread;
-                        const threadPost = threads?.post ?? [];
-                        const threadReplies = threads?.replies ?? [];
-                        const messageTotalCount = threads?.replyCount ?? 0;
-                        const messages = [...threadReplies];
-
-                        console.log(
-                            `Force refresh complete. Got ${messages.length} messages of ${messageTotalCount} total`,
-                        );
-
-                        safeSend({
-                            type: ThreadActions.SET_THREAD_MESSAGES,
-                            data: {
-                                messages,
-                                totalCount: messageTotalCount,
-                                threadPost: threadPost,
-                                postThread: threads,
-                            },
-                        });
-                    }
-                })
-                .catch((error) => {
-                    console.error('Error during force refresh:', error);
-                    safeSend({
-                        type: 'ERROR',
-                        data: { message: error.message },
-                    });
-                });
-        }
-    }, [channelId, parentId, getThreadMessages, safeSend]);
-
-    useFocusEffect(
-        React.useCallback(() => {
-            // navigation?.setOptions({ title: params?.title ?? 'Thread' });
-
-            navigation.setOptions({
-                title: params?.title ?? 'Thread',
-                headerLeft: (props: any) => (
-                    <Button className="bg-transparent active:bg-gray-200 " onPress={() => navigation.goBack()}>
-                        <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
-                    </Button>
-                ),
-                headerRight: () => (
-                    <Button className="bg-transparent active:bg-gray-200 mr-2" onPress={forceRefreshMessages}>
-                        <MaterialIcons size={20} name="refresh" color={'black'} />
-                    </Button>
-                ),
-            });
-
-            // Set initial context when focused
-            if (channelId && postParentId) {
-                safeSend({
-                    type: ThreadActions.INITIAL_CONTEXT,
-                    data: {
-                        channelId,
-                        postParentId,
-                        role,
-                    },
-                });
-            }
-
-            setParentId(postParentId);
-
-            return () => {
-                safeSend({ type: ThreadActions.CLEAR_MESSAGES });
-            };
-        }, [postParentId, forceRefreshMessages]),
-    );
-
-    // Effect for when in FetchThreadMessages state
-    useEffect(() => {
-        if (safeMatches(BaseState.FetchThreadMessages)) {
-            fetchThreadMessages();
-        }
-    }, [state.value]);
-
-    // Effect for when in FetchMoreMessages state
-    useEffect(() => {
-        if (safeMatches(MainState.FetchMoreMessages)) {
-            onFetchOld();
-        }
-    }, [state.value]);
-
-    // Effect for when in SendThreadMessage state
-    useEffect(() => {
-        if (safeMatches(MainState.SendThreadMessage)) {
-            const messageText = safeContextProperty('messageText', '');
-            console.log('Sending message from state transition, text:', messageText);
-            sendThreadMessageHandler(messageText);
-        }
-    }, [state.value]);
-
-    // Effect for when in SendThreadMessageWithFile state
-    useEffect(() => {
-        if (safeMatches(MainState.SendThreadMessageWithFile)) {
-            const messageText = safeContextProperty('messageText', '');
-            const images = safeContextProperty('images', []);
-            sendThreadMessageWithFileHandler(messageText, images);
-        }
-    }, [state.value]);
-
-    // Fetch thread messages function
-    const fetchThreadMessages = useCallback(() => {
-        if (channelId && parentId) {
-            console.log('Initial fetch of thread messages using larger limit (50)');
-            getThreadMessages({
-                variables: {
-                    channelId: channelId?.toString(),
-                    role: role?.toString(),
-                    postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-                    selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                    limit: 50, // Use larger limit that proved to work
-                },
-            })
-                .then(({ data }) => {
-                    if (data?.getPostThread) {
-                        const threads: any = data.getPostThread;
-                        const threadPost = threads?.post ?? [];
-                        const threadReplies = threads?.replies ?? [];
-                        const messageTotalCount = threads?.replyCount ?? 0;
-                        const messages = [...threadReplies];
-
-                        console.log(
-                            `Initial fetch complete. Got ${messages.length} messages of ${messageTotalCount} total`,
-                        );
-
-                        safeSend({
-                            type: ThreadActions.SET_THREAD_MESSAGES,
-                            data: {
-                                messages,
-                                totalCount: messageTotalCount,
-                                threadPost: threadPost,
-                                postThread: threads,
-                            },
-                        });
-                    }
-                })
-                .catch((error) => {
-                    safeSend({
-                        type: 'ERROR',
-                        data: { message: error.message },
-                    });
-                });
-        }
-    }, [channelId, parentId, role]);
-
-    React.useEffect(() => {
-        if (data?.getPostThread) {
-            const threads: any = data.getPostThread;
-            const threadPost = threads?.post ?? [];
-            const threadReplies = threads?.replies ?? [];
-            const messeageTotalCount = threads?.replyCount ?? 0;
-            const messages = [...threadReplies];
-
-            safeSend({
-                type: ThreadActions.SET_THREAD_MESSAGES,
-                data: {
-                    messages,
-                    totalCount: messeageTotalCount,
-                    threadPost: threadPost,
-                    postThread: threads,
-                },
-            });
-        }
-    }, [data]);
-
-    React.useEffect(() => {
-        if (safeContextProperty('selectedImage')) {
-            safeSend({ type: ThreadActions.STOP_LOADING });
-        }
-    }, [safeContextProperty('selectedImage')]);
-
-    // Add a safety timeout to clear loading state if it gets stuck
-    React.useEffect(() => {
-        const isLoading = safeContextProperty('loadingOldMessages', false);
-
-        if (isLoading) {
-            console.log('Message loading timeout safety started');
-            const timeoutId = setTimeout(() => {
-                // Check if we're still loading after 10 seconds
-                if (safeContextProperty('loadingOldMessages', false)) {
-                    console.log('Message loading timed out - resetting state');
-                    safeSend({
-                        type: ThreadActions.STOP_LOADING,
-                        data: { loadingOldMessages: false },
-                    });
-                }
-            }, 10000); // 10 second timeout
-
-            return () => clearTimeout(timeoutId);
-        }
-    }, [safeContextProperty('loadingOldMessages')]);
-
-    // Add a safety counter to detect and fix incorrect message counts automatically
-    const failedLoadAttemptsRef = useRef(0);
-
-    // Track failed attempts to load more messages
-    const registerLoadAttemptResult = useCallback((success: boolean) => {
-        if (!success) {
-            failedLoadAttemptsRef.current += 1;
-            console.log(`Failed load attempt registered, count: ${failedLoadAttemptsRef.current}`);
-        } else {
-            // Reset counter on successful load
-            failedLoadAttemptsRef.current = 0;
-        }
-    }, []);
-
-    // Watch for failed load attempts and auto-fix the count after 3 consecutive failures
-    React.useEffect(() => {
-        const isLoading = safeContextProperty('loadingOldMessages', false);
-        const totalCount = safeContextProperty('totalCount', 0);
-        const messagesCount = safeContextProperty('threadMessages', []).length;
-
-        // If we're not loading and there's a discrepancy in message counts
-        if (!isLoading && totalCount > messagesCount) {
-            // If we've had 3 consecutive failed attempts, fix the count
-            if (failedLoadAttemptsRef.current >= 2) {
-                console.log(
-                    `Auto-fixing incorrect message count after ${
-                        failedLoadAttemptsRef.current + 1
-                    } failed load attempts`,
-                );
-                console.log(`Adjusting totalCount from ${totalCount} to ${messagesCount}`);
-
-                safeSend({
-                    type: ThreadActions.SET_THREAD_MESSAGES,
-                    data: {
-                        messages: safeContextProperty('threadMessages', []),
-                        totalCount: messagesCount,
-                        threadPost: safeContextProperty('threadPost', []),
-                        postThread: safeContextProperty('postThread', null),
-                    },
-                });
-
-                // Reset the counter
-                failedLoadAttemptsRef.current = 0;
-            }
-        }
-    }, [safeContextProperty('loadingOldMessages'), safeContextProperty('threadMessages')]);
-
-    const scrollToBottom = React.useCallback(() => {
-        if (threadMessageListRef?.current) {
-            threadMessageListRef.current.scrollToBottom();
-        }
-    }, [threadMessageListRef]);
-
-    const onFetchOld = useCallback(() => {
-        const totalCount = safeContextProperty('totalCount', 0);
-        const threadMessages = safeContextProperty('threadMessages', []);
-
-        if (totalCount > threadMessages.length && !safeContextProperty('loadingOldMessages', false)) {
-            console.log('Loading more messages - current count:', threadMessages.length, 'of', totalCount);
-
-            // Set the loading state specifically for old messages
-            safeSend({
-                type: ThreadActions.FETCH_MORE_MESSAGES,
-                data: { loadingOldMessages: true },
-            });
-
-            // Since Skip=0, Limit=50 worked well, let's use that approach
-            console.log('Using proven approach: Skip=0, Limit=50');
-
-            // Try with a larger limit and skip=0, which we know works
-            const queryVariables = {
-                channelId: channelId?.toString(),
-                role: role?.toString(),
-                postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-                selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                limit: 50, // Use larger limit that proved to work
-                skip: 0, // Start from the beginning
-            };
-
-            console.log('Query variables:', JSON.stringify(queryVariables));
-
-            fetchMoreMessages({
-                variables: queryVariables,
-            })
-                .then((res: any) => {
-                    console.log('API response received:', JSON.stringify(res?.data, null, 2));
-
-                    if (res?.data?.getPostThread) {
-                        const threads: any = res?.data?.getPostThread;
-                        const threadReplies = threads?.replies ?? [];
-                        // Get the actual total count from the response
-                        const actualTotalCount = threads?.replyCount ?? 0;
-
-                        console.log('API response details:');
-                        console.log('- replyCount:', threads?.replyCount);
-                        console.log('- replies array length:', threadReplies.length);
-                        console.log(
-                            '- replies structure:',
-                            threadReplies.length > 0
-                                ? `First item has fields: ${Object.keys(threadReplies[0]).join(', ')}`
-                                : 'No items',
-                        );
-
-                        if (threadReplies.length > 0) {
-                            console.log('- Sample message:', JSON.stringify(threadReplies[0], null, 2));
-                        }
-
-                        console.log(
-                            'Successfully loaded more messages:',
-                            threadReplies.length,
-                            'of total:',
-                            actualTotalCount,
-                        );
-                        console.log('Thread reply IDs:', threadReplies.map((msg) => msg.id).join(', '));
-
-                        // Compare with our existing messages to find the ones we're missing
-                        const existingIds = new Set(threadMessages.map((msg) => msg.id));
-                        const newUniqueMessages = threadReplies.filter((msg) => !existingIds.has(msg.id));
-
-                        console.log(
-                            `Found ${newUniqueMessages.length} unique new messages out of ${threadReplies.length} received`,
-                        );
-
-                        // If we've received all messages but our count doesn't match, update the total count
-                        if (actualTotalCount !== totalCount) {
-                            console.log(
-                                `Updating totalCount from ${totalCount} to ${actualTotalCount} based on API response`,
-                            );
-                            // This will be applied below when we process the messages
-                        }
-
-                        // If no new unique messages, it means we already have everything
-                        if (newUniqueMessages.length === 0) {
-                            console.log('No new unique messages found, adjusting total count');
-
-                            // Register this as a failed load attempt
-                            registerLoadAttemptResult(false);
-
-                            // Adjust total count to match what we have
-                            safeSend({
-                                type: ThreadActions.SET_THREAD_MESSAGES,
-                                data: {
-                                    messages: threadMessages,
-                                    totalCount: threadMessages.length,
-                                    threadPost: safeContextProperty('threadPost', []),
-                                    postThread: safeContextProperty('postThread', null),
-                                },
-                            });
-                            return;
-                        }
-
-                        // Register success since we found new messages
-                        registerLoadAttemptResult(true);
-
-                        console.log(`Adding ${newUniqueMessages.length} new messages to thread`);
-
-                        safeSend({
-                            type: 'FETCH_MORE_MESSAGES_SUCCESS',
-                            data: {
-                                messages: newUniqueMessages,
-                                totalCount: actualTotalCount,
-                                loadingOldMessages: false,
-                            },
-                        });
-                    } else {
-                        console.log('No thread data returned when loading more messages');
-                        registerLoadAttemptResult(false);
-                        safeSend({
-                            type: ThreadActions.STOP_LOADING,
-                            data: { loadingOldMessages: false },
-                        });
-                    }
-                })
-                .catch((error: any) => {
-                    console.error('Error fetching more messages:', error);
-                    registerLoadAttemptResult(false);
-                    safeSend({
-                        type: 'ERROR',
-                        data: {
-                            message: error.message,
-                            loadingOldMessages: false,
-                        },
-                    });
-                });
-        } else {
-            console.log('No more messages to load or already loading');
-            // Make sure we're not stuck in loading state
-            if (safeContextProperty('loadingOldMessages', false)) {
-                safeSend({
-                    type: ThreadActions.STOP_LOADING,
-                    data: { loadingOldMessages: false },
-                });
-            }
-        }
-    }, [parentId, channelId, state.context, registerLoadAttemptResult]);
-
-    let onScroll = false;
-
-    const handleScrollToTop = ({ nativeEvent }: any) => {
-        // Check if we're near the top of the list
-        if (isCloseToTop(nativeEvent)) {
-            const isLoading = safeContextProperty('loadingOldMessages', false);
-            const totalCount = safeContextProperty('totalCount', 0);
-            const currentCount = safeContextProperty('threadMessages', []).length;
-            const hasMoreMessages = totalCount > currentCount;
-
-            console.log(
-                `Scroll near top - Loading state: ${isLoading}, Messages: ${currentCount}/${totalCount}, Has more: ${hasMoreMessages}`,
-            );
-
-            if (!isLoading && hasMoreMessages) {
-                console.log('Near top of list - loading older messages');
-                safeSend({ type: ThreadActions.FETCH_MORE_MESSAGES });
-            }
-        }
-    };
-
-    const handleEndReached = () => {
-        // This triggers when scrolled to the bottom
-        console.log('Reached end of message list');
-    };
-
-    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
-        // We consider being "close to top" when scrolled to top 15% of visible area
-        const visibleHeight = layoutMeasurement.height;
-        const topThreshold = Math.min(80, visibleHeight * 0.15);
-
-        // For debugging
-        const distanceFromTop = contentOffset.y;
-        const totalContentHeight = contentSize.height;
-
-        console.log(
-            `Scroll position: ${distanceFromTop.toFixed(0)}px from top, threshold: ${topThreshold.toFixed(
-                0,
-            )}px, content height: ${totalContentHeight.toFixed(0)}px`,
-        );
-
-        return contentOffset.y <= topThreshold;
-    };
-
-    const onSelectImages = async () => {
-        try {
-            safeSend({ type: ThreadActions.START_LOADING });
-
-            const imageSource = await ImagePicker.launchImageLibraryAsync({
-                mediaTypes: ImagePicker.MediaTypeOptions.Images,
-                allowsEditing: true,
-                aspect: [4, 3],
-                quality: 0.8, // Reduced from 1 for better performance
-                base64: true,
-                allowsMultipleSelection: false, // Set to true if you want to support multiple images
-            });
-
-            if (imageSource.canceled) {
-                console.log('Image selection was canceled');
-                safeSend({ type: ThreadActions.STOP_LOADING });
-                return;
-            }
-
-            if (!imageSource.assets || imageSource.assets.length === 0 || !imageSource.assets[0]?.base64) {
-                console.error('No valid image data received');
-                safeSend({
-                    type: 'ERROR',
-                    data: { message: 'No valid image data received' },
-                });
-                return;
-            }
-
-            // Get the first asset
-            const asset = imageSource.assets[0];
-
-            // Derive file extension from mime type or default to jpg
-            const fileExtension = asset.mimeType ? asset.mimeType.split('/').pop() || 'jpg' : 'jpg';
-
-            // Create a more descriptive filename with timestamp
-            const filename = `image_${Date.now()}.${fileExtension}`;
-
-            // Create data URL with proper mime type
-            const mimeType = asset.mimeType || 'image/jpeg';
-            const image = `data:${mimeType};base64,${asset.base64}`;
-
-            // Create file-like object suitable for React Native
-            const fileData = {
-                uri: asset.uri,
-                type: mimeType,
-                name: filename,
-                base64: asset.base64,
-            };
-
-            console.log(`Selected image: ${filename}, type: ${mimeType}`);
-
-            safeSend({
-                type: ThreadActions.SET_IMAGE,
-                data: {
-                    image,
-                    files: [fileData],
-                    images: [asset as ImagePicker.ImagePickerAsset],
-                },
-            });
-        } catch (error) {
-            console.error('Error selecting image:', error);
-            safeSend({
-                type: 'ERROR',
-                data: { message: error.message || 'Failed to select image' },
-            });
-        }
-    };
-
-    // Define message sending handlers
-    const sendThreadMessageHandler = useCallback(
-        async (message: string) => {
-            console.log('Sending message:', message);
-
-            if (!channelId) {
-                console.error('No channelId provided');
-                return;
-            }
-
-            // Allow empty messages with spaces or blank content - GiftedChat sometimes sends these
-            // But use the actual message if available
-            const messageContent = message?.trim() || ' ';
-            console.log('Using message content for sending:', messageContent);
-
-            const postId = objectId();
-            console.log('Generated postId:', postId);
-
-            safeSend({ type: ThreadActions.START_LOADING });
-
-            try {
-                console.log('Sending mutation with variables:', {
-                    channelId,
-                    postThreadId: safeContextProperty('postThread')?.id,
-                    postParentId: !parentId || parentId == 0 ? null : parentId,
-                    message: messageContent,
-                });
-
-                const result = await sendThreadMessage({
-                    variables: {
-                        channelId,
-                        postThreadId: safeContextProperty('postThread') && safeContextProperty('postThread')?.id,
-                        postParentId: !parentId || parentId == 0 ? null : parentId,
-                        threadMessageInput: {
-                            content: messageContent,
-                            role,
-                        },
-                    },
-                    update: (cache, { data, errors }: any) => {
-                        console.log('Send message update callback - data:', data, 'errors:', errors);
-
-                        if (!data || errors) {
-                            console.error('Send message failed:', errors);
-                            safeSend({ type: ThreadActions.STOP_LOADING });
-                            return;
-                        }
-
-                        console.log('Message sent successfully:', data?.createPostThread?.lastMessage);
-
-                        // Add the new message to our local state
-                        const newMessage = data?.createPostThread?.lastMessage;
-
-                        // Reset the message text and add the new message
-                        safeSend({
-                            type: 'SEND_THREAD_MESSAGE_SUCCESS',
-                            data: {
-                                message: newMessage,
-                                messageText: '', // Clear the message text now
-                            },
-                        });
-
-                        if (!parentId || parentId == 0) {
-                            console.log('Setting new parentId:', data?.createPostThread?.lastMessage?.id);
-                            setParentId(data?.createPostThread?.lastMessage?.id);
-                        }
-
-                        setChannelToTop(channelToTop + 1);
-
-                        const lastMessageId = data?.createPostThread?.lastMessage?.id;
-                        sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
-                    },
-                });
-
-                console.log('Send mutation result:', result);
-            } catch (error) {
-                console.error('Error sending message:', error);
-                safeSend({
-                    type: 'ERROR',
-                    data: { message: error.message || 'Failed to send message' },
-                });
-            }
-        },
-        [channelId, parentId, state.context, role],
-    );
-
-    const sendThreadMessageWithFileHandler = useCallback(
-        async (message: string, images: any[]) => {
-            console.log('Sending message with file:', message, 'Images:', images.length);
-
-            if (!channelId) {
-                console.error('No channelId provided');
-                return;
-            }
-
-            if (images.length === 0) {
-                console.error('No images to send');
-                return;
-            }
-
-            // Allow empty message content for file uploads
-            // But use the actual message if available
-            const messageContent = message?.trim() || ' ';
-            console.log('Using message content for file send:', messageContent);
-
-            const postId = objectId();
-            console.log('Generated postId for file upload:', postId);
-
-            try {
-                // Prepare image assets in the format expected by the upload service
-                const preparedImages = images.map((img) => ({
-                    uri: img.uri,
-                    type: img.mimeType || 'image/jpeg',
-                    name: img.fileName || `image_${Date.now()}.jpg`,
-                    base64: img.base64,
-                    width: img.width || 0,
-                    height: img.height || 0,
-                })) as ImagePicker.ImagePickerAsset[];
-
-                console.log('Starting file upload with prepared images:', preparedImages.length);
-
-                const uploadResponse = await startUpload({
-                    file: preparedImages,
-                    saveUploadedFile: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                    createUploadLink: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                });
-
-                if (uploadResponse?.error) {
-                    console.error('File upload failed:', uploadResponse.error);
-                    safeSend({ type: ThreadActions.STOP_LOADING });
-                    return;
-                }
-
-                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-                console.log('Files uploaded successfully:', uploadedFiles?.length);
-
-                if (uploadResponse.data) {
-                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
-                    console.log('File IDs for message:', files);
-
-                    console.log('Sending message with attached files');
-                    const result = await sendThreadMessage({
-                        variables: {
-                            postId,
-                            channelId,
-                            postThreadId: safeContextProperty('postThread') && safeContextProperty('postThread')?.id,
-                            postParentId: !parentId || parentId == 0 ? null : parentId,
-                            threadMessageInput: {
-                                content: messageContent,
-                                files,
-                                role,
-                            },
-                        },
-                        update: (cache, { data, errors }: any) => {
-                            console.log('Send message with file update callback - data:', data, 'errors:', errors);
-
-                            if (!data || errors) {
-                                console.error('Send message with file failed:', errors);
-                                safeSend({ type: ThreadActions.STOP_LOADING });
-                                return;
-                            }
-
-                            console.log('Message with file sent successfully:', data?.createPostThread?.lastMessage);
-
-                            // Add the new message to our local state
-                            const newMessage = data?.createPostThread?.lastMessage;
-
-                            safeSend({
-                                type: 'SEND_THREAD_MESSAGE_WITH_FILE_SUCCESS',
-                                data: {
-                                    message: newMessage,
-                                    messageText: '', // Clear the message text now
-                                },
-                            });
-
-                            if (!parentId || parentId == 0) {
-                                console.log('Setting new parentId:', data?.createPostThread?.lastMessage?.id);
-                                setParentId(data?.createPostThread?.lastMessage?.id);
-                            }
-
-                            setChannelToTop(channelToTop + 1);
-
-                            const lastMessageId = data?.createPostThread?.lastMessage?.id;
-                            sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
-                        },
-                    });
-
-                    console.log('Send with file mutation result:', result);
-                }
-            } catch (error) {
-                console.error('Error sending message with file:', error);
-                safeSend({
-                    type: 'ERROR',
-                    data: { message: error.message || 'Failed to send message with file' },
-                });
-            }
-        },
-        [channelId, parentId, state.context, role, startUpload],
-    );
-
-    const sendPushNotification = async (messageId: string, channelId: string, parentId: any, threadId: string) => {
-        const notificationData: IExpoNotificationData = {
-            url: config.THREAD_MESSEGE_PATH,
-            params: { channelId, title: params?.title ?? 'Thread', postParentId: parentId, hideTabBar: true },
-            screen: 'DialogThreadMessages',
-            thread: { id: threadId },
-            other: { sound: Platform.OS === 'android' ? undefined : 'default' },
-        };
-        if (parentId || parentId == 0) {
-            await sendExpoNotificationOnPostMutation({
-                variables: {
-                    postId: messageId?.toString(),
-                    notificationData,
-                },
-            });
-        }
-    };
-
-    const messageList = useMemo(() => {
-        const threadMessages = safeContextProperty('threadMessages', []);
-        console.log(`Creating message list from ${threadMessages.length} thread messages`);
-
-        let res: any = [];
-        if (threadMessages?.length) {
-            // We need to convert the threadMessages into the format expected by GiftedChat
-            // Use a Set to track IDs and prevent duplicates
-            const messageIds = new Set();
-
-            res = threadMessages
-                .filter((msg) => {
-                    // Skip duplicate IDs
-                    if (!msg.id || messageIds.has(msg.id)) {
-                        console.log('Skipping duplicate message ID:', msg.id);
-                        return false;
-                    }
-                    messageIds.add(msg.id);
-                    return true;
-                })
-                .map((msg) => {
-                    // Generate a unique _id if needed by combining id and createdAt
-                    const uniqueId = msg.id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-
-                    // Safely create a Date object with validation
-                    let messageDate;
-                    try {
-                        // Check if createdAt is a valid date string
-                        if (msg.createdAt && !isNaN(new Date(msg.createdAt).getTime())) {
-                            messageDate = new Date(msg.createdAt);
-                        } else {
-                            // Use current time as fallback if date is invalid
-                            console.warn(`Invalid date value for message ${msg.id}: ${msg.createdAt}`);
-                            messageDate = new Date();
-                        }
-                    } catch (error) {
-                        console.error(`Error creating date for message ${msg.id}:`, error);
-                        messageDate = new Date(); // Fallback to current time
-                    }
-
-                    // 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);
-                        }
-                    }
-
-                    // Get the message text without adding "File attachment" for image-only messages
-                    let messageText = msg.message || '';
-
-                    let message: IMessageProps = {
-                        _id: uniqueId,
-                        text: messageText,
-                        createdAt: messageDate,
-                        user: {
-                            _id: msg?.author?.id ?? auth?.profile?.id,
-                            name:
-                                msg?.author?.givenName ??
-                                auth?.profile?.given_name + ' ' + msg?.author?.familyName ??
-                                auth?.profile?.family_name,
-                            avatar: msg?.author?.picture ?? auth?.profile?.picture,
-                        },
-                        type: msg?.type || '',
-                        image: imageUrl,
-                        sent: msg?.isDelivered || true,
-                        received: msg?.isRead || false,
-                        propsConfiguration: msg?.propsConfiguration,
-                    };
-                    return message;
-                });
-        }
-
-        // Sort messages by date (newest first as required by GiftedChat)
-        // Use a safer getTime() approach with error handling
-        const sortedMessages = orderBy(
-            res,
-            [
-                (msg) => {
-                    try {
-                        return msg.createdAt instanceof Date ? msg.createdAt.getTime() : new Date().getTime();
-                    } catch (error) {
-                        console.error('Error sorting message by date:', error);
-                        return 0; // Fallback to a default value
-                    }
-                },
-            ],
-            ['desc'],
-        );
-
-        // Log message dates to help with debugging
-        if (sortedMessages.length > 0) {
-            try {
-                const firstMsg = sortedMessages[0];
-                const lastMsg = sortedMessages[sortedMessages.length - 1];
-
-                console.log(
-                    'Message date range:',
-                    lastMsg.createdAt instanceof Date ? lastMsg.createdAt.toISOString() : 'invalid date',
-                    'to',
-                    firstMsg.createdAt instanceof Date ? firstMsg.createdAt.toISOString() : 'invalid date',
-                );
-            } catch (error) {
-                console.error('Error logging message date range:', error);
-            }
-        }
-
-        return sortedMessages;
-    }, [safeContextProperty('threadMessages'), auth]);
-
-    const renderSend = (props) => {
-        // Check if there's an image selected
-        const hasImage = safeContextProperty('selectedImage', '') !== '';
-
-        // Enable send button if there's text OR an image
-        const isDisabled = !hasImage && (!props.text || props.text.trim().length === 0);
-
-        return (
-            <Send
-                {...props}
-                containerStyle={{
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginHorizontal: 4,
-                    marginBottom: 0,
-                }}
-                disabled={isDisabled}
-            >
-                <Box
-                    style={{
-                        width: 32,
-                        height: 32,
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}
-                >
-                    <MaterialCommunityIcons
-                        name="send-circle"
-                        size={30}
-                        color={isDisabled ? colors.gray[400] : colors.blue[500]}
-                    />
-                </Box>
-            </Send>
-        );
-    };
-
-    const renderMessageText = (props: any) => {
-        const { currentMessage } = props;
-
-        // For ALERT type messages with call to action
-        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>
-                    ) : (
-                        <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
-                    )}
-                </>
-            );
-        }
-        // For file attachment messages, don't show the "File attachment" text
-        else if (currentMessage.text === '📎 File attachment') {
-            // Return null to not render any text for these messages
-            return null;
-        }
-        // Default text rendering
-        else {
-            return <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />;
-        }
-    };
-
-    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,
-                }}
-            />
-        );
-    };
-
-    const renderAccessory = (props) => {
-        const selectedImage = safeContextProperty('selectedImage', '');
-
-        if (!selectedImage) {
-            return null;
-        }
-
-        return (
-            <View
-                style={{
-                    height: 80,
-                    padding: 10,
-                    backgroundColor: 'white',
-                    borderTopWidth: 1,
-                    borderTopColor: '#e0e0e0',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                }}
-            >
-                <View
-                    style={{
-                        flex: 1,
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        // justifyContent: 'space-between',
-                        paddingHorizontal: 20,
-                    }}
-                >
-                    <Image
-                        key={state?.context?.selectedImage}
-                        alt={'selected image'}
-                        source={{ uri: state?.context?.selectedImage }}
-                        size={'xs'}
-                        style={{
-                            width: 5,
-                            height: 5,
-                            borderRadius: 5,
-                            marginRight: 20,
-                        }}
-                    />
-
-                    <TouchableHighlight
-                        underlayColor="#dddddd"
-                        onPress={() => safeSend({ type: ThreadActions.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>
-        );
-    };
-
-    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 = (props: any) => {
-        return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
-    };
-
-    // Define a memo that provides the current message text from state
-    const currentMessageText = useMemo(() => {
-        const text = safeContextProperty('messageText', '') || '  ';
-        return text;
-    }, [safeContextProperty('messageText')]);
-
-    // Define a custom renderInputToolbar function
-    const renderInputToolbar = (props) => {
-        return (
-            <InputToolbar
-                {...props}
-                containerStyle={{
-                    backgroundColor: 'white',
-                    borderTopWidth: 1,
-                    borderTopColor: colors.gray[200],
-                    paddingHorizontal: 4,
-                    paddingVertical: 4,
-                }}
-                primaryStyle={{
-                    alignItems: 'center',
-                }}
-            />
-        );
-    };
-
-    // Add a function to load messages with specific skip value for debugging
-    const forceLoadMessages = useCallback(
-        (skipValue: number) => {
-            console.log(`Force loading messages with explicit skip=${skipValue}, limit=50`);
-
-            if (channelId && parentId) {
-                safeSend({
-                    type: ThreadActions.START_LOADING,
-                    data: { loading: true },
-                });
-
-                getThreadMessages({
-                    variables: {
-                        channelId: channelId?.toString(),
-                        role: role?.toString(),
-                        postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-                        selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                        skip: skipValue,
-                        limit: 50, // Use larger limit that proved to work
-                    },
-                })
-                    .then(({ data }) => {
-                        if (data?.getPostThread) {
-                            const threads: any = data.getPostThread;
-                            const threadPost = threads?.post ?? [];
-                            const threadReplies = threads?.replies ?? [];
-                            const messageTotalCount = threads?.replyCount ?? 0;
-                            const messages = [...threadReplies];
-
-                            console.log(
-                                `Force load with skip=${skipValue} complete. Got ${messages.length} messages of ${messageTotalCount} total`,
-                            );
-
-                            safeSend({
-                                type: ThreadActions.SET_THREAD_MESSAGES,
-                                data: {
-                                    messages,
-                                    totalCount: messageTotalCount,
-                                    threadPost: threadPost,
-                                    postThread: threads,
-                                },
-                            });
-                        }
-                    })
-                    .catch((error) => {
-                        console.error('Error during force load:', error);
-                        safeSend({
-                            type: 'ERROR',
-                            data: { message: error.message },
-                        });
-                    });
-            }
-        },
-        [channelId, parentId, getThreadMessages, safeSend],
-    );
-
-    return (
-        <SafeAreaView style={{ flex: 1 }}>
-            {safeContextProperty('loadingOldMessages', false) === true && (
-                <Box className="absolute top-10 left-0 right-0 z-10 items-center">
-                    <Box className="bg-blue-500/20 rounded-full px-4 py-2 flex-row items-center">
-                        <Spinner color={colors.blue[500]} size="small" />
-                        <Text className="text-sm font-medium color-blue-600 ml-2">Loading messages...</Text>
-                    </Box>
-                </Box>
-            )}
-            {!safeContextProperty('loadingOldMessages', false) &&
-                safeContextProperty('totalCount', 0) > safeContextProperty('threadMessages', []).length && (
-                    <Box className="absolute top-10 left-0 right-0 z-10 items-center">
-                        <HStack space={2} className="px-2">
-                            <TouchableHighlight
-                                onPress={() => {
-                                    console.log('Manual load more pressed');
-                                    Alert.alert('Load Options', 'Choose loading method', [
-                                        {
-                                            text: 'Normal Load',
-                                            onPress: () => safeSend({ type: ThreadActions.FETCH_MORE_MESSAGES }),
-                                        },
-                                        {
-                                            text: 'Try Skip=0',
-                                            onPress: () => forceLoadMessages(0),
-                                        },
-                                        {
-                                            text: 'Try Skip=0, Limit=50',
-                                            onPress: () => {
-                                                // Try with a larger limit
-                                                console.log('Force loading with explicit skip=0, limit=50');
-
-                                                safeSend({
-                                                    type: ThreadActions.START_LOADING,
-                                                    data: { loadingOldMessages: true },
-                                                });
-
-                                                fetchMoreMessages({
-                                                    variables: {
-                                                        channelId: channelId?.toString(),
-                                                        role: role?.toString(),
-                                                        postParentId:
-                                                            !parentId || parentId == 0 ? null : parentId?.toString(),
-                                                        selectedFields:
-                                                            'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                                                        limit: 50, // Try a larger limit
-                                                        skip: 0,
-                                                    },
-                                                })
-                                                    .then((res: any) => {
-                                                        console.log(
-                                                            'LARGE LIMIT response:',
-                                                            JSON.stringify(res?.data, null, 2),
-                                                        );
-
-                                                        if (res?.data?.getPostThread) {
-                                                            const threads: any = res?.data?.getPostThread;
-                                                            const threadReplies = threads?.replies ?? [];
-                                                            const actualTotalCount = threads?.replyCount ?? 0;
-
-                                                            console.log(
-                                                                `Large limit load complete. Got ${threadReplies.length} messages of ${actualTotalCount} total`,
-                                                            );
-
-                                                            if (threadReplies.length > 0) {
-                                                                // Reset our message list with all available messages
-                                                                safeSend({
-                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
-                                                                    data: {
-                                                                        messages: threadReplies,
-                                                                        totalCount: actualTotalCount,
-                                                                        threadPost: safeContextProperty(
-                                                                            'threadPost',
-                                                                            [],
-                                                                        ),
-                                                                        postThread: threads,
-                                                                    },
-                                                                });
-                                                            } else {
-                                                                // Reset count if no messages found
-                                                                safeSend({
-                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
-                                                                    data: {
-                                                                        messages: safeContextProperty(
-                                                                            'threadMessages',
-                                                                            [],
-                                                                        ),
-                                                                        totalCount: safeContextProperty(
-                                                                            'threadMessages',
-                                                                            [],
-                                                                        ).length,
-                                                                        threadPost: safeContextProperty(
-                                                                            'threadPost',
-                                                                            [],
-                                                                        ),
-                                                                        postThread: safeContextProperty(
-                                                                            'postThread',
-                                                                            null,
-                                                                        ),
-                                                                    },
-                                                                });
-                                                            }
-                                                        } else {
-                                                            safeSend({
-                                                                type: ThreadActions.STOP_LOADING,
-                                                                data: { loadingOldMessages: false },
-                                                            });
-                                                        }
-                                                    })
-                                                    .catch((error) => {
-                                                        console.error('Error in large limit load:', error);
-                                                        safeSend({
-                                                            type: ThreadActions.STOP_LOADING,
-                                                            data: { loadingOldMessages: false },
-                                                        });
-                                                    });
-                                            },
-                                        },
-                                        {
-                                            text: 'Try Direct Fetch',
-                                            onPress: () => {
-                                                // Get current info
-                                                const currentCount = safeContextProperty('threadMessages', []).length;
-                                                const totalCount = safeContextProperty('totalCount', 0);
-                                                const missingCount = totalCount - currentCount;
-
-                                                if (missingCount <= 0) {
-                                                    Alert.alert('Info', 'No missing messages to fetch');
-                                                    return;
-                                                }
-
-                                                console.log(
-                                                    `Attempting direct fetch of missing ${missingCount} messages`,
-                                                );
-
-                                                // Try explicit query with exact parameters
-                                                safeSend({
-                                                    type: ThreadActions.START_LOADING,
-                                                    data: { loadingOldMessages: true },
-                                                });
-
-                                                // Special query directly for the missing messages
-                                                getThreadMessages({
-                                                    variables: {
-                                                        channelId: channelId?.toString(),
-                                                        role: role?.toString(),
-                                                        postParentId:
-                                                            !parentId || parentId == 0 ? null : parentId?.toString(),
-                                                        selectedFields:
-                                                            'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                                                        limit: missingCount, // Only get the exact number we need
-                                                        skip: 0, // Start from the beginning
-                                                    },
-                                                })
-                                                    .then(({ data }) => {
-                                                        console.log(
-                                                            'DIRECT FETCH response:',
-                                                            JSON.stringify(data, null, 2),
-                                                        );
-
-                                                        if (data?.getPostThread) {
-                                                            const threads: any = data.getPostThread;
-                                                            const threadReplies = threads?.replies ?? [];
-                                                            const actualTotalCount = threads?.replyCount ?? 0;
-
-                                                            console.log(
-                                                                `Direct fetch complete. Got ${threadReplies.length} messages of ${actualTotalCount} total`,
-                                                            );
-                                                            console.log(
-                                                                'Message IDs:',
-                                                                threadReplies.map((msg) => msg.id).join(', '),
-                                                            );
-
-                                                            // Compare with our existing messages to find the ones we're missing
-                                                            const existingIds = new Set(
-                                                                safeContextProperty('threadMessages', []).map(
-                                                                    (msg) => msg.id,
-                                                                ),
-                                                            );
-                                                            const newMessages = threadReplies.filter(
-                                                                (msg) => !existingIds.has(msg.id),
-                                                            );
-
-                                                            console.log(
-                                                                `Found ${newMessages.length} new messages that we didn't have before`,
-                                                            );
-
-                                                            if (newMessages.length > 0) {
-                                                                safeSend({
-                                                                    type: 'FETCH_MORE_MESSAGES_SUCCESS',
-                                                                    data: {
-                                                                        messages: newMessages,
-                                                                        totalCount: actualTotalCount,
-                                                                        loadingOldMessages: false,
-                                                                    },
-                                                                });
-
-                                                                // Show the results
-                                                                Alert.alert(
-                                                                    'Success',
-                                                                    `Found ${newMessages.length} new messages`,
-                                                                );
-                                                            } else {
-                                                                // If we didn't find any new messages, adjust the total count
-                                                                console.log('No new messages found, adjusting count');
-                                                                safeSend({
-                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
-                                                                    data: {
-                                                                        messages: safeContextProperty(
-                                                                            'threadMessages',
-                                                                            [],
-                                                                        ),
-                                                                        totalCount: safeContextProperty(
-                                                                            'threadMessages',
-                                                                            [],
-                                                                        ).length,
-                                                                        threadPost: safeContextProperty(
-                                                                            'threadPost',
-                                                                            [],
-                                                                        ),
-                                                                        postThread: safeContextProperty(
-                                                                            'postThread',
-                                                                            null,
-                                                                        ),
-                                                                    },
-                                                                });
-
-                                                                // Notify the user
-                                                                Alert.alert(
-                                                                    'Info',
-                                                                    'No new messages found. Count has been adjusted.',
-                                                                );
-                                                            }
-                                                        } else {
-                                                            Alert.alert('Error', 'Could not fetch thread messages');
-                                                            safeSend({
-                                                                type: ThreadActions.STOP_LOADING,
-                                                                data: { loadingOldMessages: false },
-                                                            });
-                                                        }
-                                                    })
-                                                    .catch((error) => {
-                                                        console.error('Error in direct fetch:', error);
-                                                        Alert.alert(
-                                                            'Error',
-                                                            'Failed to fetch messages: ' + error.message,
-                                                        );
-                                                        safeSend({
-                                                            type: ThreadActions.STOP_LOADING,
-                                                            data: { loadingOldMessages: false },
-                                                        });
-                                                    });
-                                            },
-                                        },
-                                        {
-                                            text: 'Reset Count',
-                                            style: 'destructive',
-                                            onPress: () => {
-                                                console.log('Resetting message count to match reality');
-                                                safeSend({
-                                                    type: ThreadActions.SET_THREAD_MESSAGES,
-                                                    data: {
-                                                        messages: safeContextProperty('threadMessages', []),
-                                                        totalCount: safeContextProperty('threadMessages', []).length,
-                                                        threadPost: safeContextProperty('threadPost', []),
-                                                        postThread: safeContextProperty('postThread', null),
-                                                    },
-                                                });
-                                            },
-                                        },
-                                        {
-                                            text: 'Cancel',
-                                            style: 'cancel',
-                                        },
-                                    ]);
-                                }}
-                                underlayColor="#e6e6e6"
-                            >
-                                <Box className="bg-gray-200 rounded-full px-4 py-2 flex-row items-center">
-                                    <MaterialIcons name="arrow-upward" size={16} color={colors.blue[500]} />
-                                    <Text className="text-sm font-medium color-blue-600 ml-2">
-                                        Load More (
-                                        {safeContextProperty('totalCount', 0) -
-                                            safeContextProperty('threadMessages', []).length}
-                                        )
-                                    </Text>
-                                </Box>
-                            </TouchableHighlight>
-
-                            <TouchableHighlight onPress={forceRefreshMessages} underlayColor="#e6e6e6">
-                                <Box className="bg-gray-200 rounded-full px-4 py-2 flex-row items-center">
-                                    <MaterialIcons name="refresh" size={16} color={colors.blue[500]} />
-                                    <Text className="text-sm font-medium color-blue-600 ml-2">Refresh All</Text>
-                                </Box>
-                            </TouchableHighlight>
-                        </HStack>
-                    </Box>
-                )}
-            {isPostParentIdThread && (
-                <>
-                    {safeContextProperty('threadPost', [])?.length > 0 && (
-                        <>
-                            <VStack className="px-2 pt-2 pb-0" space={'sm'}>
-                                <HStack space={'sm'} className="items-center">
-                                    <Avatar className="bg-transparent" size={'md'}>
-                                        <AvatarFallbackText>
-                                            {startCase(
-                                                safeContextProperty('threadPost')[0]?.author?.username?.charAt(0),
-                                            )}
-                                        </AvatarFallbackText>
-                                        <AvatarImage
-                                            alt="image"
-                                            style={{
-                                                borderRadius: 6,
-                                                borderWidth: 2,
-                                                borderColor: '#fff',
-                                            }}
-                                            source={{
-                                                uri: safeContextProperty('threadPost')[0]?.author?.picture,
-                                            }}
-                                        />
-                                    </Avatar>
-                                    <Box>
-                                        <Text className="font-bold color-black">
-                                            {safeContextProperty('threadPost')[0]?.author?.givenName ?? ''}{' '}
-                                            {safeContextProperty('threadPost')[0]?.author?.familyName ?? ''}
-                                        </Text>
-                                        <Text className="pl-0 color-gray-500">
-                                            {createdAtText(safeContextProperty('threadPost')[0]?.createdAt)} at{' '}
-                                            {(() => {
-                                                try {
-                                                    const createdAt = safeContextProperty('threadPost')[0]?.createdAt;
-                                                    if (createdAt && !isNaN(new Date(createdAt).getTime())) {
-                                                        return format(new Date(createdAt), 'hh:mm:a');
-                                                    } else {
-                                                        return 'unknown time';
-                                                    }
-                                                } catch (error) {
-                                                    console.error('Error formatting thread post time:', error);
-                                                    return 'unknown time';
-                                                }
-                                            })()}
-                                        </Text>
-                                    </Box>
-                                </HStack>
-                                <HStack space={'sm'} className="px-2 items-center">
-                                    <Text>{safeContextProperty('threadPost')[0]?.message ?? ''}</Text>
-                                </HStack>
-                            </VStack>
-
-                            <Box className="py-4">
-                                <Box className="px-4 py-2 border-t border-b border-gray-200">
-                                    <Text className="font-bold color-gray-600">
-                                        {safeContextProperty('threadPost')[0]?.replies?.totalCount}{' '}
-                                        {safeContextProperty('threadPost')[0]?.replies?.totalCount > 0
-                                            ? 'replies'
-                                            : 'reply'}
-                                    </Text>
-                                </Box>
-                            </Box>
-                        </>
-                    )}
-                </>
-            )}
-            <GiftedChat
-                ref={threadMessageListRef}
-                wrapInSafeArea={false}
-                renderLoading={() => <Spinner color={colors.blue[500]} />}
-                messages={messageList}
-                listViewProps={{
-                    onScroll: handleScrollToTop,
-                    onEndReached: handleEndReached,
-                    onEndReachedThreshold: 0.2,
-                    contentContainerStyle: {
-                        paddingBottom: 10,
-                    },
-                    maintainVisibleContentPosition: {
-                        minIndexForVisible: 0,
-                        autoscrollToTopThreshold: 100,
-                    },
-                    scrollEventThrottle: 16,
-                    keyboardDismissMode: 'on-drag',
-                    keyboardShouldPersistTaps: 'handled',
-                }}
-                onSend={(messages) => {
-                    if (!messages || messages.length === 0) {
-                        console.log('No messages to send');
-                        return;
-                    }
-
-                    // Use the actual message text from the state, not the one from GiftedChat
-                    // GiftedChat sometimes sends blank messages even when there's text in the input
-                    const currentInputText = currentMessageText;
-                    const messageToSend = currentInputText?.trim() || messages[0]?.text?.trim() || ' ';
-
-                    console.log('GiftedChat onSend triggered with text from state:', messageToSend);
-
-                    // Make sure we update the message text in state
-                    safeSend({
-                        type: ThreadActions.SET_MESSAGE_TEXT,
-                        data: { messageText: '' },
-                    });
-
-                    // Then send the message
-                    if (safeContextProperty('images', []).length > 0) {
-                        console.log(
-                            'Sending message with file:',
-                            messageToSend,
-                            'Images:',
-                            safeContextProperty('images', []).length,
-                        );
-                        safeSend({
-                            type: ThreadActions.SEND_THREAD_MESSAGE_WITH_FILE,
-                            data: { messageText: messageToSend },
-                        });
-                    } else {
-                        console.log('Sending text message:', messageToSend);
-                        safeSend({
-                            type: ThreadActions.SEND_THREAD_MESSAGE,
-                            data: { messageText: messageToSend },
-                        });
-                    }
-                }}
-                text={currentMessageText}
-                onInputTextChanged={(text) => {
-                    // Don't log every keystroke to reduce console spam
-                    if (text.length % 5 === 0 || text.length < 5) {
-                        console.log('Input text changed:', text);
-                    }
-
-                    // Set the text in the state
-                    safeSend({
-                        type: ThreadActions.SET_MESSAGE_TEXT,
-                        data: { messageText: text },
-                    });
-                }}
-                renderFooter={() =>
-                    safeContextProperty('loading', false) && !safeContextProperty('loadingOldMessages', false) ? (
-                        <Box className="w-full py-2 items-center">
-                            <Spinner color={colors.blue[500]} />
-                        </Box>
-                    ) : safeContextProperty('imageLoading', false) ? (
-                        <Box className="w-full py-2 items-center">
-                            <Spinner color={colors.blue[500]} />
-                        </Box>
-                    ) : (
-                        <></>
-                    )
-                }
-                scrollToBottom
-                loadEarlier={false}
-                isLoadingEarlier={false}
-                user={{
-                    _id: auth?.id || '',
-                }}
-                isTyping={true}
-                alwaysShowSend={safeContextProperty('loading', false) ? false : true}
-                infiniteScroll={true}
-                renderSend={renderSend}
-                renderInputToolbar={renderInputToolbar}
-                minInputToolbarHeight={50}
-                renderActions={renderActions}
-                renderAccessory={!!state?.context?.selectedImage ? renderAccessory : undefined}
-                renderMessage={renderMessage}
-                maxInputLength={1000}
-                placeholder="Type a message..."
-                showUserAvatar={true}
-                showAvatarForEveryMessage={false}
-                inverted={true}
-                parsePatterns={(linkStyle) => [
-                    {
-                        type: 'url',
-                        style: { ...linkStyle, color: colors.blue[500] },
-                        onPress: (url) => Linking.openURL(url),
-                    },
-                    {
-                        type: 'phone',
-                        style: { ...linkStyle, color: colors.blue[500] },
-                        onPress: (phone) => Linking.openURL(`tel:${phone}`),
-                    },
-                    {
-                        type: 'email',
-                        style: { ...linkStyle, color: colors.blue[500] },
-                        onPress: (email) => Linking.openURL(`mailto:${email}`),
-                    },
-                ]}
-                textInputProps={{
-                    style: {
-                        borderWidth: 1,
-                        borderColor: colors.gray[300],
-                        backgroundColor: '#f8f8f8',
-                        borderRadius: 20,
-                        minHeight: 40,
-                        maxHeight: 80,
-                        color: '#000',
-                        padding: 10,
-                        paddingHorizontal: 20,
-                        fontSize: 16,
-                        flex: 1,
-                    },
-                    multiline: true,
-                    returnKeyType: 'default',
-                    enablesReturnKeyAutomatically: true,
-                    placeholderTextColor: colors.gray[400],
-                }}
-                minComposerHeight={44}
-                isKeyboardInternallyHandled={true}
-                bottomOffset={Platform.OS === 'ios' ? 20 : 0}
-                renderChatFooter={() => (
-                    <>
-                        <ImageViewerModal
-                            isVisible={isShowImageViewer}
-                            setVisible={setImageViewer}
-                            modalContent={modalContent}
-                        />
-                        <SubscriptionHandler
-                            channelId={channelId}
-                            subscribeToNewMessages={() =>
-                                subscribeToMore({
-                                    document: CHAT_MESSAGE_ADDED,
-                                    variables: {
-                                        channelId: channelId?.toString(),
-                                        postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-                                    },
-                                    updateQuery: (prev, { subscriptionData }: any) => {
-                                        if (!subscriptionData.data) return prev;
-                                        const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
-                                        const prevReplyCount: any = prev?.getPostThread?.replyCount;
-                                        const newReplyCount = prevReplyCount || 0 + 1;
-                                        const replies = prev?.getPostThread?.replies || [];
-
-                                        safeSend({
-                                            type: ThreadActions.SET_THREAD_MESSAGES,
-                                            data: {
-                                                messages: uniqBy(
-                                                    [...safeContextProperty('threadMessages', []), newMessage],
-                                                    ({ id }) => id,
-                                                ),
-                                                totalCount: newReplyCount,
-                                                threadPost: safeContextProperty('threadPost', []),
-                                                postThread: safeContextProperty('postThread', null),
-                                            },
-                                        });
-
-                                        return Object.assign({}, prev, {
-                                            getPostThread: {
-                                                ...prev?.getPostThread,
-                                                lastReplyAt: newMessage.createdAt,
-                                                replies: [newMessage, ...replies],
-                                                replyCount: newReplyCount,
-                                                updatedAt: newMessage.createdAt,
-                                            },
-                                        });
-                                    },
-                                })
-                            }
-                        />
-                    </>
-                )}
-                messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
-                renderChatEmpty={() => (
-                    <>
-                        {!threadLoading && messageList && messageList?.length == 0 && (
-                            <Box className="p-5">
-                                <Center className="mt-6">
-                                    <Ionicons name="chatbubbles" size={30} />
-                                    <Text>You don't have any message yet!</Text>
-                                </Center>
-                            </Box>
-                        )}
-                    </>
-                )}
-                lightboxProps={{
-                    underlayColor: 'transparent',
-                    springConfig: { tension: 90000, friction: 90000 },
-                    disabled: true,
-                }}
-            />
-        </SafeAreaView>
-    );
-};
-
-const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubscriptionHandlerProps) => {
-    useEffect(() => subscribeToNewMessages(), [channelId]);
-    return <></>;
-};
-
-export const ThreadConversationView = React.memo(ThreadConversationViewComponent);
-// export const ThreadConversationView = ThreadConversationViewComponent;