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

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

@@ -1,1537 +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 } 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 '';
-    let date = new Date(value);
-    if (isToday(date)) return 'Today';
-    if (isYesterday(date)) return 'Yesterday';
-    return format(new Date(value), 'MMM dd, yyyy');
-};
-
-// 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,
-                    },
-                }));
-            } 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 || [];
-                    return {
-                        ...prev,
-                        context: {
-                            ...prev.context,
-                            loadingOldMessages: false,
-                            threadMessages: uniqBy([...prev.context.threadMessages, ...newMessages], ({ id }) => id),
-                        },
-                        value: 'active',
-                    };
-                });
-            } else if (event.type === 'ERROR') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        loadingOldMessages: false,
-                        error: event.data?.message || 'Unknown error',
-                    },
-                    value: 'error',
-                }));
-            }
-        } catch (error) {
-            console.error('Error in 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' });
-
-    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>
-                ),
-            });
-
-            // 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]),
-    );
-
-    // 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) {
-            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: MESSAGES_PER_PAGE,
-                },
-            })
-                .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];
-
-                        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')]);
-
-    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.START_LOADING,
-                data: { loadingOldMessages: true },
-            });
-
-            fetchMoreMessages({
-                variables: {
-                    channelId: channelId?.toString(),
-                    role: role?.toString(),
-                    postParentId: parentId?.toString(),
-                    selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                    limit: MESSAGES_PER_PAGE,
-                    skip: threadMessages.length,
-                },
-            })
-                .then((res: any) => {
-                    if (res?.data?.getPostThread) {
-                        const threads: any = res?.data?.getPostThread;
-                        const threadReplies = threads?.replies ?? [];
-
-                        console.log('Successfully loaded more messages:', threadReplies.length);
-
-                        safeSend({
-                            type: 'FETCH_MORE_MESSAGES_SUCCESS',
-                            data: {
-                                messages: threadReplies,
-                                loadingOldMessages: false,
-                            },
-                        });
-                    } else {
-                        console.log('No thread data returned when loading more messages');
-                        safeSend({
-                            type: ThreadActions.STOP_LOADING,
-                            data: { loadingOldMessages: false },
-                        });
-                    }
-                })
-                .catch((error: any) => {
-                    console.error('Error fetching more messages:', error);
-                    safeSend({
-                        type: 'ERROR',
-                        data: {
-                            message: error.message,
-                            loadingOldMessages: false,
-                        },
-                    });
-                });
-        } else {
-            console.log('No more messages to load or already loading');
-        }
-    }, [parentId, channelId, state.context]);
-
-    let onScroll = false;
-
-    const handleScrollToTop = ({ nativeEvent }: any) => {
-        // Check if we're near the top of the list
-        if (isCloseToTop(nativeEvent)) {
-            if (
-                !safeContextProperty('loadingOldMessages', false) &&
-                safeContextProperty('totalCount', 0) > safeContextProperty('threadMessages', []).length
-            ) {
-                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 }) => {
-        const paddingToTop = 80;
-        return contentOffset.y <= paddingToTop;
-    };
-
-    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)}`;
-
-                    let message: IMessageProps = {
-                        _id: uniqueId,
-                        text: msg.message || '',
-                        createdAt: new Date(msg.createdAt),
-                        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: msg?.files?.data?.[0]?.url,
-                        sent: msg?.isDelivered || true,
-                        received: msg?.isRead || false,
-                        propsConfiguration: msg?.propsConfiguration,
-                    };
-                    return message;
-                });
-        }
-
-        // Sort messages by date (newest first as required by GiftedChat)
-        const sortedMessages = res.sort((a, b) => b.createdAt - a.createdAt);
-        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;
-        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 } }} />
-                    )}
-                </>
-            );
-        } 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',
-                }}
-            />
-        );
-    };
-
-    return (
-        <SafeAreaView style={{ flex: 1 }}>
-            {safeContextProperty('loadingOldMessages', false) && (
-                <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>
-            )}
-            {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{' '}
-                                            {format(
-                                                new Date(safeContextProperty('threadPost')[0]?.createdAt),
-                                                'hh:ss:a',
-                                            )}
-                                        </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: 100,
-                    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;