@messenger-box/platform-mobile 10.0.3-alpha.34 → 10.0.3-alpha.37

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

@@ -13,16 +13,25 @@ import {
     Image,
     Spinner,
     Text,
+    Skeleton,
 } from '@admin-layout/gluestack-ui-mobile';
-import { Platform, Linking, SafeAreaView, View, TouchableHighlight, Alert } from 'react-native';
+import { Platform, TouchableHighlight, View } from 'react-native';
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { orderBy, startCase, uniqBy } from 'lodash-es';
 import * as ImagePicker from 'expo-image-picker';
 import { encode as atob } from 'base-64';
 import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
-import { Actions, GiftedChat, IMessage, MessageText, Send, Composer, InputToolbar } from 'react-native-gifted-chat';
-import { IPost, IPostThread, PreDefinedRole, IExpoNotificationData, IFileInfo } from 'common';
+import { Actions, GiftedChat, IMessage, MessageText, Send, InputToolbar, Composer } from 'react-native-gifted-chat';
+import {
+    IPost,
+    IPostThread,
+    PreDefinedRole,
+    IExpoNotificationData,
+    IFileInfo,
+    FileRefType,
+    PostTypeEnum,
+} from 'common';
 import {
     OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
     useCreatePostThreadMutation,
@@ -40,19 +49,6 @@ import { config } from '../config';
 import { ImageViewerModal, SlackMessage } from '../components/SlackMessageContainer';
 import CachedImage from '../components/CachedImage';
 import colors from 'tailwindcss/colors';
-import {
-    threadConversationXstate,
-    Actions as ThreadActions,
-    BaseState,
-    MainState,
-} from './workflow/thread-conversation-xstate';
-
-// Define an extended interface for ImagePickerAsset with url property
-interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
-    url?: string;
-    fileName?: string;
-    mimeType?: string;
-}
 
 const {
     MESSAGES_PER_PAGE,
@@ -64,383 +60,12 @@ const {
 
 const createdAtText = (value: string) => {
     if (!value) return '';
-
-    try {
-        // Validate the date before processing
-        const timestamp = new Date(value).getTime();
-        if (isNaN(timestamp)) {
-            console.warn(`Invalid date value in createdAtText: ${value}`);
-            return 'Unknown date';
-        }
-
-        let date = new Date(value);
-        if (isToday(date)) return 'Today';
-        if (isYesterday(date)) return 'Yesterday';
-        return format(date, 'MMM dd, yyyy');
-    } catch (error) {
-        console.error(`Error processing date in createdAtText: ${value}`, error);
-        return 'Unknown date';
-    }
+    let date = new Date(value);
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(new Date(value), 'MMM dd, yyyy');
 };
 
-// Create a safer version of useMachine to handle potential errors
-function useSafeMachine(machine) {
-    // Define the state type
-    interface SafeStateType {
-        context: {
-            channelId: any;
-            postParentId: any;
-            role: any;
-            threadMessages: any[];
-            totalCount: number;
-            skip: number;
-            loading: boolean;
-            loadingOldMessages: boolean;
-            error: any;
-            selectedImage: string;
-            files: any[];
-            images: any[];
-            messageText: string;
-            imageLoading: boolean;
-            postThread: any;
-            threadPost: any[];
-            isScrollToBottom: boolean;
-        };
-        value: string;
-        matches?: (stateValue: string) => boolean;
-    }
-
-    // Initialize with default state
-    const [state, setState] = useState<SafeStateType>({
-        context: {
-            channelId: null,
-            postParentId: null,
-            role: null,
-            threadMessages: [],
-            totalCount: 0,
-            skip: 0,
-            loading: false,
-            loadingOldMessages: false,
-            error: null,
-            selectedImage: '',
-            files: [],
-            images: [],
-            messageText: '',
-            imageLoading: false,
-            postThread: null,
-            threadPost: [],
-            isScrollToBottom: false,
-        },
-        value: 'idle',
-    });
-
-    // Create a safe send function
-    const send = useCallback((event) => {
-        try {
-            // Log event for debugging
-            console.log('Thread Event received:', event.type);
-
-            // Handle specific events manually
-            if (event.type === ThreadActions.INITIAL_CONTEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        channelId: event.data?.channelId || null,
-                        postParentId: event.data?.postParentId || null,
-                        role: event.data?.role || null,
-                    },
-                    value: BaseState.FetchThreadMessages,
-                }));
-            } else if (event.type === ThreadActions.SET_THREAD_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        threadMessages: event.data?.messages || [],
-                        totalCount: event.data?.totalCount || 0,
-                        loading: false,
-                        loadingOldMessages: false,
-                        threadPost: event.data?.threadPost || [],
-                        postThread: event.data?.postThread || null,
-                    },
-                    value: 'active',
-                }));
-            } else if (event.type === ThreadActions.CLEAR_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        threadMessages: [],
-                        totalCount: 0,
-                    },
-                }));
-            } else if (event.type === ThreadActions.SET_MESSAGE_TEXT) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        messageText: event.data?.messageText || '',
-                    },
-                }));
-            } else if (event.type === ThreadActions.FETCH_MORE_MESSAGES) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loadingOldMessages: true,
-                    },
-                    value: MainState.FetchMoreMessages,
-                }));
-            } else if (event.type === ThreadActions.SET_IMAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedImage: event.data?.image || '',
-                        images: event.data?.images || [],
-                        files: event.data?.files || [],
-                        imageLoading: false,
-                    },
-                }));
-            } else if (event.type === ThreadActions.CLEAR_IMAGE) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        selectedImage: '',
-                        images: [],
-                        files: [],
-                    },
-                }));
-            } else if (event.type === ThreadActions.START_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                    },
-                }));
-            } else if (event.type === ThreadActions.STOP_LOADING) {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        loadingOldMessages:
-                            event.data?.loadingOldMessages === false ? false : prev.context.loadingOldMessages,
-                    },
-                }));
-            } else if (event.type === ThreadActions.SEND_THREAD_MESSAGE) {
-                console.log('Sending message event with text:', event.data?.messageText);
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                        // Keep the message text until we're done sending
-                        messageText: event.data?.messageText || prev.context.messageText,
-                    },
-                    value: MainState.SendThreadMessage,
-                }));
-            } else if (event.type === ThreadActions.SEND_THREAD_MESSAGE_WITH_FILE) {
-                console.log('Sending message with file event, text:', event.data?.messageText);
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: true,
-                        // Keep the message text until we're done sending
-                        messageText: event.data?.messageText || prev.context.messageText,
-                    },
-                    value: MainState.SendThreadMessageWithFile,
-                }));
-            } else if (
-                event.type === 'SEND_THREAD_MESSAGE_SUCCESS' ||
-                event.type === 'SEND_THREAD_MESSAGE_WITH_FILE_SUCCESS'
-            ) {
-                console.log('Handling send success event:', event.type, 'with message:', event.data?.message?.id);
-                setState((prev) => {
-                    // Make sure we have the message data
-                    if (!event.data?.message) {
-                        console.warn('Send success event without message data');
-                        return {
-                            ...prev,
-                            context: {
-                                ...prev.context,
-                                loading: false,
-                                messageText: '', // Clear input
-                                images: [],
-                                selectedImage: '',
-                                files: [],
-                            },
-                            value: 'active',
-                        };
-                    }
-
-                    // Add the new message to our threadMessages
-                    const newMessage = event.data.message;
-                    const updatedMessages = [newMessage, ...prev.context.threadMessages];
-
-                    console.log('Updated thread messages list after send, now has', updatedMessages.length, 'messages');
-
-                    return {
-                        ...prev,
-                        context: {
-                            ...prev.context,
-                            loading: false,
-                            messageText: '', // Always clear input text after sending
-                            images: [],
-                            selectedImage: '',
-                            files: [],
-                            threadMessages: updatedMessages,
-                            totalCount: prev.context.totalCount + 1,
-                        },
-                        value: 'active',
-                    };
-                });
-            } else if (event.type === 'FETCH_MORE_MESSAGES_SUCCESS') {
-                setState((prev) => {
-                    const newMessages = event.data?.messages || [];
-                    const apiTotalCount = event.data?.totalCount;
-                    console.log(
-                        `Merging ${newMessages.length} older messages with ${prev.context.threadMessages.length} existing messages`,
-                    );
-
-                    if (newMessages.length > 0) {
-                        try {
-                            console.log(
-                                'First new message date:',
-                                !isNaN(new Date(newMessages[0].createdAt).getTime())
-                                    ? new Date(newMessages[0].createdAt).toISOString()
-                                    : 'Invalid date',
-                            );
-                            console.log(
-                                'Last new message date:',
-                                !isNaN(new Date(newMessages[newMessages.length - 1].createdAt).getTime())
-                                    ? new Date(newMessages[newMessages.length - 1].createdAt).toISOString()
-                                    : 'Invalid date',
-                            );
-                        } catch (error) {
-                            console.error('Error logging new message dates:', error);
-                        }
-                    }
-
-                    if (prev.context.threadMessages.length > 0) {
-                        try {
-                            console.log(
-                                'First existing message date:',
-                                !isNaN(new Date(prev.context.threadMessages[0].createdAt).getTime())
-                                    ? new Date(prev.context.threadMessages[0].createdAt).toISOString()
-                                    : 'Invalid date',
-                            );
-                            console.log(
-                                'Last existing message date:',
-                                !isNaN(
-                                    new Date(
-                                        prev.context.threadMessages[prev.context.threadMessages.length - 1].createdAt,
-                                    ).getTime(),
-                                )
-                                    ? new Date(
-                                          prev.context.threadMessages[prev.context.threadMessages.length - 1].createdAt,
-                                      ).toISOString()
-                                    : 'Invalid date',
-                            );
-                        } catch (error) {
-                            console.error('Error logging existing message dates:', error);
-                        }
-                    }
-
-                    // If no new messages returned but total count says there should be more
-                    if (newMessages.length === 0 && prev.context.totalCount > prev.context.threadMessages.length) {
-                        console.log('No new messages found despite totalCount indicating more should exist');
-
-                        // Adjust totalCount to match reality
-                        return {
-                            ...prev,
-                            context: {
-                                ...prev.context,
-                                loadingOldMessages: false,
-                                totalCount: prev.context.threadMessages.length,
-                            },
-                            value: 'active',
-                        };
-                    }
-
-                    // Make sure we don't add duplicate messages
-                    const combinedMessages = uniqBy([...prev.context.threadMessages, ...newMessages], 'id');
-
-                    // GiftedChat expects messages sorted by date (newest first)
-                    const sortedMessages = orderBy(
-                        combinedMessages,
-                        [
-                            (msg) => {
-                                try {
-                                    // Safely access and convert date
-                                    return !isNaN(new Date(msg.createdAt).getTime())
-                                        ? new Date(msg.createdAt).getTime()
-                                        : 0; // Default to oldest if invalid
-                                } catch (error) {
-                                    console.error(`Error sorting message by date: ${msg.id}`, error);
-                                    return 0; // Default to oldest if error
-                                }
-                            },
-                        ],
-                        ['desc'],
-                    );
-
-                    // Use the total count from the API response if available, otherwise keep the current count
-                    const newTotalCount =
-                        typeof apiTotalCount === 'number'
-                            ? apiTotalCount
-                            : Math.max(sortedMessages.length, prev.context.totalCount);
-
-                    console.log(
-                        `Total messages after merge and sort: ${sortedMessages.length}, totalCount: ${newTotalCount}`,
-                    );
-
-                    return {
-                        ...prev,
-                        context: {
-                            ...prev.context,
-                            loadingOldMessages: false,
-                            threadMessages: sortedMessages,
-                            totalCount: newTotalCount,
-                        },
-                        value: 'active',
-                    };
-                });
-            } else if (event.type === 'ERROR') {
-                setState((prev) => ({
-                    ...prev,
-                    context: {
-                        ...prev.context,
-                        loading: false,
-                        loadingOldMessages: false,
-                        error: event.data?.message || 'Unknown error',
-                    },
-                    value: 'error',
-                }));
-            }
-        } catch (error) {
-            console.error('Error in thread conversation send function:', error);
-        }
-    }, []);
-
-    // Add a custom matches function to the state
-    const stateWithMatches = useMemo(() => {
-        return {
-            ...state,
-            matches: (checkState) => {
-                return state.value === checkState;
-            },
-        };
-    }, [state]);
-
-    // Return as a tuple to match useMachine API
-    return [stateWithMatches, send] as const;
-}
-
 interface IMessageProps extends IMessage {
     type: string;
     propsConfiguration?: any;
@@ -461,148 +86,48 @@ interface IThreadSubscriptionHandlerProps {
     channelId: string;
 }
 
-const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any): JSX.Element => {
+// Define an extended interface for ImagePickerAsset with url property
+interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
+    url?: string;
+    fileName?: string;
+    mimeType?: string;
+}
+
+const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any) => {
     const { params } = useRoute<any>();
     const [channelToTop, setChannelToTop] = useState(0);
-
-    // Create a ref to track if component is mounted
-    const isMountedRef = useRef(true);
-
-    // Use our safer custom implementation instead of the problematic useMachine
-    const [state, send] = useSafeMachine(threadConversationXstate);
-
-    // Define safe functions first to avoid "used before declaration" errors
-    const safeContext = useCallback(() => {
-        try {
-            return state?.context || {};
-        } catch (error) {
-            console.error('Error accessing state.context:', error);
-            return {};
-        }
-    }, [state]);
-
-    const safeContextProperty = useCallback(
-        (property, defaultValue = null) => {
-            try {
-                return state?.context?.[property] ?? defaultValue;
-            } catch (error) {
-                console.error(`Error accessing state.context.${property}:`, error);
-                return defaultValue;
-            }
-        },
-        [state],
-    );
-
-    const safeMatches = useCallback(
-        (stateValue) => {
-            try {
-                return state?.matches?.(stateValue) || false;
-            } catch (error) {
-                console.error(`Error calling state.matches with ${stateValue}:`, error);
-                return false;
-            }
-        },
-        [state],
-    );
-
-    const safeSend = useCallback(
-        (event) => {
-            try {
-                send(event);
-            } catch (error) {
-                console.error('Error sending event to state machine:', error, event);
-            }
-        },
-        [send],
-    );
-
-    // Use a ref to track the current machine snapshot for safer access
-    const stateRef = useRef(state);
-
-    // Keep the ref updated with the latest snapshot
-    useEffect(() => {
-        stateRef.current = state;
-    }, [state]);
-
+    const [channelMessages, setChannelMessages] = useState<any>([]);
     const auth: any = useSelector(userSelector);
+    const [totalCount, setTotalCount] = useState<any>(0);
     const [selectedImage, setImage] = useState<string>('');
+    const [loadingOldMessages, setLoadingOldMessages] = useState<boolean>(false);
+    const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
     const navigation = useNavigation<any>();
     const [files, setFiles] = useState<File[]>([]);
-    const [images, setImages] = useState<ImagePicker.ImagePickerAsset[]>([]);
+    const [images, setImages] = useState<ExtendedImagePickerAsset[]>([]);
+    const [msg, setMsg] = useState<string>('');
+    const [loading, setLoading] = useState(false);
+    const [imageLoading, setImageLoading] = useState(false);
+    const [uploadingMessageId, setUploadingMessageId] = useState<string | null>(null);
+    const [expoTokens, setExpoTokens] = useState<any[]>([]);
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
     const [parentId, setParentId] = useState<any>(postParentId);
-    const [expoTokens, setExpoTokens] = useState<any[]>([]);
+    const [postThread, setPostThread] = useState<IPostThread>();
+    const { startUpload } = useUploadFilesNative();
+    const [threadPost, setThreadPost] = useState<any[]>([]);
+    const [isScrollToBottom, setIsScrollToBottom] = useState(false);
     const threadMessageListRef = useRef<any>(null);
 
     // const [sendThreadMessage] = useSendThreadMessageMutation();
     const [sendThreadMessage] = useCreatePostThreadMutation();
     const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
-    const { startUpload } = useUploadFilesNative();
 
     const [
         getThreadMessages,
         { data, loading: threadLoading, fetchMore: fetchMoreMessages, refetch: refetchThreadMessages, subscribeToMore },
     ] = useGetPostThreadLazyQuery({ fetchPolicy: 'cache-and-network' });
 
-    // Add a function to force refresh all messages
-    const forceRefreshMessages = useCallback(() => {
-        console.log('Force refreshing all messages');
-
-        // Clear the current messages first
-        safeSend({
-            type: ThreadActions.CLEAR_MESSAGES,
-        });
-
-        // Then trigger a refetch
-        if (channelId && parentId) {
-            safeSend({
-                type: ThreadActions.START_LOADING,
-                data: { loading: true },
-            });
-
-            getThreadMessages({
-                variables: {
-                    channelId: channelId?.toString(),
-                    role: role?.toString(),
-                    postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-                    selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                    limit: 50, // Use larger limit that proved to work
-                },
-            })
-                .then(({ data }) => {
-                    if (data?.getPostThread) {
-                        const threads: any = data.getPostThread;
-                        const threadPost = threads?.post ?? [];
-                        const threadReplies = threads?.replies ?? [];
-                        const messageTotalCount = threads?.replyCount ?? 0;
-                        const messages = [...threadReplies];
-
-                        console.log(
-                            `Force refresh complete. Got ${messages.length} messages of ${messageTotalCount} total`,
-                        );
-
-                        safeSend({
-                            type: ThreadActions.SET_THREAD_MESSAGES,
-                            data: {
-                                messages,
-                                totalCount: messageTotalCount,
-                                threadPost: threadPost,
-                                postThread: threads,
-                            },
-                        });
-                    }
-                })
-                .catch((error) => {
-                    console.error('Error during force refresh:', error);
-                    safeSend({
-                        type: 'ERROR',
-                        data: { message: error.message },
-                    });
-                });
-        }
-    }, [channelId, parentId, getThreadMessages, safeSend]);
-
     useFocusEffect(
         React.useCallback(() => {
             // navigation?.setOptions({ title: params?.title ?? 'Thread' });
@@ -614,118 +139,40 @@ 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
-            if (channelId && postParentId) {
-                safeSend({
-                    type: ThreadActions.INITIAL_CONTEXT,
-                    data: {
-                        channelId,
-                        postParentId,
-                        role,
-                    },
+            if (postParentId) {
+                refetchThreadMessages({
+                    channelId: channelId?.toString(),
+                    role: role?.toString(),
+                    postParentId: postParentId?.toString(),
+                    selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                    limit: MESSAGES_PER_PAGE,
                 });
             }
-
             setParentId(postParentId);
 
             return () => {
-                safeSend({ type: ThreadActions.CLEAR_MESSAGES });
+                setTotalCount(0);
+                setChannelMessages([]);
+                setThreadPost([]);
             };
-        }, [postParentId, forceRefreshMessages]),
+        }, [postParentId]),
     );
 
-    // Effect for when in FetchThreadMessages state
-    useEffect(() => {
-        if (safeMatches(BaseState.FetchThreadMessages)) {
-            fetchThreadMessages();
-        }
-    }, [state.value]);
-
-    // Effect for when in FetchMoreMessages state
     useEffect(() => {
-        if (safeMatches(MainState.FetchMoreMessages)) {
-            onFetchOld();
-        }
-    }, [state.value]);
-
-    // Effect for when in SendThreadMessage state
-    useEffect(() => {
-        if (safeMatches(MainState.SendThreadMessage)) {
-            const messageText = safeContextProperty('messageText', '');
-            console.log('Sending message from state transition, text:', messageText);
-            sendThreadMessageHandler(messageText);
-        }
-    }, [state.value]);
-
-    // Effect for when in SendThreadMessageWithFile state
-    useEffect(() => {
-        if (safeMatches(MainState.SendThreadMessageWithFile)) {
-            const messageText = safeContextProperty('messageText', '');
-            const images = safeContextProperty('images', []);
-            sendThreadMessageWithFileHandler(messageText, images);
-        }
-    }, [state.value]);
-
-    // Fetch thread messages function
-    const fetchThreadMessages = useCallback(() => {
+        //if (parentId && parentId == 0) {
         if (channelId && parentId) {
-            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(),
                     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
+                    limit: MESSAGES_PER_PAGE,
                 },
-            })
-                .then(({ data }) => {
-                    if (data?.getPostThread) {
-                        const threads: any = data.getPostThread;
-                        const threadPost = threads?.post ?? [];
-                        const threadReplies = threads?.replies ?? [];
-                        const messageTotalCount = threads?.replyCount ?? 0;
-                        const messages = [...threadReplies];
-
-                        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: {
-                                messages,
-                                totalCount: messageTotalCount,
-                                threadPost: threadPost,
-                                postThread: threads,
-                            },
-                        });
-                    }
-                })
-                .catch((error) => {
-                    safeSend({
-                        type: 'ERROR',
-                        data: { message: error.message },
-                    });
-                });
+            });
         }
-    }, [channelId, parentId, role, getThreadMessages, safeSend]);
+    }, [parentId]);
 
     React.useEffect(() => {
         if (data?.getPostThread) {
@@ -733,684 +180,353 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
             const threadPost = threads?.post ?? [];
             const threadReplies = threads?.replies ?? [];
             const messeageTotalCount = threads?.replyCount ?? 0;
-            const messages = [...threadReplies];
-
-            safeSend({
-                type: ThreadActions.SET_THREAD_MESSAGES,
-                data: {
-                    messages,
-                    totalCount: messeageTotalCount,
-                    threadPost: threadPost,
-                    postThread: threads,
-                },
-            });
-        }
-    }, [data]);
-
-    React.useEffect(() => {
-        if (safeContextProperty('selectedImage')) {
-            safeSend({ type: ThreadActions.STOP_LOADING });
-        }
-    }, [safeContextProperty('selectedImage')]);
+            const messages = [threadPost, ...threadReplies];
 
-    // 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;
+            if (
+                (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
+                (messages && messages.length > 0 && channelMessages.length === 0)
+            ) {
+                setThreadMessages(messages, messeageTotalCount);
+            }
         }
-    }, []);
+        if (isScrollToBottom && channelMessages) scrollToBottom();
+        // scrollToBottom();
+        // if (!isPostParentIdThread) {
+        //     // setTotalCount((pc: any) => pc + threadTotalCount);
+        //     setChannelMessages((oldMessages: any) => uniqBy([...threadMessage, ...oldMessages], ({ id }) => id));
+        // }
+    }, [data, channelMessages, loadingOldMessages, totalCount, isPostParentIdThread, isScrollToBottom]);
+
+    const setThreadMessages = (messages: any, messagesTotalCount: number) => {
+        setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
+        setTotalCount(messagesTotalCount);
+    };
 
-    // 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')]);
+        if (selectedImage) setImageLoading(false);
+    }, [selectedImage]);
 
     const scrollToBottom = React.useCallback(() => {
         if (threadMessageListRef?.current) {
-            threadMessageListRef.current.scrollToBottom();
+            setIsScrollToBottom(false);
+            threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
         }
     }, [threadMessageListRef]);
 
-    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 onFetchOld = useCallback(() => {
+        if (totalCount > channelMessages.length && !loadingOldMessages) {
+            setLoadEarlierMsg(true);
+            fetchMoreMessages({
+                variables: {
+                    channelId: channelId?.toString(),
+                    role: role?.toString(),
+                    postParentId: parentId?.toString(),
+                    selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
+                    limit: MESSAGES_PER_PAGE,
+                    skip: channelMessages.length - 1,
+                },
+            })
+                .then((res: any) => {
+                    if (res?.data?.getPostThread) {
+                        const threads: any = res?.data?.getPostThread;
+                        const threadReplies = threads?.replies ?? [];
+                        const messeageTotalCount = threads?.replyCount ?? 0;
+                        setThreadMessages(threadReplies, messeageTotalCount);
+                    }
+                })
+                .finally(() => {
+                    setLoadEarlierMsg(false);
+                    setLoadingOldMessages(false);
+                })
+                .catch((error: any) => {
+                    setLoadEarlierMsg(false);
+                    setLoadingOldMessages(false);
+                });
+        }
+    }, [parentId, channelId, totalCount, channelMessages]);
 
-    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;
-
-                if (__DEV__)
-                    console.log(
-                        `Scroll near top - Loading state: ${isLoading}, Messages: ${currentCount}/${totalCount}, Has more: ${hasMoreMessages}`,
-                    );
-
-                if (!isLoading && hasMoreMessages) {
-                    if (__DEV__) console.log('Near top of list - loading older messages');
-                    safeSend({ type: ThreadActions.FETCH_MORE_MESSAGES });
-                }
-            }
-        },
-        [isCloseToTop, safeContextProperty, safeSend],
-    );
+    // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
+    //     return contentOffset.y <= 100; // 100px from top
+    // };
 
-    const handleEndReached = () => {
-        // This triggers when scrolled to the bottom
-        console.log('Reached end of message list');
+    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
+        const paddingToTop = 60;
+        return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
+    };
+
+    const dataURLtoFile = (dataurl: any, filename: any) => {
+        var arr = dataurl.split(','),
+            mime = arr[0].match(/:(.*?);/)[1],
+            bstr = atob(arr[1]),
+            n = bstr.length,
+            u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], filename, { type: mime });
     };
 
     const onSelectImages = async () => {
-        try {
-            safeSend({ type: ThreadActions.START_LOADING });
+        setImageLoading(true);
 
-            const imageSource = await ImagePicker.launchImageLibraryAsync({
+        try {
+            let imageSource = await ImagePicker.launchImageLibraryAsync({
                 mediaTypes: ImagePicker.MediaTypeOptions.Images,
                 allowsEditing: true,
                 aspect: [4, 3],
-                quality: 0.8, // Reduced from 1 for better performance
+                quality: 0.8,
                 base64: true,
-                allowsMultipleSelection: false, // Set to true if you want to support multiple images
+                exif: false,
             });
 
-            if (imageSource.canceled) {
-                console.log('Image selection was canceled');
-                safeSend({ type: ThreadActions.STOP_LOADING });
-                return;
-            }
-
-            if (!imageSource.assets || imageSource.assets.length === 0 || !imageSource.assets[0]?.base64) {
-                console.error('No valid image data received');
-                safeSend({
-                    type: 'ERROR',
-                    data: { message: 'No valid image data received' },
-                });
-                return;
-            }
-
-            // Get the first asset
-            const asset = imageSource.assets[0];
-
-            // Derive file extension from mime type or default to jpg
-            const fileExtension = asset.mimeType ? asset.mimeType.split('/').pop() || 'jpg' : 'jpg';
-
-            // Create a more descriptive filename with timestamp
-            const filename = `image_${Date.now()}.${fileExtension}`;
+            if (!imageSource?.canceled) {
+                // Get the asset
+                const selectedAsset = imageSource?.assets?.[0];
+                if (!selectedAsset) {
+                    setImageLoading(false);
+                    return;
+                }
 
-            // Create data URL with proper mime type
-            const mimeType = asset.mimeType || 'image/jpeg';
-            const image = `data:${mimeType};base64,${asset.base64}`;
+                // Create a base64 image string for preview
+                const base64Data = selectedAsset.base64;
+                const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : selectedAsset.uri;
 
-            // Create file-like object suitable for React Native
-            const fileData = {
-                uri: asset.uri,
-                type: mimeType,
-                name: filename,
-                base64: asset.base64,
-            };
-
-            console.log(`Selected image: ${filename}, type: ${mimeType}`);
+                // Format the asset for upload service requirements
+                const asset: ExtendedImagePickerAsset = {
+                    ...selectedAsset,
+                    url: selectedAsset.uri,
+                    fileName: selectedAsset.fileName || `image_${Date.now()}.jpg`,
+                    mimeType: 'image/jpeg',
+                };
 
-            safeSend({
-                type: ThreadActions.SET_IMAGE,
-                data: {
-                    image,
-                    files: [fileData],
-                    images: [asset as ImagePicker.ImagePickerAsset],
-                },
-            });
+                // Update state with the new image
+                setImage(previewImage);
+                setImages([asset]);
+                setImageLoading(false);
+            } else {
+                setImageLoading(false);
+            }
         } catch (error) {
             console.error('Error selecting image:', error);
-            safeSend({
-                type: 'ERROR',
-                data: { message: error.message || 'Failed to select image' },
-            });
+            setImageLoading(false);
         }
     };
 
-    // Define message sending handlers
-    const sendThreadMessageHandler = useCallback(
+    const handleSend = useCallback(
         async (message: string) => {
-            console.log('Sending message:', message);
-
-            if (!channelId) {
-                console.error('No channelId provided');
-                return;
-            }
-
-            // Allow empty messages with spaces or blank content - GiftedChat sometimes sends these
-            // But use the actual message if available
-            const messageContent = message?.trim() || ' ';
-            console.log('Using message content for sending:', messageContent);
+            if (!channelId) return;
+            if (!message && message !== ' ' && images.length === 0) return;
 
             const postId = objectId();
-            console.log('Generated postId:', postId);
+            const currentDate = new Date();
+
+            setUploadingMessageId(postId);
+
+            // Create a temporary preview of the image if uploading
+            const previewImageData =
+                images.length > 0
+                    ? {
+                          id: objectId(),
+                          url: selectedImage,
+                          name: images[0]?.fileName || 'image.jpg',
+                          extension: 'jpg',
+                          mimeType: 'image/jpeg',
+                          refType: FileRefType.Post,
+                          height: images[0]?.height || 0,
+                          width: images[0]?.width || 0,
+                      }
+                    : null;
+
+            // Create optimistic message with common properties
+            const optimisticMessage = {
+                id: postId,
+                message: message || (images.length > 0 ? ' ' : ''),
+                createdAt: currentDate.toISOString(),
+                author: {
+                    id: auth?.profile?.id,
+                    givenName: auth?.profile?.given_name,
+                    familyName: auth?.profile?.family_name,
+                    picture: auth?.profile?.picture,
+                },
+                isDelivered: false,
+                isRead: false,
+                files: previewImageData
+                    ? {
+                          data: [previewImageData],
+                          totalCount: 1,
+                      }
+                    : undefined,
+            };
 
-            safeSend({ type: ThreadActions.START_LOADING });
+            // Add optimistic message to UI immediately
+            // setChannelMessages((oldMessages: any) => uniqBy([optimisticMessage, ...oldMessages], ({ id }) => id));
+            setMsg('');
 
             try {
-                console.log('Sending mutation with variables:', {
-                    channelId,
-                    postThreadId: safeContextProperty('postThread')?.id,
-                    postParentId: !parentId || parentId == 0 ? null : parentId,
-                    message: messageContent,
-                });
-
-                const result = await sendThreadMessage({
-                    variables: {
-                        channelId,
-                        postThreadId: safeContextProperty('postThread') && safeContextProperty('postThread')?.id,
-                        postParentId: !parentId || parentId == 0 ? null : parentId,
-                        threadMessageInput: {
-                            content: messageContent,
-                            role,
-                        },
-                    },
-                    update: (cache, { data, errors }: any) => {
-                        console.log('Send message update callback - data:', data, 'errors:', errors);
-
-                        if (!data || errors) {
-                            console.error('Send message failed:', errors);
-                            safeSend({ type: ThreadActions.STOP_LOADING });
-                            return;
-                        }
+                let fileIds: string[] | null = null;
 
-                        console.log('Message sent successfully:', data?.createPostThread?.lastMessage);
-
-                        // Add the new message to our local state
-                        const newMessage = data?.createPostThread?.lastMessage;
+                // Handle file uploads if images exist
+                if (images && images.length > 0) {
+                    setLoading(true);
+                    // Format images for upload
+                    const imagesToUpload = images.map((img) => {
+                        return {
+                            ...img,
+                            uri: img.uri || img.url, // Use either uri or url
+                            type: img.mimeType || 'image/jpeg',
+                            name: img.fileName || `image_${Date.now()}.jpg`,
+                        };
+                    });
 
-                        // Reset the message text and add the new message
-                        safeSend({
-                            type: 'SEND_THREAD_MESSAGE_SUCCESS',
-                            data: {
-                                message: newMessage,
-                                messageText: '', // Clear the message text now
+                    const uploadResponse = await startUpload({
+                        file: imagesToUpload as unknown as ImagePicker.ImagePickerAsset[],
+                        saveUploadedFile: {
+                            variables: {
+                                postId,
                             },
-                        });
-
-                        if (!parentId || parentId == 0) {
-                            console.log('Setting new parentId:', data?.createPostThread?.lastMessage?.id);
-                            setParentId(data?.createPostThread?.lastMessage?.id);
-                        }
-
-                        setChannelToTop(channelToTop + 1);
-
-                        const lastMessageId = data?.createPostThread?.lastMessage?.id;
-                        sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
-                    },
-                });
-
-                console.log('Send mutation result:', result);
-            } catch (error) {
-                console.error('Error sending message:', error);
-                safeSend({
-                    type: 'ERROR',
-                    data: { message: error.message || 'Failed to send message' },
-                });
-            }
-        },
-        [channelId, parentId, state.context, role],
-    );
-
-    const sendThreadMessageWithFileHandler = useCallback(
-        async (message: string, images: any[]) => {
-            console.log('Sending message with file:', message, 'Images:', images.length);
-
-            if (!channelId) {
-                console.error('No channelId provided');
-                return;
-            }
-
-            if (images.length === 0) {
-                console.error('No images to send');
-                return;
-            }
-
-            // Allow empty message content for file uploads
-            // But use the actual message if available
-            const messageContent = message?.trim() || ' ';
-            console.log('Using message content for file send:', messageContent);
-
-            const postId = objectId();
-            console.log('Generated postId for file upload:', postId);
-
-            try {
-                // Prepare image assets in the format expected by the upload service
-                const preparedImages = images.map((img) => ({
-                    uri: img.uri,
-                    type: img.mimeType || 'image/jpeg',
-                    name: img.fileName || `image_${Date.now()}.jpg`,
-                    base64: img.base64,
-                    width: img.width || 0,
-                    height: img.height || 0,
-                })) as ImagePicker.ImagePickerAsset[];
-
-                console.log('Starting file upload with prepared images:', preparedImages.length);
-
-                const uploadResponse = await startUpload({
-                    file: preparedImages,
-                    saveUploadedFile: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                    createUploadLink: {
-                        variables: {
-                            postId,
                         },
-                    },
-                });
-
-                if (uploadResponse?.error) {
-                    console.error('File upload failed:', uploadResponse.error);
-                    safeSend({ type: ThreadActions.STOP_LOADING });
-                    return;
-                }
-
-                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-                console.log('Files uploaded successfully:', uploadedFiles?.length);
-
-                if (uploadResponse.data) {
-                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
-                    console.log('File IDs for message:', files);
-
-                    console.log('Sending message with attached files');
-                    const result = await sendThreadMessage({
-                        variables: {
-                            postId,
-                            channelId,
-                            postThreadId: safeContextProperty('postThread') && safeContextProperty('postThread')?.id,
-                            postParentId: !parentId || parentId == 0 ? null : parentId,
-                            threadMessageInput: {
-                                content: messageContent,
-                                files,
-                                role,
+                        createUploadLink: {
+                            variables: {
+                                postId,
                             },
                         },
-                        update: (cache, { data, errors }: any) => {
-                            console.log('Send message with file update callback - data:', data, 'errors:', errors);
-
-                            if (!data || errors) {
-                                console.error('Send message with file failed:', errors);
-                                safeSend({ type: ThreadActions.STOP_LOADING });
-                                return;
-                            }
-
-                            console.log('Message with file sent successfully:', data?.createPostThread?.lastMessage);
-
-                            // Add the new message to our local state
-                            const newMessage = data?.createPostThread?.lastMessage;
-
-                            safeSend({
-                                type: 'SEND_THREAD_MESSAGE_WITH_FILE_SUCCESS',
-                                data: {
-                                    message: newMessage,
-                                    messageText: '', // Clear the message text now
-                                },
-                            });
-
-                            if (!parentId || parentId == 0) {
-                                console.log('Setting new parentId:', data?.createPostThread?.lastMessage?.id);
-                                setParentId(data?.createPostThread?.lastMessage?.id);
-                            }
-
-                            setChannelToTop(channelToTop + 1);
-
-                            const lastMessageId = data?.createPostThread?.lastMessage?.id;
-                            sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
-                        },
                     });
 
-                    console.log('Send with file mutation result:', result);
-                }
-            } catch (error) {
-                console.error('Error sending message with file:', error);
-                safeSend({
-                    type: 'ERROR',
-                    data: { message: error.message || 'Failed to send message with file' },
-                });
-            }
-        },
-        [channelId, parentId, state.context, role, startUpload],
-    );
-
-    const sendPushNotification = async (messageId: string, channelId: string, parentId: any, threadId: string) => {
-        const notificationData: IExpoNotificationData = {
-            url: config.THREAD_MESSEGE_PATH,
-            params: { channelId, title: params?.title ?? 'Thread', postParentId: parentId, hideTabBar: true },
-            screen: 'DialogThreadMessages',
-            thread: { id: threadId },
-            other: { sound: Platform.OS === 'android' ? undefined : 'default' },
-        };
-        if (parentId || parentId == 0) {
-            await sendExpoNotificationOnPostMutation({
-                variables: {
-                    postId: messageId?.toString(),
-                    notificationData,
-                },
-            });
-        }
-    };
-
-    // Optimize messageList memo to avoid unnecessary recalculations
-    const messageList = useMemo(() => {
-        const threadMessages = safeContextProperty('threadMessages', []);
-        // Avoid excessive logging in production
-        if (__DEV__) console.log(`Creating message list from ${threadMessages.length} thread messages`);
-
-        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;
-                    }
-                }
-
-                // 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
-        return orderBy(
-            res,
-            [
-                (msg) => {
-                    try {
-                        return msg.createdAt instanceof Date ? msg.createdAt.getTime() : new Date().getTime();
-                    } catch (error) {
-                        return 0; // Fallback to a default value
-                    }
-                },
-            ],
-            ['desc'],
-        );
-    }, [safeContextProperty('threadMessages'), auth]);
-
-    // 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);
-
-            return (
-                <Send
-                    {...props}
-                    containerStyle={{
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        marginHorizontal: 4,
-                        marginBottom: 0,
-                    }}
-                    disabled={isDisabled}
-                >
-                    <Box
-                        style={{
-                            width: 32,
-                            height: 32,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <MaterialCommunityIcons
-                            name="send-circle"
-                            size={30}
-                            color={isDisabled ? colors.gray[400] : colors.blue[500]}
-                        />
-                    </Box>
-                </Send>
-            );
-        },
-        [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],
-    );
+                    if (uploadResponse?.error) throw new Error(uploadResponse.error.toString());
 
-    const renderAccessory = useCallback(
-        (props) => {
-            const selectedImage = safeContextProperty('selectedImage', '');
+                    const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+                    if (uploadResponse.data) {
+                        // Clear image related states after successful upload
+                        setImage('');
+                        setFiles([]);
+                        setImages([]);
 
-            if (!selectedImage) {
-                return null;
-            }
+                        fileIds = uploadedFiles?.map((f: any) => f.id) ?? null;
+                    }
+                }
 
-            return (
-                <View
-                    style={{
-                        height: 80,
-                        padding: 10,
-                        backgroundColor: 'white',
-                        borderTopWidth: 1,
-                        borderTopColor: '#e0e0e0',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                    }}
-                >
-                    <View
-                        style={{
-                            flex: 1,
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            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,
-                            }}
-                        />
+                // Send message with Apollo mutation
+                await sendThreadMessage({
+                    variables: {
+                        postId,
+                        channelId,
+                        postThreadId: postThread && postThread?.id,
+                        postParentId: !parentId || parentId === 0 ? null : parentId,
+                        threadMessageInput: {
+                            content: message,
+                            files: fileIds,
+                            role,
+                        },
+                    },
+                    update: (cache, { data, errors }: any) => {
+                        if (!data || errors) return;
 
-                        <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>
-            );
+                        setPostThread(data?.createPostThread?.data);
+                        const lastMessageId = data?.createPostThread?.lastMessage?.id;
+                        if (!parentId || parentId === 0) {
+                            setParentId(data?.createPostThread?.lastMessage?.id);
+                        }
+                        setChannelToTop(channelToTop + 1);
+
+                        // Send push notification with message info
+                        sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
+                    },
+                });
+
+                // Update the optimistic message to show it's delivered
+                setChannelMessages((oldMessages: any) =>
+                    oldMessages.map((msg: any) => (msg.id === postId ? { ...msg, isDelivered: true } : msg)),
+                );
+            } catch (error) {
+                console.error('Error sending message:', error);
+                // Remove the optimistic message if there was an error
+                setChannelMessages((oldMessages: any) => oldMessages.filter((msg) => msg.id !== postId));
+            } finally {
+                setLoading(false);
+                setUploadingMessageId(null);
+            }
         },
-        [state?.context?.selectedImage, safeSend],
+        [auth, channelId, channelToTop, images, parentId, postThread, selectedImage, setChannelMessages],
     );
 
-    const renderInputToolbar = useCallback((props) => {
+    const sendPushNotification = async (messageId: string, channelId: string, parentId: any, threadId: string) => {
+        const notificationData: IExpoNotificationData = {
+            url: config.THREAD_MESSEGE_PATH,
+            params: { channelId, title: params?.title ?? 'Thread', postParentId: parentId, hideTabBar: true },
+            screen: 'DialogThreadMessages',
+            thread: { id: threadId },
+            other: { sound: Platform.OS === 'android' ? undefined : 'default' },
+        };
+        if (parentId || parentId == 0) {
+            await sendExpoNotificationOnPostMutation({
+                variables: {
+                    postId: messageId?.toString(),
+                    notificationData,
+                },
+            });
+        }
+    };
+
+    const messageList = useMemo(() => {
+        let currentDate = '';
+        let res: any = [];
+        const filteredMessages =
+            channelMessages && channelMessages?.length > 0 ? uniqBy([...channelMessages], ({ id }: any) => id) : [];
+        if (filteredMessages?.length) {
+            orderBy(filteredMessages, ['createdAt'], ['desc']).map((msg) => {
+                let message: IMessageProps = {
+                    _id: '',
+                    text: '',
+                    createdAt: 0,
+                    user: {
+                        _id: '',
+                        name: '',
+                        avatar: '',
+                    },
+                    type: '',
+                };
+                const date = new Date(msg.createdAt);
+                message._id = msg.id;
+                message.text = msg.message;
+                message.createdAt = date;
+                (message.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,
+                }),
+                    (message.image = msg.files?.data[0]?.url),
+                    (message.sent = msg?.isDelivered),
+                    (message.received = msg?.isRead);
+                message.type = msg?.type;
+                message.propsConfiguration = msg?.propsConfiguration;
+                res.push(message);
+            });
+        }
+        return res?.length > 0 ? uniqBy([...res], ({ _id }: any) => _id) : [];
+        //return res;
+    }, [channelMessages]);
+
+    const renderSend = useCallback((props) => {
         return (
-            <InputToolbar
-                {...props}
-                containerStyle={{
-                    backgroundColor: 'white',
-                    borderTopWidth: 1,
-                    borderTopColor: colors.gray[200],
-                    paddingHorizontal: 4,
-                    paddingVertical: 4,
-                }}
-                primaryStyle={{
-                    alignItems: 'center',
-                }}
-            />
+            <Send {...props}>
+                <Box>
+                    <MaterialCommunityIcons
+                        name="send-circle"
+                        style={{ marginBottom: 5, marginRight: 5 }}
+                        size={32}
+                        color="#2e64e5"
+                    />
+                </Box>
+            </Send>
         );
     }, []);
 
-    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 = '';
@@ -1466,30 +582,212 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         )}
                     </>
                 );
-            }
-            // 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 {
+            } else {
                 return <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />;
             }
         },
-        [role, navigation],
+        [navigation, role],
     );
 
-    const renderMessage = useCallback(
-        (props: any) => {
-            return (
-                <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
-            );
-        },
-        [isShowImageViewer, setImageViewerObject],
-    );
+    // const renderActions = useCallback((props) => {
+    //     return (
+    //         <Actions
+    //             {...props}
+    //             icon={() => <Ionicons name={'image'} size={30} color={'black'} onPress={onSelectImages} />}
+    //         />
+    //     );
+    // }, [onSelectImages]);
+
+    // Render action buttons (including image upload)
+    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 className="w-8 h-8 items-center justify-center">
+                        <Ionicons name="image" size={24} color={colors.blue[500]} />
+                    </Box>
+                )}
+                containerStyle={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: 8,
+                    marginBottom: 0,
+                }}
+            />
+        );
+    };
+
+    // const renderAccessory = useCallback(() => {
+    //     if (!selectedImage) return null;
+
+    //     return (
+    //         <Box className="bg-white border-t border-gray-200 px-2 py-2">
+    //             <HStack className="items-center justify-between">
+    //                 <HStack space="sm" className="items-center">
+    //                     {imageLoading ? (
+    //                         <Box className="w-12 h-12 rounded-md bg-gray-100 overflow-hidden flex items-center justify-center">
+    //                             <Spinner size="small" color={colors.blue[500]} />
+    //                         </Box>
+    //                     ) : (
+    //                         <Box className="relative">
+    //                             <Image
+    //                                 className="rounded-md"
+    //                                 key={selectedImage}
+    //                                 alt={'Selected image'}
+    //                                 source={{ uri: selectedImage }}
+    //                                 style={{
+    //                                     width: 48,
+    //                                     height: 48,
+    //                                     borderRadius: 4,
+    //                                 }}
+    //                             />
+    //                             <Box className="absolute -top-1 -right-1 bg-white rounded-full shadow-sm">
+    //                                 <Button
+    //                                     variant="link"
+    //                                     size="xs"
+    //                                     onPress={() => {
+    //                                         setFiles([]);
+    //                                         setImage('');
+    //                                         setImages([]);
+    //                                     }}
+    //                                 >
+    //                                     <MaterialIcons name="cancel" size={16} color={colors.red[500]} />
+    //                                 </Button>
+    //                             </Box>
+    //                         </Box>
+    //                     )}
+    //                     <Text className="text-sm text-gray-600 ml-2">
+    //                         {imageLoading ? 'Processing image...' : 'Ready to send'}
+    //                     </Text>
+    //                 </HStack>
+    //             </HStack>
+    //         </Box>
+    //     );
+    // }, [selectedImage, imageLoading]);
+
+    const renderAccessory = useCallback(() => {
+        if (!selectedImage) {
+            return null;
+        }
+
+        return (
+            <View
+                style={{
+                    height: 70,
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: '#e0e0e0',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    margin: 0,
+                    padding: 0,
+                    paddingVertical: 0,
+                    position: 'absolute',
+                    bottom: Platform.OS === 'ios' ? 105 : 95, // Position well above the input area
+                    left: 0,
+                    right: 0,
+                    zIndex: 1,
+                    elevation: 3,
+                    shadowColor: '#000',
+                    shadowOffset: { width: 0, height: -1 },
+                    shadowOpacity: 0.05,
+                    shadowRadius: 2,
+                }}
+            >
+                <View
+                    style={{
+                        flex: 1,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingLeft: 15,
+                        paddingRight: 5,
+                    }}
+                >
+                    <View
+                        style={{
+                            width: 56,
+                            height: 56,
+                            marginRight: 15,
+                            borderRadius: 4,
+                            backgroundColor: colors.gray[200],
+                            overflow: 'hidden',
+                            borderWidth: 1,
+                            borderColor: '#e0e0e0',
+                        }}
+                    >
+                        <Image
+                            key={selectedImage}
+                            alt={'selected image'}
+                            source={{ uri: selectedImage }}
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                            }}
+                            size={'md'}
+                        />
+                        {loading && (
+                            <View
+                                style={{
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                }}
+                            >
+                                <Spinner size="small" color={colors.blue[500]} />
+                            </View>
+                        )}
+                    </View>
+
+                    <View style={{ flex: 1 }}>
+                        <Text style={{ fontSize: 14, fontWeight: '400', color: colors.gray[800] }}>
+                            {images[0]?.fileName || 'image_' + new Date().getTime() + '.jpg'}
+                        </Text>
+                        <Text style={{ fontSize: 12, color: colors.gray[500], marginTop: 2 }}>
+                            {loading ? 'Preparing...' : 'Ready to send'}
+                        </Text>
+                    </View>
+
+                    <TouchableHighlight
+                        underlayColor={'rgba(0,0,0,0.1)'}
+                        onPress={() => {
+                            setFiles([]);
+                            setImage('');
+                            setImages([]);
+                        }}
+                        style={{
+                            backgroundColor: colors.red[500],
+                            borderRadius: 24,
+                            width: 36,
+                            height: 36,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            marginRight: 10,
+                        }}
+                    >
+                        <Ionicons name="close" size={20} color="white" />
+                    </TouchableHighlight>
+                </View>
+            </View>
+        );
+    }, [selectedImage, loading, images]);
+    const setImageViewerObject = useCallback((obj: any, v: boolean) => {
+        setImageObject(obj);
+        setImageViewer(v);
+    }, []);
 
-    const modalContent = React.useMemo(() => {
+    const modalContent = useMemo(() => {
         if (!imageObject) return <></>;
         const { image, _id } = imageObject;
         return (
@@ -1506,515 +804,101 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         );
     }, [imageObject]);
 
-    // Define a memo that provides the current message text from state
-    const currentMessageText = useMemo(() => {
-        const text = safeContextProperty('messageText', '') || '  ';
-        return text;
-    }, [safeContextProperty('messageText')]);
-
-    // 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 },
-                });
+    const renderMessage = useCallback(
+        (props: any) => {
+            const { currentMessage } = props;
 
-                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],
-    );
+            // Check if this message is currently being uploaded
+            const isUploading = currentMessage._id === uploadingMessageId && loading;
 
-    // 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 (isUploading) {
+                return (
+                    <Box className="p-3 mb-2 mr-3 self-end rounded-2xl bg-gray-100 max-w-[80%]">
+                        {currentMessage.text && currentMessage.text.trim() !== '' && (
+                            <Box className="h-4 mb-2 rounded bg-gray-200 overflow-hidden">
+                                <Skeleton variant="rounded" className="flex-1" />
+                            </Box>
+                        )}
+                        {currentMessage.image && (
+                            <Box className="h-[150px] w-[150px] rounded-lg bg-gray-200 overflow-hidden mt-1">
+                                <Box className="flex-1 items-center justify-center">
+                                    <Spinner size="small" color={colors.blue[500]} />
+                                </Box>
+                                <Skeleton variant="rounded" className="flex-1" />
+                            </Box>
+                        )}
+                    </Box>
+                );
             }
-            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;
+            return (
+                <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
+            );
+        },
+        [uploadingMessageId, loading, isShowImageViewer, setImageViewerObject],
+    );
 
-                    if (__DEV__) {
-                        console.log('API response details:');
-                        console.log('- replyCount:', threads?.replyCount);
-                        console.log('- replies array length:', threadReplies.length);
-                    }
+    const renderInputToolbar = useCallback((props) => {
+        return (
+            <InputToolbar
+                {...props}
+                containerStyle={{
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: colors.gray[200],
+                    paddingHorizontal: 4,
+                    paddingVertical: 0,
+                    paddingTop: 2,
+                    marginBottom: 0,
+                    marginTop: 0,
+                }}
+                primaryStyle={{
+                    alignItems: 'center',
+                }}
+            />
+        );
+    }, []);
 
-                    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;
-                        }
+    const renderLoadEarlier = useCallback(() => {
+        return loadingOldMessages ? (
+            <Box
+                style={{
+                    padding: 10,
+                    backgroundColor: 'rgba(255,255,255,0.8)',
+                    borderRadius: 10,
+                    marginTop: 10,
+                }}
+            >
+                <Spinner size="small" color={colors.blue[500]} />
+            </Box>
+        ) : null;
+    }, [loadingOldMessages]);
 
-                        // Register success since we found new messages
-                        registerLoadAttemptResult(true);
+    let onScroll = false;
 
-                        if (__DEV__) console.log(`Adding ${newUniqueMessages.length} new messages to thread`);
+    const onMomentumScrollBegin = ({ nativeEvent }: any) => {
+        onScroll = true;
+        if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > channelMessages?.length) {
+            onFetchOld();
+        }
+    };
 
-                        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]);
+    const onEndReached = () => {
+        if (!onScroll) return;
+        onScroll = false;
+    };
 
     return (
-        <SafeAreaView style={{ flex: 1 }}>
-            {safeContextProperty('loadingOldMessages', false) === true && (
-                <Box className="absolute top-10 left-0 right-0 z-10 items-center">
-                    <Box className="bg-blue-500/20 rounded-full px-4 py-2 flex-row items-center">
-                        <Spinner color={colors.blue[500]} size="small" />
-                        <Text className="text-sm font-medium color-blue-600 ml-2">Loading messages...</Text>
-                    </Box>
-                </Box>
-            )}
-            {!safeContextProperty('loadingOldMessages', false) &&
-                safeContextProperty('totalCount', 0) > safeContextProperty('threadMessages', []).length && (
-                    <Box className="absolute top-10 left-0 right-0 z-10 items-center">
-                        <HStack space={2} className="px-2">
-                            <TouchableHighlight
-                                onPress={() => {
-                                    console.log('Manual load more pressed');
-                                    Alert.alert('Load Options', 'Choose loading method', [
-                                        {
-                                            text: 'Normal Load',
-                                            onPress: () => safeSend({ type: ThreadActions.FETCH_MORE_MESSAGES }),
-                                        },
-                                        {
-                                            text: 'Try Skip=0',
-                                            onPress: () => forceLoadMessages(0),
-                                        },
-                                        {
-                                            text: 'Try Skip=0, Limit=50',
-                                            onPress: () => {
-                                                // Try with a larger limit
-                                                console.log('Force loading with explicit skip=0, limit=50');
-
-                                                safeSend({
-                                                    type: ThreadActions.START_LOADING,
-                                                    data: { loadingOldMessages: true },
-                                                });
-
-                                                fetchMoreMessages({
-                                                    variables: {
-                                                        channelId: channelId?.toString(),
-                                                        role: role?.toString(),
-                                                        postParentId:
-                                                            !parentId || parentId == 0 ? null : parentId?.toString(),
-                                                        selectedFields:
-                                                            'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                                                        limit: 50, // Try a larger limit
-                                                        skip: 0,
-                                                    },
-                                                })
-                                                    .then((res: any) => {
-                                                        console.log(
-                                                            'LARGE LIMIT response:',
-                                                            JSON.stringify(res?.data, null, 2),
-                                                        );
-
-                                                        if (res?.data?.getPostThread) {
-                                                            const threads: any = res?.data?.getPostThread;
-                                                            const threadReplies = threads?.replies ?? [];
-                                                            const actualTotalCount = threads?.replyCount ?? 0;
-
-                                                            console.log(
-                                                                `Large limit load complete. Got ${threadReplies.length} messages of ${actualTotalCount} total`,
-                                                            );
-
-                                                            if (threadReplies.length > 0) {
-                                                                // Reset our message list with all available messages
-                                                                safeSend({
-                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
-                                                                    data: {
-                                                                        messages: threadReplies,
-                                                                        totalCount: actualTotalCount,
-                                                                        threadPost: safeContextProperty(
-                                                                            'threadPost',
-                                                                            [],
-                                                                        ),
-                                                                        postThread: threads,
-                                                                    },
-                                                                });
-                                                            } else {
-                                                                // Reset count if no messages found
-                                                                safeSend({
-                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
-                                                                    data: {
-                                                                        messages: safeContextProperty(
-                                                                            'threadMessages',
-                                                                            [],
-                                                                        ),
-                                                                        totalCount: safeContextProperty(
-                                                                            'threadMessages',
-                                                                            [],
-                                                                        ).length,
-                                                                        threadPost: safeContextProperty(
-                                                                            'threadPost',
-                                                                            [],
-                                                                        ),
-                                                                        postThread: safeContextProperty(
-                                                                            'postThread',
-                                                                            null,
-                                                                        ),
-                                                                    },
-                                                                });
-                                                            }
-                                                        } else {
-                                                            safeSend({
-                                                                type: ThreadActions.STOP_LOADING,
-                                                                data: { loadingOldMessages: false },
-                                                            });
-                                                        }
-                                                    })
-                                                    .catch((error) => {
-                                                        console.error('Error in large limit load:', error);
-                                                        safeSend({
-                                                            type: ThreadActions.STOP_LOADING,
-                                                            data: { loadingOldMessages: false },
-                                                        });
-                                                    });
-                                            },
-                                        },
-                                        {
-                                            text: 'Try Direct Fetch',
-                                            onPress: () => {
-                                                // Get current info
-                                                const currentCount = safeContextProperty('threadMessages', []).length;
-                                                const totalCount = safeContextProperty('totalCount', 0);
-                                                const missingCount = totalCount - currentCount;
-
-                                                if (missingCount <= 0) {
-                                                    Alert.alert('Info', 'No missing messages to fetch');
-                                                    return;
-                                                }
-
-                                                console.log(
-                                                    `Attempting direct fetch of missing ${missingCount} messages`,
-                                                );
-
-                                                // Try explicit query with exact parameters
-                                                safeSend({
-                                                    type: ThreadActions.START_LOADING,
-                                                    data: { loadingOldMessages: true },
-                                                });
-
-                                                // Special query directly for the missing messages
-                                                getThreadMessages({
-                                                    variables: {
-                                                        channelId: channelId?.toString(),
-                                                        role: role?.toString(),
-                                                        postParentId:
-                                                            !parentId || parentId == 0 ? null : parentId?.toString(),
-                                                        selectedFields:
-                                                            'id channel post replies replyCount lastReplyAt createdAt updatedAt',
-                                                        limit: missingCount, // Only get the exact number we need
-                                                        skip: 0, // Start from the beginning
-                                                    },
-                                                })
-                                                    .then(({ data }) => {
-                                                        console.log(
-                                                            'DIRECT FETCH response:',
-                                                            JSON.stringify(data, null, 2),
-                                                        );
-
-                                                        if (data?.getPostThread) {
-                                                            const threads: any = data.getPostThread;
-                                                            const threadReplies = threads?.replies ?? [];
-                                                            const actualTotalCount = threads?.replyCount ?? 0;
-
-                                                            console.log(
-                                                                `Direct fetch complete. Got ${threadReplies.length} messages of ${actualTotalCount} total`,
-                                                            );
-                                                            console.log(
-                                                                'Message IDs:',
-                                                                threadReplies.map((msg) => msg.id).join(', '),
-                                                            );
-
-                                                            // Compare with our existing messages to find the ones we're missing
-                                                            const existingIds = new Set(
-                                                                safeContextProperty('threadMessages', []).map(
-                                                                    (msg) => msg.id,
-                                                                ),
-                                                            );
-                                                            const newMessages = threadReplies.filter(
-                                                                (msg) => !existingIds.has(msg.id),
-                                                            );
-
-                                                            console.log(
-                                                                `Found ${newMessages.length} new messages that we didn't have before`,
-                                                            );
-
-                                                            if (newMessages.length > 0) {
-                                                                safeSend({
-                                                                    type: 'FETCH_MORE_MESSAGES_SUCCESS',
-                                                                    data: {
-                                                                        messages: newMessages,
-                                                                        totalCount: actualTotalCount,
-                                                                        loadingOldMessages: false,
-                                                                    },
-                                                                });
-
-                                                                // Show the results
-                                                                Alert.alert(
-                                                                    'Success',
-                                                                    `Found ${newMessages.length} new messages`,
-                                                                );
-                                                            } else {
-                                                                // If we didn't find any new messages, adjust the total count
-                                                                console.log('No new messages found, adjusting count');
-                                                                safeSend({
-                                                                    type: ThreadActions.SET_THREAD_MESSAGES,
-                                                                    data: {
-                                                                        messages: safeContextProperty(
-                                                                            'threadMessages',
-                                                                            [],
-                                                                        ),
-                                                                        totalCount: safeContextProperty(
-                                                                            'threadMessages',
-                                                                            [],
-                                                                        ).length,
-                                                                        threadPost: safeContextProperty(
-                                                                            'threadPost',
-                                                                            [],
-                                                                        ),
-                                                                        postThread: safeContextProperty(
-                                                                            'postThread',
-                                                                            null,
-                                                                        ),
-                                                                    },
-                                                                });
-
-                                                                // Notify the user
-                                                                Alert.alert(
-                                                                    'Info',
-                                                                    'No new messages found. Count has been adjusted.',
-                                                                );
-                                                            }
-                                                        } else {
-                                                            Alert.alert('Error', 'Could not fetch thread messages');
-                                                            safeSend({
-                                                                type: ThreadActions.STOP_LOADING,
-                                                                data: { loadingOldMessages: false },
-                                                            });
-                                                        }
-                                                    })
-                                                    .catch((error) => {
-                                                        console.error('Error in direct fetch:', error);
-                                                        Alert.alert(
-                                                            'Error',
-                                                            'Failed to fetch messages: ' + error.message,
-                                                        );
-                                                        safeSend({
-                                                            type: ThreadActions.STOP_LOADING,
-                                                            data: { loadingOldMessages: false },
-                                                        });
-                                                    });
-                                            },
-                                        },
-                                        {
-                                            text: 'Reset Count',
-                                            style: 'destructive',
-                                            onPress: () => {
-                                                console.log('Resetting message count to match reality');
-                                                safeSend({
-                                                    type: ThreadActions.SET_THREAD_MESSAGES,
-                                                    data: {
-                                                        messages: safeContextProperty('threadMessages', []),
-                                                        totalCount: safeContextProperty('threadMessages', []).length,
-                                                        threadPost: safeContextProperty('threadPost', []),
-                                                        postThread: safeContextProperty('postThread', null),
-                                                    },
-                                                });
-                                            },
-                                        },
-                                        {
-                                            text: 'Cancel',
-                                            style: 'cancel',
-                                        },
-                                    ]);
-                                }}
-                                underlayColor="#e6e6e6"
-                            >
-                                <Box className="bg-gray-200 rounded-full px-4 py-2 flex-row items-center">
-                                    <MaterialIcons name="arrow-upward" size={16} color={colors.blue[500]} />
-                                    <Text className="text-sm font-medium color-blue-600 ml-2">
-                                        Load More (
-                                        {safeContextProperty('totalCount', 0) -
-                                            safeContextProperty('threadMessages', []).length}
-                                        )
-                                    </Text>
-                                </Box>
-                            </TouchableHighlight>
-
-                            <TouchableHighlight onPress={forceRefreshMessages} underlayColor="#e6e6e6">
-                                <Box className="bg-gray-200 rounded-full px-4 py-2 flex-row items-center">
-                                    <MaterialIcons name="refresh" size={16} color={colors.blue[500]} />
-                                    <Text className="text-sm font-medium color-blue-600 ml-2">Refresh All</Text>
-                                </Box>
-                            </TouchableHighlight>
-                        </HStack>
-                    </Box>
-                )}
+        <>
             {isPostParentIdThread && (
                 <>
-                    {safeContextProperty('threadPost', [])?.length > 0 && (
+                    {threadPost?.length > 0 && (
                         <>
                             <VStack className="px-2 pt-2 pb-0" space={'sm'}>
                                 <HStack space={'sm'} className="items-center">
                                     <Avatar className="bg-transparent" size={'md'}>
                                         <AvatarFallbackText>
-                                            {startCase(
-                                                safeContextProperty('threadPost')[0]?.author?.username?.charAt(0),
-                                            )}
+                                            {startCase(threadPost[0]?.author?.username?.charAt(0))}
                                         </AvatarFallbackText>
                                         <AvatarImage
                                             alt="image"
@@ -2024,45 +908,31 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                                                 borderColor: '#fff',
                                             }}
                                             source={{
-                                                uri: safeContextProperty('threadPost')[0]?.author?.picture,
+                                                uri: threadPost[0]?.author?.picture,
                                             }}
                                         />
                                     </Avatar>
                                     <Box>
                                         <Text className="font-bold color-black">
-                                            {safeContextProperty('threadPost')[0]?.author?.givenName ?? ''}{' '}
-                                            {safeContextProperty('threadPost')[0]?.author?.familyName ?? ''}
+                                            {threadPost[0]?.author?.givenName ?? ''}{' '}
+                                            {threadPost[0]?.author?.familyName ?? ''}
                                         </Text>
                                         <Text className="pl-0 color-gray-500">
-                                            {createdAtText(safeContextProperty('threadPost')[0]?.createdAt)} at{' '}
-                                            {(() => {
-                                                try {
-                                                    const createdAt = safeContextProperty('threadPost')[0]?.createdAt;
-                                                    if (createdAt && !isNaN(new Date(createdAt).getTime())) {
-                                                        return format(new Date(createdAt), 'hh:mm:a');
-                                                    } else {
-                                                        return 'unknown time';
-                                                    }
-                                                } catch (error) {
-                                                    console.error('Error formatting thread post time:', error);
-                                                    return 'unknown time';
-                                                }
-                                            })()}
+                                            {createdAtText(threadPost[0]?.createdAt)} at{' '}
+                                            {format(new Date(threadPost[0]?.createdAt), 'hh:ss:a')}
                                         </Text>
                                     </Box>
                                 </HStack>
                                 <HStack space={'sm'} className="px-2 items-center">
-                                    <Text>{safeContextProperty('threadPost')[0]?.message ?? ''}</Text>
+                                    <Text>{threadPost[0]?.message ?? ''}</Text>
                                 </HStack>
                             </VStack>
 
                             <Box className="py-4">
                                 <Box className="px-4 py-2 border-t border-b border-gray-200">
                                     <Text className="font-bold color-gray-600">
-                                        {safeContextProperty('threadPost')[0]?.replies?.totalCount}{' '}
-                                        {safeContextProperty('threadPost')[0]?.replies?.totalCount > 0
-                                            ? 'replies'
-                                            : 'reply'}
+                                        {threadPost[0]?.replies?.totalCount}{' '}
+                                        {threadPost[0]?.replies?.totalCount > 0 ? 'replies' : 'reply'}
                                     </Text>
                                 </Box>
                             </Box>
@@ -2072,146 +942,60 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
             )}
             <GiftedChat
                 ref={threadMessageListRef}
-                wrapInSafeArea={false}
-                renderLoading={() => <Spinner color={colors.blue[500]} />}
+                wrapInSafeArea={true}
+                renderLoading={() => <Skeleton variant="rounded" style={{ flex: 1 }} />}
                 messages={messageList}
                 listViewProps={{
-                    onScroll: handleScrollToTop,
-                    onEndReached: handleEndReached,
-                    onEndReachedThreshold: 0.2,
-                    contentContainerStyle: {
-                        paddingBottom: 10,
-                    },
-                    maintainVisibleContentPosition: {
-                        minIndexForVisible: 0,
-                        autoscrollToTopThreshold: 100,
-                    },
-                    scrollEventThrottle: 16,
-                    keyboardDismissMode: 'on-drag',
-                    keyboardShouldPersistTaps: 'handled',
-                    // removeClippedSubviews={true}
-                }}
-                onSend={(messages) => {
-                    if (!messages || messages.length === 0) {
-                        console.log('No messages to send');
-                        return;
-                    }
-
-                    // Use the actual message text from the state, not the one from GiftedChat
-                    // GiftedChat sometimes sends blank messages even when there's text in the input
-                    const currentInputText = currentMessageText;
-                    const messageToSend = currentInputText?.trim() || messages[0]?.text?.trim() || ' ';
-
-                    if (__DEV__) console.log('GiftedChat onSend triggered with text from state:', messageToSend);
-
-                    // Make sure we update the message text in state
-                    safeSend({
-                        type: ThreadActions.SET_MESSAGE_TEXT,
-                        data: { messageText: '' },
-                    });
-
-                    // Then send the message
-                    if (safeContextProperty('images', []).length > 0) {
-                        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 {
-                        if (__DEV__) console.log('Sending text message:', messageToSend);
-                        safeSend({
-                            type: ThreadActions.SEND_THREAD_MESSAGE,
-                            data: { messageText: messageToSend },
-                        });
-                    }
-                }}
-                text={currentMessageText}
-                onInputTextChanged={(text) => {
-                    // Set the text in the state without excessive logging
-                    safeSend({
-                        type: ThreadActions.SET_MESSAGE_TEXT,
-                        data: { messageText: text },
-                    });
+                    onEndReached: onEndReached,
+                    onEndReachedThreshold: 0.5,
+                    onMomentumScrollBegin: onMomentumScrollBegin,
                 }}
-                renderFooter={() =>
-                    safeContextProperty('loading', false) && !safeContextProperty('loadingOldMessages', false) ? (
-                        <Box className="w-full py-2 items-center">
-                            <Spinner color={colors.blue[500]} />
-                        </Box>
-                    ) : safeContextProperty('imageLoading', false) ? (
-                        <Box className="w-full py-2 items-center">
-                            <Spinner color={colors.blue[500]} />
-                        </Box>
-                    ) : (
-                        <></>
-                    )
-                }
+                onSend={(messages) => handleSend(messages[0]?.text ?? ' ')}
+                text={msg ? msg : ' '}
+                onInputTextChanged={(text) => setMsg(text)}
+                renderFooter={() => null}
                 scrollToBottom
-                loadEarlier={false}
-                isLoadingEarlier={false}
                 user={{
                     _id: auth?.id || '',
                 }}
-                isTyping={safeContextProperty('loading', false)}
-                alwaysShowSend={safeContextProperty('loading', false) ? false : true}
+                isTyping={false}
+                alwaysShowSend={true}
                 infiniteScroll={true}
                 renderSend={renderSend}
+                renderMessageText={renderMessageText}
                 renderInputToolbar={renderInputToolbar}
                 minInputToolbarHeight={50}
                 renderActions={renderActions}
-                renderAccessory={!!state?.context?.selectedImage ? renderAccessory : undefined}
+                renderAccessory={!!selectedImage ? renderAccessory : undefined}
                 renderMessage={renderMessage}
-                renderMessageText={renderMessageText}
-                maxInputLength={1000}
-                placeholder="Type a message..."
-                showUserAvatar={true}
-                showAvatarForEveryMessage={false}
-                inverted={true}
-                parsePatterns={(linkStyle) => [
-                    {
-                        type: 'url',
-                        style: { ...linkStyle, color: colors.blue[500] },
-                        onPress: (url) => Linking.openURL(url),
-                    },
-                    {
-                        type: 'phone',
-                        style: { ...linkStyle, color: colors.blue[500] },
-                        onPress: (phone) => Linking.openURL(`tel:${phone}`),
-                    },
-                    {
-                        type: 'email',
-                        style: { ...linkStyle, color: colors.blue[500] },
-                        onPress: (email) => Linking.openURL(`mailto:${email}`),
-                    },
-                ]}
+                renderLoadEarlier={renderLoadEarlier}
+                loadEarlier={totalCount > channelMessages.length}
+                isLoadingEarlier={loadingOldMessages}
+                bottomOffset={Platform.OS === 'ios' ? 10 : 0}
                 textInputProps={{
                     style: {
                         borderWidth: 1,
                         borderColor: colors.gray[300],
                         backgroundColor: '#f8f8f8',
                         borderRadius: 20,
-                        minHeight: 40,
+                        minHeight: 36,
                         maxHeight: 80,
                         color: '#000',
-                        padding: 10,
-                        paddingHorizontal: 20,
+                        padding: 8,
+                        paddingHorizontal: 15,
                         fontSize: 16,
                         flex: 1,
+                        marginVertical: 2,
+                        marginBottom: 0,
                     },
                     multiline: true,
                     returnKeyType: 'default',
                     enablesReturnKeyAutomatically: true,
                     placeholderTextColor: colors.gray[400],
                 }}
-                minComposerHeight={44}
-                isKeyboardInternallyHandled={true}
-                bottomOffset={Platform.OS === 'ios' ? 20 : 0}
+                minComposerHeight={36}
+                maxComposerHeight={100}
+                placeholder="Type a message..."
                 renderChatFooter={() => (
                     <>
                         <ImageViewerModal
@@ -2232,22 +1016,12 @@ 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({
-                                            type: ThreadActions.SET_THREAD_MESSAGES,
-                                            data: {
-                                                messages: uniqBy(
-                                                    [...safeContextProperty('threadMessages', []), newMessage],
-                                                    ({ id }) => id,
-                                                ),
-                                                totalCount: newReplyCount,
-                                                threadPost: safeContextProperty('threadPost', []),
-                                                postThread: safeContextProperty('postThread', null),
-                                            },
-                                        });
-
+                                        setChannelMessages((oldMessages: any) =>
+                                            uniqBy([...oldMessages, newMessage], ({ id }) => id),
+                                        );
+                                        setTotalCount(newReplyCount);
                                         return Object.assign({}, prev, {
                                             getPostThread: {
                                                 ...prev?.getPostThread,
@@ -2263,7 +1037,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         />
                     </>
                 )}
-                messagesContainerStyle={messageList?.length == 0 ? { transform: [{ scaleY: -1 }] } : undefined}
+                messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
                 renderChatEmpty={() => (
                     <>
                         {!threadLoading && messageList && messageList?.length == 0 && (
@@ -2282,7 +1056,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     disabled: true,
                 }}
             />
-        </SafeAreaView>
+        </>
     );
 };
 
@@ -2291,5 +1065,5 @@ const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubsc
     return <></>;
 };
 
-export const ThreadConversationView = React.memo(ThreadConversationViewComponent);
-// export const ThreadConversationView = ThreadConversationViewComponent;
+export const ThreadConversationView = ThreadConversationViewComponent;
+// export const ThreadConversationView = React.memo(ThreadConversationViewComponent);