@messenger-box/platform-mobile 10.0.3-alpha.22 → 10.0.3-alpha.23

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

@@ -307,7 +307,6 @@ function useSafeMachine(machine) {
                         `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(
@@ -677,7 +676,14 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     // Fetch thread messages function
     const fetchThreadMessages = useCallback(() => {
         if (channelId && parentId) {
-            console.log('Initial fetch of thread messages using larger limit (50)');
+            if (__DEV__) console.log('Initial fetch of thread messages using larger limit (50)');
+
+            // Set loading state
+            safeSend({
+                type: ThreadActions.START_LOADING,
+                data: { loading: true },
+            });
+
             getThreadMessages({
                 variables: {
                     channelId: channelId?.toString(),
@@ -695,10 +701,12 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         const messageTotalCount = threads?.replyCount ?? 0;
                         const messages = [...threadReplies];
 
-                        console.log(
-                            `Initial fetch complete. Got ${messages.length} messages of ${messageTotalCount} total`,
-                        );
+                        if (__DEV__)
+                            console.log(
+                                `Initial fetch complete. Got ${messages.length} messages of ${messageTotalCount} total`,
+                            );
 
+                        // Use batch updates to reduce render cycles
                         safeSend({
                             type: ThreadActions.SET_THREAD_MESSAGES,
                             data: {
@@ -717,7 +725,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     });
                 });
         }
-    }, [channelId, parentId, role]);
+    }, [channelId, parentId, role, getThreadMessages, safeSend]);
 
     React.useEffect(() => {
         if (data?.getPostThread) {
@@ -819,193 +827,41 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         }
     }, [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 isCloseToTop = useCallback(({ 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);
+        return contentOffset.y <= topThreshold;
+    }, []);
 
-    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;
+    const handleScrollToTop = useCallback(
+        ({ 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 (__DEV__)
+                    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 });
+                if (!isLoading && hasMoreMessages) {
+                    if (__DEV__) console.log('Near top of list - loading older messages');
+                    safeSend({ type: ThreadActions.FETCH_MORE_MESSAGES });
+                }
             }
-        }
-    };
+        },
+        [isCloseToTop, safeContextProperty, safeSend],
+    );
 
     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 });
@@ -1299,236 +1155,112 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         }
     };
 
+    // Optimize messageList memo to avoid unnecessary recalculations
     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)}`;
+        // Avoid excessive logging in production
+        if (__DEV__) console.log(`Creating message list from ${threadMessages.length} thread messages`);
 
-                    // 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
+        if (!threadMessages?.length) return [];
+
+        // 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();
+
+        const res = threadMessages
+            .filter((msg) => {
+                // Skip duplicate IDs
+                if (!msg.id || messageIds.has(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
+                        messageDate = new Date();
                     }
+                } catch (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);
-                        }
+                // 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;
                     }
+                }
 
-                    // 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;
-                });
-        }
+                // Get the message text without adding "File attachment" for image-only messages
+                let messageText = msg.message || '';
+
+                return {
+                    _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,
+                };
+            });
 
         // Sort messages by date (newest first as required by GiftedChat)
         // Use a safer getTime() approach with error handling
-        const sortedMessages = orderBy(
+        return 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', '') !== '';
+    // Optimize render functions with memoization
+    const renderSend = useCallback(
+        (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);
+            // 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,
+            return (
+                <Send
+                    {...props}
+                    containerStyle={{
                         alignItems: 'center',
                         justifyContent: 'center',
+                        marginHorizontal: 4,
+                        marginBottom: 0,
                     }}
+                    disabled={isDisabled}
                 >
-                    <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,
@@ -1537,88 +1269,226 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                             justifyContent: 'center',
                         }}
                     >
-                        <Ionicons name="image" size={24} color={colors.blue[500]} />
+                        <MaterialCommunityIcons
+                            name="send-circle"
+                            size={30}
+                            color={isDisabled ? colors.gray[400] : colors.blue[500]}
+                        />
                     </Box>
-                )}
-                containerStyle={{
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginLeft: 8,
-                    marginBottom: 0,
-                }}
-            />
-        );
-    };
+                </Send>
+            );
+        },
+        [safeContextProperty],
+    );
+
+    const renderActions = useCallback(
+        (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,
+                    }}
+                />
+            );
+        },
+        [onSelectImages],
+    );
 
-    const renderAccessory = (props) => {
-        const selectedImage = safeContextProperty('selectedImage', '');
+    const renderAccessory = useCallback(
+        (props) => {
+            const selectedImage = safeContextProperty('selectedImage', '');
 
-        if (!selectedImage) {
-            return null;
-        }
+            if (!selectedImage) {
+                return null;
+            }
 
-        return (
-            <View
-                style={{
-                    height: 80,
-                    padding: 10,
-                    backgroundColor: 'white',
-                    borderTopWidth: 1,
-                    borderTopColor: '#e0e0e0',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                }}
-            >
+            return (
                 <View
                     style={{
-                        flex: 1,
+                        height: 80,
+                        padding: 10,
+                        backgroundColor: 'white',
+                        borderTopWidth: 1,
+                        borderTopColor: '#e0e0e0',
                         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 })}
+                    <View
                         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,
+                            flex: 1,
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            paddingHorizontal: 20,
                         }}
                     >
-                        <Text style={{ color: 'white', fontWeight: 'bold' }}>X</Text>
-                    </TouchableHighlight>
+                        <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>
-            </View>
+            );
+        },
+        [state?.context?.selectedImage, safeSend],
+    );
+
+    const renderInputToolbar = useCallback((props) => {
+        return (
+            <InputToolbar
+                {...props}
+                containerStyle={{
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: colors.gray[200],
+                    paddingHorizontal: 4,
+                    paddingVertical: 4,
+                }}
+                primaryStyle={{
+                    alignItems: 'center',
+                }}
+            />
         );
-    };
+    }, []);
 
     const setImageViewerObject = (obj: any, v: boolean) => {
         setImageObject(obj);
         setImageViewer(v);
     };
 
+    // Add back the renderMessageText function (memoized)
+    const renderMessageText = useCallback(
+        (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 } }} />;
+            }
+        },
+        [role, navigation],
+    );
+
+    const renderMessage = useCallback(
+        (props: any) => {
+            return (
+                <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
+            );
+        },
+        [isShowImageViewer, setImageViewerObject],
+    );
+
     const modalContent = React.useMemo(() => {
         if (!imageObject) return <></>;
         const { image, _id } = imageObject;
@@ -1636,35 +1506,12 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         );
     }, [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) => {
@@ -1721,6 +1568,144 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         [channelId, parentId, getThreadMessages, safeSend],
     );
 
+    // Optimize the onFetchOld function to be more efficient
+    const onFetchOld = useCallback(() => {
+        const totalCount = safeContextProperty('totalCount', 0);
+        const threadMessages = safeContextProperty('threadMessages', []);
+        const isLoading = safeContextProperty('loadingOldMessages', false);
+
+        if (totalCount <= threadMessages.length || isLoading) {
+            // Make sure we're not stuck in loading state
+            if (isLoading) {
+                safeSend({
+                    type: ThreadActions.STOP_LOADING,
+                    data: { loadingOldMessages: false },
+                });
+            }
+            if (__DEV__) console.log('No more messages to load or already loading');
+            return;
+        }
+
+        if (__DEV__) 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 },
+        });
+
+        // Use simple, consistent approach: Skip=0, Limit=50
+        if (__DEV__) console.log('Using proven approach: Skip=0, Limit=50');
+
+        // Create query variables once
+        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,
+            skip: 0,
+        };
+
+        if (__DEV__) console.log('Query variables:', JSON.stringify(queryVariables));
+
+        fetchMoreMessages({
+            variables: queryVariables,
+        })
+            .then((res: any) => {
+                if (__DEV__) console.log('API response received with status:', res ? 'success' : 'empty');
+
+                if (res?.data?.getPostThread) {
+                    const threads: any = res?.data?.getPostThread;
+                    const threadReplies = threads?.replies ?? [];
+                    const actualTotalCount = threads?.replyCount ?? 0;
+
+                    if (__DEV__) {
+                        console.log('API response details:');
+                        console.log('- replyCount:', threads?.replyCount);
+                        console.log('- replies array length:', threadReplies.length);
+                    }
+
+                    if (threadReplies.length > 0) {
+                        // 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));
+
+                        if (__DEV__)
+                            console.log(
+                                `Found ${newUniqueMessages.length} unique new messages out of ${threadReplies.length} received`,
+                            );
+
+                        // If no new unique messages, it means we already have everything
+                        if (newUniqueMessages.length === 0) {
+                            if (__DEV__) 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);
+
+                        if (__DEV__) console.log(`Adding ${newUniqueMessages.length} new messages to thread`);
+
+                        safeSend({
+                            type: 'FETCH_MORE_MESSAGES_SUCCESS',
+                            data: {
+                                messages: newUniqueMessages,
+                                totalCount: actualTotalCount,
+                                loadingOldMessages: false,
+                            },
+                        });
+                    } else {
+                        if (__DEV__) console.log('No thread replies returned when loading more messages');
+                        registerLoadAttemptResult(false);
+
+                        // Adjust total count to match what we have, since server says there are no more messages
+                        safeSend({
+                            type: ThreadActions.SET_THREAD_MESSAGES,
+                            data: {
+                                messages: threadMessages,
+                                totalCount: threadMessages.length,
+                                threadPost: safeContextProperty('threadPost', []),
+                                postThread: safeContextProperty('postThread', null),
+                            },
+                        });
+                    }
+                } else {
+                    if (__DEV__) 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,
+                    },
+                });
+            });
+    }, [parentId, channelId, role, safeContextProperty, safeSend, fetchMoreMessages, registerLoadAttemptResult]);
+
     return (
         <SafeAreaView style={{ flex: 1 }}>
             {safeContextProperty('loadingOldMessages', false) === true && (
@@ -2104,6 +2089,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     scrollEventThrottle: 16,
                     keyboardDismissMode: 'on-drag',
                     keyboardShouldPersistTaps: 'handled',
+                    // removeClippedSubviews={true}
                 }}
                 onSend={(messages) => {
                     if (!messages || messages.length === 0) {
@@ -2116,7 +2102,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     const currentInputText = currentMessageText;
                     const messageToSend = currentInputText?.trim() || messages[0]?.text?.trim() || ' ';
 
-                    console.log('GiftedChat onSend triggered with text from state:', messageToSend);
+                    if (__DEV__) console.log('GiftedChat onSend triggered with text from state:', messageToSend);
 
                     // Make sure we update the message text in state
                     safeSend({
@@ -2126,18 +2112,19 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
 
                     // Then send the message
                     if (safeContextProperty('images', []).length > 0) {
-                        console.log(
-                            'Sending message with file:',
-                            messageToSend,
-                            'Images:',
-                            safeContextProperty('images', []).length,
-                        );
+                        if (__DEV__)
+                            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);
+                        if (__DEV__) console.log('Sending text message:', messageToSend);
                         safeSend({
                             type: ThreadActions.SEND_THREAD_MESSAGE,
                             data: { messageText: messageToSend },
@@ -2146,12 +2133,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 }}
                 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
+                    // Set the text in the state without excessive logging
                     safeSend({
                         type: ThreadActions.SET_MESSAGE_TEXT,
                         data: { messageText: text },
@@ -2176,7 +2158,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 user={{
                     _id: auth?.id || '',
                 }}
-                isTyping={true}
+                isTyping={safeContextProperty('loading', false)}
                 alwaysShowSend={safeContextProperty('loading', false) ? false : true}
                 infiniteScroll={true}
                 renderSend={renderSend}
@@ -2185,6 +2167,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 renderActions={renderActions}
                 renderAccessory={!!state?.context?.selectedImage ? renderAccessory : undefined}
                 renderMessage={renderMessage}
+                renderMessageText={renderMessageText}
                 maxInputLength={1000}
                 placeholder="Type a message..."
                 showUserAvatar={true}
@@ -2249,7 +2232,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                                         if (!subscriptionData.data) return prev;
                                         const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
                                         const prevReplyCount: any = prev?.getPostThread?.replyCount;
-                                        const newReplyCount = prevReplyCount || 0 + 1;
+                                        const newReplyCount = (prevReplyCount || 0) + 1;
                                         const replies = prev?.getPostThread?.replies || [];
 
                                         safeSend({
@@ -2280,7 +2263,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         />
                     </>
                 )}
-                messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
+                messagesContainerStyle={messageList?.length == 0 ? { transform: [{ scaleY: -1 }] } : undefined}
                 renderChatEmpty={() => (
                     <>
                         {!threadLoading && messageList && messageList?.length == 0 && (