@messenger-box/platform-mobile 10.0.3-alpha.40 → 10.0.3-alpha.46

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

@@ -14,8 +14,22 @@ import {
     Spinner,
     Text,
     Skeleton,
+    Toast,
+    ToastTitle,
+    ToastDescription,
+    useToast,
+    Divider,
 } from '@admin-layout/gluestack-ui-mobile';
-import { Platform, TouchableHighlight, View } from 'react-native';
+import {
+    Platform,
+    TouchableHighlight,
+    View,
+    TouchableOpacity,
+    ScrollView,
+    Animated,
+    Keyboard,
+    RefreshControl,
+} from 'react-native';
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { orderBy, startCase, uniqBy } from 'lodash-es';
@@ -33,14 +47,11 @@ import {
     PostTypeEnum,
 } from 'common';
 import {
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    useCreatePostThreadMutation,
-    useOnThreadChatMessageAddedSubscription,
-    useSendExpoNotificationOnPostMutation,
-    useSendThreadMessageMutation,
-    useThreadMessagesLazyQuery,
-    useGetPostThreadLazyQuery,
-} from 'common/graphql';
+    CHAT_MESSAGE_ADDED,
+    useCreatePostThread,
+    useSendExpoNotification,
+    useGetPostThreadLazy,
+} from '../../../queries/inboxQueries';
 import { useUploadFilesNative } from '@messenger-box/platform-client';
 import { objectId } from '@messenger-box/core';
 import { format, isToday, isYesterday } from 'date-fns';
@@ -49,6 +60,8 @@ import { config } from '../config';
 import { ImageViewerModal, SlackMessage } from '../components/SlackMessageContainer';
 import CachedImage from '../components/CachedImage';
 import colors from 'tailwindcss/colors';
+import ExpandableInputActionSheet from '../components/ExpandableInputActionSheet';
+import GiftedChatInboxComponent from '../components/GiftedChatInboxComponent';
 
 const {
     MESSAGES_PER_PAGE,
@@ -69,6 +82,9 @@ const createdAtText = (value: string) => {
 interface IMessageProps extends IMessage {
     type: string;
     propsConfiguration?: any;
+    images?: string[];
+    isOptimistic?: boolean;
+    isUploading?: boolean;
 }
 
 export interface AlertMessageAttachmentsInterface {
@@ -93,13 +109,72 @@ interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
     mimeType?: string;
 }
 
+// Custom notification component
+const ErrorNotification = ({ message, onClose }) => {
+    const opacity = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        // Fade in
+        Animated.timing(opacity, {
+            toValue: 1,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+
+        // Auto hide after 4 seconds
+        const timer = setTimeout(() => {
+            Animated.timing(opacity, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: true,
+            }).start(() => onClose && onClose());
+        }, 4000);
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    return (
+        <Animated.View
+            style={{
+                position: 'absolute',
+                top: 10,
+                left: 10,
+                right: 10,
+                backgroundColor: '#f44336',
+                padding: 15,
+                borderRadius: 8,
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.25,
+                shadowRadius: 3.84,
+                elevation: 5,
+                zIndex: 1000,
+                opacity,
+            }}
+        >
+            <HStack className="items-center justify-between">
+                <Text style={{ color: 'white', fontWeight: 'bold' }}>Upload Failed</Text>
+                <TouchableOpacity onPress={onClose}>
+                    <Ionicons name="close" size={20} color="white" />
+                </TouchableOpacity>
+            </HStack>
+            <Text style={{ color: 'white', marginTop: 5 }}>{message}</Text>
+        </Animated.View>
+    );
+};
+
+// Add a utility function for file validation
+const isValidFileUrl = (url: string | undefined): boolean => {
+    return !!url && typeof url === 'string' && url.length > 0;
+};
+
 const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParentIdThread, role }: any) => {
     const { params } = useRoute<any>();
     const [channelToTop, setChannelToTop] = useState(0);
     const [channelMessages, setChannelMessages] = useState<any>([]);
     const auth: any = useSelector(userSelector);
     const [totalCount, setTotalCount] = useState<any>(0);
-    const [selectedImage, setImage] = useState<string>('');
+    const [selectedImage, setSelectedImage] = useState<string>('');
     const [loadingOldMessages, setLoadingOldMessages] = useState<boolean>(false);
     const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
     const navigation = useNavigation<any>();
@@ -118,15 +193,30 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     const [threadPost, setThreadPost] = useState<any[]>([]);
     const [isScrollToBottom, setIsScrollToBottom] = useState(false);
     const threadMessageListRef = useRef<any>(null);
+    const toast = useToast();
+    const [errorMessage, setErrorMessage] = useState('');
+
+    // Add state for expandable input action sheet
+    const [isActionSheetVisible, setActionSheetVisible] = useState(false);
+    const [textUpdatedInActionSheet, setTextUpdatedInActionSheet] = useState(false);
+    const [lastShownMsg, setLastShownMsg] = useState('');
+    const textInputRef = useRef(null);
 
     // const [sendThreadMessage] = useSendThreadMessageMutation();
-    const [sendThreadMessage] = useCreatePostThreadMutation();
-    const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+    const [sendThreadMessage] = useCreatePostThread();
+    const [sendExpoNotificationOnPostMutation] = useSendExpoNotification();
 
     const [
         getThreadMessages,
         { data, loading: threadLoading, fetchMore: fetchMoreMessages, refetch: refetchThreadMessages, subscribeToMore },
-    ] = useGetPostThreadLazyQuery({ fetchPolicy: 'cache-and-network' });
+    ] = useGetPostThreadLazy({ fetchPolicy: 'cache-and-network' });
+
+    // Add new state for tracking uploads
+    const [pendingUploads, setPendingUploads] = useState<Record<string, any>>({});
+    const [uploadErrors, setUploadErrors] = useState<Record<string, string>>({});
+    const [isUploadingImage, setIsUploadingImage] = useState(false);
+
+    const [refreshing, setRefreshing] = useState(false);
 
     useFocusEffect(
         React.useCallback(() => {
@@ -216,6 +306,8 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     const onFetchOld = useCallback(() => {
         if (totalCount > channelMessages.length && !loadingOldMessages) {
             setLoadEarlierMsg(true);
+            setLoadingOldMessages(true);
+
             fetchMoreMessages({
                 variables: {
                     channelId: channelId?.toString(),
@@ -237,14 +329,24 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 .finally(() => {
                     setLoadEarlierMsg(false);
                     setLoadingOldMessages(false);
+                    setRefreshing(false);
                 })
                 .catch((error: any) => {
                     setLoadEarlierMsg(false);
                     setLoadingOldMessages(false);
+                    setRefreshing(false);
                 });
+        } else {
+            setRefreshing(false);
         }
     }, [parentId, channelId, totalCount, channelMessages]);
 
+    // Pull to refresh handler
+    const onRefresh = useCallback(() => {
+        setRefreshing(true);
+        onFetchOld();
+    }, [onFetchOld]);
+
     // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
     //     return contentOffset.y <= 100; // 100px from top
     // };
@@ -266,81 +368,206 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         return new File([u8arr], filename, { type: mime });
     };
 
+    // Add a helper function for removing messages from the UI when uploads fail
+    const removeMessageFromUI = useCallback((messageId: string) => {
+        // Remove from pending uploads
+        setPendingUploads((prev) => {
+            const newPending = { ...prev };
+            delete newPending[messageId];
+            return newPending;
+        });
+
+        // Also remove any error state
+        setUploadErrors((prev) => {
+            const newErrors = { ...prev };
+            delete newErrors[messageId];
+            return newErrors;
+        });
+
+        // Reset upload state to ensure we don't get stuck with loading indicator
+        setIsUploadingImage(false);
+    }, []);
+
+    // const onSelectImages = async () => {
+    //     setImageLoading(true);
+
+    //     try {
+    //         let imageSource = await ImagePicker.launchImageLibraryAsync({
+    //             mediaTypes: ImagePicker.MediaTypeOptions.Images,
+    //             allowsEditing: true,
+    //             aspect: [4, 3],
+    //             quality: 0.8,
+    //             base64: true,
+    //             exif: false,
+    //         });
+
+    //         if (!imageSource?.canceled) {
+    //             // Get the asset
+    //             const selectedAsset = imageSource?.assets?.[0];
+    //             if (!selectedAsset) {
+    //                 setImageLoading(false);
+    //                 return;
+    //             }
+
+    //             // Create a base64 image string for preview
+    //             const base64Data = selectedAsset.base64;
+    //             const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : selectedAsset.uri;
+
+    //             // Format the asset for upload service requirements
+    //             const asset: ExtendedImagePickerAsset = {
+    //                 ...selectedAsset,
+    //                 url: selectedAsset.uri,
+    //                 fileName: selectedAsset.fileName || `image_${Date.now()}.jpg`,
+    //                 mimeType: 'image/jpeg',
+    //             };
+
+    //             // Update state with the new image
+    //             setSelectedImage(previewImage);
+    //             setImages([asset]);
+    //             setImageLoading(false);
+    //         } else {
+    //             setImageLoading(false);
+    //         }
+    //     } catch (error) {
+    //         console.error('Error selecting image:', error);
+    //         setImageLoading(false);
+    //     }
+    // };
+
+    // Image selection handler
     const onSelectImages = async () => {
-        setImageLoading(true);
+        setLoading(true);
 
         try {
             let imageSource = await ImagePicker.launchImageLibraryAsync({
                 mediaTypes: ImagePicker.MediaTypeOptions.Images,
-                allowsEditing: true,
+                allowsEditing: false,
                 aspect: [4, 3],
                 quality: 0.8,
                 base64: true,
                 exif: false,
+                allowsMultipleSelection: true, // Enable multiple selection
             });
 
             if (!imageSource?.canceled) {
-                // Get the asset
-                const selectedAsset = imageSource?.assets?.[0];
-                if (!selectedAsset) {
-                    setImageLoading(false);
+                // Get all selected assets
+                const selectedAssets = imageSource?.assets || [];
+                if (selectedAssets.length === 0) {
+                    setLoading(false);
                     return;
                 }
 
-                // Create a base64 image string for preview
-                const base64Data = selectedAsset.base64;
-                const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : selectedAsset.uri;
+                // Process all selected images
+                const newImages = selectedAssets.map((selectedAsset) => {
+                    // Create a base64 image string for preview
+                    const base64Data = selectedAsset.base64;
+                    const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : selectedAsset.uri;
+
+                    // Format the asset for upload service requirements
+                    const asset: ExtendedImagePickerAsset = {
+                        ...selectedAsset,
+                        url: selectedAsset.uri,
+                        fileName: selectedAsset.fileName || `image_${Date.now()}.jpg`,
+                        mimeType: 'image/jpeg',
+                    };
+
+                    return asset;
+                });
 
-                // Format the asset for upload service requirements
-                const asset: ExtendedImagePickerAsset = {
-                    ...selectedAsset,
-                    url: selectedAsset.uri,
-                    fileName: selectedAsset.fileName || `image_${Date.now()}.jpg`,
-                    mimeType: 'image/jpeg',
-                };
+                // Set preview for the first image (for backward compatibility)
+                if (newImages.length > 0) {
+                    const base64Data = newImages[0].base64;
+                    const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : newImages[0].uri;
+                    setSelectedImage(previewImage);
+                }
 
-                // Update state with the new image
-                setImage(previewImage);
-                setImages([asset]);
-                setImageLoading(false);
+                // Add new images to existing ones
+                setImages((currentImages) => [...currentImages, ...newImages]);
+                setLoading(false); // Set loading to false after successful selection
             } else {
-                setImageLoading(false);
+                setLoading(false);
             }
         } catch (error) {
-            console.error('Error selecting image:', error);
-            setImageLoading(false);
+            setLoading(false);
         }
     };
 
+    // Action sheet handlers
+    const showActionSheet = useCallback(() => {
+        setLastShownMsg(msg); // Store current message text when opening sheet
+        setActionSheetVisible(true);
+    }, [msg]);
+
+    const handleActionSheetClose = useCallback(() => {
+        // Close the sheet
+        setActionSheetVisible(false);
+
+        // If user didn't make any changes, restore the original message
+        if (!textUpdatedInActionSheet) {
+            setMsg(lastShownMsg);
+        }
+
+        // Reset the flag
+        setTextUpdatedInActionSheet(false);
+    }, [textUpdatedInActionSheet, lastShownMsg]);
+
+    const handleActionSheetSend = () => {
+        // Send the message using the existing handleSend function
+        handleSend(msg);
+
+        // Close the action sheet
+        setActionSheetVisible(false);
+    };
+
+    // Add focus/blur handlers for the input field
+    useEffect(() => {
+        // When showing the action sheet, we should hide the keyboard for the main input
+        if (isActionSheetVisible && Platform.OS === 'ios') {
+            Keyboard.dismiss();
+        }
+    }, [isActionSheetVisible]);
+
+    // Keep track of whether the input is in focus to help sync UI states
+    const [isGiftedInputFocused, setIsGiftedInputFocused] = useState(false);
+
     const handleSend = useCallback(
         async (message: string) => {
+            const newMessageText = message && message.length > 0 ? message || ' ' : ' ';
+            // Check if we can send a message (channel and thread exists)
+
             if (!channelId) return;
-            if (!message && message !== ' ' && images.length === 0) return;
+
+            // Allow sending if we have text OR images (image-only messages are valid)
+            const hasText = !!newMessageText && newMessageText !== ' ';
+            const hasImages = images && images.length > 0;
+
+            if (!hasText && !hasImages) return;
+
+            // Start loading state
+            setLoading(true);
 
             const postId = objectId();
             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
+            // Store current values before clearing
+            const currentMessageText = message || '';
+            const currentImages = [...images];
+
+            // Clear UI immediately for next message
+            setMsg('');
+            setSelectedImage('');
+            setImages([]);
+            setFiles([]);
+
+            // Close the action sheet if it's open
+            if (isActionSheetVisible) {
+                setActionSheetVisible(false);
+            }
+
+            // Create optimistic message with all images for immediate display
             const optimisticMessage = {
                 id: postId,
-                message: message || (images.length > 0 ? ' ' : ''),
+                message: currentMessageText || (currentImages.length > 0 ? ' ' : ''),
                 createdAt: currentDate.toISOString(),
                 author: {
                     id: auth?.profile?.id,
@@ -348,60 +575,127 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     familyName: auth?.profile?.family_name,
                     picture: auth?.profile?.picture,
                 },
-                isDelivered: false,
+                isDelivered: false, // Mark as not delivered yet during upload
                 isRead: false,
-                files: previewImageData
-                    ? {
-                          data: [previewImageData],
-                          totalCount: 1,
-                      }
-                    : undefined,
+                isOptimistic: true, // Flag to identify optimistic messages
+                files:
+                    currentImages.length > 0
+                        ? {
+                              data: currentImages
+                                  .filter((img) => img && (img.uri || img.url)) // Filter out invalid images
+                                  .map((img) => ({
+                                      id: objectId(),
+                                      url: img.uri || img.url,
+                                      localUri: img.uri || img.url, // Keep local URI for preview
+                                      name: img.fileName || `image_${Date.now()}.jpg`,
+                                      extension: 'jpg',
+                                      mimeType: 'image/jpeg',
+                                      refType: FileRefType.Post,
+                                      height: img.height || 0,
+                                      width: img.width || 0,
+                                      isUploading: true, // Flag to indicate this file is uploading
+                                  })),
+                              totalCount: currentImages.filter((img) => img && (img.uri || img.url)).length, // Only count valid images
+                          }
+                        : undefined,
             };
 
-            // Add optimistic message to UI immediately
-            // setChannelMessages((oldMessages: any) => uniqBy([optimisticMessage, ...oldMessages], ({ id }) => id));
-            setMsg('');
+            // Only add optimistic message if there's content to send
+            if (
+                (optimisticMessage.message && optimisticMessage.message.trim() !== '') ||
+                (optimisticMessage.files && optimisticMessage.files.data && optimisticMessage.files.data.length > 0)
+            ) {
+                setChannelMessages((oldMessages: any) => uniqBy([optimisticMessage, ...oldMessages], ({ id }) => id));
+                setIsScrollToBottom(true);
+            }
 
             try {
                 let fileIds: string[] | null = null;
 
                 // 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`,
-                        };
-                    });
-
-                    const uploadResponse = await startUpload({
-                        file: imagesToUpload as unknown as ImagePicker.ImagePickerAsset[],
-                        saveUploadedFile: {
-                            variables: {
-                                postId,
+                if (currentImages && currentImages.length > 0) {
+                    // Filter out any invalid images before upload
+                    const validImages = currentImages.filter((img) => img && (img.uri || img.url));
+
+                    if (validImages.length === 0) {
+                        // No valid images to upload, just send the text message
+                        setIsUploadingImage(false);
+                    } else {
+                        setIsUploadingImage(true);
+
+                        // Format images for upload
+                        const imagesToUpload = validImages.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`,
+                            };
+                        });
+
+                        // Track upload progress with messageId
+                        setUploadingMessageId(postId);
+                        setPendingUploads((prev) => ({
+                            ...prev,
+                            [postId]: {
+                                images: validImages,
+                                message: currentMessageText,
                             },
-                        },
-                        createUploadLink: {
-                            variables: {
-                                postId,
+                        }));
+
+                        const uploadResponse = await startUpload({
+                            file: imagesToUpload as unknown as ImagePicker.ImagePickerAsset[],
+                            saveUploadedFile: {
+                                variables: {
+                                    postId,
+                                },
                             },
-                        },
-                    });
+                            createUploadLink: {
+                                variables: {
+                                    postId,
+                                },
+                            },
+                        });
 
-                    if (uploadResponse?.error) throw new Error(uploadResponse.error.toString());
+                        if (uploadResponse?.error) {
+                            throw new Error(uploadResponse.error.toString());
+                        }
 
-                    const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-                    if (uploadResponse.data) {
-                        // Clear image related states after successful upload
-                        setImage('');
-                        setFiles([]);
-                        setImages([]);
+                        const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+                        if (uploadResponse.data) {
+                            fileIds = uploadedFiles?.map((f: any) => f.id) ?? null;
+
+                            // Update message with uploaded file information
+                            setChannelMessages((oldMessages: any) => {
+                                return oldMessages.map((msg) => {
+                                    if (msg.id === postId && msg.isOptimistic) {
+                                        // Update the uploaded files with real URLs from server
+                                        return {
+                                            ...msg,
+                                            isOptimistic: false,
+                                            files: {
+                                                ...msg.files,
+                                                data: uploadedFiles
+                                                    .filter((file) => isValidFileUrl(file.url))
+                                                    .map((file, index) => ({
+                                                        ...msg.files.data[index],
+                                                        url: file.url,
+                                                        isUploading: false,
+                                                    })),
+                                            },
+                                        };
+                                    }
+                                    return msg;
+                                });
+                            });
+                        }
 
-                        fileIds = uploadedFiles?.map((f: any) => f.id) ?? null;
+                        // Clear pending upload now that it's complete
+                        setPendingUploads((prev) => {
+                            const newPending = { ...prev };
+                            delete newPending[postId];
+                            return newPending;
+                        });
                     }
                 }
 
@@ -413,11 +707,34 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         postThreadId: postThread && postThread?.id,
                         postParentId: !parentId || parentId === 0 ? null : parentId,
                         threadMessageInput: {
-                            content: message,
+                            content: currentMessageText,
                             files: fileIds,
                             role,
                         },
                     },
+                    optimisticResponse: {
+                        createPostThread: {
+                            __typename: 'ThreadMessageSent',
+                            lastMessage: {
+                                __typename: 'Post',
+                                id: postId,
+                                message: currentMessageText || ' ',
+                                createdAt: new Date().toISOString(),
+                                author: {
+                                    __typename: 'UserAccount',
+                                    id: auth?.profile?.id,
+                                    givenName: auth?.profile?.given_name,
+                                    familyName: auth?.profile?.family_name,
+                                    picture: auth?.profile?.picture,
+                                },
+                                channel: { __typename: 'Channel', id: channelId.toString() },
+                            } as any, // Type assertion to avoid TypeScript errors
+                            data: {
+                                __typename: 'PostThread',
+                                id: postThread?.id || objectId(),
+                            },
+                        },
+                    },
                     update: (cache, { data, errors }: any) => {
                         if (!data || errors) return;
 
@@ -432,21 +749,57 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                         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);
+
+                // Format error message based on environment
+                let formattedErrorMessage = 'Failed to upload image. Please try again.';
+
+                if (__DEV__) {
+                    // Show detailed error in development
+                    if (error.name === 'ApolloError') {
+                        formattedErrorMessage = error.message
+                            .replace('[ApolloError: ', '')
+                            .replace(']', '')
+                            .split(';')[0]; // Take first part of error for clarity
+                    } else {
+                        formattedErrorMessage = error.message || 'Unknown error occurred';
+                    }
+                } else {
+                    // Show friendly message in production
+                    if (error.message?.includes('network') || error.message?.includes('timeout')) {
+                        formattedErrorMessage = 'Network error. Please check your connection.';
+                    } else if (error.message?.includes('permission')) {
+                        formattedErrorMessage = 'Permission denied for this operation.';
+                    }
+                }
+
+                // Show custom error notification
+                setErrorMessage(formattedErrorMessage);
+
                 // Remove the optimistic message if there was an error
                 setChannelMessages((oldMessages: any) => oldMessages.filter((msg) => msg.id !== postId));
+
+                // Clean up any pending upload states
+                removeMessageFromUI(postId);
             } finally {
                 setLoading(false);
+                setIsUploadingImage(false);
                 setUploadingMessageId(null);
             }
         },
-        [auth, channelId, channelToTop, images, parentId, postThread, selectedImage, setChannelMessages],
+        [
+            auth,
+            channelId,
+            channelToTop,
+            images,
+            parentId,
+            postThread,
+            selectedImage,
+            setChannelMessages,
+            removeMessageFromUI,
+            role,
+        ],
     );
 
     const sendPushNotification = async (messageId: string, channelId: string, parentId: any, threadId: string) => {
@@ -467,6 +820,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         }
     };
 
+    // Improved messageList function to better handle images
     const messageList = useMemo(() => {
         let currentDate = '';
         let res: any = [];
@@ -489,17 +843,56 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 message._id = msg.id;
                 message.text = msg.message;
                 message.createdAt = date;
-                (message.user = {
+                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);
+                };
+
+                // Handle image uploads with proper UI feedback
+                message.isOptimistic = msg?.isOptimistic || false;
+                message.isUploading = msg.files?.data?.some((file) => file.isUploading) || false;
+
+                // Improved image handling - ensure we have valid image URLs
+                if (msg.files?.data?.length > 0) {
+                    // Filter out any invalid files first
+                    const validFiles = msg.files.data.filter(
+                        (file) =>
+                            file && (file.url || file.localUri) && typeof (file.url || file.localUri) === 'string',
+                    );
+
+                    if (validFiles.length > 0) {
+                        // For the first image (used in single image display)
+                        const firstFile = validFiles[0];
+                        const imageUrl = firstFile.isUploading
+                            ? firstFile.localUri || firstFile.url
+                            : firstFile.url || firstFile.localUri;
+
+                        if (imageUrl) {
+                            message.image = imageUrl;
+                        }
+
+                        // For multiple images
+                        if (validFiles.length > 1) {
+                            message.images = validFiles
+                                .map((file) =>
+                                    file.isUploading ? file.localUri || file.url : file.url || file.localUri,
+                                )
+                                .filter((url) => !!url); // Filter out any undefined or empty URLs
+
+                            // If no valid URLs after filtering, don't set the images property
+                            if (message.images.length === 0) {
+                                delete message.images;
+                            }
+                        }
+                    }
+                }
+
+                message.sent = msg?.isDelivered;
+                message.received = msg?.isRead;
                 message.type = msg?.type;
                 message.propsConfiguration = msg?.propsConfiguration;
                 res.push(message);
@@ -509,22 +902,55 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         //return res;
     }, [channelMessages]);
 
-    const renderSend = useCallback((props) => {
-        return (
-            <Send {...props}>
-                <Box>
-                    <MaterialCommunityIcons
-                        name="send-circle"
-                        style={{ marginBottom: 5, marginRight: 5 }}
-                        size={32}
-                        color="#2e64e5"
-                    />
-                </Box>
-            </Send>
-        );
-    }, []);
+    const renderSend = useCallback(
+        (props) => {
+            // If action sheet is visible, don't show the default send button
+            if (isActionSheetVisible) {
+                return null;
+            }
 
-    const renderMessageText = useCallback(
+            // Enable the send button if there's text OR we have images
+            const hasContent = !!props.text || images?.length > 0;
+            const canSend = channelId && hasContent;
+            const isDisabled = !canSend || isUploadingImage || loading;
+
+            return (
+                <Send
+                    {...props}
+                    disabled={isDisabled}
+                    containerStyle={{
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: 40,
+                        width: 44,
+                        marginRight: 4,
+                        marginBottom: 0,
+                        marginLeft: 4,
+                    }}
+                    // onSend={(messages, shouldReset) => {
+                    //     // Always use our custom handler to ensure images are handled properly
+                    //     console.log('messages', messages);
+                    //    // handleSend(props.text || ' ');
+                    // }}
+                >
+                    <View style={{ padding: 4 }}>
+                        {isUploadingImage || loading ? (
+                            <Spinner size="small" color={colors.blue[500]} />
+                        ) : (
+                            <MaterialCommunityIcons
+                                name="send-circle"
+                                size={32}
+                                color={isDisabled ? colors.gray[400] : colors.blue[500]}
+                            />
+                        )}
+                    </View>
+                </Send>
+            );
+        },
+        [channelId, images, isUploadingImage, loading, isActionSheetVisible],
+    );
+
+    const renderMessageText1 = useCallback(
         (props: any) => {
             const { currentMessage } = props;
             if (currentMessage.type === 'ALERT') {
@@ -589,6 +1015,195 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         [navigation, role],
     );
 
+    const renderMessageText = useCallback(
+        (props: any) => {
+            const { currentMessage } = props;
+            const lastReply: any =
+                currentMessage?.replies?.data?.length > 0 ? currentMessage?.replies?.data?.[0] : null;
+
+            // Do not render anything if the message text is empty or only whitespace
+            if (!currentMessage?.text || currentMessage.text.trim() === '') {
+                return null;
+            }
+
+            if (currentMessage.type === 'ALERT') {
+                const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
+                let action: string = '';
+                let actionId: any = '';
+                let params: any = {};
+
+                if (attachment?.callToAction?.extraParams) {
+                    const extraParams: any = attachment?.callToAction?.extraParams;
+                    const route: any = extraParams?.route ?? null;
+                    let path: any = null;
+                    let param: any = null;
+                    if (role && role == PreDefinedRole.Guest) {
+                        path = route?.guest?.name ? route?.guest?.name ?? null : null;
+                        param = route?.guest?.params ? route?.guest?.params ?? null : null;
+                    } else if (role && role == PreDefinedRole.Owner) {
+                        path = route?.host?.name ? route?.host?.name ?? null : null;
+                        param = route?.host?.params ? route?.host?.params ?? null : null;
+                    } else {
+                        path = route?.host?.name ? route?.host?.name ?? null : null;
+                        param = route?.host?.params ? route?.host?.params ?? null : null;
+                    }
+
+                    action = path;
+                    params = { ...param };
+                } else if (attachment?.callToAction?.link) {
+                    action = CALL_TO_ACTION_PATH;
+                    actionId = attachment?.callToAction?.link.split('/').pop();
+                    params = { reservationId: actionId };
+                }
+
+                return (
+                    <>
+                        {attachment?.callToAction && action ? (
+                            <Box className={`bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2`}>
+                                <Button
+                                    variant={'outline'}
+                                    size={'sm'}
+                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`}
+                                    onPress={() => action && params && navigation.navigate(action, params)}
+                                >
+                                    <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
+                                        {attachment.callToAction.title}
+                                    </ButtonText>
+                                </Button>
+                                <MessageText
+                                    {...props}
+                                    textStyle={{
+                                        left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 },
+                                    }}
+                                />
+                            </Box>
+                        ) : (
+                            <TouchableHighlight
+                                underlayColor={'#c0c0c0'}
+                                style={{ width: '100%' }}
+                                onPress={() => {
+                                    if (currentMessage?.isShowThreadMessage)
+                                        navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                            channelId: channelId,
+                                            title: 'Message',
+                                            postParentId: currentMessage?._id,
+                                            isPostParentIdThread: true,
+                                        });
+                                }}
+                            >
+                                <>
+                                    <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                                    {currentMessage?.replies?.data?.length > 0 && (
+                                        <HStack space={'sm'} className="px-1 items-center">
+                                            <HStack>
+                                                {currentMessage?.replies?.data
+                                                    ?.filter(
+                                                        (v: any, i: any, a: any) =>
+                                                            a.findIndex((t: any) => t?.author?.id === v?.author?.id) ===
+                                                            i,
+                                                    )
+                                                    ?.slice(0, 2)
+                                                    ?.reverse()
+                                                    ?.map((p: any, i: Number) => (
+                                                        <Avatar
+                                                            key={'conversations-view-key-' + i}
+                                                            size={'sm'}
+                                                            className="bg-transparent"
+                                                        >
+                                                            <AvatarFallbackText>
+                                                                {startCase(p?.author?.username?.charAt(0))}
+                                                            </AvatarFallbackText>
+                                                            <AvatarImage
+                                                                alt="user image"
+                                                                style={{
+                                                                    borderRadius: 6,
+                                                                    borderWidth: 2,
+                                                                    borderColor: '#fff',
+                                                                }}
+                                                                source={{
+                                                                    uri: p?.author?.picture,
+                                                                }}
+                                                            />
+                                                        </Avatar>
+                                                    ))}
+                                            </HStack>
+                                            <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                                {currentMessage?.replies?.totalCount}{' '}
+                                                {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                            </Text>
+                                            <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                                {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                            </Text>
+                                        </HStack>
+                                    )}
+                                </>
+                            </TouchableHighlight>
+                        )}
+                    </>
+                );
+            } else {
+                return (
+                    <TouchableHighlight
+                        underlayColor={'#c0c0c0'}
+                        style={{ width: '100%' }}
+                        onPress={() => {
+                            if (currentMessage?.isShowThreadMessage)
+                                navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                    channelId: channelId,
+                                    title: 'Message',
+                                    postParentId: currentMessage?._id,
+                                    isPostParentIdThread: true,
+                                });
+                        }}
+                    >
+                        <>
+                            <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                            {currentMessage?.replies?.data?.length > 0 && (
+                                <HStack space={'sm'} className="px-1 items-center">
+                                    <HStack>
+                                        {currentMessage?.replies?.data
+                                            ?.filter(
+                                                (v: any, i: any, a: any) =>
+                                                    a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
+                                            )
+                                            ?.slice(0, 2)
+                                            ?.reverse()
+                                            ?.map((p: any, i: Number) => (
+                                                <Avatar
+                                                    key={'conversation-replies-key-' + i}
+                                                    className="bg-transparent"
+                                                    size={'sm'}
+                                                >
+                                                    <AvatarFallbackText>
+                                                        {startCase(p?.author?.username?.charAt(0))}
+                                                    </AvatarFallbackText>
+                                                    <AvatarImage
+                                                        alt="user image"
+                                                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                                        source={{
+                                                            uri: p?.author?.picture,
+                                                        }}
+                                                    />
+                                                </Avatar>
+                                            ))}
+                                    </HStack>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                        {currentMessage?.replies?.totalCount}{' '}
+                                        {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                    </Text>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                        {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                    </Text>
+                                </HStack>
+                            )}
+                        </>
+                    </TouchableHighlight>
+                );
+            }
+        },
+        [navigation, channelId, role],
+    );
+
     // const renderActions = useCallback((props) => {
     //     return (
     //         <Actions
@@ -599,189 +1214,167 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
     // }, [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 renderActions = useCallback(
+        (props) => {
+            return (
+                <Actions
+                    {...props}
+                    onPressActionButton={onSelectImages} // Direct action when pressing the button
+                    options={{
+                        ['Choose from Library']: () => {
+                            // Call the same image selection function used in the ActionSheet
+                            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,
+                    }}
+                />
+            );
+        },
+        [onSelectImages],
+    );
 
+    // Create a more visible and reliable image preview with cancel button
     const renderAccessory = useCallback(() => {
-        if (!selectedImage) {
-            return null;
-        }
-
+        if (!images.length) 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
+            <Box style={{ position: 'relative', height: 70, backgroundColor: 'transparent', justifyContent: 'center' }}>
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
                     style={{
-                        flex: 1,
                         flexDirection: 'row',
-                        alignItems: 'center',
                         paddingLeft: 15,
                         paddingRight: 5,
                     }}
+                    contentContainerStyle={{
+                        alignItems: 'center',
+                        height: '100%',
+                    }}
                 >
-                    <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 }}
+                    {images.map((img, index) => (
+                        <View
+                            key={`image-preview-${index}`}
                             style={{
-                                width: '100%',
-                                height: '100%',
+                                width: 40,
+                                height: 40,
+                                marginRight: 15,
+                                borderRadius: 4,
+                                backgroundColor: colors.gray[200],
+                                overflow: 'hidden',
+                                borderWidth: 1,
+                                borderColor: '#e0e0e0',
+                                position: 'relative',
+                                zIndex: 10,
                             }}
-                            size={'md'}
-                        />
-                        {loading && (
-                            <View
+                        >
+                            <Image
+                                alt={`selected image ${index + 1}`}
+                                source={{ uri: img.uri || img.url }}
+                                style={{ width: '100%', height: '100%' }}
+                                size={'md'}
+                            />
+                            {/* Cross button at top right */}
+                            <TouchableOpacity
+                                onPress={() => {
+                                    const newImages = [...images];
+                                    newImages.splice(index, 1);
+                                    setImages(newImages);
+                                    if (newImages.length === 0) {
+                                        setSelectedImage('');
+                                    }
+                                }}
                                 style={{
                                     position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    right: 0,
-                                    bottom: 0,
-                                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
-                                    justifyContent: 'center',
+                                    top: -1,
+                                    right: -1,
+                                    backgroundColor: 'rgba(0,0,0,0.6)',
+                                    borderRadius: 12,
+                                    width: 20,
+                                    height: 20,
                                     alignItems: 'center',
+                                    justifyContent: 'center',
+                                    zIndex: 9999,
                                 }}
                             >
-                                <Spinner size="small" color={colors.blue[500]} />
-                            </View>
-                        )}
-                    </View>
+                                <Ionicons name="close" size={16} color="white" />
+                            </TouchableOpacity>
+                        </View>
+                    ))}
+                </ScrollView>
+            </Box>
+        );
+    }, [images]);
 
-                    <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>
+    // Add a custom Composer for Slack-like input
+    const renderComposer = useCallback(
+        (props) => (
+            <TouchableOpacity
+                style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: '#fff',
+                    minHeight: 48,
+                    maxHeight: 48,
+                    paddingHorizontal: 12,
+                    paddingVertical: 0,
+                    marginHorizontal: 8,
+                    flex: 1,
+                }}
+                activeOpacity={0.7}
+                onPress={() => {
+                    // Use the callback we defined to show the action sheet
+                    setActionSheetVisible(true);
+                }}
+            >
+                {/* Left + button */}
+                <TouchableOpacity
+                    onPress={(e) => {
+                        e.stopPropagation(); // Prevent parent TouchableOpacity from triggering
+                        onSelectImages();
+                    }}
+                    style={{
+                        width: 25,
+                        height: 25,
+                        borderRadius: 20,
+                        backgroundColor: '#f5f5f5',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginRight: 8,
+                    }}
+                >
+                    <MaterialIcons name="add" size={20} color="#888" />
+                </TouchableOpacity>
+
+                {/* Text placeholder - no need for actual input component */}
+                <Text
+                    style={{
+                        fontSize: 16,
+                        color: msg ? colors.gray[800] : colors.gray[400],
+                        flex: 1,
+                    }}
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                >
+                    {msg ? msg : 'Jot something down'}
+                </Text>
+            </TouchableOpacity>
+        ),
+        [msg, onSelectImages],
+    );
 
-                    <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);
@@ -804,75 +1397,85 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         );
     }, [imageObject]);
 
-    const renderMessage = useCallback(
+    const renderMessage1 = useCallback(
         (props: any) => {
             const { currentMessage } = props;
 
-            // Check if this message is currently being uploaded
-            const isUploading = currentMessage._id === uploadingMessageId && loading;
-
-            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>
-                );
-            }
+            // Add special props for handling image upload states
+            const customProps = {
+                ...props,
+                isShowImageViewer: isShowImageViewer,
+                setImageViewer: setImageViewerObject,
+                // Pass custom flags to indicate uploading/optimistic states
+                isUploading: currentMessage.isUploading || false,
+                isOptimistic: currentMessage.isOptimistic || false,
+            };
 
+            // Use SlackMessage component with our enhanced props
+            return <SlackMessage {...customProps} />;
+        },
+        [isShowImageViewer, setImageViewerObject],
+    );
+    const renderMessage = useCallback(
+        (props: any) => {
+            // For all messages, use the SlackMessage component directly
             return (
                 <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
             );
         },
-        [uploadingMessageId, loading, isShowImageViewer, setImageViewerObject],
+        [isShowImageViewer],
     );
 
-    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',
-                }}
-            />
-        );
-    }, []);
+    const renderInputToolbar = useCallback(
+        (props) => {
+            if (isActionSheetVisible) return null;
+
+            return (
+                <InputToolbar
+                    {...props}
+                    containerStyle={{
+                        backgroundColor: 'transparent',
+                        padding: 0,
+                        margin: 0,
+                        borderTopWidth: 1,
+                        borderTopColor: colors.gray[200],
+                    }}
+                    primaryStyle={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}
+                    // Add action slot for direct image selection button
+                    // renderActions={() => (
+                    //     <TouchableOpacity
+                    //         onPress={onSelectImages}
+                    //         style={{
+                    //             padding: 8,
+                    //             marginLeft: 4,
+                    //             marginBottom: Platform.OS === 'ios' ? 0 : 3,
+                    //         }}
+                    //     >
+                    //         <Ionicons name="image" size={24} color={colors.blue[500]} />
+                    //     </TouchableOpacity>
+                    // )}
+                />
+            );
+        },
+        [isActionSheetVisible, onSelectImages],
+    );
 
     const renderLoadEarlier = useCallback(() => {
-        return loadingOldMessages ? (
+        return loadingOldMessages && !refreshing ? (
             <Box
                 style={{
                     padding: 10,
                     backgroundColor: 'rgba(255,255,255,0.8)',
                     borderRadius: 10,
                     marginTop: 10,
+                    alignItems: 'center',
                 }}
             >
                 <Spinner size="small" color={colors.blue[500]} />
+                <Text style={{ fontSize: 12, color: colors.gray[600], marginTop: 4 }}>Loading earlier messages...</Text>
             </Box>
         ) : null;
-    }, [loadingOldMessages]);
+    }, [loadingOldMessages, refreshing]);
 
     let onScroll = false;
 
@@ -888,8 +1491,69 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         onScroll = false;
     };
 
+    const renderChatFooter = useCallback(() => {
+        return (
+            <>
+                <ImageViewerModal
+                    isVisible={isShowImageViewer}
+                    setVisible={setImageViewer}
+                    modalContent={modalContent}
+                />
+                <SubscriptionHandler
+                    channelId={channelId}
+                    subscribeToNewMessages={() =>
+                        subscribeToMore({
+                            document: CHAT_MESSAGE_ADDED,
+                            variables: {
+                                channelId: channelId?.toString(),
+                                postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
+                            },
+                            updateQuery: (prev, { subscriptionData }: any) => {
+                                if (!subscriptionData.data) return prev;
+                                const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
+                                const prevReplyCount: any = prev?.getPostThread?.replyCount;
+                                const newReplyCount = prevReplyCount || 0 + 1;
+                                const replies = prev?.getPostThread?.replies || [];
+                                setChannelMessages((oldMessages: any) =>
+                                    uniqBy([...oldMessages, newMessage], ({ id }) => id),
+                                );
+                                setTotalCount(newReplyCount);
+                                return Object.assign({}, prev, {
+                                    getPostThread: {
+                                        ...prev?.getPostThread,
+                                        lastReplyAt: newMessage.createdAt,
+                                        replies: [newMessage, ...replies],
+                                        replyCount: newReplyCount,
+                                        updatedAt: newMessage.createdAt,
+                                    },
+                                });
+                            },
+                        })
+                    }
+                />
+            </>
+        );
+    }, [channelId, isShowImageViewer, modalContent, parentId, setImageViewer, subscribeToMore]);
+
+    const handleRemoveImage = useCallback(
+        (index: number) => {
+            const newImages = [...images];
+            newImages.splice(index, 1);
+            setImages(newImages);
+            if (newImages.length === 0) {
+                setSelectedImage('');
+                if (textInputRef.current && typeof textInputRef.current.focus === 'function') {
+                    textInputRef.current.focus();
+                }
+            }
+        },
+        [images],
+    );
+
     return (
-        <>
+        <View style={{ flex: 1, marginTop: -40 }}>
+            {errorMessage ? <ErrorNotification message={errorMessage} onClose={() => setErrorMessage('')} /> : null}
+            {loading && <Spinner color={'#3b82f6'} />}
             {isPostParentIdThread && (
                 <>
                     {threadPost?.length > 0 && (
@@ -940,18 +1604,112 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     )}
                 </>
             )}
-            <GiftedChat
+            <GiftedChatInboxComponent
                 ref={threadMessageListRef}
+                onRemoveImage={handleRemoveImage}
+                images={images}
+                onSelectImages={onSelectImages}
+                selectedImage={selectedImage}
+                setSelectedImage={setSelectedImage}
+                isUploadingImage={isUploadingImage}
+                loading={loading}
                 wrapInSafeArea={true}
+                inverted={true}
                 renderLoading={() => <Skeleton variant="rounded" style={{ flex: 1 }} />}
                 messages={messageList}
                 listViewProps={{
                     onEndReached: onEndReached,
                     onEndReachedThreshold: 0.5,
                     onMomentumScrollBegin: onMomentumScrollBegin,
+                    style: { marginTop: 0 },
+                    contentContainerStyle: {
+                        paddingTop: 0,
+                        paddingBottom: selectedImage ? 90 : 0,
+                    },
+                    refreshControl: (
+                        <RefreshControl
+                            refreshing={refreshing}
+                            onRefresh={onRefresh}
+                            colors={[colors.blue[500]]}
+                            tintColor={colors.blue[500]}
+                            title="Loading earlier messages..."
+                            titleColor={colors.gray[600]}
+                        />
+                    ),
                 }}
                 onSend={(messages) => handleSend(messages[0]?.text ?? ' ')}
-                text={msg ? msg : ' '}
+                text={msg || ' '}
+                onInputTextChanged={(text) => setMsg(text)}
+                renderFooter={() => null}
+                scrollToBottom
+                user={{
+                    _id: auth?.id || '',
+                }}
+                placeholder="Jot something down"
+                infiniteScroll={true}
+                renderSend={renderSend}
+                renderMessageText={renderMessageText}
+                renderMessage={renderMessage}
+                renderLoadEarlier={renderLoadEarlier}
+                loadEarlier={totalCount > channelMessages.length}
+                isLoadingEarlier={loadingOldMessages}
+                textInputProps={{
+                    multiline: true,
+                    returnKeyType: 'default',
+                    enablesReturnKeyAutomatically: true,
+                    placeholderTextColor: colors.gray[400],
+                    // Allow direct editing in the main input too for better UX
+                    editable: true,
+                    onFocus: () => setIsGiftedInputFocused(true),
+                    onBlur: () => setIsGiftedInputFocused(false),
+                }}
+                renderChatFooter={renderChatFooter}
+                messagesContainerStyle={{
+                    ...(messageList?.length == 0 ? { transform: [{ scaleY: -1 }] } : {}),
+                    //  marginTop: -40, // Negative margin to remove the top padding
+                    paddingTop: 0,
+                }}
+                // renderChatEmpty={() => (
+                //     <>
+                //         {!threadLoading && messageList && messageList?.length == 0 && (
+                //             <Box className="p-5">
+                //                 <Center className="mt-6">
+                //                     <Ionicons name="chatbubbles" size={30} />
+                //                     <Text>You don't have any message yet!</Text>
+                //                 </Center>
+                //             </Box>
+                //         )}
+                //     </>
+                // )}
+            />
+            {/* <GiftedChat
+                ref={threadMessageListRef}
+                wrapInSafeArea={true}
+                inverted={true}
+                renderLoading={() => <Skeleton variant="rounded" style={{ flex: 1 }} />}
+                messages={messageList}
+                listViewProps={{
+                    onEndReached: onEndReached,
+                    onEndReachedThreshold: 0.5,
+                    onMomentumScrollBegin: onMomentumScrollBegin,
+                    style: { marginTop: 0 },
+                    contentContainerStyle: {
+                        paddingTop: 0,
+                        paddingBottom: selectedImage ? 90 : 0,
+                    },
+                    refreshControl: (
+                        <RefreshControl
+                            refreshing={refreshing}
+                            onRefresh={onRefresh}
+                            colors={[colors.blue[500]]}
+                            tintColor={colors.blue[500]}
+                            title="Loading earlier messages..."
+                            titleColor={colors.gray[600]}
+                        />
+                    ),
+                }}
+                onSend={(messages) => handleSend(messages[0]?.text ?? ' ')}
+                text={msg || ' '}
                 onInputTextChanged={(text) => setMsg(text)}
                 renderFooter={() => null}
                 scrollToBottom
@@ -964,80 +1722,33 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                 renderSend={renderSend}
                 renderMessageText={renderMessageText}
                 renderInputToolbar={renderInputToolbar}
-                minInputToolbarHeight={50}
-                renderActions={renderActions}
-                renderAccessory={!!selectedImage ? renderAccessory : undefined}
+                renderComposer={renderComposer}
+                minInputToolbarHeight={isActionSheetVisible ? 0 : 56}
+                renderAccessory={images.length > 0 ? renderAccessory : null}
                 renderMessage={renderMessage}
                 renderLoadEarlier={renderLoadEarlier}
                 loadEarlier={totalCount > channelMessages.length}
                 isLoadingEarlier={loadingOldMessages}
-                bottomOffset={Platform.OS === 'ios' ? 10 : 0}
+                bottomOffset={Platform.OS === 'ios' ? (selectedImage ? 90 : 10) : 0}
                 textInputProps={{
-                    style: {
-                        borderWidth: 1,
-                        borderColor: colors.gray[300],
-                        backgroundColor: '#f8f8f8',
-                        borderRadius: 20,
-                        minHeight: 36,
-                        maxHeight: 80,
-                        color: '#000',
-                        padding: 8,
-                        paddingHorizontal: 15,
-                        fontSize: 16,
-                        flex: 1,
-                        marginVertical: 2,
-                        marginBottom: 0,
-                    },
                     multiline: true,
                     returnKeyType: 'default',
                     enablesReturnKeyAutomatically: true,
                     placeholderTextColor: colors.gray[400],
+                    // Allow direct editing in the main input too for better UX
+                    editable: true,
+                    onFocus: () => setIsGiftedInputFocused(true),
+                    onBlur: () => setIsGiftedInputFocused(false),
                 }}
                 minComposerHeight={36}
                 maxComposerHeight={100}
-                placeholder="Type a message..."
-                renderChatFooter={() => (
-                    <>
-                        <ImageViewerModal
-                            isVisible={isShowImageViewer}
-                            setVisible={setImageViewer}
-                            modalContent={modalContent}
-                        />
-                        <SubscriptionHandler
-                            channelId={channelId}
-                            subscribeToNewMessages={() =>
-                                subscribeToMore({
-                                    document: CHAT_MESSAGE_ADDED,
-                                    variables: {
-                                        channelId: channelId?.toString(),
-                                        postParentId: !parentId || parentId == 0 ? null : parentId?.toString(),
-                                    },
-                                    updateQuery: (prev, { subscriptionData }: any) => {
-                                        if (!subscriptionData.data) return prev;
-                                        const newMessage: any = subscriptionData?.data?.threadChatMessageAdded;
-                                        const prevReplyCount: any = prev?.getPostThread?.replyCount;
-                                        const newReplyCount = prevReplyCount || 0 + 1;
-                                        const replies = prev?.getPostThread?.replies || [];
-                                        setChannelMessages((oldMessages: any) =>
-                                            uniqBy([...oldMessages, newMessage], ({ id }) => id),
-                                        );
-                                        setTotalCount(newReplyCount);
-                                        return Object.assign({}, prev, {
-                                            getPostThread: {
-                                                ...prev?.getPostThread,
-                                                lastReplyAt: newMessage.createdAt,
-                                                replies: [newMessage, ...replies],
-                                                replyCount: newReplyCount,
-                                                updatedAt: newMessage.createdAt,
-                                            },
-                                        });
-                                    },
-                                })
-                            }
-                        />
-                    </>
-                )}
-                messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
+                isKeyboardInternallyHandled={false}
+                renderChatFooter={renderChatFooter}
+                messagesContainerStyle={{
+                    ...(messageList?.length == 0 ? { transform: [{ scaleY: -1 }] } : {}),
+                    //  marginTop: -40, // Negative margin to remove the top padding
+                    paddingTop: 0,
+                }}
                 renderChatEmpty={() => (
                     <>
                         {!threadLoading && messageList && messageList?.length == 0 && (
@@ -1055,8 +1766,36 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     springConfig: { tension: 90000, friction: 90000 },
                     disabled: true,
                 }}
-            />
-        </>
+            /> */}
+
+            {/* Add the expandable action sheet */}
+            {/* {isActionSheetVisible && <Divider />}
+            {isActionSheetVisible && (
+                <ExpandableInputActionSheet
+                    isVisible={isActionSheetVisible}
+                    onClose={handleActionSheetClose}
+                    onSend={handleActionSheetSend}
+                    onSelectImages={onSelectImages}
+                    text={msg}
+                    onChangeText={(text) => {
+                        setMsg(text);
+                        setTextUpdatedInActionSheet(true);
+                    }}
+                    textInputRef={textInputRef}
+                    isSendDisabled={(!msg.trim() && images.length === 0) || isUploadingImage}
+                    selectedImages={images}
+                    loading={loading || isUploadingImage}
+                    onRemoveImage={(index) => {
+                        const newImages = [...images];
+                        newImages.splice(index, 1);
+                        setImages(newImages);
+                        if (newImages.length === 0) {
+                            setSelectedImage('');
+                        }
+                    }}
+                />
+            )} */}
+        </View>
     );
 };