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

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

@@ -14,7 +14,7 @@ import {
     Spinner,
     Text,
 } from '@admin-layout/gluestack-ui-mobile';
-import { Platform, Linking, SafeAreaView, View, TouchableHighlight } from 'react-native';
+import { Platform, Linking, SafeAreaView, View, TouchableHighlight, Alert } from 'react-native';
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { orderBy, startCase, uniqBy } from 'lodash-es';
@@ -64,10 +64,23 @@ const {
 
 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');
+
+    try {
+        // Validate the date before processing
+        const timestamp = new Date(value).getTime();
+        if (isNaN(timestamp)) {
+            console.warn(`Invalid date value in createdAtText: ${value}`);
+            return 'Unknown date';
+        }
+
+        let date = new Date(value);
+        if (isToday(date)) return 'Today';
+        if (isYesterday(date)) return 'Yesterday';
+        return format(date, 'MMM dd, yyyy');
+    } catch (error) {
+        console.error(`Error processing date in createdAtText: ${value}`, error);
+        return 'Unknown date';
+    }
 };
 
 // Create a safer version of useMachine to handle potential errors
@@ -214,6 +227,8 @@ function useSafeMachine(machine) {
                     context: {
                         ...prev.context,
                         loading: false,
+                        loadingOldMessages:
+                            event.data?.loadingOldMessages === false ? false : prev.context.loadingOldMessages,
                     },
                 }));
             } else if (event.type === ThreadActions.SEND_THREAD_MESSAGE) {
@@ -287,12 +302,111 @@ function useSafeMachine(machine) {
             } else if (event.type === 'FETCH_MORE_MESSAGES_SUCCESS') {
                 setState((prev) => {
                     const newMessages = event.data?.messages || [];
+                    const apiTotalCount = event.data?.totalCount;
+                    console.log(
+                        `Merging ${newMessages.length} older messages with ${prev.context.threadMessages.length} existing messages`,
+                    );
+
+                    // Debug: Log the dates of the messages for troubleshooting
+                    if (newMessages.length > 0) {
+                        try {
+                            console.log(
+                                'First new message date:',
+                                !isNaN(new Date(newMessages[0].createdAt).getTime())
+                                    ? new Date(newMessages[0].createdAt).toISOString()
+                                    : 'Invalid date',
+                            );
+                            console.log(
+                                'Last new message date:',
+                                !isNaN(new Date(newMessages[newMessages.length - 1].createdAt).getTime())
+                                    ? new Date(newMessages[newMessages.length - 1].createdAt).toISOString()
+                                    : 'Invalid date',
+                            );
+                        } catch (error) {
+                            console.error('Error logging new message dates:', error);
+                        }
+                    }
+
+                    if (prev.context.threadMessages.length > 0) {
+                        try {
+                            console.log(
+                                'First existing message date:',
+                                !isNaN(new Date(prev.context.threadMessages[0].createdAt).getTime())
+                                    ? new Date(prev.context.threadMessages[0].createdAt).toISOString()
+                                    : 'Invalid date',
+                            );
+                            console.log(
+                                'Last existing message date:',
+                                !isNaN(
+                                    new Date(
+                                        prev.context.threadMessages[prev.context.threadMessages.length - 1].createdAt,
+                                    ).getTime(),
+                                )
+                                    ? new Date(
+                                          prev.context.threadMessages[prev.context.threadMessages.length - 1].createdAt,
+                                      ).toISOString()
+                                    : 'Invalid date',
+                            );
+                        } catch (error) {
+                            console.error('Error logging existing message dates:', error);
+                        }
+                    }
+
+                    // If no new messages returned but total count says there should be more
+                    if (newMessages.length === 0 && prev.context.totalCount > prev.context.threadMessages.length) {
+                        console.log('No new messages found despite totalCount indicating more should exist');
+
+                        // Adjust totalCount to match reality
+                        return {
+                            ...prev,
+                            context: {
+                                ...prev.context,
+                                loadingOldMessages: false,
+                                totalCount: prev.context.threadMessages.length,
+                            },
+                            value: 'active',
+                        };
+                    }
+
+                    // Make sure we don't add duplicate messages
+                    const combinedMessages = uniqBy([...prev.context.threadMessages, ...newMessages], 'id');
+
+                    // GiftedChat expects messages sorted by date (newest first)
+                    const sortedMessages = orderBy(
+                        combinedMessages,
+                        [
+                            (msg) => {
+                                try {
+                                    // Safely access and convert date
+                                    return !isNaN(new Date(msg.createdAt).getTime())
+                                        ? new Date(msg.createdAt).getTime()
+                                        : 0; // Default to oldest if invalid
+                                } catch (error) {
+                                    console.error(`Error sorting message by date: ${msg.id}`, error);
+                                    return 0; // Default to oldest if error
+                                }
+                            },
+                        ],
+                        ['desc'],
+                    );
+
+                    // Use the total count from the API response if available, otherwise keep the current count
+                    const newTotalCount =
+                        typeof apiTotalCount === 'number'
+                            ? apiTotalCount
+                            : Math.max(sortedMessages.length, prev.context.totalCount);
+
+                    console.log(
+                        `Total messages after merge and sort: ${sortedMessages.length}, totalCount: ${newTotalCount}`,
+                    );
+
                     return {
                         ...prev,
                         context: {
                             ...prev.context,
                             loadingOldMessages: false,
-                            threadMessages: uniqBy([...prev.context.threadMessages, ...newMessages], ({ id }) => id),
+                            threadMessages: sortedMessages,
+                            totalCount: newTotalCount,
                         },
                         value: 'active',
                     };
@@ -432,6 +546,64 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         { data, loading: threadLoading, fetchMore: fetchMoreMessages, refetch: refetchThreadMessages, subscribeToMore },
     ] = useGetPostThreadLazyQuery({ fetchPolicy: 'cache-and-network' });
 
+    // Add a function to force refresh all messages
+    const forceRefreshMessages = useCallback(() => {
+        console.log('Force refreshing all messages');
+
+        // Clear the current messages first
+        safeSend({
+            type: ThreadActions.CLEAR_MESSAGES,
+        });
+
+        // Then trigger a refetch
+        if (channelId && parentId) {
+            safeSend({
+                type: ThreadActions.START_LOADING,
+                data: { loading: true },
+            });
+
+            getThreadMessages({
+                variables: {
+                    channelId: channelId?.toString(),
+                    role: role?.toString(),
+                    postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                    selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                    limit: 50, // Use larger limit that proved to work
+                },
+            })
+                .then(({ data }) => {
+                    if (data?.getPostThread) {
+                        const threads: any = data.getPostThread;
+                        const threadPost = threads?.post ?? [];
+                        const threadReplies = threads?.replies ?? [];
+                        const messageTotalCount = threads?.replyCount ?? 0;
+                        const messages = [...threadReplies];
+
+                        console.log(
+                            `Force refresh complete. Got ${messages.length} messages of ${messageTotalCount} total`,
+                        );
+
+                        safeSend({
+                            type: ThreadActions.SET_THREAD_MESSAGES,
+                            data: {
+                                messages,
+                                totalCount: messageTotalCount,
+                                threadPost: threadPost,
+                                postThread: threads,
+                            },
+                        });
+                    }
+                })
+                .catch((error) => {
+                    console.error('Error during force refresh:', error);
+                    safeSend({
+                        type: 'ERROR',
+                        data: { message: error.message },
+                    });
+                });
+        }
+    }, [channelId, parentId, getThreadMessages, safeSend]);
+
     useFocusEffect(
         React.useCallback(() => {
             // navigation?.setOptions({ title: params?.title ?? 'Thread' });
@@ -443,6 +615,11 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
                     </Button>
                 ),
+                headerRight: () => (
+                    <Button className="bg-transparent active:bg-gray-200 mr-2" onPress={forceRefreshMessages}>
+                        <MaterialIcons size={20} name="refresh" color={'black'} />
+                    </Button>
+                ),
             });
 
             // Set initial context when focused
@@ -462,7 +639,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
             return () => {
                 safeSend({ type: ThreadActions.CLEAR_MESSAGES });
             };
-        }, [postParentId]),
+        }, [postParentId, forceRefreshMessages]),
     );
 
     // Effect for when in FetchThreadMessages state
@@ -500,13 +677,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)');
             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,
+                    limit: 50, // Use larger limit that proved to work
                 },
             })
                 .then(({ data }) => {
@@ -517,6 +695,10 @@ 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`,
+                        );
+
                         safeSend({
                             type: ThreadActions.SET_THREAD_MESSAGES,
                             data: {
@@ -563,6 +745,74 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         }
     }, [safeContextProperty('selectedImage')]);
 
+    // Add a safety timeout to clear loading state if it gets stuck
+    React.useEffect(() => {
+        const isLoading = safeContextProperty('loadingOldMessages', false);
+
+        if (isLoading) {
+            console.log('Message loading timeout safety started');
+            const timeoutId = setTimeout(() => {
+                // Check if we're still loading after 10 seconds
+                if (safeContextProperty('loadingOldMessages', false)) {
+                    console.log('Message loading timed out - resetting state');
+                    safeSend({
+                        type: ThreadActions.STOP_LOADING,
+                        data: { loadingOldMessages: false },
+                    });
+                }
+            }, 10000); // 10 second timeout
+
+            return () => clearTimeout(timeoutId);
+        }
+    }, [safeContextProperty('loadingOldMessages')]);
+
+    // Add a safety counter to detect and fix incorrect message counts automatically
+    const failedLoadAttemptsRef = useRef(0);
+
+    // Track failed attempts to load more messages
+    const registerLoadAttemptResult = useCallback((success: boolean) => {
+        if (!success) {
+            failedLoadAttemptsRef.current += 1;
+            console.log(`Failed load attempt registered, count: ${failedLoadAttemptsRef.current}`);
+        } else {
+            // Reset counter on successful load
+            failedLoadAttemptsRef.current = 0;
+        }
+    }, []);
+
+    // Watch for failed load attempts and auto-fix the count after 3 consecutive failures
+    React.useEffect(() => {
+        const isLoading = safeContextProperty('loadingOldMessages', false);
+        const totalCount = safeContextProperty('totalCount', 0);
+        const messagesCount = safeContextProperty('threadMessages', []).length;
+
+        // If we're not loading and there's a discrepancy in message counts
+        if (!isLoading && totalCount > messagesCount) {
+            // If we've had 3 consecutive failed attempts, fix the count
+            if (failedLoadAttemptsRef.current >= 2) {
+                console.log(
+                    `Auto-fixing incorrect message count after ${
+                        failedLoadAttemptsRef.current + 1
+                    } failed load attempts`,
+                );
+                console.log(`Adjusting totalCount from ${totalCount} to ${messagesCount}`);
+
+                safeSend({
+                    type: ThreadActions.SET_THREAD_MESSAGES,
+                    data: {
+                        messages: safeContextProperty('threadMessages', []),
+                        totalCount: messagesCount,
+                        threadPost: safeContextProperty('threadPost', []),
+                        postThread: safeContextProperty('postThread', null),
+                    },
+                });
+
+                // Reset the counter
+                failedLoadAttemptsRef.current = 0;
+            }
+        }
+    }, [safeContextProperty('loadingOldMessages'), safeContextProperty('threadMessages')]);
+
     const scrollToBottom = React.useCallback(() => {
         if (threadMessageListRef?.current) {
             threadMessageListRef.current.scrollToBottom();
@@ -578,36 +828,111 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
 
             // Set the loading state specifically for old messages
             safeSend({
-                type: ThreadActions.START_LOADING,
+                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: {
-                    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,
-                },
+                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
+                        }
 
-                        console.log('Successfully loaded more messages:', threadReplies.length);
+                        // 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: threadReplies,
+                                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 },
@@ -616,6 +941,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 })
                 .catch((error: any) => {
                     console.error('Error fetching more messages:', error);
+                    registerLoadAttemptResult(false);
                     safeSend({
                         type: 'ERROR',
                         data: {
@@ -626,18 +952,31 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 });
         } 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]);
+    }, [parentId, channelId, state.context, registerLoadAttemptResult]);
 
     let onScroll = false;
 
     const handleScrollToTop = ({ nativeEvent }: any) => {
         // Check if we're near the top of the list
         if (isCloseToTop(nativeEvent)) {
-            if (
-                !safeContextProperty('loadingOldMessages', false) &&
-                safeContextProperty('totalCount', 0) > safeContextProperty('threadMessages', []).length
-            ) {
+            const isLoading = safeContextProperty('loadingOldMessages', false);
+            const totalCount = safeContextProperty('totalCount', 0);
+            const currentCount = safeContextProperty('threadMessages', []).length;
+            const hasMoreMessages = totalCount > currentCount;
+
+            console.log(
+                `Scroll near top - Loading state: ${isLoading}, Messages: ${currentCount}/${totalCount}, Has more: ${hasMoreMessages}`,
+            );
+
+            if (!isLoading && hasMoreMessages) {
                 console.log('Near top of list - loading older messages');
                 safeSend({ type: ThreadActions.FETCH_MORE_MESSAGES });
             }
@@ -650,8 +989,21 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     };
 
     const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
-        const paddingToTop = 80;
-        return contentOffset.y <= paddingToTop;
+        // 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 () => {
@@ -971,10 +1323,39 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     // Generate a unique _id if needed by combining id and createdAt
                     const uniqueId = msg.id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
+                    // Safely create a Date object with validation
+                    let messageDate;
+                    try {
+                        // Check if createdAt is a valid date string
+                        if (msg.createdAt && !isNaN(new Date(msg.createdAt).getTime())) {
+                            messageDate = new Date(msg.createdAt);
+                        } else {
+                            // Use current time as fallback if date is invalid
+                            console.warn(`Invalid date value for message ${msg.id}: ${msg.createdAt}`);
+                            messageDate = new Date();
+                        }
+                    } catch (error) {
+                        console.error(`Error creating date for message ${msg.id}:`, error);
+                        messageDate = new Date(); // Fallback to current time
+                    }
+
+                    // Extract image URL from files data
+                    let imageUrl = null;
+                    if (msg.files?.data && msg.files.data.length > 0) {
+                        const fileData = msg.files.data[0];
+                        if (fileData && fileData.url) {
+                            imageUrl = fileData.url;
+                            console.log('📷 Found image URL for message', msg.id, ':', imageUrl);
+                        }
+                    }
+
+                    // Get the message text without adding "File attachment" for image-only messages
+                    let messageText = msg.message || '';
+
                     let message: IMessageProps = {
                         _id: uniqueId,
-                        text: msg.message || '',
-                        createdAt: new Date(msg.createdAt),
+                        text: messageText,
+                        createdAt: messageDate,
                         user: {
                             _id: msg?.author?.id ?? auth?.profile?.id,
                             name:
@@ -984,7 +1365,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                             avatar: msg?.author?.picture ?? auth?.profile?.picture,
                         },
                         type: msg?.type || '',
-                        image: msg?.files?.data?.[0]?.url,
+                        image: imageUrl,
                         sent: msg?.isDelivered || true,
                         received: msg?.isRead || false,
                         propsConfiguration: msg?.propsConfiguration,
@@ -994,7 +1375,39 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         }
 
         // Sort messages by date (newest first as required by GiftedChat)
-        const sortedMessages = res.sort((a, b) => b.createdAt - a.createdAt);
+        // Use a safer getTime() approach with error handling
+        const sortedMessages = orderBy(
+            res,
+            [
+                (msg) => {
+                    try {
+                        return msg.createdAt instanceof Date ? msg.createdAt.getTime() : new Date().getTime();
+                    } catch (error) {
+                        console.error('Error sorting message by date:', error);
+                        return 0; // Fallback to a default value
+                    }
+                },
+            ],
+            ['desc'],
+        );
+
+        // Log message dates to help with debugging
+        if (sortedMessages.length > 0) {
+            try {
+                const firstMsg = sortedMessages[0];
+                const lastMsg = sortedMessages[sortedMessages.length - 1];
+
+                console.log(
+                    'Message date range:',
+                    lastMsg.createdAt instanceof Date ? lastMsg.createdAt.toISOString() : 'invalid date',
+                    'to',
+                    firstMsg.createdAt instanceof Date ? firstMsg.createdAt.toISOString() : 'invalid date',
+                );
+            } catch (error) {
+                console.error('Error logging message date range:', error);
+            }
+        }
+
         return sortedMessages;
     }, [safeContextProperty('threadMessages'), auth]);
 
@@ -1036,6 +1449,8 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
 
     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 = '';
@@ -1091,7 +1506,14 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     )}
                 </>
             );
-        } else {
+        }
+        // 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 } }} />;
         }
     };
@@ -1243,9 +1665,65 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         );
     };
 
+    // Add a function to load messages with specific skip value for debugging
+    const forceLoadMessages = useCallback(
+        (skipValue: number) => {
+            console.log(`Force loading messages with explicit skip=${skipValue}, limit=50`);
+
+            if (channelId && parentId) {
+                safeSend({
+                    type: ThreadActions.START_LOADING,
+                    data: { loading: true },
+                });
+
+                getThreadMessages({
+                    variables: {
+                        channelId: channelId?.toString(),
+                        role: role?.toString(),
+                        postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                        selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                        skip: skipValue,
+                        limit: 50, // Use larger limit that proved to work
+                    },
+                })
+                    .then(({ data }) => {
+                        if (data?.getPostThread) {
+                            const threads: any = data.getPostThread;
+                            const threadPost = threads?.post ?? [];
+                            const threadReplies = threads?.replies ?? [];
+                            const messageTotalCount = threads?.replyCount ?? 0;
+                            const messages = [...threadReplies];
+
+                            console.log(
+                                `Force load with skip=${skipValue} complete. Got ${messages.length} messages of ${messageTotalCount} total`,
+                            );
+
+                            safeSend({
+                                type: ThreadActions.SET_THREAD_MESSAGES,
+                                data: {
+                                    messages,
+                                    totalCount: messageTotalCount,
+                                    threadPost: threadPost,
+                                    postThread: threads,
+                                },
+                            });
+                        }
+                    })
+                    .catch((error) => {
+                        console.error('Error during force load:', error);
+                        safeSend({
+                            type: 'ERROR',
+                            data: { message: error.message },
+                        });
+                    });
+            }
+        },
+        [channelId, parentId, getThreadMessages, safeSend],
+    );
+
     return (
         <SafeAreaView style={{ flex: 1 }}>
-            {safeContextProperty('loadingOldMessages', false) && (
+            {safeContextProperty('loadingOldMessages', false) === true && (
                 <Box className="absolute top-10 left-0 right-0 z-10 items-center">
                     <Box className="bg-blue-500/20 rounded-full px-4 py-2 flex-row items-center">
                         <Spinner color={colors.blue[500]} size="small" />
@@ -1253,6 +1731,294 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     </Box>
                 </Box>
             )}
+            {!safeContextProperty('loadingOldMessages', false) &&
+                safeContextProperty('totalCount', 0) > safeContextProperty('threadMessages', []).length && (
+                    <Box className="absolute top-10 left-0 right-0 z-10 items-center">
+                        <HStack space={2} className="px-2">
+                            <TouchableHighlight
+                                onPress={() => {
+                                    console.log('Manual load more pressed');
+                                    Alert.alert('Load Options', 'Choose loading method', [
+                                        {
+                                            text: 'Normal Load',
+                                            onPress: () => safeSend({ type: ThreadActions.FETCH_MORE_MESSAGES }),
+                                        },
+                                        {
+                                            text: 'Try Skip=0',
+                                            onPress: () => forceLoadMessages(0),
+                                        },
+                                        {
+                                            text: 'Try Skip=0, Limit=50',
+                                            onPress: () => {
+                                                // Try with a larger limit
+                                                console.log('Force loading with explicit skip=0, limit=50');
+
+                                                safeSend({
+                                                    type: ThreadActions.START_LOADING,
+                                                    data: { loadingOldMessages: true },
+                                                });
+
+                                                fetchMoreMessages({
+                                                    variables: {
+                                                        channelId: channelId?.toString(),
+                                                        role: role?.toString(),
+                                                        postParentId:
+                                                            !parentId || parentId == 0 ? null : parentId?.toString(),
+                                                        selectedFields:
+                                                            'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                                                        limit: 50, // Try a larger limit
+                                                        skip: 0,
+                                                    },
+                                                })
+                                                    .then((res: any) => {
+                                                        console.log(
+                                                            'LARGE LIMIT response:',
+                                                            JSON.stringify(res?.data, null, 2),
+                                                        );
+
+                                                        if (res?.data?.getPostThread) {
+                                                            const threads: any = res?.data?.getPostThread;
+                                                            const threadReplies = threads?.replies ?? [];
+                                                            const actualTotalCount = threads?.replyCount ?? 0;
+
+                                                            console.log(
+                                                                `Large limit load complete. Got ${threadReplies.length} messages of ${actualTotalCount} total`,
+                                                            );
+
+                                                            if (threadReplies.length > 0) {
+                                                                // Reset our message list with all available messages
+                                                                safeSend({
+                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
+                                                                    data: {
+                                                                        messages: threadReplies,
+                                                                        totalCount: actualTotalCount,
+                                                                        threadPost: safeContextProperty(
+                                                                            'threadPost',
+                                                                            [],
+                                                                        ),
+                                                                        postThread: threads,
+                                                                    },
+                                                                });
+                                                            } else {
+                                                                // Reset count if no messages found
+                                                                safeSend({
+                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
+                                                                    data: {
+                                                                        messages: safeContextProperty(
+                                                                            'threadMessages',
+                                                                            [],
+                                                                        ),
+                                                                        totalCount: safeContextProperty(
+                                                                            'threadMessages',
+                                                                            [],
+                                                                        ).length,
+                                                                        threadPost: safeContextProperty(
+                                                                            'threadPost',
+                                                                            [],
+                                                                        ),
+                                                                        postThread: safeContextProperty(
+                                                                            'postThread',
+                                                                            null,
+                                                                        ),
+                                                                    },
+                                                                });
+                                                            }
+                                                        } else {
+                                                            safeSend({
+                                                                type: ThreadActions.STOP_LOADING,
+                                                                data: { loadingOldMessages: false },
+                                                            });
+                                                        }
+                                                    })
+                                                    .catch((error) => {
+                                                        console.error('Error in large limit load:', error);
+                                                        safeSend({
+                                                            type: ThreadActions.STOP_LOADING,
+                                                            data: { loadingOldMessages: false },
+                                                        });
+                                                    });
+                                            },
+                                        },
+                                        {
+                                            text: 'Try Direct Fetch',
+                                            onPress: () => {
+                                                // Get current info
+                                                const currentCount = safeContextProperty('threadMessages', []).length;
+                                                const totalCount = safeContextProperty('totalCount', 0);
+                                                const missingCount = totalCount - currentCount;
+
+                                                if (missingCount <= 0) {
+                                                    Alert.alert('Info', 'No missing messages to fetch');
+                                                    return;
+                                                }
+
+                                                console.log(
+                                                    `Attempting direct fetch of missing ${missingCount} messages`,
+                                                );
+
+                                                // Try explicit query with exact parameters
+                                                safeSend({
+                                                    type: ThreadActions.START_LOADING,
+                                                    data: { loadingOldMessages: true },
+                                                });
+
+                                                // Special query directly for the missing messages
+                                                getThreadMessages({
+                                                    variables: {
+                                                        channelId: channelId?.toString(),
+                                                        role: role?.toString(),
+                                                        postParentId:
+                                                            !parentId || parentId == 0 ? null : parentId?.toString(),
+                                                        selectedFields:
+                                                            'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                                                        limit: missingCount, // Only get the exact number we need
+                                                        skip: 0, // Start from the beginning
+                                                    },
+                                                })
+                                                    .then(({ data }) => {
+                                                        console.log(
+                                                            'DIRECT FETCH response:',
+                                                            JSON.stringify(data, null, 2),
+                                                        );
+
+                                                        if (data?.getPostThread) {
+                                                            const threads: any = data.getPostThread;
+                                                            const threadReplies = threads?.replies ?? [];
+                                                            const actualTotalCount = threads?.replyCount ?? 0;
+
+                                                            console.log(
+                                                                `Direct fetch complete. Got ${threadReplies.length} messages of ${actualTotalCount} total`,
+                                                            );
+                                                            console.log(
+                                                                'Message IDs:',
+                                                                threadReplies.map((msg) => msg.id).join(', '),
+                                                            );
+
+                                                            // Compare with our existing messages to find the ones we're missing
+                                                            const existingIds = new Set(
+                                                                safeContextProperty('threadMessages', []).map(
+                                                                    (msg) => msg.id,
+                                                                ),
+                                                            );
+                                                            const newMessages = threadReplies.filter(
+                                                                (msg) => !existingIds.has(msg.id),
+                                                            );
+
+                                                            console.log(
+                                                                `Found ${newMessages.length} new messages that we didn't have before`,
+                                                            );
+
+                                                            if (newMessages.length > 0) {
+                                                                safeSend({
+                                                                    type: 'FETCH_MORE_MESSAGES_SUCCESS',
+                                                                    data: {
+                                                                        messages: newMessages,
+                                                                        totalCount: actualTotalCount,
+                                                                        loadingOldMessages: false,
+                                                                    },
+                                                                });
+
+                                                                // Show the results
+                                                                Alert.alert(
+                                                                    'Success',
+                                                                    `Found ${newMessages.length} new messages`,
+                                                                );
+                                                            } else {
+                                                                // If we didn't find any new messages, adjust the total count
+                                                                console.log('No new messages found, adjusting count');
+                                                                safeSend({
+                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
+                                                                    data: {
+                                                                        messages: safeContextProperty(
+                                                                            'threadMessages',
+                                                                            [],
+                                                                        ),
+                                                                        totalCount: safeContextProperty(
+                                                                            'threadMessages',
+                                                                            [],
+                                                                        ).length,
+                                                                        threadPost: safeContextProperty(
+                                                                            'threadPost',
+                                                                            [],
+                                                                        ),
+                                                                        postThread: safeContextProperty(
+                                                                            'postThread',
+                                                                            null,
+                                                                        ),
+                                                                    },
+                                                                });
+
+                                                                // Notify the user
+                                                                Alert.alert(
+                                                                    'Info',
+                                                                    'No new messages found. Count has been adjusted.',
+                                                                );
+                                                            }
+                                                        } else {
+                                                            Alert.alert('Error', 'Could not fetch thread messages');
+                                                            safeSend({
+                                                                type: ThreadActions.STOP_LOADING,
+                                                                data: { loadingOldMessages: false },
+                                                            });
+                                                        }
+                                                    })
+                                                    .catch((error) => {
+                                                        console.error('Error in direct fetch:', error);
+                                                        Alert.alert(
+                                                            'Error',
+                                                            'Failed to fetch messages: ' + error.message,
+                                                        );
+                                                        safeSend({
+                                                            type: ThreadActions.STOP_LOADING,
+                                                            data: { loadingOldMessages: false },
+                                                        });
+                                                    });
+                                            },
+                                        },
+                                        {
+                                            text: 'Reset Count',
+                                            style: 'destructive',
+                                            onPress: () => {
+                                                console.log('Resetting message count to match reality');
+                                                safeSend({
+                                                    type: ThreadActions.SET_THREAD_MESSAGES,
+                                                    data: {
+                                                        messages: safeContextProperty('threadMessages', []),
+                                                        totalCount: safeContextProperty('threadMessages', []).length,
+                                                        threadPost: safeContextProperty('threadPost', []),
+                                                        postThread: safeContextProperty('postThread', null),
+                                                    },
+                                                });
+                                            },
+                                        },
+                                        {
+                                            text: 'Cancel',
+                                            style: 'cancel',
+                                        },
+                                    ]);
+                                }}
+                                underlayColor="#e6e6e6"
+                            >
+                                <Box className="bg-gray-200 rounded-full px-4 py-2 flex-row items-center">
+                                    <MaterialIcons name="arrow-upward" size={16} color={colors.blue[500]} />
+                                    <Text className="text-sm font-medium color-blue-600 ml-2">
+                                        Load More (
+                                        {safeContextProperty('totalCount', 0) -
+                                            safeContextProperty('threadMessages', []).length}
+                                        )
+                                    </Text>
+                                </Box>
+                            </TouchableHighlight>
+
+                            <TouchableHighlight onPress={forceRefreshMessages} underlayColor="#e6e6e6">
+                                <Box className="bg-gray-200 rounded-full px-4 py-2 flex-row items-center">
+                                    <MaterialIcons name="refresh" size={16} color={colors.blue[500]} />
+                                    <Text className="text-sm font-medium color-blue-600 ml-2">Refresh All</Text>
+                                </Box>
+                            </TouchableHighlight>
+                        </HStack>
+                    </Box>
+                )}
             {isPostParentIdThread && (
                 <>
                     {safeContextProperty('threadPost', [])?.length > 0 && (
@@ -1284,10 +2050,19 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                                         </Text>
                                         <Text className="pl-0 color-gray-500">
                                             {createdAtText(safeContextProperty('threadPost')[0]?.createdAt)} at{' '}
-                                            {format(
-                                                new Date(safeContextProperty('threadPost')[0]?.createdAt),
-                                                'hh:ss:a',
-                                            )}
+                                            {(() => {
+                                                try {
+                                                    const createdAt = safeContextProperty('threadPost')[0]?.createdAt;
+                                                    if (createdAt && !isNaN(new Date(createdAt).getTime())) {
+                                                        return format(new Date(createdAt), 'hh:mm:a');
+                                                    } else {
+                                                        return 'unknown time';
+                                                    }
+                                                } catch (error) {
+                                                    console.error('Error formatting thread post time:', error);
+                                                    return 'unknown time';
+                                                }
+                                            })()}
                                         </Text>
                                     </Box>
                                 </HStack>
@@ -1326,7 +2101,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         minIndexForVisible: 0,
                         autoscrollToTopThreshold: 100,
                     },
-                    scrollEventThrottle: 100,
+                    scrollEventThrottle: 16,
                     keyboardDismissMode: 'on-drag',
                     keyboardShouldPersistTaps: 'handled',
                 }}