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

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

@@ -12,26 +12,45 @@ import {
     Spinner,
     Text,
     Skeleton,
+    ScrollView,
+    Toast,
+    ToastTitle,
+    ToastDescription,
+    useToast,
+    ToastAlert,
+    VStack,
+    Divider,
+    Center,
 } from '@admin-layout/gluestack-ui-mobile';
-import { Platform, TouchableHighlight, SafeAreaView, View } from 'react-native';
-import { useFocusEffect, useIsFocused, useNavigation } from '@react-navigation/native';
+import {
+    Platform,
+    TouchableHighlight,
+    SafeAreaView,
+    View,
+    TouchableOpacity,
+    Animated,
+    Text as RNText,
+    TextInput,
+    KeyboardAvoidingView,
+} from 'react-native';
+import { useFocusEffect, useIsFocused, useNavigation, useRoute } from '@react-navigation/native';
 import { navigationRef } from '@common-stack/client-react';
-import { useSelector } from 'react-redux';
+import { useSelector, shallowEqual } 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 } from '@expo/vector-icons';
+import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
 import { Actions, GiftedChat, IMessage, MessageText, Send, Composer, InputToolbar } from 'react-native-gifted-chat';
 import { PreDefinedRole, RoomType, IExpoNotificationData, IFileInfo, FileRefType, PostTypeEnum } from 'common';
 import {
-    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-    useMessagesQuery,
-    useSendExpoNotificationOnPostMutation,
-    useSendMessagesMutation,
-    useViewChannelDetailQuery,
-    useAddDirectChannelMutation,
-    MessagesDocument,
-} from 'common/graphql';
+    CHAT_MESSAGE_ADDED,
+    useChannelDetailQuery,
+    useChannelMessagesQuery,
+    useSendChannelMessage,
+    useAddDirectChannel,
+    MESSAGES_DOCUMENT,
+    useSendExpoNotification,
+} from '../../../queries/inboxQueries';
 import { useUploadFilesNative } from '@messenger-box/platform-client';
 import { objectId } from '@messenger-box/core';
 import { userSelector } from '@adminide-stack/user-auth0-client';
@@ -40,7 +59,14 @@ import { ImageViewerModal, SlackMessage } from '../components/SlackMessageContai
 import CachedImage from '../components/CachedImage';
 import { config } from '../config';
 import colors from 'tailwindcss/colors';
-import { v4 as uuidv4 } from 'uuid';
+import ExpandableInputActionSheet from '../components/ExpandableInputActionSheet';
+import ExpandableInput from '../components/ExpandableInput';
+import { SubscriptionHandler } from '../components/SubscriptionHandler';
+import { useInboxMessages } from '../hooks/useInboxMessages';
+import Reanimated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
+import Constants from 'expo-constants';
+import { Keyboard } from 'react-native';
+import GiftedChatInboxComponent from '../components/GiftedChatInboxComponent';
 
 // Define an extended interface for ImagePickerAsset with url property
 interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
@@ -75,6 +101,7 @@ interface IMessageProps extends IMessage {
     propsConfiguration?: any;
     replies?: any;
     isShowThreadMessage?: boolean;
+    images?: string[]; // Add support for multiple images
 }
 
 export interface AlertMessageAttachmentsInterface {
@@ -93,11 +120,96 @@ type OptimisticPropsConfig = {
     resource: string;
 };
 
+// Custom notification component
+const ErrorNotification = ({ message, onClose, type = 'error' }) => {
+    const opacity = useRef(new Animated.Value(0)).current;
+
+    // Choose colors based on type
+    const bgColor = type === 'error' ? '#f44336' : '#ff9800';
+    const title = type === 'error' ? 'Error' : 'Warning';
+
+    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: bgColor,
+                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' }}>{title}</Text>
+                <TouchableOpacity onPress={onClose}>
+                    <Ionicons name="close" size={20} color="white" />
+                </TouchableOpacity>
+            </HStack>
+            <Text style={{ color: 'white', marginTop: 5 }}>{message}</Text>
+        </Animated.View>
+    );
+};
+
+const PADDING_BOTTOM = Platform.OS === 'ios' ? 20 : 0;
+
+function useGradualKeyboardAnimation() {
+    const height = useSharedValue(PADDING_BOTTOM);
+    const isExpoGo = Constants.executionEnvironment === 'storeClient';
+    let useKeyboardHandler;
+    if (!isExpoGo) {
+        useKeyboardHandler = require('react-native-keyboard-controller').useKeyboardHandler;
+    }
+    if (useKeyboardHandler) {
+        useKeyboardHandler(
+            {
+                onMove: (e) => {
+                    'worklet';
+                    height.value = Math.max(e.height, PADDING_BOTTOM);
+                },
+                onEnd: (e) => {
+                    'worklet';
+                    height.value = e.height;
+                },
+            },
+            [],
+        );
+    }
+    return { height };
+}
+
 const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowThreadMessage, ...rest }: any) => {
     // Core state management using React hooks instead of XState
+    const { params } = useRoute<any>();
     const [channelId, setChannelId] = useState<string | null>(initialChannelId || null);
     const [messageText, setMessageText] = useState('');
-    const [skip, setSkip] = useState(0);
     const [loading, setLoading] = useState(false);
     const [loadingOldMessages, setLoadingOldMessages] = useState(false);
     const [error, setError] = useState<string | null>(null);
@@ -105,51 +217,60 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
     const [images, setImages] = useState<any[]>([]);
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
+    const [errorMessage, setErrorMessage] = useState('');
+    const [notificationType, setNotificationType] = useState('error');
+
+    // Add state for expandable action sheet
+    const [isActionSheetVisible, setActionSheetVisible] = useState(false);
+    // Add state for controlling bottom margin
+    const [bottomMargin, setBottomMargin] = useState(0);
 
     // Create refs for various operations
     const messageRootListRef = useRef<any>(null);
+    const textInputRef = useRef<any>(null); // Add new ref for the text input
     const isMounted = useRef(true);
     const fetchOldDebounceRef = useRef(false);
 
     // Navigation and auth
-    const auth: any = useSelector(userSelector);
+    const auth: any = useSelector(userSelector, shallowEqual);
     const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
     const navigation = useNavigation<any>();
     const isFocused = useIsFocused();
 
     // Apollo mutations
-    const [addDirectChannel] = useAddDirectChannelMutation();
+    const [addDirectChannel] = useAddDirectChannel();
     const { startUpload } = useUploadFilesNative();
-    const [sendMsg] = useSendMessagesMutation();
-    const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+    const [sendMsg] = useSendChannelMessage();
+    const [sendExpoNotification] = useSendExpoNotification();
+
+    // Add skip state for pagination
+    const [skip, setSkip] = useState(0);
 
     // Apollo query for messages
     const {
         data,
         loading: messageLoading,
+        error: inboxError,
         refetch,
-        fetchMore: fetchMoreMessages,
-        subscribeToMore,
-    } = useMessagesQuery({
-        variables: {
+        subscribe,
+    } = useInboxMessages({
+        useQueryHook: useChannelMessagesQuery,
+        queryVariables: {
             channelId: channelId?.toString(),
             parentId: null,
             limit: MESSAGES_PER_PAGE,
-            skip: skip,
-        },
-        skip: !channelId,
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        refetchWritePolicy: 'merge',
-        notifyOnNetworkStatusChange: true,
-        onError: (error) => {
-            setError(String(error));
+            skip: skip, // Use skip state for pagination
+            orgName: params?.orgName,
         },
+        subscriptionDocument: CHAT_MESSAGE_ADDED,
+        subscriptionVariables: { channelId: channelId?.toString() },
+        updateQuery: undefined, // Provide custom updateQuery if needed
+        onError: (err) => setError(String(err)),
     });
 
     // Extract messages from the query data
     const channelMessages = useMemo(() => {
-        return data?.messages?.data || [];
+        return (data?.messages?.data as any[]) || [];
     }, [data?.messages?.data]);
 
     // Get total message count
@@ -176,47 +297,33 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
     useFocusEffect(
         React.useCallback(() => {
             if (channelId) {
-                // Refresh messages when screen comes into focus
                 refetch();
             }
-            return () => {
-                // Nothing needed on unfocus
-            };
-        }, [channelId, isFocused, refetch]),
+        }, [isFocused, refetch]),
     );
 
-    // Loading state for image selection
-    useEffect(() => {
-        if (selectedImage) {
-            setLoading(false);
-        }
-    }, [selectedImage]);
-
-    // Fetch more messages function
+    // When fetching more messages, update skip
     const fetchMoreMessagesImpl = useCallback(async () => {
         try {
             setLoadingOldMessages(true);
-            const response = await fetchMoreMessages({
-                variables: {
-                    channelId: channelId?.toString(),
-                    parentId: null,
-                    skip: channelMessages.length,
-                },
-                // Let type policy handle the merge
+            const response = await refetch({
+                channelId: channelId?.toString(),
+                parentId: null,
+                limit: MESSAGES_PER_PAGE,
+                skip: channelMessages.length,
             });
-
+            setSkip(channelMessages.length); // Update skip after fetching
             setLoadingOldMessages(false);
             if (!response?.data?.messages?.data) {
                 return { error: 'No messages returned' };
             }
-
             return { messages: response.data.messages.data };
         } catch (error) {
             setLoadingOldMessages(false);
             setError(String(error));
             return { error: String(error) };
         }
-    }, [channelId, channelMessages.length, fetchMoreMessages]);
+    }, [channelId, channelMessages.length, refetch]);
 
     // Send message function
     const sendMessageImpl = useCallback(async () => {
@@ -243,12 +350,13 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                 author: {
                     __typename: 'UserAccount' as const,
                     id: auth?.id,
-                    picture: auth?.picture || '',
-                    givenName: auth?.givenName || '',
-                    familyName: auth?.familyName || '',
-                    email: auth?.email || '',
-                    username: auth?.username || '',
-                    alias: [] as string[],
+                    givenName: auth?.profile?.given_name || '',
+                    familyName: auth?.profile?.family_name || '',
+                    email: auth?.profile?.email || '',
+                    username: auth?.profile?.nickname || '',
+                    fullName: auth?.profile?.name || '',
+                    picture: auth?.profile?.picture || '',
+                    alias: [auth?.authUserId ?? ''] as string[],
                     tokens: [],
                 },
                 isDelivered: true,
@@ -288,57 +396,69 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                     __typename: 'Mutation',
                     sendMessage: optimisticMessage,
                 },
+                // Let the type policies handle the cache update automatically
                 update: (cache, { data }) => {
-                    if (data?.sendMessage) {
-                        try {
-                            // Read the existing messages from the cache
-                            const existingData = cache.readQuery<{
+                    // Only perform cache update if we have valid data
+                    if (!data?.sendMessage) return;
+
+                    try {
+                        // Let Apollo type policies handle merging by using writeQuery
+                        // This will trigger the merge functions in the type policies
+                        cache.writeQuery({
+                            query: MESSAGES_DOCUMENT,
+                            variables: {
+                                channelId: channelId?.toString(),
+                                parentId: null,
+                                limit: MESSAGES_PER_PAGE,
+                                skip: 0,
+                            },
+                            data: {
                                 messages: {
-                                    __typename: string;
-                                    messagesRefId?: string;
-                                    data: any[];
-                                    totalCount: number;
-                                };
-                            }>({
-                                query: MessagesDocument,
-                                variables: {
-                                    channelId: channelId?.toString(),
-                                    parentId: null,
-                                    limit: MESSAGES_PER_PAGE,
-                                    skip: 0,
-                                },
-                            });
-
-                            // If we don't have data yet in the cache, don't try to update
-                            if (!existingData) return;
-
-                            // Let the type policy handle the merging
-                            cache.writeQuery({
-                                query: MessagesDocument,
-                                variables: {
-                                    channelId: channelId?.toString(),
-                                    parentId: null,
-                                    limit: MESSAGES_PER_PAGE,
-                                    skip: 0,
+                                    __typename: 'Messages',
+                                    messagesRefId: channelId,
+                                    data: [data.sendMessage],
+                                    totalCount: 1, // Just send the count for this single message
                                 },
-                                data: {
-                                    messages: {
-                                        ...existingData.messages,
-                                        data: [data.sendMessage, ...existingData.messages.data],
-                                        totalCount: (existingData.messages.totalCount || 0) + 1,
-                                    },
-                                },
-                            });
-                        } catch (error) {
-                            console.error('Error updating cache:', error);
+                            },
+                        });
+                    } catch (error) {
+                        console.error('Error updating cache:', error);
+
+                        // Format error for notification
+                        let errorMsg = 'Failed to update message cache';
+                        if (__DEV__ && error) {
+                            // In development, show actual error
+                            errorMsg = error.message
+                                ? error.message.replace('[ApolloError: ', '').replace(']', '')
+                                : 'Cache update failed';
                         }
+
+                        setNotificationType('error');
+                        setErrorMessage(errorMsg);
                     }
                 },
             });
 
+            // Ensure loader is removed after sending
+            setIsUploadingImage(false);
+            setLoading(false);
+
             return { message: response.data?.sendMessage };
         } catch (error) {
             setLoading(false);
+            setIsUploadingImage(false);
+
+            // Format error for notification
+            let errorMsg = 'Failed to send message';
+            if (__DEV__ && error) {
+                // In development, show actual error
+                errorMsg = error.message
+                    ? error.message.replace('[ApolloError: ', '').replace(']', '')
+                    : 'Message sending failed';
+            }
+
+            setNotificationType('error');
+            setErrorMessage(errorMsg);
             setError(String(error));
             return { error: String(error) };
         }
@@ -351,36 +471,53 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
         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) {
+                // 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;
+                });
+
+                // 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);
+                }
 
-                // Format the asset for upload service requirements
-                const asset: ExtendedImagePickerAsset = {
-                    ...selectedAsset,
-                    url: selectedAsset.uri,
-                    fileName: selectedAsset.fileName || `image_${Date.now()}.jpg`,
-                    mimeType: 'image/jpeg',
-                };
+                // Add new images to existing ones
+                setImages((currentImages) => [...currentImages, ...newImages]);
 
-                // Update state with the new image
-                setSelectedImage(previewImage);
-                setImages([asset]);
+                // Show action sheet if it's not visible
+                if (!isActionSheetVisible) {
+                    setActionSheetVisible(true);
+                }
             } else {
                 setLoading(false);
             }
@@ -391,53 +528,107 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
 
     // Add a state variable to track which message should show the skeleton
     const [uploadingMessageId, setUploadingMessageId] = useState<string | null>(null);
+    // Add new state for tracking pending uploads
+    const [pendingUploads, setPendingUploads] = useState<Record<string, IMessageProps>>({});
+    const [uploadErrors, setUploadErrors] = useState<Record<string, string>>({});
+
+    // Add new state variable to track image upload status
+    const [isUploadingImage, setIsUploadingImage] = useState(false);
+
+    // Ensure loader is hidden when all images are removed
+    useEffect(() => {
+        if (images.length === 0) {
+            setIsUploadingImage(false);
+        }
+    }, [images]);
+
+    // Add toast hook for notifications
+    const toast = useToast();
+
+    // 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;
+        });
 
-    // Send message with file function - update to set and clear uploadingMessageId
+        // 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);
+    }, []);
+
+    // Send message with file - fix to ensure images display without loading indicators
     const sendMessageWithFileImpl = useCallback(async () => {
         try {
-            // For file uploads, we still need loading state since we need to wait for the file upload
-            setLoading(true);
-
-            // Generate a unique post ID for the message
+            // Generate a unique ID for the message
             const postId = objectId();
 
-            // Set the message ID that should show the skeleton
-            setUploadingMessageId(postId);
+            // Set uploading state to true
+            setIsUploadingImage(true);
 
-            // Prepare notification data
-            const notificationData: IExpoNotificationData = {
-                url: config.INBOX_MESSEGE_PATH,
-                params: { channelId, hideTabBar: true },
-                screen: 'DialogMessages',
-                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
-            };
+            // Clear all loading states immediately
+            setLoading(false);
+            setUploadingMessageId(null);
 
             // Safety check for images
             if (!images || images.length === 0) {
+                setIsUploadingImage(false);
                 setLoading(false);
-                setUploadingMessageId(null);
                 return { error: 'No images available to upload' };
             }
 
-            // Format the images for upload if needed
-            const imagesToUpload = images.map((img) => {
-                // Ensure the image has all required properties
-                return {
-                    ...img,
-                    uri: img.uri || img.url, // Use either uri or url
-                    type: 'image/jpeg',
-                    name: img.fileName || `image_${Date.now()}.jpg`,
-                };
-            });
-
-            // Store current message text and clear inputs immediately for better UX
+            // Store current values before clearing
             const currentMessageText = messageText;
+            const currentImages = [...images];
+
+            // Prepare image URIs for optimistic UI update
+            const imageUris = currentImages.map((img) => img.uri || img.url);
+
+            // Clear UI immediately for next message
             setMessageText('');
+            setSelectedImage('');
+            setImages([]);
+
+            // Create a client message with all local image URIs
+            const clientMessage: IMessageProps = {
+                _id: postId,
+                text: currentMessageText || ' ',
+                createdAt: new Date(),
+                user: {
+                    _id: auth?.id || '',
+                    name: `${auth?.givenName || ''} ${auth?.familyName || ''}`,
+                    avatar: auth?.picture || '',
+                },
+                image: imageUris[0], // First image for compatibility with GiftedChat
+                images: imageUris, // All images for our custom renderer
+                sent: true,
+                received: true,
+                pending: false,
+                type: 'TEXT',
+                replies: { data: [], totalCount: 0 },
+                isShowThreadMessage: false,
+            };
 
-            // Create a unique file ID for the optimistic response
-            const fileId = objectId();
+            // Add to displayed messages immediately
+            setPendingUploads((prev) => ({ ...prev, [postId]: clientMessage }));
 
-            // Create minimal optimistic message with file
+            // Prepare notification data
+            const notificationData: IExpoNotificationData = {
+                url: config.INBOX_MESSEGE_PATH,
+                params: { channelId, hideTabBar: true },
+                screen: 'DialogMessages',
+                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
+            };
+
+            // Create optimistic message with minimal structure required for UI rendering
             const optimisticMessage = {
                 __typename: 'Post' as const,
                 id: postId,
@@ -447,12 +638,13 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                 author: {
                     __typename: 'UserAccount' as const,
                     id: auth?.id,
-                    picture: auth?.picture || '',
-                    givenName: auth?.givenName || '',
-                    familyName: auth?.familyName || '',
-                    email: auth?.email || '',
-                    username: auth?.username || '',
-                    alias: [] as string[],
+                    givenName: auth?.profile?.given_name || '',
+                    familyName: auth?.profile?.family_name || '',
+                    email: auth?.profile?.email || '',
+                    username: auth?.profile?.nickname || '',
+                    fullName: auth?.profile?.name || '',
+                    picture: auth?.profile?.picture || '',
+                    alias: [auth?.authUserId ?? ''] as string[],
                     tokens: [],
                 },
                 isDelivered: true,
@@ -472,22 +664,21 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                 props: {},
                 files: {
                     __typename: 'FilesInfo' as const,
-                    data: [
-                        {
-                            __typename: 'FileInfo' as const,
-                            id: fileId,
-                            url: selectedImage,
-                            name: imagesToUpload[0]?.name || 'image.jpg',
-                            extension: 'jpg',
-                            mimeType: 'image/jpeg',
-                            height: imagesToUpload[0]?.height || 0,
-                            width: imagesToUpload[0]?.width || 0,
-                            size: imagesToUpload[0]?.fileSize || 0,
-                            refType: 'Post' as FileRefType,
-                            ref: postId,
-                        },
-                    ],
-                    totalCount: 1,
+                    data: imageUris.map((uri, index) => ({
+                        __typename: 'FileInfo' as const,
+                        id: `temp-file-${index}-${postId}`,
+                        url: uri,
+                        name: `image-${index}.jpg`,
+                        extension: 'jpg',
+                        mimeType: 'image/jpeg',
+                        size: 0,
+                        height: 300,
+                        width: 300,
+                        channel: null,
+                        post: null,
+                        refType: FileRefType.Post,
+                    })),
+                    totalCount: imageUris.length,
                 },
                 replies: {
                     __typename: 'Messages' as const,
@@ -496,146 +687,178 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                 },
             };
 
-            // Upload the files
-            const uploadResponse = await startUpload({
-                file: imagesToUpload,
-                saveUploadedFile: {
-                    variables: { postId },
-                },
-                createUploadLink: {
-                    variables: { postId },
-                },
-            });
-
-            if (uploadResponse?.error) {
-                setLoading(false);
-                setUploadingMessageId(null);
-                return { error: String(uploadResponse.error) };
-            }
+            // Start background processing without affecting UI
+            setTimeout(async () => {
+                try {
+                    // Format images for upload
+                    const imagesToUpload = currentImages.map((img) => ({
+                        ...img,
+                        uri: img.uri || img.url,
+                        type: img.mimeType || 'image/jpeg',
+                        name: img.fileName || `image_${Date.now()}.jpg`,
+                    }));
+
+                    // Upload the files in background - pass the array of images
+                    const uploadResponse = await startUpload({
+                        file: imagesToUpload,
+                        saveUploadedFile: {
+                            variables: { postId },
+                        },
+                        createUploadLink: {
+                            variables: { postId },
+                        },
+                    });
+
+                    // If upload fails, show error notification
+                    if (uploadResponse?.error) {
+                        console.error('Upload error:', uploadResponse.error);
+
+                        // Format error message
+                        let errorMsg = 'Failed to upload image. Please try again.';
+                        if (__DEV__ && uploadResponse.error) {
+                            // In development, show actual error
+                            errorMsg =
+                                typeof uploadResponse.error === 'string'
+                                    ? uploadResponse.error
+                                    : uploadResponse.error.message || errorMsg;
+                        }
 
-            // Get uploaded file IDs
-            const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-            const files = uploadedFiles?.map((f: any) => f.id) ?? null;
+                        // Show error notification
+                        setNotificationType('error');
+                        setErrorMessage(errorMsg);
 
-            // Create a real version of the message with the actual file data
-            const realMessage = {
-                ...optimisticMessage,
-                files: {
-                    __typename: 'FilesInfo' as const,
-                    data: uploadedFiles.map((file) => ({
-                        __typename: 'FileInfo' as const,
-                        id: file.id,
-                        url: file.url,
-                        name: file.name,
-                        extension: file.extension,
-                        mimeType: file.mimeType,
-                        height: file.height,
-                        width: file.width,
-                        size: file.size,
-                        refType: file.refType,
-                        ref: postId,
-                    })),
-                    totalCount: uploadedFiles.length,
-                },
-            };
+                        // Store error in state
+                        setUploadErrors((prev) => ({ ...prev, [postId]: errorMsg }));
 
-            // Send the message with the uploaded files
-            const response = await sendMsg({
-                variables: {
-                    postId,
-                    channelId,
-                    content: currentMessageText || ' ', // Use a space if no text
-                    files,
-                    notificationParams: notificationData,
-                },
-                optimisticResponse: {
-                    __typename: 'Mutation',
-                    sendMessage: realMessage, // Use the message with real file data
-                },
-                update: (cache, { data }) => {
-                    if (data?.sendMessage) {
-                        try {
-                            // Read the existing messages from the cache
-                            const existingData = cache.readQuery<{
-                                messages: {
-                                    __typename: string;
-                                    messagesRefId?: string;
-                                    data: any[];
-                                    totalCount: number;
-                                };
-                            }>({
-                                query: MessagesDocument,
-                                variables: {
-                                    channelId: channelId?.toString(),
-                                    parentId: null,
-                                    limit: MESSAGES_PER_PAGE,
-                                    skip: 0,
-                                },
-                            });
-
-                            // If we don't have data yet in the cache, don't try to update
-                            if (!existingData) return;
-
-                            // Ensure the message has files data
-                            const messageWithFiles = {
-                                ...data.sendMessage,
-                                files: data.sendMessage.files || {
-                                    __typename: 'FilesInfo',
-                                    data: uploadedFiles.map((file) => ({
-                                        __typename: 'FileInfo',
-                                        id: file.id,
-                                        url: file.url,
-                                        name: file.name,
-                                        extension: file.extension,
-                                        mimeType: file.mimeType,
-                                        height: file.height,
-                                        width: file.width,
-                                        size: file.size,
-                                        refType: file.refType,
-                                        ref: postId,
-                                    })),
-                                    totalCount: uploadedFiles.length,
-                                },
-                            };
-
-                            // Let the type policy handle the merging
-                            cache.writeQuery({
-                                query: MessagesDocument,
-                                variables: {
-                                    channelId: channelId?.toString(),
-                                    parentId: null,
-                                    limit: MESSAGES_PER_PAGE,
-                                    skip: 0,
-                                },
-                                data: {
-                                    messages: {
-                                        ...existingData.messages,
-                                        data: [messageWithFiles, ...existingData.messages.data],
-                                        totalCount: (existingData.messages.totalCount || 0) + 1,
-                                    },
-                                },
-                            });
+                        // Remove the message from UI
+                        removeMessageFromUI(postId);
+                        setIsUploadingImage(false);
+                        setLoading(false);
+                        return;
+                    }
 
-                            // Clear the images after successful send
-                            setSelectedImage('');
-                            setImages([]);
-                        } catch (error) {
-                            console.error('Error updating cache:', error);
-                        }
+                    // Get uploaded file info
+                    const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+                    const fileIds = uploadedFiles?.map((f: any) => f.id) ?? null;
+
+                    // Send the message with uploaded files
+                    if (fileIds?.length > 0) {
+                        await sendMsg({
+                            variables: {
+                                postId,
+                                channelId,
+                                content: currentMessageText || ' ',
+                                files: fileIds,
+                                notificationParams: notificationData,
+                            },
+                            optimisticResponse: {
+                                __typename: 'Mutation',
+                                sendMessage: optimisticMessage,
+                            },
+                            update: (cache, { data }) => {
+                                if (!data?.sendMessage) {
+                                    setIsUploadingImage(false);
+                                    setLoading(false);
+                                    return;
+                                }
+                                try {
+                                    // Let Apollo type policies handle the cache update
+                                    cache.writeQuery({
+                                        query: MESSAGES_DOCUMENT,
+                                        variables: {
+                                            channelId: channelId?.toString(),
+                                            parentId: null,
+                                            limit: MESSAGES_PER_PAGE,
+                                            skip: 0,
+                                        },
+                                        data: {
+                                            messages: {
+                                                __typename: 'Messages',
+                                                messagesRefId: channelId,
+                                                data: [data.sendMessage],
+                                                totalCount: 1, // Just one message
+                                            },
+                                        },
+                                    });
+
+                                    // Check if the server response has the actual image
+                                    const serverMessage = data.sendMessage;
+                                    const hasServerImage = serverMessage?.files?.data?.some((file) => file.url);
+
+                                    if (hasServerImage) {
+                                        // Now that server has the image, we can remove client version
+                                        removeMessageFromUI(postId);
+                                    }
+
+                                    setIsUploadingImage(false);
+                                    setLoading(false);
+                                } catch (error) {
+                                    console.error('Cache update error:', error);
+
+                                    // Format error for notification
+                                    let errorMsg = 'Failed to update message.';
+                                    if (__DEV__ && error) {
+                                        // In development, show actual error
+                                        errorMsg = error.message
+                                            ? error.message.replace('[ApolloError: ', '').replace(']', '')
+                                            : 'Cache update failed';
+                                    }
+
+                                    setNotificationType('error');
+                                    setErrorMessage(errorMsg);
+                                    setIsUploadingImage(false);
+                                    setLoading(false);
+                                }
+                            },
+                        });
+                    } else {
+                        setIsUploadingImage(false);
+                        setLoading(false);
+                    }
+                } catch (error) {
+                    console.error('Background process error:', error);
+
+                    // Format error for notification
+                    let errorMsg = 'Failed to send image. Please try again.';
+                    if (__DEV__ && error) {
+                        // In development, show actual error
+                        errorMsg = error.message
+                            ? error.message.replace('[ApolloError: ', '').replace(']', '')
+                            : 'Background process failed';
                     }
-                },
-            });
 
-            setLoading(false);
-            setUploadingMessageId(null);
-            return { message: response.data?.sendMessage };
+                    // Show error notification
+                    setNotificationType('error');
+                    setErrorMessage(errorMsg);
+                    removeMessageFromUI(postId);
+                    setIsUploadingImage(false);
+                    setLoading(false);
+                }
+            }, 0);
+
+            // Return success immediately - UI already updated
+            return { success: true };
         } catch (error) {
-            setLoading(false);
-            setUploadingMessageId(null);
+            console.error('Send message error:', error);
+
+            // Format error for notification
+            let errorMsg = 'Failed to process image. Please try again.';
+            if (__DEV__ && error) {
+                // In development, show actual error
+                errorMsg = error.message
+                    ? error.message.replace('[ApolloError: ', '').replace(']', '')
+                    : 'Image processing failed';
+            }
+
+            // Show error notification
+            setNotificationType('error');
+            setErrorMessage(errorMsg);
             setError(String(error));
+            setIsUploadingImage(false);
+            setLoading(false);
             return { error: String(error) };
         }
-    }, [channelId, messageText, images, selectedImage, startUpload, sendMsg, auth]);
+    }, [channelId, messageText, images, selectedImage, startUpload, sendMsg, auth, removeMessageFromUI]);
 
     // Create direct channel implementation
     const createDirectChannelImpl = useCallback(async () => {
@@ -647,6 +870,8 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                 !rest?.newChannelData?.userIds?.length
             ) {
                 setLoading(false);
+                setNotificationType('error');
+                setErrorMessage(__DEV__ ? 'Invalid channel data' : 'Unable to create conversation');
                 return { error: 'Invalid channel data' };
             }
 
@@ -664,6 +889,8 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
 
             if (!response?.data?.createDirectChannel?.id) {
                 setLoading(false);
+                setNotificationType('error');
+                setErrorMessage(__DEV__ ? 'Failed to create channel' : 'Unable to create conversation');
                 return { error: 'Failed to create channel' };
             }
 
@@ -696,7 +923,7 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                     email: auth?.email || '',
                     username: auth?.username || '',
                     alias: [] as string[],
-                    tokens: [],
+                    tokens: auth?.token ? [...auth?.token] : [],
                 },
                 isDelivered: true,
                 isRead: false,
@@ -737,30 +964,42 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                     sendMessage: optimisticMessage,
                 },
                 update: (cache, { data }) => {
-                    if (data?.sendMessage) {
-                        try {
-                            // For a new channel, we don't need to read existing data
-                            // Just write the new message to the cache
-                            cache.writeQuery({
-                                query: MessagesDocument,
-                                variables: {
-                                    channelId: newChannelId,
-                                    parentId: null,
-                                    limit: MESSAGES_PER_PAGE,
-                                    skip: 0,
-                                },
-                                data: {
-                                    messages: {
-                                        __typename: 'Messages',
-                                        messagesRefId: newChannelId,
-                                        data: [data.sendMessage],
-                                        totalCount: 1,
-                                    },
+                    if (!data?.sendMessage) return;
+
+                    try {
+                        // For a new channel, simply write the initial message to the cache
+                        // The type policies will handle it properly
+                        cache.writeQuery({
+                            query: MESSAGES_DOCUMENT,
+                            variables: {
+                                channelId: newChannelId,
+                                parentId: null,
+                                limit: MESSAGES_PER_PAGE,
+                                skip: 0,
+                            },
+                            data: {
+                                messages: {
+                                    __typename: 'Messages',
+                                    messagesRefId: newChannelId,
+                                    data: [data.sendMessage],
+                                    totalCount: 1,
                                 },
-                            });
-                        } catch (error) {
-                            console.error('Error updating cache:', error);
+                            },
+                        });
+                    } catch (error) {
+                        console.error('Error updating cache:', error);
+
+                        // Format error for notification
+                        let errorMsg = 'Failed to update message cache';
+                        if (__DEV__ && error) {
+                            // In development, show actual error
+                            errorMsg = error.message
+                                ? error.message.replace('[ApolloError: ', '').replace(']', '')
+                                : 'Cache update failed';
                         }
+
+                        setNotificationType('error');
+                        setErrorMessage(errorMsg);
                     }
                 },
             });
@@ -769,6 +1008,18 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
             return { channelId: newChannelId };
         } catch (error) {
             setLoading(false);
+
+            // Format error for notification
+            let errorMsg = 'Failed to create conversation';
+            if (__DEV__ && error) {
+                // In development, show actual error
+                errorMsg = error.message
+                    ? error.message.replace('[ApolloError: ', '').replace(']', '')
+                    : 'Channel creation failed';
+            }
+
+            setNotificationType('error');
+            setErrorMessage(errorMsg);
             setError(String(error));
             return { error: String(error) };
         }
@@ -799,72 +1050,93 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
         return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
     };
 
-    // Transform the message data for GiftedChat
+    // Modify the messageList function to ensure local images take precedence
     const messageList = useMemo(() => {
-        // Short-circuit if no messages to process
+        // Get pending upload messages as array
+        const pendingMessages = Object.values(pendingUploads);
+
+        // If we have no server messages, just return pending messages
         if (!channelMessages || channelMessages.length === 0) {
-            return [];
+            return pendingMessages;
         }
 
-        // Use a more efficient approach - pre-filter messages once
+        // Filter unique messages
         const filteredMessages = uniqBy(channelMessages, ({ id }) => id);
 
-        // Skip processing if no filtered messages
-        if (filteredMessages.length === 0) {
-            return [];
-        }
+        // Process server messages - skip any that have client versions
+        const serverMessages = orderBy(filteredMessages, ['createdAt'], ['desc'])
+            .map((msg) => {
+                const date = new Date(msg.createdAt);
+
+                // Skip messages that are in pendingUploads - client version takes precedence
+                if (pendingUploads[msg.id]) {
+                    return null;
+                }
+
+                // Extract image URLs from files data
+                let imageUrls: string[] = [];
+                let primaryImageUrl = null;
 
-        // Transform messages only once and return
-        return orderBy(filteredMessages, ['createdAt'], ['desc']).map((msg) => {
-            const date = new Date(msg.createdAt);
-
-            // Extract image URL from files data
-            let imageUrl = null;
-            if (msg.files && typeof msg.files === 'object') {
-                // Handle both cases where files might be directly present or via files.data
-                const filesData = msg.files.data || (Array.isArray(msg.files) ? msg.files : null);
-
-                if (filesData && filesData.length > 0) {
-                    const fileData = filesData[0];
-                    // Make sure we have valid file data with a URL
-                    if (fileData && typeof fileData === 'object' && fileData.url) {
-                        imageUrl = fileData.url;
+                if (msg.files && typeof msg.files === 'object') {
+                    const filesData = msg.files.data || (Array.isArray(msg.files) ? msg.files : null);
+
+                    if (filesData && filesData.length > 0) {
+                        // Collect all image URLs
+                        imageUrls = filesData
+                            .filter((fileData) => fileData && typeof fileData === 'object' && fileData.url)
+                            .map((fileData) => fileData.url);
+
+                        // Set primary image for GiftedChat compatibility
+                        if (imageUrls.length > 0) {
+                            primaryImageUrl = imageUrls[0];
+                        }
                     }
                 }
-            }
 
-            // Create message in a more direct way
-            return {
-                _id: msg.id,
-                text: msg.message,
-                createdAt: date,
-                user: {
-                    _id: msg.author?.id || '',
-                    name: `${msg.author?.givenName || ''} ${msg.author?.familyName || ''}`,
-                    avatar: msg.author?.picture || '',
-                },
-                image: imageUrl,
-                sent: msg?.isDelivered,
-                received: msg?.isRead,
-                type: msg?.type,
-                propsConfiguration: msg?.propsConfiguration,
-                replies: msg?.replies ?? [],
-                isShowThreadMessage,
-            };
-        });
-    }, [channelMessages, isShowThreadMessage]);
+                // Create formatted message
+                return {
+                    _id: msg.id,
+                    text: msg.message,
+                    createdAt: date,
+                    user: {
+                        _id: msg.author?.id || '',
+                        name: `${msg.author?.givenName || ''} ${msg.author?.familyName || ''}`,
+                        avatar: msg.author?.picture || '',
+                    },
+                    image: primaryImageUrl,
+                    images: imageUrls, // Store all images for custom rendering
+                    sent: msg?.isDelivered,
+                    received: msg?.isRead,
+                    type: msg?.type,
+                    propsConfiguration: msg?.propsConfiguration,
+                    replies: msg?.replies ?? [],
+                    isShowThreadMessage,
+                };
+            })
+            .filter(Boolean); // Remove null entries
+
+        // Pending messages take precedence (they have local images)
+        return [...pendingMessages, ...serverMessages];
+    }, [channelMessages, pendingUploads, isShowThreadMessage]);
 
     // Render the send button
     const renderSend = useCallback(
         (props) => {
+            // If action sheet is visible, don't show the default send button
+            // if (isActionSheetVisible) {
+            //     return null;
+            // }
+
             // Enable the send button if there's text OR we have images
             const hasContent = !!props.text || images?.length > 0;
             const canSend = (channelId || rest?.isCreateNewChannel) && hasContent;
+            // const isDisabled = !canSend || isUploadingImage || loading;
+            const isDisabled = !canSend;
 
             return (
                 <Send
                     {...props}
-                    disabled={!canSend}
+                    //disabled={isDisabled}
                     containerStyle={{
                         justifyContent: 'center',
                         alignItems: 'center',
@@ -879,15 +1151,107 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                         <MaterialCommunityIcons
                             name="send-circle"
                             size={32}
-                            color={canSend ? colors.blue[500] : colors.gray[400]}
+                            color={isDisabled ? colors.gray[400] : colors.blue[500]}
                         />
                     </View>
                 </Send>
             );
         },
-        [channelId, images, rest?.isCreateNewChannel],
+        [channelId, images, rest?.isCreateNewChannel, isUploadingImage, loading, isActionSheetVisible],
+    );
+
+    // Add new handler to open the action sheet
+    const openExpandableInput = useCallback(() => {
+        console.log('Opening action sheet');
+        setActionSheetVisible(true);
+    }, []);
+
+    // Add a debug useEffect to log when visibility changes
+    useEffect(() => {
+        console.log('Action sheet visibility:', isActionSheetVisible);
+        // Set appropriate bottom margin when action sheet visibility changes
+        if (isActionSheetVisible) {
+            setBottomMargin(0);
+        }
+    }, [isActionSheetVisible]);
+
+    // Handle removing image from action sheet
+    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],
     );
 
+    // Add a new state to track when the action sheet updates text
+    const [textUpdatedInActionSheet, setTextUpdatedInActionSheet] = useState(false);
+
+    // Handle when the action sheet is closed
+    const handleActionSheetClose = useCallback(() => {
+        // Mark that we closed the sheet with potential text update
+        setTextUpdatedInActionSheet(true);
+        setActionSheetVisible(false);
+        // Reset bottom margin to 0 when closing the expandable input
+        setBottomMargin(0);
+    }, []);
+
+    // Handle sending from action sheet
+    const handleActionSheetSend = () => {
+        if (messageText.trim() || images.length > 0) {
+            // Set uploading state to show spinner
+            setIsUploadingImage(true);
+
+            // Create a message object in the format GiftedChat expects
+            const messages = [
+                {
+                    text: messageText,
+                    user: {
+                        _id: auth?.id || '',
+                    },
+                    createdAt: new Date(),
+                },
+            ];
+
+            // Use the existing handleSend function
+            handleSend(messages);
+
+            // Close the action sheet
+            setActionSheetVisible(false);
+        }
+    };
+
+    // Update this useEffect to more reliably handle text syncing when action sheet closes
+    useEffect(() => {
+        // If action sheet just closed, ensure main input gets updated text
+        if (!isActionSheetVisible && textUpdatedInActionSheet) {
+            console.log('Action sheet closed with text:', messageText);
+            // Reset the flag
+            setTextUpdatedInActionSheet(false);
+
+            // Force GiftedChat to recognize the text change by creating a new state update
+            const currentText = messageText;
+            setMessageText('');
+            setTimeout(() => {
+                setMessageText(currentText);
+            }, 50);
+        }
+    }, [isActionSheetVisible, textUpdatedInActionSheet]);
+
+    // Take a screenshot of the action sheet for debugging
+    useEffect(() => {
+        if (isActionSheetVisible && Platform.OS === 'ios') {
+            console.log('Action sheet is visible, should show the input and options');
+        }
+    }, [isActionSheetVisible]);
+
     // Handle send for messages
     const handleSend = useCallback(
         async (messages) => {
@@ -910,20 +1274,36 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
             // Update the message text state - now handled in send functions for better UX
             setMessageText(newMessageText);
 
+            // Set uploading state to show spinner
+            // setIsUploadingImage(true);
+            // setLoading(true);
+
             // Handle direct channel creation if needed
             if (rest?.isCreateNewChannel && !channelId) {
                 if (rest?.newChannelData?.type === RoomType?.Direct) {
-                    createDirectChannelImpl();
+                    await createDirectChannelImpl();
                 }
+                setIsUploadingImage(false);
+                setLoading(false);
                 return;
             }
 
             // Send message with or without image based on state
             if (hasImages) {
-                sendMessageWithFileImpl();
+                await sendMessageWithFileImpl();
             } else {
-                sendMessageImpl();
+                await sendMessageImpl();
             }
+
+            setIsUploadingImage(false);
+            setLoading(false);
+
+            // Focus the input field after sending
+            setTimeout(() => {
+                if (textInputRef.current) {
+                    textInputRef.current.focus();
+                }
+            }, 100);
         },
         [
             channelId,
@@ -943,6 +1323,11 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
             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 = '';
@@ -980,7 +1365,7 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
                                 <Button
                                     variant={'outline'}
                                     size={'sm'}
-                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`}
+                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}] mt-2 rounded-full `}
                                     onPress={() => action && params && navigation.navigate(action, params)}
                                 >
                                     <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
@@ -1126,28 +1511,42 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
         return (
             <Actions
                 {...props}
-                options={{
-                    ['Choose from Library']: onSelectImages,
-                    ['Cancel']: () => {}, // Add this option to make the sheet dismissible
-                }}
+                // 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
+                    <TouchableOpacity
+                        onPress={onSelectImages}
                         style={{
-                            width: 32,
-                            height: 32,
+                            width: 25,
+                            height: 25,
+                            borderRadius: 20,
+                            backgroundColor: '#f5f5f5',
                             alignItems: 'center',
                             justifyContent: 'center',
+                            marginRight: 8,
                         }}
                     >
-                        <Ionicons name="image" size={24} color={colors.blue[500]} />
-                    </Box>
+                        <MaterialIcons name="add" size={20} color="#888" />
+                    </TouchableOpacity>
+                    // <Box
+                    //     style={{
+                    //         width: 32,
+                    //         height: 32,
+                    //         alignItems: 'center',
+                    //         justifyContent: 'center',
+                    //     }}
+                    // >
+                    //     <Ionicons name="image" size={24} color={colors.blue[500]} />
+                    // </Box>
                 )}
                 containerStyle={{
                     alignItems: 'center',
                     justifyContent: 'center',
-                    marginLeft: 8,
+                    marginLeft: 20,
                     marginBottom: 0,
                 }}
             />
@@ -1156,114 +1555,77 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
 
     // 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
+                                source={{ uri: img.uri || img.url }}
+                                style={{ width: '100%', height: '100%' }}
+                                alt={`selected image ${index + 1}`}
+                            />
+                            {/* Cross button at top right */}
+                            <TouchableOpacity
+                                onPress={() => {
+                                    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();
+                                        }
+                                    }
+                                }}
                                 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>
-
-                    <View style={{ flex: 1 }}>
-                        <Text style={{ fontSize: 14, fontWeight: '400', color: colors.gray[800] }}>
-                            {images[0]?.fileName || 'image_' + new Date().getTime() + '.jpg'}
-                        </Text>
-                        <Text style={{ fontSize: 12, color: colors.gray[500], marginTop: 2 }}>
-                            {loading ? 'Preparing...' : 'Ready to send'}
-                        </Text>
-                    </View>
-
-                    <TouchableHighlight
-                        underlayColor={'rgba(0,0,0,0.1)'}
-                        onPress={() => {
-                            setSelectedImage('');
-                            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>
+                                <Ionicons name="close" size={16} color="white" />
+                            </TouchableOpacity>
+                        </View>
+                    ))}
+                </ScrollView>
+            </Box>
         );
-    }, [selectedImage, loading, images]);
+    }, [images]);
 
     const setImageViewerObject = (obj: any, v: boolean) => {
         setImageObject(obj);
@@ -1288,60 +1650,15 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
         );
     }, [imageObject]);
 
-    // Create a skeleton component for message bubbles with images
+    // Update the message rendering to show images instantly without loaders
     const renderMessage = useCallback(
         (props: any) => {
-            // Check if this message ID matches the uploading message ID
-            const isUploading = props.currentMessage._id === uploadingMessageId && loading;
-
-            if (isUploading && props.currentMessage.image) {
-                // Return a custom message skeleton during upload
-                return (
-                    <View
-                        style={{
-                            padding: 10,
-                            marginBottom: 10,
-                            marginRight: 10,
-                            alignSelf: 'flex-end',
-                            borderRadius: 15,
-                            backgroundColor: colors.gray[100],
-                            maxWidth: '80%',
-                        }}
-                    >
-                        {props.currentMessage.text && props.currentMessage.text.trim() !== '' && (
-                            <Box
-                                style={{
-                                    height: 15,
-                                    borderRadius: 4,
-                                    backgroundColor: colors.gray[200],
-                                    overflow: 'hidden',
-                                    marginBottom: 8,
-                                }}
-                            >
-                                <Skeleton variant="rounded" style={{ flex: 1 }} />
-                            </Box>
-                        )}
-                        <Box
-                            style={{
-                                height: 150,
-                                width: 150,
-                                borderRadius: 10,
-                                backgroundColor: colors.gray[200],
-                                overflow: 'hidden',
-                            }}
-                        >
-                            <Skeleton variant="rounded" style={{ flex: 1 }} />
-                        </Box>
-                    </View>
-                );
-            }
-
-            // Use memo to prevent unnecessary re-renders of each message
+            // For all messages, use the SlackMessage component directly
             return (
                 <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
             );
         },
-        [isShowImageViewer, uploadingMessageId, loading],
+        [isShowImageViewer],
     );
 
     let onScroll = false;
@@ -1378,27 +1695,134 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
         ) : null;
     }, [loadingOldMessages]);
 
-    // Add renderInputToolbar function
-    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',
-                }}
-            />
-        );
-    }, []);
+    // Add state for tracking input toolbar height
+    const [inputToolbarHeight, setInputToolbarHeight] = useState(30);
+
+    // Update renderInputToolbar to use a compact, single-row style for the input area, ensuring it does not expand to fill the screen. The plus button, text input, and send button should be in a rounded row, with selected images in a row below. Use minHeight/maxHeight and proper padding/margin to keep the toolbar compact.
+    const renderInputToolbar = useCallback(
+        (props) => (
+            <View style={{ backgroundColor: '#fff', paddingBottom: 4, paddingTop: 4 }}>
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        minHeight: 44,
+                        maxHeight: 56,
+                        backgroundColor: '#fff',
+                        borderRadius: 22,
+                        marginHorizontal: 8,
+                        paddingHorizontal: 8,
+                        borderTopWidth: 1,
+                        borderTopColor: '#e0e0e0',
+                    }}
+                >
+                    <TouchableOpacity
+                        onPress={onSelectImages}
+                        style={{
+                            width: 32,
+                            height: 32,
+                            borderRadius: 16,
+                            backgroundColor: '#fff',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            marginRight: 8,
+                        }}
+                    >
+                        <MaterialIcons name="add" size={24} color="#888" />
+                    </TouchableOpacity>
+                    <TextInput
+                        ref={textInputRef}
+                        style={{
+                            flex: 1,
+                            //minHeight: 36,
+                            maxHeight: 44,
+                            backgroundColor: 'transparent',
+                            color: '#444',
+                            paddingHorizontal: 8,
+                            paddingVertical: 0,
+                            alignSelf: 'center',
+                            textAlignVertical: 'center',
+                        }}
+                        placeholder="Jot something down"
+                        placeholderTextColor={colors.gray[400]}
+                        multiline
+                        value={messageText}
+                        onChangeText={setMessageText}
+                    />
+                    <TouchableOpacity
+                        onPress={() => handleSend([{ text: messageText }])}
+                        // disabled={(!messageText.trim() && images.length === 0) || isUploadingImage || loading}
+                        disabled={false}
+                        style={{
+                            marginLeft: 8,
+                            // opacity: (!messageText.trim() && images.length === 0) || isUploadingImage || loading ? 0.5 : 1,
+                            opacity: !messageText.trim() && images.length === 0 ? 0.5 : 1,
+                        }}
+                    >
+                        <MaterialCommunityIcons
+                            name="send-circle"
+                            size={32}
+                            color={!messageText.trim() && images.length === 0 ? colors.gray[400] : colors.blue[500]}
+                            // color={
+                            //     (!messageText.trim() && images.length === 0) || isUploadingImage || loading
+                            //         ? colors.gray[400]
+                            //         : colors.blue[500]
+                            // }
+                        />
+                    </TouchableOpacity>
+                </View>
+                {/* Selected Images Row */}
+                {images && images.length > 0 && (
+                    <ScrollView
+                        horizontal
+                        showsHorizontalScrollIndicator={false}
+                        style={{ marginTop: 4, marginLeft: 8 }}
+                    >
+                        {images.map((img, index) => (
+                            <View
+                                key={`image-preview-${index}`}
+                                style={{
+                                    width: 48,
+                                    height: 48,
+                                    marginRight: 8,
+                                    borderRadius: 6,
+                                    overflow: 'hidden',
+                                    position: 'relative',
+                                    backgroundColor: colors.gray[200],
+                                }}
+                            >
+                                <Image
+                                    source={{ uri: img.uri || img.url }}
+                                    style={{ width: '100%', height: '100%' }}
+                                    alt={`selected image ${index + 1}`}
+                                />
+                                <TouchableOpacity
+                                    onPress={() => {
+                                        handleRemoveImage(index);
+                                        // handleRemoveImage already focuses input if needed
+                                    }}
+                                    style={{
+                                        position: 'absolute',
+                                        top: 2,
+                                        right: 2,
+                                        backgroundColor: 'rgba(0,0,0,0.6)',
+                                        borderRadius: 10,
+                                        width: 20,
+                                        height: 20,
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }}
+                                >
+                                    <Ionicons name="close" size={14} color="white" />
+                                </TouchableOpacity>
+                            </View>
+                        ))}
+                    </ScrollView>
+                )}
+            </View>
+        ),
+        [onSelectImages, messageText, images, isUploadingImage, loading, handleSend, handleRemoveImage],
+    );
 
     // Create a memoized ImageViewerModal component
     const imageViewerModal = useMemo(
@@ -1408,34 +1832,20 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
         [isShowImageViewer, modalContent],
     );
 
-    // Create a memoized subscription handler component
-    const subscriptionHandler = useMemo(
-        () => (
-            <SubscriptionHandler
-                channelId={channelId?.toString()}
-                subscribeToNewMessages={() =>
-                    subscribeToMore({
-                        document: CHAT_MESSAGE_ADDED,
-                        variables: {
-                            channelId: channelId?.toString(),
-                        },
-                        // Let type policy handle the merge
-                    })
-                }
-            />
-        ),
-        [channelId, subscribeToMore, auth?.id],
-    );
-
     // Create a memoized renderChatFooter function
     const renderChatFooter = useCallback(() => {
         return (
             <>
                 {imageViewerModal}
-                {subscriptionHandler}
+                <SubscriptionHandler
+                    subscribeToMore={subscribe}
+                    document={CHAT_MESSAGE_ADDED}
+                    variables={{ channelId: channelId?.toString() }}
+                    updateQuery={undefined}
+                />
             </>
         );
-    }, [imageViewerModal, subscriptionHandler]);
+    }, [imageViewerModal, subscribe]);
 
     // Add optimized listViewProps to reduce re-renders and improve list performance
     const listViewProps = useMemo(
@@ -1478,113 +1888,143 @@ const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowTh
 
     // Return optimized component with performance improvements
     return (
-        <View
-            style={{
-                flex: 1,
-                backgroundColor: 'white',
-                position: 'relative',
-            }}
+        <KeyboardAvoidingView
+            style={{ flex: 1, justifyContent: 'flex-end' }}
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
         >
-            {messageLoading && <Spinner color={'#3b82f6'} />}
-
-            {/* Render the image preview directly in the container so it's properly positioned */}
-            {selectedImage ? renderAccessory() : null}
-
-            <GiftedChat
-                ref={messageRootListRef}
-                wrapInSafeArea={true}
-                renderLoading={() => <Spinner color={'#3b82f6'} />}
-                messages={messageList}
-                listViewProps={{
-                    ...listViewProps,
-                    contentContainerStyle: {
-                        paddingBottom: selectedImage ? 90 : 0, // Add padding at the bottom when image is selected
-                    },
-                }}
-                onSend={handleSend}
-                text={messageText || ' '}
-                onInputTextChanged={(text) => setMessageText(text)}
-                renderFooter={() => (loading && !images.length ? <Spinner color={'#3b82f6'} /> : null)}
-                scrollToBottom
-                user={{
-                    _id: auth?.id || '',
-                }}
-                isTyping={false} // Setting to false to reduce animations
-                alwaysShowSend={true} // Always show send button regardless of text content
-                renderSend={renderSend}
-                renderMessageText={renderMessageText}
-                renderInputToolbar={renderInputToolbar}
-                minInputToolbarHeight={50}
-                renderActions={channelId && renderActions}
-                renderMessage={renderMessage}
-                renderChatFooter={renderChatFooter}
-                renderLoadEarlier={renderLoadEarlier}
-                loadEarlier={totalCount > channelMessages.length}
-                isLoadingEarlier={loadingOldMessages}
-                bottomOffset={Platform.OS === 'ios' ? (selectedImage ? 90 : 10) : 0} // Adjust bottom offset based on image preview
-                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],
-                }}
-                minComposerHeight={36}
-                maxComposerHeight={100}
-                isKeyboardInternallyHandled={true}
-                placeholder="Type a message..."
-                lightboxProps={{
-                    underlayColor: 'transparent',
-                    springConfig: { tension: 90000, friction: 90000 },
-                    disabled: true,
+            <View
+                style={{
+                    flex: 1,
+                    backgroundColor: 'white',
+                    position: 'relative',
+                    marginBottom: images.length > 0 ? 5 : bottomMargin,
                 }}
-                infiniteScroll={false} // Disable automatic loading
-            />
-        </View>
+            >
+                {errorMessage ? (
+                    <ErrorNotification
+                        message={errorMessage}
+                        onClose={() => setErrorMessage('')}
+                        type={notificationType}
+                    />
+                ) : null}
+
+                {messageLoading && <Spinner color={'#3b82f6'} />}
+                <GiftedChatInboxComponent
+                    ref={messageRootListRef}
+                    errorMessage={errorMessage}
+                    images={images}
+                    onSelectImages={onSelectImages}
+                    onRemoveImage={handleRemoveImage}
+                    selectedImage={selectedImage}
+                    setSelectedImage={setSelectedImage}
+                    isUploadingImage={isUploadingImage}
+                    loading={loading}
+                    wrapInSafeArea={true}
+                    renderLoading={() => <Spinner color={'#3b82f6'} />}
+                    messages={messageList}
+                    renderAvatar={null}
+                    showUserAvatar={false}
+                    listViewProps={{
+                        ...listViewProps,
+                        contentContainerStyle: {
+                            paddingBottom: inputToolbarHeight,
+                        },
+                    }}
+                    onSend={handleSend}
+                    text={messageText || ' '}
+                    onInputTextChanged={(text) => {
+                        setMessageText(text);
+                    }}
+                    renderFooter={() => (isUploadingImage ? <Spinner color={'#3b82f6'} /> : null)}
+                    scrollToBottom
+                    user={{
+                        _id: auth?.id || '',
+                    }}
+                    renderSend={renderSend}
+                    renderMessageText={renderMessageText}
+                    renderMessage={renderMessage}
+                    renderChatFooter={renderChatFooter}
+                    renderLoadEarlier={renderLoadEarlier}
+                    loadEarlier={totalCount > channelMessages.length}
+                    isLoadingEarlier={loadingOldMessages}
+                    placeholder="Jot something down"
+                    infiniteScroll={true}
+                    // renderChatEmpty={() => (
+                    //     <><Text>Empty</Text>
+                    //         {!loading && 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={messageRootListRef}
+                    wrapInSafeArea={true}
+                    renderLoading={() => <Spinner color={'#3b82f6'} />}
+                    messages={messageList}
+                    renderAvatar={null}
+                    showUserAvatar={false}
+                    listViewProps={{
+                        ...listViewProps,
+                        contentContainerStyle: {
+                            paddingBottom: inputToolbarHeight,
+                        },
+                    }}
+                    onSend={handleSend}
+                    text={messageText || ' '}
+                    onInputTextChanged={(text) => {
+                        setMessageText(text);
+                    }}
+                    renderFooter={() => (isUploadingImage ? <Spinner color={'#3b82f6'} /> : null)}
+                    scrollToBottom
+                    user={{
+                        _id: auth?.id || '',
+                    }}
+                    isTyping={false}
+                    alwaysShowSend={true}
+                    renderSend={renderSend}
+                    renderMessageText={renderMessageText}
+                    renderInputToolbar={renderInputToolbar}
+                    // renderComposer={renderComposer}
+                    // minInputToolbarHeight={isActionSheetVisible ? 0 : 56}
+                    minInputToolbarHeight={inputToolbarHeight}
+                    renderActions={null}
+                    renderMessage={renderMessage}
+                    renderChatFooter={renderChatFooter}
+                    renderLoadEarlier={renderLoadEarlier}
+                    loadEarlier={totalCount > channelMessages.length}
+                    isLoadingEarlier={loadingOldMessages}
+                    bottomOffset={0}
+                    isKeyboardInternallyHandled={false}
+                    textInputProps={{
+                        multiline: true,
+                        returnKeyType: 'default',
+                        enablesReturnKeyAutomatically: true,
+                        placeholderTextColor: colors.gray[400],
+                    }}
+                    minComposerHeight={36}
+                    maxComposerHeight={100}
+                    placeholder="Jot something down"
+                    lightboxProps={{
+                        underlayColor: 'transparent',
+                        springConfig: { tension: 90000, friction: 90000 },
+                        disabled: true,
+                    }}
+                    infiniteScroll={false}
+                    renderAccessory={selectedImage ? renderAccessory : null}
+                /> */}
+            </View>
+        </KeyboardAvoidingView>
     );
 };
 
-const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: ISubscriptionHandlerProps) => {
-    // Store the channelId in a ref to track changes
-    const channelIdRef = useRef(channelId);
-
-    useEffect(() => {
-        // Don't set up subscription if there's no channel ID
-        if (!channelId) {
-            return;
-        }
-
-        // Call the subscribe function and store the unsubscribe function
-        const unsubscribe = subscribeToNewMessages();
-
-        // Update the ref with the current channelId
-        channelIdRef.current = channelId;
-
-        // Return cleanup function
-        return () => {
-            if (unsubscribe && typeof unsubscribe === 'function') {
-                unsubscribe();
-            }
-        };
-    }, [channelId, subscribeToNewMessages]);
-
-    return null;
-};
-
 // Export with React.memo to prevent unnecessary re-renders
 export const ConversationView = React.memo(ConversationViewComponent, (prevProps, nextProps) => {
     // Only re-render if these critical props change