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

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

@@ -14,14 +14,14 @@ import {
     Spinner,
     Text,
 } from '@admin-layout/gluestack-ui-mobile';
-import { Platform } from 'react-native';
+import { Platform, Linking, SafeAreaView, View, TouchableHighlight } from 'react-native';
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { orderBy, startCase, uniqBy } from 'lodash-es';
 import * as ImagePicker from 'expo-image-picker';
 import { encode as atob } from 'base-64';
 import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
-import { Actions, GiftedChat, IMessage, MessageText, Send } from 'react-native-gifted-chat';
+import { Actions, GiftedChat, IMessage, MessageText, Send, Composer, InputToolbar } from 'react-native-gifted-chat';
 import { IPost, IPostThread, PreDefinedRole, IExpoNotificationData, IFileInfo } from 'common';
 import {
     OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
@@ -40,6 +40,19 @@ 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,
@@ -57,6 +70,264 @@ const createdAtText = (value: string) => {
     return format(new Date(value), 'MMM dd, yyyy');
 };
 
+// Create a safer version of useMachine to handle potential errors
+function useSafeMachine(machine) {
+    // Define the state type
+    interface SafeStateType {
+        context: {
+            channelId: any;
+            postParentId: any;
+            role: any;
+            threadMessages: any[];
+            totalCount: number;
+            skip: number;
+            loading: boolean;
+            loadingOldMessages: boolean;
+            error: any;
+            selectedImage: string;
+            files: any[];
+            images: any[];
+            messageText: string;
+            imageLoading: boolean;
+            postThread: any;
+            threadPost: any[];
+            isScrollToBottom: boolean;
+        };
+        value: string;
+        matches?: (stateValue: string) => boolean;
+    }
+
+    // Initialize with default state
+    const [state, setState] = useState<SafeStateType>({
+        context: {
+            channelId: null,
+            postParentId: null,
+            role: null,
+            threadMessages: [],
+            totalCount: 0,
+            skip: 0,
+            loading: false,
+            loadingOldMessages: false,
+            error: null,
+            selectedImage: '',
+            files: [],
+            images: [],
+            messageText: '',
+            imageLoading: false,
+            postThread: null,
+            threadPost: [],
+            isScrollToBottom: false,
+        },
+        value: 'idle',
+    });
+
+    // Create a safe send function
+    const send = useCallback((event) => {
+        try {
+            // Log event for debugging
+            console.log('Thread Event received:', event.type);
+
+            // Handle specific events manually
+            if (event.type === ThreadActions.INITIAL_CONTEXT) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        channelId: event.data?.channelId || null,
+                        postParentId: event.data?.postParentId || null,
+                        role: event.data?.role || null,
+                    },
+                    value: BaseState.FetchThreadMessages,
+                }));
+            } else if (event.type === ThreadActions.SET_THREAD_MESSAGES) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        threadMessages: event.data?.messages || [],
+                        totalCount: event.data?.totalCount || 0,
+                        loading: false,
+                        loadingOldMessages: false,
+                        threadPost: event.data?.threadPost || [],
+                        postThread: event.data?.postThread || null,
+                    },
+                    value: 'active',
+                }));
+            } else if (event.type === ThreadActions.CLEAR_MESSAGES) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        threadMessages: [],
+                        totalCount: 0,
+                    },
+                }));
+            } else if (event.type === ThreadActions.SET_MESSAGE_TEXT) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        messageText: event.data?.messageText || '',
+                    },
+                }));
+            } else if (event.type === ThreadActions.FETCH_MORE_MESSAGES) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loadingOldMessages: true,
+                    },
+                    value: MainState.FetchMoreMessages,
+                }));
+            } else if (event.type === ThreadActions.SET_IMAGE) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        selectedImage: event.data?.image || '',
+                        images: event.data?.images || [],
+                        files: event.data?.files || [],
+                        imageLoading: false,
+                    },
+                }));
+            } else if (event.type === ThreadActions.CLEAR_IMAGE) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        selectedImage: '',
+                        images: [],
+                        files: [],
+                    },
+                }));
+            } else if (event.type === ThreadActions.START_LOADING) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loading: true,
+                    },
+                }));
+            } else if (event.type === ThreadActions.STOP_LOADING) {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loading: false,
+                    },
+                }));
+            } else if (event.type === ThreadActions.SEND_THREAD_MESSAGE) {
+                console.log('Sending message event with text:', event.data?.messageText);
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loading: true,
+                        // Keep the message text until we're done sending
+                        messageText: event.data?.messageText || prev.context.messageText,
+                    },
+                    value: MainState.SendThreadMessage,
+                }));
+            } else if (event.type === ThreadActions.SEND_THREAD_MESSAGE_WITH_FILE) {
+                console.log('Sending message with file event, text:', event.data?.messageText);
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loading: true,
+                        // Keep the message text until we're done sending
+                        messageText: event.data?.messageText || prev.context.messageText,
+                    },
+                    value: MainState.SendThreadMessageWithFile,
+                }));
+            } else if (
+                event.type === 'SEND_THREAD_MESSAGE_SUCCESS' ||
+                event.type === 'SEND_THREAD_MESSAGE_WITH_FILE_SUCCESS'
+            ) {
+                console.log('Handling send success event:', event.type, 'with message:', event.data?.message?.id);
+                setState((prev) => {
+                    // Make sure we have the message data
+                    if (!event.data?.message) {
+                        console.warn('Send success event without message data');
+                        return {
+                            ...prev,
+                            context: {
+                                ...prev.context,
+                                loading: false,
+                                messageText: '', // Clear input
+                                images: [],
+                                selectedImage: '',
+                                files: [],
+                            },
+                            value: 'active',
+                        };
+                    }
+
+                    // Add the new message to our threadMessages
+                    const newMessage = event.data.message;
+                    const updatedMessages = [newMessage, ...prev.context.threadMessages];
+
+                    console.log('Updated thread messages list after send, now has', updatedMessages.length, 'messages');
+
+                    return {
+                        ...prev,
+                        context: {
+                            ...prev.context,
+                            loading: false,
+                            messageText: '', // Always clear input text after sending
+                            images: [],
+                            selectedImage: '',
+                            files: [],
+                            threadMessages: updatedMessages,
+                            totalCount: prev.context.totalCount + 1,
+                        },
+                        value: 'active',
+                    };
+                });
+            } else if (event.type === 'FETCH_MORE_MESSAGES_SUCCESS') {
+                setState((prev) => {
+                    const newMessages = event.data?.messages || [];
+                    return {
+                        ...prev,
+                        context: {
+                            ...prev.context,
+                            loadingOldMessages: false,
+                            threadMessages: uniqBy([...prev.context.threadMessages, ...newMessages], ({ id }) => id),
+                        },
+                        value: 'active',
+                    };
+                });
+            } else if (event.type === 'ERROR') {
+                setState((prev) => ({
+                    ...prev,
+                    context: {
+                        ...prev.context,
+                        loading: false,
+                        loadingOldMessages: false,
+                        error: event.data?.message || 'Unknown error',
+                    },
+                    value: 'error',
+                }));
+            }
+        } catch (error) {
+            console.error('Error in thread conversation send function:', error);
+        }
+    }, []);
+
+    // Add a custom matches function to the state
+    const stateWithMatches = useMemo(() => {
+        return {
+            ...state,
+            matches: (checkState) => {
+                return state.value === checkState;
+            },
+        };
+    }, [state]);
+
+    // Return as a tuple to match useMachine API
+    return [stateWithMatches, send] as const;
+}
+
 interface IMessageProps extends IMessage {
     type: string;
     propsConfiguration?: any;
@@ -77,34 +348,84 @@ interface IThreadSubscriptionHandlerProps {
     channelId: string;
 }
 
-const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any) => {
+const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any): JSX.Element => {
     const { params } = useRoute<any>();
     const [channelToTop, setChannelToTop] = useState(0);
-    const [channelMessages, setChannelMessages] = useState<any>([]);
+
+    // Create a ref to track if component is mounted
+    const isMountedRef = useRef(true);
+
+    // Use our safer custom implementation instead of the problematic useMachine
+    const [state, send] = useSafeMachine(threadConversationXstate);
+
+    // Define safe functions first to avoid "used before declaration" errors
+    const safeContext = useCallback(() => {
+        try {
+            return state?.context || {};
+        } catch (error) {
+            console.error('Error accessing state.context:', error);
+            return {};
+        }
+    }, [state]);
+
+    const safeContextProperty = useCallback(
+        (property, defaultValue = null) => {
+            try {
+                return state?.context?.[property] ?? defaultValue;
+            } catch (error) {
+                console.error(`Error accessing state.context.${property}:`, error);
+                return defaultValue;
+            }
+        },
+        [state],
+    );
+
+    const safeMatches = useCallback(
+        (stateValue) => {
+            try {
+                return state?.matches?.(stateValue) || false;
+            } catch (error) {
+                console.error(`Error calling state.matches with ${stateValue}:`, error);
+                return false;
+            }
+        },
+        [state],
+    );
+
+    const safeSend = useCallback(
+        (event) => {
+            try {
+                send(event);
+            } catch (error) {
+                console.error('Error sending event to state machine:', error, event);
+            }
+        },
+        [send],
+    );
+
+    // Use a ref to track the current machine snapshot for safer access
+    const stateRef = useRef(state);
+
+    // Keep the ref updated with the latest snapshot
+    useEffect(() => {
+        stateRef.current = state;
+    }, [state]);
+
     const auth: any = useSelector(userSelector);
-    const [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 [msg, setMsg] = useState<string>('');
-    const [loading, setLoading] = useState(false);
-    const [imageLoading, setImageLoading] = useState(false);
-    const [expoTokens, setExpoTokens] = useState<any[]>([]);
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
     const [parentId, setParentId] = useState<any>(postParentId);
-    const [postThread, setPostThread] = useState<IPostThread>();
-    const { startUpload } = useUploadFilesNative();
-    const [threadPost, setThreadPost] = useState<any[]>([]);
-    const [isScrollToBottom, setIsScrollToBottom] = useState(false);
+    const [expoTokens, setExpoTokens] = useState<any[]>([]);
     const threadMessageListRef = useRef<any>(null);
 
     // const [sendThreadMessage] = useSendThreadMessageMutation();
     const [sendThreadMessage] = useCreatePostThreadMutation();
     const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+    const { startUpload } = useUploadFilesNative();
 
     const [
         getThreadMessages,
@@ -123,27 +444,61 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     </Button>
                 ),
             });
-            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,
+
+            // Set initial context when focused
+            if (channelId && postParentId) {
+                safeSend({
+                    type: ThreadActions.INITIAL_CONTEXT,
+                    data: {
+                        channelId,
+                        postParentId,
+                        role,
+                    },
                 });
             }
+
             setParentId(postParentId);
 
             return () => {
-                setTotalCount(0);
-                setChannelMessages([]);
-                setThreadPost([]);
+                safeSend({ type: ThreadActions.CLEAR_MESSAGES });
             };
         }, [postParentId]),
     );
 
+    // Effect for when in FetchThreadMessages state
     useEffect(() => {
-        //if (parentId && parentId == 0) {
+        if (safeMatches(BaseState.FetchThreadMessages)) {
+            fetchThreadMessages();
+        }
+    }, [state.value]);
+
+    // Effect for when in FetchMoreMessages state
+    useEffect(() => {
+        if (safeMatches(MainState.FetchMoreMessages)) {
+            onFetchOld();
+        }
+    }, [state.value]);
+
+    // Effect for when in SendThreadMessage state
+    useEffect(() => {
+        if (safeMatches(MainState.SendThreadMessage)) {
+            const messageText = safeContextProperty('messageText', '');
+            console.log('Sending message from state transition, text:', messageText);
+            sendThreadMessageHandler(messageText);
+        }
+    }, [state.value]);
+
+    // Effect for when in SendThreadMessageWithFile state
+    useEffect(() => {
+        if (safeMatches(MainState.SendThreadMessageWithFile)) {
+            const messageText = safeContextProperty('messageText', '');
+            const images = safeContextProperty('images', []);
+            sendThreadMessageWithFileHandler(messageText, images);
+        }
+    }, [state.value]);
+
+    // Fetch thread messages function
+    const fetchThreadMessages = useCallback(() => {
         if (channelId && parentId) {
             getThreadMessages({
                 variables: {
@@ -153,9 +508,34 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
                     limit: MESSAGES_PER_PAGE,
                 },
-            });
+            })
+                .then(({ data }) => {
+                    if (data?.getPostThread) {
+                        const threads: any = data.getPostThread;
+                        const threadPost = threads?.post ?? [];
+                        const threadReplies = threads?.replies ?? [];
+                        const messageTotalCount = threads?.replyCount ?? 0;
+                        const messages = [...threadReplies];
+
+                        safeSend({
+                            type: ThreadActions.SET_THREAD_MESSAGES,
+                            data: {
+                                messages,
+                                totalCount: messageTotalCount,
+                                threadPost: threadPost,
+                                postThread: threads,
+                            },
+                        });
+                    }
+                })
+                .catch((error) => {
+                    safeSend({
+                        type: 'ERROR',
+                        data: { message: error.message },
+                    });
+                });
         }
-    }, [parentId]);
+    }, [channelId, parentId, role]);
 
     React.useEffect(() => {
         if (data?.getPostThread) {
@@ -163,42 +543,45 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
             const threadPost = threads?.post ?? [];
             const threadReplies = threads?.replies ?? [];
             const messeageTotalCount = threads?.replyCount ?? 0;
-            const messages = [threadPost, ...threadReplies];
+            const messages = [...threadReplies];
 
-            if (
-                (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
-                (messages && messages.length > 0 && channelMessages.length === 0)
-            ) {
-                setThreadMessages(messages, messeageTotalCount);
-            }
+            safeSend({
+                type: ThreadActions.SET_THREAD_MESSAGES,
+                data: {
+                    messages,
+                    totalCount: messeageTotalCount,
+                    threadPost: threadPost,
+                    postThread: threads,
+                },
+            });
         }
-        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);
-    };
+    }, [data]);
 
     React.useEffect(() => {
-        if (selectedImage) setImageLoading(false);
-    }, [selectedImage]);
+        if (safeContextProperty('selectedImage')) {
+            safeSend({ type: ThreadActions.STOP_LOADING });
+        }
+    }, [safeContextProperty('selectedImage')]);
 
     const scrollToBottom = React.useCallback(() => {
         if (threadMessageListRef?.current) {
-            setIsScrollToBottom(false);
-            threadMessageListRef.current.scrollTop = threadMessageListRef.current.scrollHeight;
+            threadMessageListRef.current.scrollToBottom();
         }
     }, [threadMessageListRef]);
 
     const onFetchOld = useCallback(() => {
-        if (totalCount > channelMessages.length && !loadingOldMessages) {
-            setLoadEarlierMsg(true);
+        const totalCount = safeContextProperty('totalCount', 0);
+        const threadMessages = safeContextProperty('threadMessages', []);
+
+        if (totalCount > threadMessages.length && !safeContextProperty('loadingOldMessages', false)) {
+            console.log('Loading more messages - current count:', threadMessages.length, 'of', totalCount);
+
+            // Set the loading state specifically for old messages
+            safeSend({
+                type: ThreadActions.START_LOADING,
+                data: { loadingOldMessages: true },
+            });
+
             fetchMoreMessages({
                 variables: {
                     channelId: channelId?.toString(),
@@ -206,79 +589,261 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     postParentId: parentId?.toString(),
                     selectedFields: 'id channel post replies replyCount lastReplyAt createdAt updatedAt',
                     limit: MESSAGES_PER_PAGE,
-                    skip: channelMessages.length - 1,
+                    skip: threadMessages.length,
                 },
             })
                 .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);
+
+                        console.log('Successfully loaded more messages:', threadReplies.length);
+
+                        safeSend({
+                            type: 'FETCH_MORE_MESSAGES_SUCCESS',
+                            data: {
+                                messages: threadReplies,
+                                loadingOldMessages: false,
+                            },
+                        });
+                    } else {
+                        console.log('No thread data returned when loading more messages');
+                        safeSend({
+                            type: ThreadActions.STOP_LOADING,
+                            data: { loadingOldMessages: false },
+                        });
                     }
                 })
-                .finally(() => {
-                    setLoadEarlierMsg(false);
-                    setLoadingOldMessages(false);
-                })
                 .catch((error: any) => {
-                    setLoadEarlierMsg(false);
-                    setLoadingOldMessages(false);
+                    console.error('Error fetching more messages:', error);
+                    safeSend({
+                        type: 'ERROR',
+                        data: {
+                            message: error.message,
+                            loadingOldMessages: false,
+                        },
+                    });
                 });
+        } else {
+            console.log('No more messages to load or already loading');
         }
-    }, [parentId, channelId, totalCount, channelMessages]);
+    }, [parentId, channelId, state.context]);
 
-    // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
-    //     return contentOffset.y <= 100; // 100px from top
-    // };
+    let onScroll = false;
 
-    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
-        const paddingToTop = 60;
-        return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
+    const handleScrollToTop = ({ nativeEvent }: any) => {
+        // Check if we're near the top of the list
+        if (isCloseToTop(nativeEvent)) {
+            if (
+                !safeContextProperty('loadingOldMessages', false) &&
+                safeContextProperty('totalCount', 0) > safeContextProperty('threadMessages', []).length
+            ) {
+                console.log('Near top of list - loading older messages');
+                safeSend({ type: ThreadActions.FETCH_MORE_MESSAGES });
+            }
+        }
     };
 
-    const 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 handleEndReached = () => {
+        // This triggers when scrolled to the bottom
+        console.log('Reached end of message list');
+    };
+
+    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
+        const paddingToTop = 80;
+        return contentOffset.y <= paddingToTop;
     };
 
     const onSelectImages = async () => {
-        setImageLoading(true);
-        let imageSource: any = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ImagePicker.MediaTypeOptions.Images,
-            allowsEditing: true,
-            aspect: [4, 3],
-            quality: 1,
-            base64: true,
-        });
-        if (!imageSource.canceled) {
-            const image = 'data:image/jpeg;base64,' + imageSource.assets[0]?.base64;
-            setImage(image);
-            const file = dataURLtoFile(image, 'inputImage.jpg');
-            setFiles((files) => files.concat(file));
-            setImages((images) => images.concat(imageSource.assets[0] as ImagePicker.ImagePickerAsset));
+        try {
+            safeSend({ type: ThreadActions.START_LOADING });
+
+            const imageSource = await ImagePicker.launchImageLibraryAsync({
+                mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                allowsEditing: true,
+                aspect: [4, 3],
+                quality: 0.8, // Reduced from 1 for better performance
+                base64: true,
+                allowsMultipleSelection: false, // Set to true if you want to support multiple images
+            });
+
+            if (imageSource.canceled) {
+                console.log('Image selection was canceled');
+                safeSend({ type: ThreadActions.STOP_LOADING });
+                return;
+            }
+
+            if (!imageSource.assets || imageSource.assets.length === 0 || !imageSource.assets[0]?.base64) {
+                console.error('No valid image data received');
+                safeSend({
+                    type: 'ERROR',
+                    data: { message: 'No valid image data received' },
+                });
+                return;
+            }
+
+            // Get the first asset
+            const asset = imageSource.assets[0];
+
+            // Derive file extension from mime type or default to jpg
+            const fileExtension = asset.mimeType ? asset.mimeType.split('/').pop() || 'jpg' : 'jpg';
+
+            // Create a more descriptive filename with timestamp
+            const filename = `image_${Date.now()}.${fileExtension}`;
+
+            // Create data URL with proper mime type
+            const mimeType = asset.mimeType || 'image/jpeg';
+            const image = `data:${mimeType};base64,${asset.base64}`;
+
+            // Create file-like object suitable for React Native
+            const fileData = {
+                uri: asset.uri,
+                type: mimeType,
+                name: filename,
+                base64: asset.base64,
+            };
+
+            console.log(`Selected image: ${filename}, type: ${mimeType}`);
+
+            safeSend({
+                type: ThreadActions.SET_IMAGE,
+                data: {
+                    image,
+                    files: [fileData],
+                    images: [asset as ImagePicker.ImagePickerAsset],
+                },
+            });
+        } catch (error) {
+            console.error('Error selecting image:', error);
+            safeSend({
+                type: 'ERROR',
+                data: { message: error.message || 'Failed to select image' },
+            });
         }
-        if (imageSource.canceled) setLoading(false);
     };
 
-    const handleSend = useCallback(
+    // Define message sending handlers
+    const sendThreadMessageHandler = useCallback(
         async (message: string) => {
-            if (!channelId) return;
-            if (!message && message != ' ' && images.length == 0) return;
+            console.log('Sending message:', message);
+
+            if (!channelId) {
+                console.error('No channelId provided');
+                return;
+            }
+
+            // Allow empty messages with spaces or blank content - GiftedChat sometimes sends these
+            // But use the actual message if available
+            const messageContent = message?.trim() || ' ';
+            console.log('Using message content for sending:', messageContent);
 
             const postId = objectId();
+            console.log('Generated postId:', postId);
+
+            safeSend({ type: ThreadActions.START_LOADING });
+
+            try {
+                console.log('Sending mutation with variables:', {
+                    channelId,
+                    postThreadId: safeContextProperty('postThread')?.id,
+                    postParentId: !parentId || parentId == 0 ? null : parentId,
+                    message: messageContent,
+                });
+
+                const result = await sendThreadMessage({
+                    variables: {
+                        channelId,
+                        postThreadId: safeContextProperty('postThread') && safeContextProperty('postThread')?.id,
+                        postParentId: !parentId || parentId == 0 ? null : parentId,
+                        threadMessageInput: {
+                            content: messageContent,
+                            role,
+                        },
+                    },
+                    update: (cache, { data, errors }: any) => {
+                        console.log('Send message update callback - data:', data, 'errors:', errors);
+
+                        if (!data || errors) {
+                            console.error('Send message failed:', errors);
+                            safeSend({ type: ThreadActions.STOP_LOADING });
+                            return;
+                        }
+
+                        console.log('Message sent successfully:', data?.createPostThread?.lastMessage);
+
+                        // Add the new message to our local state
+                        const newMessage = data?.createPostThread?.lastMessage;
+
+                        // Reset the message text and add the new message
+                        safeSend({
+                            type: 'SEND_THREAD_MESSAGE_SUCCESS',
+                            data: {
+                                message: newMessage,
+                                messageText: '', // Clear the message text now
+                            },
+                        });
+
+                        if (!parentId || parentId == 0) {
+                            console.log('Setting new parentId:', data?.createPostThread?.lastMessage?.id);
+                            setParentId(data?.createPostThread?.lastMessage?.id);
+                        }
+
+                        setChannelToTop(channelToTop + 1);
+
+                        const lastMessageId = data?.createPostThread?.lastMessage?.id;
+                        sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
+                    },
+                });
+
+                console.log('Send mutation result:', result);
+            } catch (error) {
+                console.error('Error sending message:', error);
+                safeSend({
+                    type: 'ERROR',
+                    data: { message: error.message || 'Failed to send message' },
+                });
+            }
+        },
+        [channelId, parentId, state.context, role],
+    );
+
+    const sendThreadMessageWithFileHandler = useCallback(
+        async (message: string, images: any[]) => {
+            console.log('Sending message with file:', message, 'Images:', images.length);
+
+            if (!channelId) {
+                console.error('No channelId provided');
+                return;
+            }
+
+            if (images.length === 0) {
+                console.error('No images to send');
+                return;
+            }
+
+            // Allow empty message content for file uploads
+            // But use the actual message if available
+            const messageContent = message?.trim() || ' ';
+            console.log('Using message content for file send:', messageContent);
+
+            const postId = objectId();
+            console.log('Generated postId for file upload:', postId);
+
+            try {
+                // Prepare image assets in the format expected by the upload service
+                const preparedImages = images.map((img) => ({
+                    uri: img.uri,
+                    type: img.mimeType || 'image/jpeg',
+                    name: img.fileName || `image_${Date.now()}.jpg`,
+                    base64: img.base64,
+                    width: img.width || 0,
+                    height: img.height || 0,
+                })) as ImagePicker.ImagePickerAsset[];
+
+                console.log('Starting file upload with prepared images:', preparedImages.length);
 
-            if (images && images.length > 0) {
-                setLoading(true);
                 const uploadResponse = await startUpload({
-                    file: images,
+                    file: preparedImages,
                     saveUploadedFile: {
                         variables: {
                             postId,
@@ -290,77 +855,78 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         },
                     },
                 });
-                if (uploadResponse?.error) setLoading(false);
+
+                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) {
-                    setImage('');
-                    setFiles([]);
-                    setImages([]);
-                    //setLoading(false);
                     const files = uploadedFiles?.map((f: any) => f.id) ?? null;
-                    await sendThreadMessage({
+                    console.log('File IDs for message:', files);
+
+                    console.log('Sending message with attached files');
+                    const result = await sendThreadMessage({
                         variables: {
                             postId,
                             channelId,
-                            postThreadId: postThread && postThread?.id,
+                            postThreadId: safeContextProperty('postThread') && safeContextProperty('postThread')?.id,
                             postParentId: !parentId || parentId == 0 ? null : parentId,
                             threadMessageInput: {
-                                content: message,
+                                content: messageContent,
                                 files,
                                 role,
                             },
                         },
                         update: (cache, { data, errors }: any) => {
+                            console.log('Send message with file update callback - data:', data, 'errors:', errors);
+
                             if (!data || errors) {
-                                setLoading(false);
+                                console.error('Send message with file failed:', errors);
+                                safeSend({ type: ThreadActions.STOP_LOADING });
                                 return;
                             }
-                            setPostThread(data?.createPostThread?.data);
-                            const lastMessageId = data?.createPostThread?.lastMessage?.id;
+
+                            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);
-                            setLoading(false);
-                            setMsg('');
-                            const msg = message == '' ? 'Send a file' : message;
+
+                            const lastMessageId = data?.createPostThread?.lastMessage?.id;
                             sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
                         },
                     });
-                }
-            } else {
-                setLoading(true);
-                await sendThreadMessage({
-                    variables: {
-                        channelId,
-                        postThreadId: postThread && postThread?.id,
-                        postParentId: !parentId || parentId == 0 ? null : parentId,
-                        threadMessageInput: {
-                            content: message,
-                            role,
-                        },
-                    },
-                    update: (cache, { data, errors }: any) => {
-                        if (!data || errors) {
-                            setLoading(false);
-                            return;
-                        }
-                        setPostThread(data?.createPostThread.data);
-                        const lastMessageId = data?.createPostThread?.lastMessage?.id;
-                        if (!parentId || parentId == 0) {
-                            setParentId(data?.createPostThread?.lastMessage?.id);
-                        }
-                        setChannelToTop(channelToTop + 1);
-                        setLoading(false);
-                        setMsg('');
 
-                        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' },
                 });
             }
         },
-        [setChannelMessages, channelId, images, parentId, expoTokens],
+        [channelId, parentId, state.context, role, startUpload],
     );
 
     const sendPushNotification = async (messageId: string, channelId: string, parentId: any, threadId: string) => {
@@ -382,56 +948,86 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     };
 
     const messageList = useMemo(() => {
-        let currentDate = '';
+        const threadMessages = safeContextProperty('threadMessages', []);
+        console.log(`Creating message list from ${threadMessages.length} thread messages`);
+
         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);
-            });
+        if (threadMessages?.length) {
+            // We need to convert the threadMessages into the format expected by GiftedChat
+            // Use a Set to track IDs and prevent duplicates
+            const messageIds = new Set();
+
+            res = threadMessages
+                .filter((msg) => {
+                    // Skip duplicate IDs
+                    if (!msg.id || messageIds.has(msg.id)) {
+                        console.log('Skipping duplicate message ID:', msg.id);
+                        return false;
+                    }
+                    messageIds.add(msg.id);
+                    return true;
+                })
+                .map((msg) => {
+                    // Generate a unique _id if needed by combining id and createdAt
+                    const uniqueId = msg.id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+                    let message: IMessageProps = {
+                        _id: uniqueId,
+                        text: msg.message || '',
+                        createdAt: new Date(msg.createdAt),
+                        user: {
+                            _id: msg?.author?.id ?? auth?.profile?.id,
+                            name:
+                                msg?.author?.givenName ??
+                                auth?.profile?.given_name + ' ' + msg?.author?.familyName ??
+                                auth?.profile?.family_name,
+                            avatar: msg?.author?.picture ?? auth?.profile?.picture,
+                        },
+                        type: msg?.type || '',
+                        image: msg?.files?.data?.[0]?.url,
+                        sent: msg?.isDelivered || true,
+                        received: msg?.isRead || false,
+                        propsConfiguration: msg?.propsConfiguration,
+                    };
+                    return message;
+                });
         }
-        return res?.length > 0 ? uniqBy([...res], ({ _id }: any) => _id) : [];
-        //return res;
-    }, [channelMessages]);
+
+        // Sort messages by date (newest first as required by GiftedChat)
+        const sortedMessages = res.sort((a, b) => b.createdAt - a.createdAt);
+        return sortedMessages;
+    }, [safeContextProperty('threadMessages'), auth]);
 
     const renderSend = (props) => {
+        // Check if there's an image selected
+        const hasImage = safeContextProperty('selectedImage', '') !== '';
+
+        // Enable send button if there's text OR an image
+        const isDisabled = !hasImage && (!props.text || props.text.trim().length === 0);
+
         return (
-            <Send {...props}>
-                <Box>
+            <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"
-                        style={{ marginBottom: 5, marginRight: 5 }}
-                        size={32}
-                        color="#2e64e5"
+                        size={30}
+                        color={isDisabled ? colors.gray[400] : colors.blue[500]}
                     />
                 </Box>
             </Send>
@@ -469,11 +1065,6 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 params = { reservationId: actionId };
             }
 
-            // if (attachment?.callToAction?.link?.includes('my-reservation-details')) {
-            //     action = CALL_TO_ACTION_PATH;
-            //     actionId = attachment?.callToAction?.link.split('/').pop();
-            // }
-
             return (
                 <>
                     {attachment?.callToAction && action ? (
@@ -483,7 +1074,6 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                                 size={'sm'}
                                 className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`}
                                 onPress={() => action && params && navigation.navigate(action, params)}
-                                //onPress={() => navigation.navigate(action, { reservationId: actionId })}
                             >
                                 <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
                                     {attachment.callToAction.title}
@@ -499,10 +1089,6 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     ) : (
                         <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
                     )}
-                    {/* <MessageText
-                        {...props}
-                        textStyle={{ left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 } }}
-                    /> */}
                 </>
             );
         } else {
@@ -514,37 +1100,95 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         return (
             <Actions
                 {...props}
-                icon={() => <Ionicons name={'image'} size={30} color={'black'} onPress={onSelectImages} />}
+                options={{
+                    ['Choose from Library']: onSelectImages,
+                    ['Cancel']: () => {}, // Add this option to make the sheet dismissible
+                }}
+                optionTintColor="#000000"
+                cancelButtonIndex={1} // Set the Cancel option as the cancel button
+                icon={() => (
+                    <Box
+                        style={{
+                            width: 32,
+                            height: 32,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <Ionicons name="image" size={24} color={colors.blue[500]} />
+                    </Box>
+                )}
+                containerStyle={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: 8,
+                    marginBottom: 0,
+                }}
             />
         );
     };
 
     const renderAccessory = (props) => {
+        const selectedImage = safeContextProperty('selectedImage', '');
+
+        if (!selectedImage) {
+            return null;
+        }
+
         return (
-            <Box>
-                {selectedImage !== '' ? (
-                    <HStack className="items-center">
-                        <Image
-                            className="ml-3"
-                            key={selectedImage}
-                            alt={'image'}
-                            source={{ uri: selectedImage }}
-                            size={'xs'}
-                        />
-                        <Button
-                            variant={'solid'}
-                            className="bg-transparent"
-                            onPress={() => {
-                                setFiles([]);
-                                setImage('');
-                                setImages([]);
-                            }}
-                        >
-                            <ButtonText className="color-black">Cancel</ButtonText>
-                        </Button>
-                    </HStack>
-                ) : null}
-            </Box>
+            <View
+                style={{
+                    height: 80,
+                    padding: 10,
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: '#e0e0e0',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }}
+            >
+                <View
+                    style={{
+                        flex: 1,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        // justifyContent: 'space-between',
+                        paddingHorizontal: 20,
+                    }}
+                >
+                    <Image
+                        key={state?.context?.selectedImage}
+                        alt={'selected image'}
+                        source={{ uri: state?.context?.selectedImage }}
+                        size={'xs'}
+                        style={{
+                            width: 5,
+                            height: 5,
+                            borderRadius: 5,
+                            marginRight: 20,
+                        }}
+                    />
+
+                    <TouchableHighlight
+                        underlayColor="#dddddd"
+                        onPress={() => safeSend({ type: ThreadActions.CLEAR_IMAGE })}
+                        style={{
+                            backgroundColor: '#f44336',
+                            paddingVertical: 2,
+                            paddingHorizontal: 5,
+                            borderRadius: 5,
+                            marginLeft: 10,
+                            elevation: 3,
+                            shadowColor: '#000',
+                            shadowOffset: { width: 0, height: 1 },
+                            shadowOpacity: 0.3,
+                            shadowRadius: 2,
+                        }}
+                    >
+                        <Text style={{ color: 'white', fontWeight: 'bold' }}>X</Text>
+                    </TouchableHighlight>
+                </View>
+            </View>
         );
     };
 
@@ -560,11 +1204,9 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
             <CachedImage
                 style={{ width: '100%', height: '100%' }}
                 resizeMode={'cover'}
-                // cacheKey={`${_id}-conversation-modal-image-key`}
                 cacheKey={`${_id}-slack-bubble-imageKey`}
                 source={{
                     uri: image,
-                    //headers: `Authorization: Bearer ${token}`,
                     expiresIn: 86400,
                 }}
                 alt={'image'}
@@ -576,37 +1218,52 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
     };
 
-    let onScroll = false;
-
-    const onMomentumScrollBegin = ({ nativeEvent }: any) => {
-        onScroll = true;
-        console.log('scroll top');
-        if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > channelMessages?.length) {
-            onFetchOld();
-        }
-    };
+    // Define a memo that provides the current message text from state
+    const currentMessageText = useMemo(() => {
+        const text = safeContextProperty('messageText', '') || '  ';
+        return text;
+    }, [safeContextProperty('messageText')]);
 
-    const onEndReached = () => {
-        console.log('on end reached');
-        if (!onScroll) return;
-        // load messages, show ActivityIndicator
-        onScroll = false;
-        // setLoadingOldMessages(true);
+    // Define a custom renderInputToolbar function
+    const renderInputToolbar = (props) => {
+        return (
+            <InputToolbar
+                {...props}
+                containerStyle={{
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: colors.gray[200],
+                    paddingHorizontal: 4,
+                    paddingVertical: 4,
+                }}
+                primaryStyle={{
+                    alignItems: 'center',
+                }}
+            />
+        );
     };
 
     return (
-        <>
-            {(loadingOldMessages || loadEarlierMsg) && <Spinner color={colors.blue[500]} />}
-            {/* {loadEarlierMsg && <Spinner />} */}
+        <SafeAreaView style={{ flex: 1 }}>
+            {safeContextProperty('loadingOldMessages', false) && (
+                <Box className="absolute top-10 left-0 right-0 z-10 items-center">
+                    <Box className="bg-blue-500/20 rounded-full px-4 py-2 flex-row items-center">
+                        <Spinner color={colors.blue[500]} size="small" />
+                        <Text className="text-sm font-medium color-blue-600 ml-2">Loading messages...</Text>
+                    </Box>
+                </Box>
+            )}
             {isPostParentIdThread && (
                 <>
-                    {threadPost?.length > 0 && (
+                    {safeContextProperty('threadPost', [])?.length > 0 && (
                         <>
                             <VStack className="px-2 pt-2 pb-0" space={'sm'}>
                                 <HStack space={'sm'} className="items-center">
                                     <Avatar className="bg-transparent" size={'md'}>
                                         <AvatarFallbackText>
-                                            {startCase(threadPost[0]?.author?.username?.charAt(0))}
+                                            {startCase(
+                                                safeContextProperty('threadPost')[0]?.author?.username?.charAt(0),
+                                            )}
                                         </AvatarFallbackText>
                                         <AvatarImage
                                             alt="image"
@@ -616,31 +1273,36 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                                                 borderColor: '#fff',
                                             }}
                                             source={{
-                                                uri: threadPost[0]?.author?.picture,
+                                                uri: safeContextProperty('threadPost')[0]?.author?.picture,
                                             }}
                                         />
                                     </Avatar>
                                     <Box>
                                         <Text className="font-bold color-black">
-                                            {threadPost[0]?.author?.givenName ?? ''}{' '}
-                                            {threadPost[0]?.author?.familyName ?? ''}
+                                            {safeContextProperty('threadPost')[0]?.author?.givenName ?? ''}{' '}
+                                            {safeContextProperty('threadPost')[0]?.author?.familyName ?? ''}
                                         </Text>
                                         <Text className="pl-0 color-gray-500">
-                                            {createdAtText(threadPost[0]?.createdAt)} at{' '}
-                                            {format(new Date(threadPost[0]?.createdAt), 'hh:ss:a')}
+                                            {createdAtText(safeContextProperty('threadPost')[0]?.createdAt)} at{' '}
+                                            {format(
+                                                new Date(safeContextProperty('threadPost')[0]?.createdAt),
+                                                'hh:ss:a',
+                                            )}
                                         </Text>
                                     </Box>
                                 </HStack>
                                 <HStack space={'sm'} className="px-2 items-center">
-                                    <Text>{threadPost[0]?.message ?? ''}</Text>
+                                    <Text>{safeContextProperty('threadPost')[0]?.message ?? ''}</Text>
                                 </HStack>
                             </VStack>
 
                             <Box className="py-4">
                                 <Box className="px-4 py-2 border-t border-b border-gray-200">
                                     <Text className="font-bold color-gray-600">
-                                        {threadPost[0]?.replies?.totalCount}{' '}
-                                        {threadPost[0]?.replies?.totalCount > 0 ? 'replies' : 'reply'}
+                                        {safeContextProperty('threadPost')[0]?.replies?.totalCount}{' '}
+                                        {safeContextProperty('threadPost')[0]?.replies?.totalCount > 0
+                                            ? 'replies'
+                                            : 'reply'}
                                     </Text>
                                 </Box>
                             </Box>
@@ -654,51 +1316,144 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 renderLoading={() => <Spinner color={colors.blue[500]} />}
                 messages={messageList}
                 listViewProps={{
-                    onEndReached: onEndReached,
-                    onEndReachedThreshold: 0.5,
-                    onMomentumScrollBegin: onMomentumScrollBegin,
+                    onScroll: handleScrollToTop,
+                    onEndReached: handleEndReached,
+                    onEndReachedThreshold: 0.2,
+                    contentContainerStyle: {
+                        paddingBottom: 10,
+                    },
+                    maintainVisibleContentPosition: {
+                        minIndexForVisible: 0,
+                        autoscrollToTopThreshold: 100,
+                    },
+                    scrollEventThrottle: 100,
+                    keyboardDismissMode: 'on-drag',
+                    keyboardShouldPersistTaps: 'handled',
+                }}
+                onSend={(messages) => {
+                    if (!messages || messages.length === 0) {
+                        console.log('No messages to send');
+                        return;
+                    }
+
+                    // Use the actual message text from the state, not the one from GiftedChat
+                    // GiftedChat sometimes sends blank messages even when there's text in the input
+                    const currentInputText = currentMessageText;
+                    const messageToSend = currentInputText?.trim() || messages[0]?.text?.trim() || ' ';
+
+                    console.log('GiftedChat onSend triggered with text from state:', messageToSend);
+
+                    // Make sure we update the message text in state
+                    safeSend({
+                        type: ThreadActions.SET_MESSAGE_TEXT,
+                        data: { messageText: '' },
+                    });
+
+                    // Then send the message
+                    if (safeContextProperty('images', []).length > 0) {
+                        console.log(
+                            'Sending message with file:',
+                            messageToSend,
+                            'Images:',
+                            safeContextProperty('images', []).length,
+                        );
+                        safeSend({
+                            type: ThreadActions.SEND_THREAD_MESSAGE_WITH_FILE,
+                            data: { messageText: messageToSend },
+                        });
+                    } else {
+                        console.log('Sending text message:', messageToSend);
+                        safeSend({
+                            type: ThreadActions.SEND_THREAD_MESSAGE,
+                            data: { messageText: messageToSend },
+                        });
+                    }
+                }}
+                text={currentMessageText}
+                onInputTextChanged={(text) => {
+                    // Don't log every keystroke to reduce console spam
+                    if (text.length % 5 === 0 || text.length < 5) {
+                        console.log('Input text changed:', text);
+                    }
+
+                    // Set the text in the state
+                    safeSend({
+                        type: ThreadActions.SET_MESSAGE_TEXT,
+                        data: { messageText: text },
+                    });
                 }}
-                onSend={(messages) => handleSend(messages[0]?.text ?? ' ')}
-                text={msg ? msg : ' '}
-                onInputTextChanged={(text) => setMsg(text)}
                 renderFooter={() =>
-                    loading ? (
-                        <Spinner color={colors.blue[500]} />
-                    ) : imageLoading ? (
-                        <Spinner color={colors.blue[500]} />
+                    safeContextProperty('loading', false) && !safeContextProperty('loadingOldMessages', false) ? (
+                        <Box className="w-full py-2 items-center">
+                            <Spinner color={colors.blue[500]} />
+                        </Box>
+                    ) : safeContextProperty('imageLoading', false) ? (
+                        <Box className="w-full py-2 items-center">
+                            <Spinner color={colors.blue[500]} />
+                        </Box>
                     ) : (
-                        ''
+                        <></>
                     )
                 }
                 scrollToBottom
+                loadEarlier={false}
+                isLoadingEarlier={false}
                 user={{
                     _id: auth?.id || '',
                 }}
                 isTyping={true}
-                alwaysShowSend={loading ? false : true}
-                // onLoadEarlier={onFetchOld}
+                alwaysShowSend={safeContextProperty('loading', false) ? false : true}
                 infiniteScroll={true}
                 renderSend={renderSend}
-                // loadEarlier={data?.messages?.totalCount > channelMessages.length}
-                // isLoadingEarlier={loadEarlierMsg}
-                // renderLoadEarlier={() =>
-                //     !loadEarlierMsg && (
-                //         <Center py={2}>
-                //             <Button
-                //                 onPress={() => onFetchOld(channelMessages?.length)}
-                //                 variant={'outline'}
-                //                 _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
-                //             >
-                //                 Load earlier messages
-                //             </Button>
-                //         </Center>
-                //     )
-                // }
-                renderMessageText={renderMessageText}
+                renderInputToolbar={renderInputToolbar}
                 minInputToolbarHeight={50}
                 renderActions={renderActions}
-                renderAccessory={renderAccessory}
+                renderAccessory={!!state?.context?.selectedImage ? renderAccessory : undefined}
                 renderMessage={renderMessage}
+                maxInputLength={1000}
+                placeholder="Type a message..."
+                showUserAvatar={true}
+                showAvatarForEveryMessage={false}
+                inverted={true}
+                parsePatterns={(linkStyle) => [
+                    {
+                        type: 'url',
+                        style: { ...linkStyle, color: colors.blue[500] },
+                        onPress: (url) => Linking.openURL(url),
+                    },
+                    {
+                        type: 'phone',
+                        style: { ...linkStyle, color: colors.blue[500] },
+                        onPress: (phone) => Linking.openURL(`tel:${phone}`),
+                    },
+                    {
+                        type: 'email',
+                        style: { ...linkStyle, color: colors.blue[500] },
+                        onPress: (email) => Linking.openURL(`mailto:${email}`),
+                    },
+                ]}
+                textInputProps={{
+                    style: {
+                        borderWidth: 1,
+                        borderColor: colors.gray[300],
+                        backgroundColor: '#f8f8f8',
+                        borderRadius: 20,
+                        minHeight: 40,
+                        maxHeight: 80,
+                        color: '#000',
+                        padding: 10,
+                        paddingHorizontal: 20,
+                        fontSize: 16,
+                        flex: 1,
+                    },
+                    multiline: true,
+                    returnKeyType: 'default',
+                    enablesReturnKeyAutomatically: true,
+                    placeholderTextColor: colors.gray[400],
+                }}
+                minComposerHeight={44}
+                isKeyboardInternallyHandled={true}
+                bottomOffset={Platform.OS === 'ios' ? 20 : 0}
                 renderChatFooter={() => (
                     <>
                         <ImageViewerModal
@@ -721,10 +1476,20 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                                         const prevReplyCount: any = prev?.getPostThread?.replyCount;
                                         const newReplyCount = prevReplyCount || 0 + 1;
                                         const replies = prev?.getPostThread?.replies || [];
-                                        setChannelMessages((oldMessages: any) =>
-                                            uniqBy([...oldMessages, newMessage], ({ id }) => id),
-                                        );
-                                        setTotalCount(newReplyCount);
+
+                                        safeSend({
+                                            type: ThreadActions.SET_THREAD_MESSAGES,
+                                            data: {
+                                                messages: uniqBy(
+                                                    [...safeContextProperty('threadMessages', []), newMessage],
+                                                    ({ id }) => id,
+                                                ),
+                                                totalCount: newReplyCount,
+                                                threadPost: safeContextProperty('threadPost', []),
+                                                postThread: safeContextProperty('postThread', null),
+                                            },
+                                        });
+
                                         return Object.assign({}, prev, {
                                             getPostThread: {
                                                 ...prev?.getPostThread,
@@ -759,7 +1524,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     disabled: true,
                 }}
             />
-        </>
+        </SafeAreaView>
     );
 };
 
@@ -768,5 +1533,5 @@ const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: IThreadSubsc
     return <></>;
 };
 
-export const ThreadConversationView = ThreadConversationViewComponent;
-// export const ThreadConversationView = React.memo(ThreadConversationViewComponent);
+export const ThreadConversationView = React.memo(ThreadConversationViewComponent);
+// export const ThreadConversationView = ThreadConversationViewComponent;