@messenger-box/platform-mobile 10.0.3-alpha.5 → 10.0.3-alpha.50

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

@@ -13,25 +13,45 @@ import {
     Image,
     Spinner,
     Text,
+    Skeleton,
+    Toast,
+    ToastTitle,
+    ToastDescription,
+    useToast,
+    Divider,
 } from '@admin-layout/gluestack-ui-mobile';
-import { Platform } 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';
 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 { IPost, IPostThread, PreDefinedRole, IExpoNotificationData, IFileInfo } from 'common';
+import { Actions, GiftedChat, IMessage, MessageText, Send, InputToolbar, Composer } from 'react-native-gifted-chat';
+import {
+    IPost,
+    IPostThread,
+    PreDefinedRole,
+    IExpoNotificationData,
+    IFileInfo,
+    FileRefType,
+    PostTypeEnum,
+} from 'common';
 import {
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    useCreatePostThreadMutation,
-    useOnThreadChatMessageAddedSubscription,
-    useSendExpoNotificationOnPostMutation,
-    useSendThreadMessageMutation,
-    useThreadMessagesLazyQuery,
-    useGetPostThreadLazyQuery,
-} from 'common/lib/generated/generated.js';
+    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';
@@ -39,6 +59,9 @@ import { userSelector } from '@adminide-stack/user-auth0-client';
 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,
@@ -59,6 +82,9 @@ const createdAtText = (value: string) => {
 interface IMessageProps extends IMessage {
     type: string;
     propsConfiguration?: any;
+    images?: string[];
+    isOptimistic?: boolean;
+    isUploading?: boolean;
 }
 
 export interface AlertMessageAttachmentsInterface {
@@ -76,21 +102,88 @@ interface IThreadSubscriptionHandlerProps {
     channelId: string;
 }
 
+// Define an extended interface for ImagePickerAsset with url property
+interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
+    url?: string;
+    fileName?: string;
+    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>();
     const [files, setFiles] = useState<File[]>([]);
-    const [images, setImages] = useState<ImagePicker.ImagePickerAsset[]>([]);
+    const [images, setImages] = useState<ExtendedImagePickerAsset[]>([]);
     const [msg, setMsg] = useState<string>('');
     const [loading, setLoading] = useState(false);
     const [imageLoading, setImageLoading] = useState(false);
+    const [uploadingMessageId, setUploadingMessageId] = useState<string | null>(null);
     const [expoTokens, setExpoTokens] = useState<any[]>([]);
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
@@ -100,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(() => {
@@ -117,12 +225,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
             navigation.setOptions({
                 title: params?.title ?? 'Thread',
                 headerLeft: (props: any) => (
-                    <Button
-                        bg={'transparent'}
-                        $pressed-bg="$trueGray200"
-                        $active-bg={'$trueGray200'}
-                        onPress={() => navigation.goBack()}
-                    >
+                    <Button className="bg-transparent active:bg-gray-200 " onPress={() => navigation.goBack()}>
                         <MaterialIcons size={20} name="arrow-back-ios" color={'black'} />
                     </Button>
                 ),
@@ -203,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(),
@@ -224,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
     // };
@@ -253,118 +368,438 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         return new File([u8arr], filename, { type: mime });
     };
 
-    const onSelectImages = async () => {
-        setImageLoading(true);
-        let imageSource: any = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ImagePicker.MediaTypeOptions.Images,
-            allowsEditing: true,
-            aspect: [4, 3],
-            quality: 1,
-            base64: true,
+    // 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;
         });
-        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));
+
+        // 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 () => {
+        setLoading(true);
+
+        try {
+            let imageSource = await ImagePicker.launchImageLibraryAsync({
+                mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                allowsEditing: false,
+                aspect: [4, 3],
+                quality: 0.8,
+                base64: true,
+                exif: false,
+                allowsMultipleSelection: true, // Enable multiple selection
+            });
+
+            if (!imageSource?.canceled) {
+                // Get all selected assets
+                const selectedAssets = imageSource?.assets || [];
+                if (selectedAssets.length === 0) {
+                    setLoading(false);
+                    return;
+                }
+
+                // 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;
+                });
+
+                // 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);
+                }
+
+                // Add new images to existing ones
+                setImages((currentImages) => [...currentImages, ...newImages]);
+                setLoading(false); // Set loading to false after successful selection
+            } else {
+                setLoading(false);
+            }
+        } catch (error) {
+            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);
         }
-        if (imageSource.canceled) setLoading(false);
+
+        // 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();
 
-            if (images && images.length > 0) {
-                setLoading(true);
-                const uploadResponse = await startUpload({
-                    file: images,
-                    saveUploadedFile: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                    createUploadLink: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                });
-                if (uploadResponse?.error) setLoading(false);
-                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-                if (uploadResponse.data) {
-                    setImage('');
-                    setFiles([]);
-                    setImages([]);
-                    //setLoading(false);
-                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
-                    await sendThreadMessage({
-                        variables: {
-                            postId,
-                            channelId,
-                            postThreadId: postThread && postThread?.id,
-                            postParentId: !parentId || parentId == 0 ? null : parentId,
-                            threadMessageInput: {
-                                content: message,
-                                files,
-                                role,
+            // 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: currentMessageText || (currentImages.length > 0 ? ' ' : ''),
+                createdAt: currentDate.toISOString(),
+                author: {
+                    id: auth?.profile?.id,
+                    givenName: auth?.profile?.given_name,
+                    familyName: auth?.profile?.family_name,
+                    picture: auth?.profile?.picture,
+                },
+                isDelivered: false, // Mark as not delivered yet during upload
+                isRead: false,
+                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,
+            };
+
+            // 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 (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,
                             },
-                        },
-                        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('');
-                            const msg = message == '' ? 'Send a file' : message;
-                            sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
-                        },
-                    });
+                        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());
+                        }
+
+                        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;
+                                });
+                            });
+                        }
+
+                        // Clear pending upload now that it's complete
+                        setPendingUploads((prev) => {
+                            const newPending = { ...prev };
+                            delete newPending[postId];
+                            return newPending;
+                        });
+                    }
                 }
-            } else {
-                setLoading(true);
+
+                // Send message with Apollo mutation
                 await sendThreadMessage({
                     variables: {
+                        postId,
                         channelId,
                         postThreadId: postThread && postThread?.id,
-                        postParentId: !parentId || parentId == 0 ? null : parentId,
+                        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) {
-                            setLoading(false);
-                            return;
-                        }
-                        setPostThread(data?.createPostThread.data);
+                        if (!data || errors) return;
+
+                        setPostThread(data?.createPostThread?.data);
                         const lastMessageId = data?.createPostThread?.lastMessage?.id;
-                        if (!parentId || parentId == 0) {
+                        if (!parentId || parentId === 0) {
                             setParentId(data?.createPostThread?.lastMessage?.id);
                         }
                         setChannelToTop(channelToTop + 1);
-                        setLoading(false);
-                        setMsg('');
 
+                        // Send push notification with message info
                         sendPushNotification(lastMessageId, channelId, parentId, data?.createPostThread?.data?.id);
                     },
                 });
+            } 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);
             }
         },
-        [setChannelMessages, channelId, images, parentId, expoTokens],
+        [
+            auth,
+            channelId,
+            channelToTop,
+            images,
+            parentId,
+            postThread,
+            selectedImage,
+            setChannelMessages,
+            removeMessageFromUI,
+            role,
+        ],
     );
 
     const sendPushNotification = async (messageId: string, channelId: string, parentId: any, threadId: string) => {
@@ -385,6 +820,7 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         }
     };
 
+    // Improved messageList function to better handle images
     const messageList = useMemo(() => {
         let currentDate = '';
         let res: any = [];
@@ -407,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);
@@ -427,149 +902,494 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         //return res;
     }, [channelMessages]);
 
-    const renderSend = (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 = (props: any) => {
-        const { currentMessage } = props;
-        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;
+            // 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') {
+                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 };
                 }
 
-                action = path;
-                params = { ...param };
-            } else if (attachment?.callToAction?.link) {
-                action = CALL_TO_ACTION_PATH;
-                actionId = attachment?.callToAction?.link.split('/').pop();
-                params = { reservationId: actionId };
+                return (
+                    <>
+                        {attachment?.callToAction && action ? (
+                            <Box className={`bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2`}>
+                                <Button
+                                    variant={'outline'}
+                                    size={'sm'}
+                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`}
+                                    onPress={() => action && params && navigation.navigate(action, params)}
+                                >
+                                    <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
+                                        {attachment.callToAction.title}
+                                    </ButtonText>
+                                </Button>
+                                <MessageText
+                                    {...props}
+                                    textStyle={{
+                                        left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 },
+                                    }}
+                                />
+                            </Box>
+                        ) : (
+                            <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                        )}
+                    </>
+                );
+            } else {
+                return <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />;
+            }
+        },
+        [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 (attachment?.callToAction?.link?.includes('my-reservation-details')) {
-            //     action = CALL_TO_ACTION_PATH;
-            //     actionId = attachment?.callToAction?.link.split('/').pop();
-            // }
+            if (currentMessage.type === 'ALERT') {
+                const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
+                let action: string = '';
+                let actionId: any = '';
+                let params: any = {};
 
-            return (
-                <>
-                    {attachment?.callToAction && action ? (
-                        <Box bg={CALL_TO_ACTION_BOX_BGCOLOR} borderRadius={15} pb={2}>
-                            <Button
-                                variant={'outline'}
-                                size={'sm'}
-                                borderColor={CALL_TO_ACTION_BUTTON_BORDERCOLOR}
-                                onPress={() => action && params && navigation.navigate(action, params)}
-                                //onPress={() => navigation.navigate(action, { reservationId: actionId })}
-                            >
-                                <ButtonText 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 },
+                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
+    //             {...props}
+    //             icon={() => <Ionicons name={'image'} size={30} color={'black'} onPress={onSelectImages} />}
+    //         />
+    //     );
+    // }, [onSelectImages]);
+
+    // Render action buttons (including image upload)
+    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>
-                    ) : (
-                        <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
                     )}
-                    {/* <MessageText
-                        {...props}
-                        textStyle={{ left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 } }}
-                    /> */}
-                </>
+                    containerStyle={{
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginLeft: 8,
+                        marginBottom: 0,
+                    }}
+                />
             );
-        } else {
-            return <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />;
-        }
-    };
-
-    const renderActions = (props) => {
-        return (
-            <Actions
-                {...props}
-                icon={() => <Ionicons name={'image'} size={30} color={'black'} onPress={onSelectImages} />}
-            />
-        );
-    };
+        },
+        [onSelectImages],
+    );
 
-    const renderAccessory = (props) => {
+    // Create a more visible and reliable image preview with cancel button
+    const renderAccessory = useCallback(() => {
+        if (!images.length) return null;
         return (
-            <Box>
-                {selectedImage !== '' ? (
-                    <HStack alignItems={'center'}>
-                        <Image
-                            ml={'$3'}
-                            key={selectedImage}
-                            alt={'image'}
-                            source={{ uri: selectedImage }}
-                            size={'xs'}
-                        />
-                        <Button
-                            variant={'solid'}
-                            //bg={'$secondary400'}
-                            bg={'transparent'}
-                            onPress={() => {
-                                setFiles([]);
-                                setImage('');
-                                setImages([]);
+            <Box style={{ position: 'relative', height: 70, backgroundColor: 'transparent', justifyContent: 'center' }}>
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    style={{
+                        flexDirection: 'row',
+                        paddingLeft: 15,
+                        paddingRight: 5,
+                    }}
+                    contentContainerStyle={{
+                        alignItems: 'center',
+                        height: '100%',
+                    }}
+                >
+                    {images.map((img, index) => (
+                        <View
+                            key={`image-preview-${index}`}
+                            style={{
+                                width: 40,
+                                height: 40,
+                                marginRight: 15,
+                                borderRadius: 4,
+                                backgroundColor: colors.gray[200],
+                                overflow: 'hidden',
+                                borderWidth: 1,
+                                borderColor: '#e0e0e0',
+                                position: 'relative',
+                                zIndex: 10,
                             }}
                         >
-                            <ButtonText color={'$black'}>Cancel</ButtonText>
-                        </Button>
-                    </HStack>
-                ) : null}
+                            <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: -1,
+                                    right: -1,
+                                    backgroundColor: 'rgba(0,0,0,0.6)',
+                                    borderRadius: 12,
+                                    width: 20,
+                                    height: 20,
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    zIndex: 9999,
+                                }}
+                            >
+                                <Ionicons name="close" size={16} color="white" />
+                            </TouchableOpacity>
+                        </View>
+                    ))}
+                </ScrollView>
             </Box>
         );
-    };
+    }, [images]);
 
-    const setImageViewerObject = (obj: any, v: boolean) => {
+    // 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],
+    );
+
+    const setImageViewerObject = useCallback((obj: any, v: boolean) => {
         setImageObject(obj);
         setImageViewer(v);
-    };
+    }, []);
 
-    const modalContent = React.useMemo(() => {
+    const modalContent = useMemo(() => {
         if (!imageObject) return <></>;
         const { image, _id } = imageObject;
         return (
             <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'}
@@ -577,39 +1397,170 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
         );
     }, [imageObject]);
 
-    const renderMessage = (props: any) => {
-        return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
-    };
+    const renderMessage1 = useCallback(
+        (props: any) => {
+            const { currentMessage } = props;
+
+            // 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} />
+            );
+        },
+        [isShowImageViewer],
+    );
+
+    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 && !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, refreshing]);
 
     let onScroll = false;
 
     const onMomentumScrollBegin = ({ nativeEvent }: any) => {
         onScroll = true;
-        console.log('scroll top');
         if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > channelMessages?.length) {
             onFetchOld();
         }
     };
 
     const onEndReached = () => {
-        console.log('on end reached');
         if (!onScroll) return;
-        // load messages, show ActivityIndicator
         onScroll = false;
-        // setLoadingOldMessages(true);
     };
 
+    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 (
-        <>
-            {(loadingOldMessages || loadEarlierMsg) && <Spinner color={'$blue500'} />}
-            {/* {loadEarlierMsg && <Spinner />} */}
+        <View style={{ flex: 1, marginTop: -40 }}>
+            {errorMessage ? <ErrorNotification message={errorMessage} onClose={() => setErrorMessage('')} /> : null}
+            {loading && <Spinner color={'#3b82f6'} />}
             {isPostParentIdThread && (
                 <>
                     {threadPost?.length > 0 && (
                         <>
-                            <VStack px={'$2'} pt={'$2'} pb={'$0'} space={'sm'}>
-                                <HStack space={'sm'} alignItems={'center'}>
-                                    <Avatar bg={'transparent'} size={'md'}>
+                            <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))}
                                         </AvatarFallbackText>
@@ -626,30 +1577,24 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                                         />
                                     </Avatar>
                                     <Box>
-                                        <Text color={'$black'} fontWeight={'$bold'}>
+                                        <Text className="font-bold color-black">
                                             {threadPost[0]?.author?.givenName ?? ''}{' '}
                                             {threadPost[0]?.author?.familyName ?? ''}
                                         </Text>
-                                        <Text color={'$trueGray500'} pl={'$0'}>
+                                        <Text className="pl-0 color-gray-500">
                                             {createdAtText(threadPost[0]?.createdAt)} at{' '}
                                             {format(new Date(threadPost[0]?.createdAt), 'hh:ss:a')}
                                         </Text>
                                     </Box>
                                 </HStack>
-                                <HStack px={'$2'} space={'sm'} alignItems={'center'}>
+                                <HStack space={'sm'} className="px-2 items-center">
                                     <Text>{threadPost[0]?.message ?? ''}</Text>
                                 </HStack>
                             </VStack>
 
-                            <Box py={'$4'}>
-                                <Box
-                                    px={'$4'}
-                                    borderTopWidth={'$1'}
-                                    borderBottomWidth={'$1'}
-                                    py={'$2'}
-                                    borderColor={'$trueGray200'}
-                                >
-                                    <Text color={'$trueGray600'} fontWeight={'$bold'}>
+                            <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'}
                                     </Text>
@@ -659,98 +1604,156 @@ const ThreadConversationViewComponent = ({ channelId, postParentId, isPostParent
                     )}
                 </>
             )}
-            <GiftedChat
+            <GiftedChatInboxComponent
                 ref={threadMessageListRef}
-                wrapInSafeArea={false}
-                renderLoading={() => <Spinner color={'$blue500'} />}
+                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={() =>
-                    loading ? <Spinner color={'$blue500'} /> : imageLoading ? <Spinner color={'$blue500'} /> : ''
-                }
+                renderFooter={() => null}
                 scrollToBottom
                 user={{
                     _id: auth?.id || '',
                 }}
-                isTyping={true}
-                alwaysShowSend={loading ? false : true}
-                // onLoadEarlier={onFetchOld}
+                placeholder="Jot something down"
                 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}
-                minInputToolbarHeight={50}
-                renderActions={renderActions}
-                renderAccessory={renderAccessory}
                 renderMessage={renderMessage}
-                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,
-                                            },
-                                        });
-                                    },
-                                })
-                            }
+                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]}
                         />
-                    </>
-                )}
-                messagesContainerStyle={messageList?.length == 0 && { transform: [{ scaleY: -1 }] }}
+                    ),
+                }}
+                onSend={(messages) => handleSend(messages[0]?.text ?? ' ')}
+                text={msg || ' '}
+                onInputTextChanged={(text) => setMsg(text)}
+                renderFooter={() => null}
+                scrollToBottom
+                user={{
+                    _id: auth?.id || '',
+                }}
+                isTyping={false}
+                alwaysShowSend={true}
+                infiniteScroll={true}
+                renderSend={renderSend}
+                renderMessageText={renderMessageText}
+                renderInputToolbar={renderInputToolbar}
+                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' ? (selectedImage ? 90 : 10) : 0}
+                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),
+                }}
+                minComposerHeight={36}
+                maxComposerHeight={100}
+                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 && (
-                            <Box p={'$5'}>
-                                <Center mt={'$6'}>
+                            <Box className="p-5">
+                                <Center className="mt-6">
                                     <Ionicons name="chatbubbles" size={30} />
                                     <Text>You don't have any message yet!</Text>
                                 </Center>
@@ -763,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>
     );
 };