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

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

@@ -11,25 +11,46 @@ import {
     Image,
     Spinner,
     Text,
+    Skeleton,
+    ScrollView,
+    Toast,
+    ToastTitle,
+    ToastDescription,
+    useToast,
+    ToastAlert,
+    VStack,
+    Divider,
+    Center,
 } from '@admin-layout/gluestack-ui-mobile';
-import { Platform, TouchableHighlight } 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 { Actions, GiftedChat, IMessage, MessageText, Send } from 'react-native-gifted-chat';
-import { PreDefinedRole, RoomType, IExpoNotificationData, IFileInfo } from 'common';
+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,
-} from 'common/lib/generated/generated.js';
+    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';
@@ -37,6 +58,22 @@ import { format, isToday, isYesterday } from 'date-fns';
 import { ImageViewerModal, SlackMessage } from '../components/SlackMessageContainer';
 import CachedImage from '../components/CachedImage';
 import { config } from '../config';
+import colors from 'tailwindcss/colors';
+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 {
+    url?: string;
+    fileName?: string;
+    mimeType?: string;
+}
 
 const {
     MESSAGES_PER_PAGE,
@@ -64,6 +101,7 @@ interface IMessageProps extends IMessage {
     propsConfiguration?: any;
     replies?: any;
     isShowThreadMessage?: boolean;
+    images?: string[]; // Add support for multiple images
 }
 
 export interface AlertMessageAttachmentsInterface {
@@ -76,257 +114,518 @@ export interface AlertMessageAttachmentsInterface {
     };
 }
 
-const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMessage, ...rest }: any) => {
-    const [channelToTop, setChannelToTop] = useState(0);
-    const [channelMessages, setChannelMessages] = useState<any>([]);
-    const auth: any = useSelector(userSelector);
-    const [totalCount, setTotalCount] = useState<any>(0);
-    const [selectedImage, setImage] = useState<string>('');
-    const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
-    const [channelId, setChannelId] = useState<any>(rest?.isCreateNewChannel ? null : ChannelId);
-    const [loadingOldMessages, setLoadingOldMessages] = useState<boolean>(false);
-    const navigation = useNavigation<any>();
-    const [files, setFiles] = useState<File[]>([]);
-    const [images, setImages] = useState<ImagePicker.ImagePickerAsset[]>([]);
-    const [msg, setMsg] = useState<string>('');
+// Fix for the optimistic response types
+type OptimisticPropsConfig = {
+    __typename: 'MachineConfiguration';
+    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 [loading, setLoading] = useState(false);
-    const [loadEarlierMsg, setLoadEarlierMsg] = useState(false);
-    const [imageLoading, setImageLoading] = useState(false);
-    const [expoTokens, setExpoTokens] = useState<any[]>([]);
+    const [loadingOldMessages, setLoadingOldMessages] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [selectedImage, setSelectedImage] = useState<string>('');
+    const [images, setImages] = useState<any[]>([]);
     const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
     const [imageObject, setImageObject] = useState<any>({});
-    const [skip, setSkip] = useState(0);
+    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 isFocused = useIsFocused();
+    const textInputRef = useRef<any>(null); // Add new ref for the text input
+    const isMounted = useRef(true);
+    const fetchOldDebounceRef = useRef(false);
 
-    const [addDirectChannel, { loading: addDirectChannaleLoading }] = useAddDirectChannelMutation();
+    // Navigation and auth
+    const auth: any = useSelector(userSelector, shallowEqual);
+    const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+    const navigation = useNavigation<any>();
+    const isFocused = useIsFocused();
 
+    // Apollo mutations
+    const [addDirectChannel] = useAddDirectChannel();
     const { startUpload } = useUploadFilesNative();
+    const [sendMsg] = useSendChannelMessage();
+    const [sendExpoNotification] = useSendExpoNotification();
 
-    const [sendMsg] = useSendMessagesMutation();
-
-    const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+    // Add skip state for pagination
+    const [skip, setSkip] = useState(0);
 
+    // Apollo query for messages
     const {
         data,
         loading: messageLoading,
+        error: inboxError,
         refetch,
-        fetchMore: fetchMoreMessages,
-        subscribeToMore,
-    }: any = useMessagesQuery({
-        variables: {
+        subscribe,
+    } = useInboxMessages({
+        useQueryHook: useChannelMessagesQuery,
+        queryVariables: {
             channelId: channelId?.toString(),
             parentId: null,
             limit: MESSAGES_PER_PAGE,
-            skip: skip,
+            skip: skip, // Use skip state for pagination
+            orgName: params?.orgName,
         },
-        skip: !channelId,
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        refetchWritePolicy: 'merge',
+        subscriptionDocument: CHAT_MESSAGE_ADDED,
+        subscriptionVariables: { channelId: channelId?.toString() },
+        updateQuery: undefined, // Provide custom updateQuery if needed
+        onError: (err) => setError(String(err)),
     });
 
-    // const {
-    //     data: channelsDetail,
-    //     loading: channelLoading,
-    //     refetch: refetchChannelDetail,
-    // } = useViewChannelDetailQuery({
-    //     variables: {
-    //         id: channelId?.toString(),
-    //     },
-    // });
-    // const { data: users } = useGetAllUsersQuery();
-
-    React.useEffect(() => {
+    // Extract messages from the query data
+    const channelMessages = useMemo(() => {
+        return (data?.messages?.data as any[]) || [];
+    }, [data?.messages?.data]);
+
+    // Get total message count
+    const totalCount = useMemo(() => {
+        return data?.messages?.totalCount || 0;
+    }, [data?.messages?.totalCount]);
+
+    // Clear messages when component unmounts
+    useEffect(() => {
         return () => {
-            setChannelMessages([]);
+            isMounted.current = false;
         };
     }, []);
 
+    // Update channelId from props or navigation params
+    useEffect(() => {
+        const currentChannelId = initialChannelId || currentRoute?.params?.channelId;
+        if (currentChannelId) {
+            setChannelId(currentChannelId);
+        }
+    }, [initialChannelId, currentRoute]);
+
+    // Focus/unfocus behavior
     useFocusEffect(
         React.useCallback(() => {
-            // Do something when the screen is focused
-            setSkip(0);
-            //  refetchChannelDetail({ id: channelId?.toString() });
             if (channelId) {
-                refetch({
-                    channelId: channelId?.toString(),
-                    parentId: null,
-                    limit: MESSAGES_PER_PAGE,
-                    skip: 0,
-                }).then(({ data }) => {
-                    if (!data?.messages) {
-                        return;
-                    }
-                    const { data: messages, totalCount }: any = data.messages;
-                    setTotalCount(totalCount);
-                    setChannelMessages(messages);
-                });
+                refetch();
             }
-            return () => {
-                // Do something when the screen is unfocused
-                // Useful for cleanup functions
-                setChannelId(null);
-                setTotalCount(0);
-                setSkip(0);
-            };
-        }, [channelId, isFocused]),
+        }, [isFocused, refetch]),
     );
 
-    React.useEffect(() => {
-        const currentChannelId = ChannelId || currentRoute?.params?.channelId;
-        setChannelId(currentChannelId);
-    }, [ChannelId, currentRoute]);
+    // When fetching more messages, update skip
+    const fetchMoreMessagesImpl = useCallback(async () => {
+        try {
+            setLoadingOldMessages(true);
+            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, refetch]);
 
-    React.useEffect(() => {
-        if (selectedImage) setImageLoading(false);
-    }, [selectedImage]);
+    // Send message function
+    const sendMessageImpl = useCallback(async () => {
+        try {
+            // Store the current message text and clear input immediately for better UX
+            const currentMessageText = messageText;
+            setMessageText('');
 
-    useEffect(() => {
-        if (data?.messages?.data) {
-            const { data: messages, totalCount: messeageTotalCount } = data.messages;
-            console.log('messeageTotalCount', messeageTotalCount, ' totalCount=', totalCount);
+            const notificationData: IExpoNotificationData = {
+                url: config.INBOX_MESSEGE_PATH,
+                params: { channelId, hideTabBar: true },
+                screen: 'DialogMessages',
+                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
+            };
 
-            if (
-                (messages && messages.length > 0 && messeageTotalCount > totalCount) ||
-                (messages && messages.length > 0 && (loadingOldMessages || channelMessages.length === 0))
-            ) {
-                setChannelMessages((oldMessages: any) => uniqBy([...messages, ...oldMessages], ({ id }) => id));
-                setTotalCount(messeageTotalCount);
+            // Create optimistic message with minimal structure required for UI rendering
+            const messageId = objectId();
+            const optimisticMessage = {
+                __typename: 'Post' as const,
+                id: messageId,
+                message: currentMessageText,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                author: {
+                    __typename: 'UserAccount' as const,
+                    id: auth?.id,
+                    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,
+                isRead: false,
+                type: 'TEXT' as PostTypeEnum,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: channelId,
+                },
+                // Required fields that Apollo expects in the cache
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    id: null,
+                    resource: '' as any,
+                    contents: null,
+                    keys: null,
+                    target: null,
+                    overrides: null,
+                },
+                props: {},
+                files: {
+                    __typename: 'FilesInfo' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+                replies: {
+                    __typename: 'Messages' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+            };
+
+            const response = await sendMsg({
+                variables: {
+                    channelId,
+                    content: currentMessageText,
+                    notificationParams: notificationData,
+                },
+                optimisticResponse: {
+                    __typename: 'Mutation',
+                    sendMessage: optimisticMessage,
+                },
+                // Let the type policies handle the cache update automatically
+                update: (cache, { data }) => {
+                    // 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: 'Messages',
+                                    messagesRefId: channelId,
+                                    data: [data.sendMessage],
+                                    totalCount: 1, // Just send the count for this single message
+                                },
+                            },
+                        });
+                    } 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';
             }
 
-            if (loadingOldMessages && channelMessages) setLoadingOldMessages(false);
+            setNotificationType('error');
+            setErrorMessage(errorMsg);
+            setError(String(error));
+            return { error: String(error) };
         }
-    }, [data, loadingOldMessages, channelMessages, totalCount]);
+    }, [channelId, messageText, sendMsg, auth]);
 
-    const onFetchOld = useCallback(async () => {
-        if (totalCount > channelMessages.length && !loadingOldMessages) {
-            setLoadEarlierMsg(true);
-            try {
-                const response = await fetchMoreMessages({
-                    variables: {
-                        channelId: channelId?.toString(),
-                        parentId: null,
-                        skip: channelMessages.length,
-                    },
+    // Image selection handler
+    const onSelectImages = async () => {
+        setLoading(true);
+
+        try {
+            let imageSource = await ImagePicker.launchImageLibraryAsync({
+                mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                allowsEditing: false,
+                aspect: [4, 3],
+                quality: 0.8,
+                base64: true,
+                exif: false,
+                allowsMultipleSelection: true, // Enable multiple selection
+            });
+
+            if (!imageSource?.canceled) {
+                // Get all selected assets
+                const selectedAssets = imageSource?.assets || [];
+                if (selectedAssets.length === 0) {
+                    setLoading(false);
+                    return;
+                }
+
+                // Process all selected images
+                const newImages = selectedAssets.map((selectedAsset) => {
+                    // Create a base64 image string for preview
+                    const base64Data = selectedAsset.base64;
+                    const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : selectedAsset.uri;
+
+                    // Format the asset for upload service requirements
+                    const asset: ExtendedImagePickerAsset = {
+                        ...selectedAsset,
+                        url: selectedAsset.uri,
+                        fileName: selectedAsset.fileName || `image_${Date.now()}.jpg`,
+                        mimeType: 'image/jpeg',
+                    };
+
+                    return asset;
                 });
-                if (response?.data) {
-                    setSkip(channelMessages.length);
-                    setLoadEarlierMsg(false);
-                    setLoadingOldMessages(true);
+
+                // 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);
                 }
-            } catch (error: any) {
-                setLoadEarlierMsg(false);
-            }
 
-            // ?.then((res: any) => {
-            //     setLoadingOldMessages(true);
-            // });
+                // Add new images to existing ones
+                setImages((currentImages) => [...currentImages, ...newImages]);
+
+                // Show action sheet if it's not visible
+                if (!isActionSheetVisible) {
+                    setActionSheetVisible(true);
+                }
+            } else {
+                setLoading(false);
+            }
+        } catch (error) {
+            setLoading(false);
         }
-    }, [totalCount, channelMessages]);
+    };
 
-    // const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
-    //     return contentOffset.y <= 100; // 100px from top
-    // };
+    // 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>>({});
 
-    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
-        const paddingToTop = 60;
-        return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
-    };
+    // Add new state variable to track image upload status
+    const [isUploadingImage, setIsUploadingImage] = useState(false);
 
-    const dataURLtoFile = (dataurl: any, filename: any) => {
-        var arr = dataurl.split(','),
-            mime = arr[0].match(/:(.*?);/)[1],
-            bstr = atob(arr[1]),
-            n = bstr.length,
-            u8arr = new Uint8Array(n);
-        while (n--) {
-            u8arr[n] = bstr.charCodeAt(n);
+    // Ensure loader is hidden when all images are removed
+    useEffect(() => {
+        if (images.length === 0) {
+            setIsUploadingImage(false);
         }
-        return new File([u8arr], filename, { type: mime });
-    };
+    }, [images]);
 
-    const onSelectImages = async () => {
-        setImageLoading(true);
-        let imageSource: any = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ImagePicker.MediaTypeOptions.Images,
-            allowsEditing: true,
-            aspect: [4, 3],
-            quality: 1,
-            base64: true,
+    // Add 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;
         });
-        // if (!imageSource.cancelled) {
-        //     const image = 'data:image/jpeg;base64,' + imageSource?.base64;
-        //     setImage(image);
-        //     const file = dataURLtoFile(image, 'inputImage.jpg');
-        //     setFiles((files) => files.concat(file));
-        //     setImages((images) => images.concat(imageSource as ImagePicker.ImageInfo));
-        // }
-        // if (imageSource.cancelled) setLoading(false);
-
-        if (!imageSource.canceled) {
-            const image = 'data:image/jpeg;base64,' + imageSource?.assets[0]?.base64;
-            setImage(image);
-            const file = dataURLtoFile(image, 'inputImage.jpg');
-            setFiles((files) => files.concat(file));
-            setImages((images) => images.concat(imageSource?.assets[0] as ImagePicker.ImagePickerAsset));
-        }
 
-        if (imageSource.canceled) setLoading(false);
-    };
+        // Also remove any error state
+        setUploadErrors((prev) => {
+            const newErrors = { ...prev };
+            delete newErrors[messageId];
+            return newErrors;
+        });
 
-    const createDirectChannel = useCallback(
-        (msg: string) => {
-            if (
-                rest?.isCreateNewChannel &&
-                rest?.newChannelData?.type === RoomType?.Direct &&
-                rest?.newChannelData?.userIds?.length > 0
-            ) {
-                addDirectChannel({
-                    variables: {
-                        receiver: [...(rest?.newChannelData?.userIds ?? [])],
-                        displayName: 'DIRECT CHANNEL',
-                    },
-                })
-                    ?.then(async (res) => {
-                        if (res?.data?.createDirectChannel?.id) {
-                            setChannelId(res?.data?.createDirectChannel?.id);
-                            const notificationData: IExpoNotificationData = {
-                                url: config.INBOX_MESSEGE_PATH,
-                                params: { channelId: res?.data?.createDirectChannel?.id, hideTabBar: true },
-                                screen: 'DialogMessages',
-                                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
-                            };
-                            setLoading(true);
-                            await sendMsg({
-                                variables: {
-                                    channelId: res?.data?.createDirectChannel?.id,
-                                    content: msg,
-                                    notificationParams: notificationData,
-                                },
-                                update: (cache, { data, errors }: any) => {
-                                    if (!data || errors) {
-                                        setLoading(false);
-                                        return;
-                                    }
-                                    setChannelToTop(channelToTop + 1);
-                                    setLoading(false);
-                                    setMsg('');
-                                },
-                            });
-                        }
-                    })
-                    ?.catch((e: any) => console.log('error', JSON.stringify(e)));
+        // 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 {
+            // Generate a unique ID for the message
+            const postId = objectId();
+
+            // Set uploading state to true
+            setIsUploadingImage(true);
+
+            // Clear all loading states immediately
+            setLoading(false);
+            setUploadingMessageId(null);
+
+            // Safety check for images
+            if (!images || images.length === 0) {
+                setIsUploadingImage(false);
+                setLoading(false);
+                return { error: 'No images available to upload' };
             }
-        },
-        [rest],
-    );
 
-    const handleSend = useCallback(
-        async (message: string) => {
-            if (!channelId) return;
-            if (!message && message != ' ' && images.length == 0) return;
+            // 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,
+            };
 
+            // Add to displayed messages immediately
+            setPendingUploads((prev) => ({ ...prev, [postId]: clientMessage }));
+
+            // Prepare notification data
             const notificationData: IExpoNotificationData = {
                 url: config.INBOX_MESSEGE_PATH,
                 params: { channelId, hideTabBar: true },
@@ -334,366 +633,1017 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
                 other: { sound: Platform.OS === 'android' ? undefined : 'default' },
             };
 
-            if (images && images.length > 0) {
-                const postId = objectId();
+            // Create optimistic message with minimal structure required for UI rendering
+            const optimisticMessage = {
+                __typename: 'Post' as const,
+                id: postId,
+                message: currentMessageText || ' ',
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                author: {
+                    __typename: 'UserAccount' as const,
+                    id: auth?.id,
+                    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,
+                isRead: false,
+                type: 'TEXT' as PostTypeEnum,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: channelId,
+                },
+                // Required fields that Apollo expects in the cache
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    id: null,
+                    resource: '' as any,
+                    contents: null,
+                    keys: null,
+                    target: null,
+                    overrides: null,
+                },
+                props: {},
+                files: {
+                    __typename: 'FilesInfo' as const,
+                    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,
+                    data: [],
+                    totalCount: 0,
+                },
+            };
 
-                setLoading(true);
-                const uploadResponse = await startUpload({
-                    file: images,
-                    saveUploadedFile: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                    createUploadLink: {
-                        variables: {
-                            postId,
-                        },
-                    },
-                });
-                if (uploadResponse?.error) setLoading(false);
-                const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
-
-                if (uploadResponse.data) {
-                    setImage('');
-                    setFiles([]);
-                    setImages([]);
-                    //setLoading(false);
-                    const files = uploadedFiles?.map((f: any) => f.id) ?? null;
-                    await sendMsg({
-                        variables: {
-                            postId,
-                            channelId,
-                            content: message,
-                            files,
-                            notificationParams: notificationData,
+            // 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 },
                         },
-                        update: (cache, { data, errors }: any) => {
-                            if (!data || errors) {
-                                setLoading(false);
-                                return;
-                            }
-                            //Temporary fix.....//
-                            const newMessage: any = data?.sendMessage;
-                            setChannelMessages((oldMessages: any) =>
-                                uniqBy([...oldMessages, newMessage], ({ id }) => id),
-                            );
-                            setTotalCount((t) => t + 1);
-                            //Temporary fix.....//
-
-                            setChannelToTop(channelToTop + 1);
-                            setLoading(false);
-                            setMsg('');
+                        createUploadLink: {
+                            variables: { postId },
                         },
                     });
-                }
-            } else {
-                setLoading(true);
-                await sendMsg({
-                    variables: {
-                        channelId,
-                        content: message,
-                        notificationParams: notificationData,
-                    },
-                    update: (cache, { data, errors }: any) => {
-                        if (!data || errors) {
-                            setLoading(false);
-                            return;
+
+                    // 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;
                         }
-                        //Temporary fix.....//
-                        const newMessage: any = data?.sendMessage;
-                        setChannelMessages((oldMessages: any) => uniqBy([...oldMessages, newMessage], ({ id }) => id));
-                        setTotalCount((t) => t + 1);
-                        //Temporary fix.....//
 
-                        setChannelToTop(channelToTop + 1);
+                        // Show error notification
+                        setNotificationType('error');
+                        setErrorMessage(errorMsg);
+
+                        // Store error in state
+                        setUploadErrors((prev) => ({ ...prev, [postId]: errorMsg }));
+
+                        // Remove the message from UI
+                        removeMessageFromUI(postId);
+                        setIsUploadingImage(false);
                         setLoading(false);
-                        setMsg('');
-                    },
-                });
+                        return;
+                    }
+
+                    // 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';
+                    }
+
+                    // 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) {
+            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';
             }
-        },
-        [setChannelMessages, channelId, images, channelToTop, expoTokens],
-    );
 
+            // 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, removeMessageFromUI]);
+
+    // Create direct channel implementation
+    const createDirectChannelImpl = useCallback(async () => {
+        try {
+            setLoading(true);
+            if (
+                !rest?.isCreateNewChannel ||
+                rest?.newChannelData?.type !== RoomType?.Direct ||
+                !rest?.newChannelData?.userIds?.length
+            ) {
+                setLoading(false);
+                setNotificationType('error');
+                setErrorMessage(__DEV__ ? 'Invalid channel data' : 'Unable to create conversation');
+                return { error: 'Invalid channel data' };
+            }
+
+            // Store current message text
+            const currentMessageText = messageText;
+            // Clear message text immediately for better UX
+            setMessageText('');
+
+            const response = await addDirectChannel({
+                variables: {
+                    receiver: [...(rest?.newChannelData?.userIds ?? [])],
+                    displayName: 'DIRECT CHANNEL',
+                },
+            });
+
+            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' };
+            }
+
+            const newChannelId = response.data.createDirectChannel.id;
+            setChannelId(newChannelId);
+
+            const notificationData: IExpoNotificationData = {
+                url: config.INBOX_MESSEGE_PATH,
+                params: { channelId: newChannelId, hideTabBar: true },
+                screen: 'DialogMessages',
+                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
+            };
+
+            // Create unique message ID for optimistic response
+            const messageId = objectId();
+
+            // Create minimal optimistic message
+            const optimisticMessage = {
+                __typename: 'Post' as const,
+                id: messageId,
+                message: currentMessageText,
+                createdAt: new Date().toISOString(),
+                updatedAt: new Date().toISOString(),
+                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[],
+                    tokens: auth?.token ? [...auth?.token] : [],
+                },
+                isDelivered: true,
+                isRead: false,
+                type: 'TEXT' as PostTypeEnum,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: newChannelId,
+                },
+                // Required fields that Apollo expects in the cache
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    id: null,
+                    resource: '' as any,
+                    contents: null,
+                    keys: null,
+                    target: null,
+                    overrides: null,
+                },
+                props: {},
+                files: {
+                    __typename: 'FilesInfo' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+                replies: {
+                    __typename: 'Messages' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+            };
+
+            // Send message in the new channel
+            await sendMsg({
+                variables: {
+                    channelId: newChannelId,
+                    content: currentMessageText,
+                    notificationParams: notificationData,
+                },
+                optimisticResponse: {
+                    __typename: 'Mutation',
+                    sendMessage: optimisticMessage,
+                },
+                update: (cache, { data }) => {
+                    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);
+
+                        // 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);
+                    }
+                },
+            });
+
+            setLoading(false);
+            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) };
+        }
+    }, [rest, messageText, addDirectChannel, sendMsg, auth]);
+
+    // Optimize onFetchOld by adding debounce logic
+    const onFetchOld = useCallback(() => {
+        // Prevent multiple rapid calls
+        if (fetchOldDebounceRef.current) return;
+
+        // Check if we need to fetch more messages
+        if (totalCount > channelMessages.length && !loadingOldMessages) {
+            // Set debounce
+            fetchOldDebounceRef.current = true;
+
+            // Fetch more messages
+            fetchMoreMessagesImpl();
+
+            // Clear debounce after a timeout
+            setTimeout(() => {
+                fetchOldDebounceRef.current = false;
+            }, 1000);
+        }
+    }, [totalCount, channelMessages.length, loadingOldMessages, fetchMoreMessagesImpl]);
+
+    const isCloseToTop = ({ layoutMeasurement, contentOffset, contentSize }) => {
+        const paddingToTop = 60;
+        return contentSize.height - layoutMeasurement.height - paddingToTop <= contentOffset.y;
+    };
+
+    // Modify the messageList function to ensure local images take precedence
     const messageList = useMemo(() => {
-        let currentDate = '';
-        let res: any = [];
-        const filteredMessages =
-            channelMessages && channelMessages?.length > 0 ? uniqBy([...channelMessages], ({ id }: any) => id) : [];
-        if (channelId && filteredMessages?.length > 0) {
-            orderBy(channelMessages, ['createdAt'], ['desc']).map((msg) => {
-                let message: IMessageProps = {
-                    _id: '',
-                    text: '',
-                    createdAt: 0,
+        // 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 pendingMessages;
+        }
+
+        // Filter unique messages
+        const filteredMessages = uniqBy(channelMessages, ({ id }) => id);
+
+        // 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;
+
+                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 formatted message
+                return {
+                    _id: msg.id,
+                    text: msg.message,
+                    createdAt: date,
                     user: {
-                        _id: '',
-                        name: '',
-                        avatar: '',
+                        _id: msg.author?.id || '',
+                        name: `${msg.author?.givenName || ''} ${msg.author?.familyName || ''}`,
+                        avatar: msg.author?.picture || '',
                     },
-                    type: '',
+                    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,
                 };
-                const date = new Date(msg.createdAt);
-                message._id = msg.id;
-                message.text = msg.message;
-                message.createdAt = date;
-                (message.user = {
-                    _id: msg.author.id,
-                    name: msg.author.givenName + ' ' + msg.author.familyName,
-                    avatar: msg.author?.picture,
-                }),
-                    (message.image = msg.files?.data[0]?.url),
-                    (message.sent = msg?.isDelivered),
-                    (message.received = msg?.isRead);
-                message.type = msg?.type;
-                message.propsConfiguration = msg?.propsConfiguration;
-                message.replies = msg?.replies ?? [];
-                message.isShowThreadMessage = isShowThreadMessage;
-                res.push(message);
-            });
+            })
+            .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={isDisabled}
+                    containerStyle={{
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: 40,
+                        width: 44,
+                        marginRight: 4,
+                        marginBottom: 0,
+                        marginLeft: 4,
+                    }}
+                >
+                    <View style={{ padding: 4 }}>
+                        <MaterialCommunityIcons
+                            name="send-circle"
+                            size={32}
+                            color={isDisabled ? colors.gray[400] : colors.blue[500]}
+                        />
+                    </View>
+                </Send>
+            );
+        },
+        [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);
         }
-        return res?.length > 0 ? uniqBy([...res], ({ _id }: any) => _id) : [];
-        //return res;
-    }, [channelMessages, channelId]);
+    }, [isActionSheetVisible]);
 
-    const renderSend = (props) => {
-        return (
-            <Send {...props} disabled={channelId || rest?.isCreateNewChannel ? false : true}>
-                <Box>
-                    <MaterialCommunityIcons
-                        name="send-circle"
-                        style={{ marginBottom: 5, marginRight: 5 }}
-                        size={32}
-                        color={channelId || rest?.isCreateNewChannel ? '#2e64e5' : '#b8b2b2'}
-                    />
-                </Box>
-            </Send>
-        );
+    // 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);
+        }
     };
 
-    const renderMessageText = (props: any) => {
-        const { currentMessage } = props;
-        const lastReply: any = currentMessage?.replies?.data?.length > 0 ? currentMessage?.replies?.data?.[0] : null;
-
-        if (currentMessage.type === 'ALERT') {
-            const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
-            let action: string = '';
-            let actionId: any = '';
-            let params: any = {};
-
-            if (attachment?.callToAction?.extraParams) {
-                const extraParams: any = attachment?.callToAction?.extraParams;
-                const route: any = extraParams?.route ?? null;
-                let path: any = null;
-                let param: any = null;
-                if (role && role == PreDefinedRole.Guest) {
-                    path = route?.guest?.name ? route?.guest?.name ?? null : null;
-                    param = route?.guest?.params ? route?.guest?.params ?? null : null;
-                } else if (role && role == PreDefinedRole.Owner) {
-                    path = route?.host?.name ? route?.host?.name ?? null : null;
-                    param = route?.host?.params ? route?.host?.params ?? null : null;
-                } else {
-                    path = route?.host?.name ? route?.host?.name ?? null : null;
-                    param = route?.host?.params ? route?.host?.params ?? null : null;
+    // 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) => {
+            // Extract message text from GiftedChat messages array
+            const newMessageText = messages && messages.length > 0 ? messages[0]?.text || ' ' : ' ';
+
+            // Check if we can send a message (channel exists or we're creating one)
+            if (!channelId && !rest?.isCreateNewChannel) {
+                return;
+            }
+
+            // Allow sending if we have text OR images (image-only messages are valid)
+            const hasText = !!newMessageText && newMessageText !== ' ';
+            const hasImages = images && images.length > 0;
+
+            if (!hasText && !hasImages) {
+                return;
+            }
+
+            // 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) {
+                    await createDirectChannelImpl();
                 }
+                setIsUploadingImage(false);
+                setLoading(false);
+                return;
+            }
 
-                action = path;
-                params = { ...param };
-            } else if (attachment?.callToAction?.link) {
-                action = CALL_TO_ACTION_PATH;
-                actionId = attachment?.callToAction?.link.split('/').pop();
-                params = { reservationId: actionId };
+            // Send message with or without image based on state
+            if (hasImages) {
+                await sendMessageWithFileImpl();
+            } else {
+                await sendMessageImpl();
             }
 
-            return (
-                <>
-                    {attachment?.callToAction && action ? (
-                        <Box bg={CALL_TO_ACTION_BOX_BGCOLOR} borderRadius={15} pb={'$2'}>
-                            <Button
-                                variant={'outline'}
-                                size={'sm'}
-                                borderColor={CALL_TO_ACTION_BUTTON_BORDERCOLOR}
-                                onPress={() => action && params && navigation.navigate(action, params)}
-                                // onPress={() => navigation.navigate(action, { reservationId: actionId })}
-                            >
-                                <ButtonText color={CALL_TO_ACTION_TEXT_COLOR}>
-                                    {attachment.callToAction.title}
-                                </ButtonText>
-                            </Button>
-                            <MessageText
-                                {...props}
-                                textStyle={{
-                                    left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 },
+            setIsUploadingImage(false);
+            setLoading(false);
+
+            // Focus the input field after sending
+            setTimeout(() => {
+                if (textInputRef.current) {
+                    textInputRef.current.focus();
+                }
+            }, 100);
+        },
+        [
+            channelId,
+            images,
+            rest?.isCreateNewChannel,
+            rest?.newChannelData?.type,
+            createDirectChannelImpl,
+            sendMessageWithFileImpl,
+            sendMessageImpl,
+        ],
+    );
+
+    // Render message text with customizations for alerts and replies
+    const renderMessageText = useCallback(
+        (props: any) => {
+            const { currentMessage } = props;
+            const lastReply: any =
+                currentMessage?.replies?.data?.length > 0 ? currentMessage?.replies?.data?.[0] : null;
+
+            // Do not render anything if the message text is empty or only whitespace
+            if (!currentMessage?.text || currentMessage.text.trim() === '') {
+                return null;
+            }
+
+            if (currentMessage.type === 'ALERT') {
+                const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
+                let action: string = '';
+                let actionId: any = '';
+                let params: any = {};
+
+                if (attachment?.callToAction?.extraParams) {
+                    const extraParams: any = attachment?.callToAction?.extraParams;
+                    const route: any = extraParams?.route ?? null;
+                    let path: any = null;
+                    let param: any = null;
+                    if (role && role == PreDefinedRole.Guest) {
+                        path = route?.guest?.name ? route?.guest?.name ?? null : null;
+                        param = route?.guest?.params ? route?.guest?.params ?? null : null;
+                    } else if (role && role == PreDefinedRole.Owner) {
+                        path = route?.host?.name ? route?.host?.name ?? null : null;
+                        param = route?.host?.params ? route?.host?.params ?? null : null;
+                    } else {
+                        path = route?.host?.name ? route?.host?.name ?? null : null;
+                        param = route?.host?.params ? route?.host?.params ?? null : null;
+                    }
+
+                    action = path;
+                    params = { ...param };
+                } else if (attachment?.callToAction?.link) {
+                    action = CALL_TO_ACTION_PATH;
+                    actionId = attachment?.callToAction?.link.split('/').pop();
+                    params = { reservationId: actionId };
+                }
+
+                return (
+                    <>
+                        {attachment?.callToAction && action ? (
+                            <Box className={`bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2`}>
+                                <MessageText
+                                    {...props}
+                                    containerStyle={{
+                                        left: { paddingLeft: 0, marginLeft: 0 },
+                                    }}
+                                    textStyle={{
+                                        left: { marginLeft: 0 },
+                                    }}
+                                />
+                                <Button
+                                    variant={'outline'}
+                                    size={'sm'}
+                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}] my-2 rounded-full `}
+                                    onPress={() => action && params && navigation.navigate(action, params)}
+                                >
+                                    <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
+                                        {attachment.callToAction.title}
+                                    </ButtonText>
+                                </Button>
+                            </Box>
+                        ) : (
+                            <TouchableHighlight
+                                underlayColor={'#c0c0c0'}
+                                style={{ width: '100%' }}
+                                onPress={() => {
+                                    if (currentMessage?.isShowThreadMessage)
+                                        navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                            channelId: channelId,
+                                            title: 'Message',
+                                            postParentId: currentMessage?._id,
+                                            isPostParentIdThread: true,
+                                        });
                                 }}
-                            />
-                        </Box>
-                    ) : (
-                        <TouchableHighlight
-                            underlayColor={'#c0c0c0'}
-                            style={{ width: '100%' }}
-                            onPress={() => {
-                                if (currentMessage?.isShowThreadMessage)
-                                    navigation.navigate(config.THREAD_MESSEGE_PATH, {
-                                        channelId: channelId,
-                                        title: 'Message',
-                                        postParentId: currentMessage?._id,
-                                        isPostParentIdThread: true,
-                                    });
-                            }}
-                        >
-                            <>
-                                <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
-                                {currentMessage?.replies?.data?.length > 0 && (
-                                    <HStack space={'sm'} px={'$1'} alignItems={'center'}>
-                                        <HStack>
-                                            {currentMessage?.replies?.data
-                                                ?.filter(
-                                                    (v: any, i: any, a: any) =>
-                                                        a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
-                                                )
-                                                ?.slice(0, 2)
-                                                ?.reverse()
-                                                ?.map((p: any, i: Number) => (
-                                                    <Avatar
-                                                        key={'conversations-view-key-' + i}
-                                                        bg={'transparent'}
-                                                        size={'sm'}
-                                                    >
-                                                        <AvatarFallbackText>
-                                                            {startCase(p?.author?.username?.charAt(0))}
-                                                        </AvatarFallbackText>
-                                                        <AvatarImage
-                                                            alt="user image"
-                                                            style={{
-                                                                borderRadius: 6,
-                                                                borderWidth: 2,
-                                                                borderColor: '#fff',
-                                                            }}
-                                                            source={{
-                                                                uri: p?.author?.picture,
-                                                            }}
-                                                        />
-                                                    </Avatar>
-                                                ))}
+                            >
+                                <>
+                                    <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                                    {currentMessage?.replies?.data?.length > 0 && (
+                                        <HStack space={'sm'} className="px-1 items-center">
+                                            <HStack>
+                                                {currentMessage?.replies?.data
+                                                    ?.filter(
+                                                        (v: any, i: any, a: any) =>
+                                                            a.findIndex((t: any) => t?.author?.id === v?.author?.id) ===
+                                                            i,
+                                                    )
+                                                    ?.slice(0, 2)
+                                                    ?.reverse()
+                                                    ?.map((p: any, i: Number) => (
+                                                        <Avatar
+                                                            key={'conversations-view-key-' + i}
+                                                            size={'sm'}
+                                                            className="bg-transparent"
+                                                        >
+                                                            <AvatarFallbackText>
+                                                                {startCase(p?.author?.username?.charAt(0))}
+                                                            </AvatarFallbackText>
+                                                            <AvatarImage
+                                                                alt="user image"
+                                                                style={{
+                                                                    borderRadius: 6,
+                                                                    borderWidth: 2,
+                                                                    borderColor: '#fff',
+                                                                }}
+                                                                source={{
+                                                                    uri: p?.author?.picture,
+                                                                }}
+                                                            />
+                                                        </Avatar>
+                                                    ))}
+                                            </HStack>
+                                            <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                                {currentMessage?.replies?.totalCount}{' '}
+                                                {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                            </Text>
+                                            <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                                {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                            </Text>
                                         </HStack>
-                                        <Text style={{ fontSize: 12 }} fontWeight={'$bold'} color={'$blue800'}>
-                                            {currentMessage?.replies?.totalCount}{' '}
-                                            {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
-                                        </Text>
-                                        <Text style={{ fontSize: 12 }} fontWeight={'$bold'} color={'$trueGray500'}>
-                                            {lastReply ? createdAtText(lastReply?.createdAt) : ''}
-                                        </Text>
-                                    </HStack>
-                                )}
-                            </>
-                        </TouchableHighlight>
-                    )}
-                    {/* <MessageText
-                        {...props}
-                        textStyle={{ left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 } }}
-                    /> */}
-                </>
-            );
-        } else {
-            return (
-                <TouchableHighlight
-                    underlayColor={'#c0c0c0'}
-                    style={{ width: '100%' }}
-                    onPress={() => {
-                        if (currentMessage?.isShowThreadMessage)
-                            navigation.navigate(config.THREAD_MESSEGE_PATH, {
-                                channelId: channelId,
-                                title: 'Message',
-                                postParentId: currentMessage?._id,
-                                isPostParentIdThread: true,
-                            });
-                    }}
-                >
-                    <>
-                        <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
-                        {currentMessage?.replies?.data?.length > 0 && (
-                            <HStack space={'sm'} px={'$1'} alignItems={'center'}>
-                                <HStack>
-                                    {currentMessage?.replies?.data
-                                        ?.filter(
-                                            (v: any, i: any, a: any) =>
-                                                a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
-                                        )
-                                        ?.slice(0, 2)
-                                        ?.reverse()
-                                        ?.map((p: any, i: Number) => (
-                                            <Avatar
-                                                key={'conversation-replies-key-' + i}
-                                                bg={'transparent'}
-                                                size={'sm'}
-                                            >
-                                                <AvatarFallbackText>
-                                                    {startCase(p?.author?.username?.charAt(0))}
-                                                </AvatarFallbackText>
-                                                <AvatarImage
-                                                    alt="user image"
-                                                    style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
-                                                    source={{
-                                                        uri: p?.author?.picture,
-                                                    }}
-                                                />
-                                            </Avatar>
-                                        ))}
-                                </HStack>
-                                <Text style={{ fontSize: 12 }} fontWeight={'$bold'} color={'$blue800'}>
-                                    {currentMessage?.replies?.totalCount}{' '}
-                                    {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
-                                </Text>
-                                <Text style={{ fontSize: 12 }} fontWeight={'$bold'} color={'$trueGray500'}>
-                                    {lastReply ? createdAtText(lastReply?.createdAt) : ''}
-                                </Text>
-                            </HStack>
+                                    )}
+                                </>
+                            </TouchableHighlight>
                         )}
                     </>
-                </TouchableHighlight>
-            );
-        }
-    };
+                );
+            } else {
+                return (
+                    <TouchableHighlight
+                        underlayColor={'#c0c0c0'}
+                        style={{ width: '100%' }}
+                        onPress={() => {
+                            if (currentMessage?.isShowThreadMessage)
+                                navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                    channelId: channelId,
+                                    title: 'Message',
+                                    postParentId: currentMessage?._id,
+                                    isPostParentIdThread: true,
+                                });
+                        }}
+                    >
+                        <>
+                            <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                            {currentMessage?.replies?.data?.length > 0 && (
+                                <HStack space={'sm'} className="px-1 items-center">
+                                    <HStack>
+                                        {currentMessage?.replies?.data
+                                            ?.filter(
+                                                (v: any, i: any, a: any) =>
+                                                    a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
+                                            )
+                                            ?.slice(0, 2)
+                                            ?.reverse()
+                                            ?.map((p: any, i: Number) => (
+                                                <Avatar
+                                                    key={'conversation-replies-key-' + i}
+                                                    className="bg-transparent"
+                                                    size={'sm'}
+                                                >
+                                                    <AvatarFallbackText>
+                                                        {startCase(p?.author?.username?.charAt(0))}
+                                                    </AvatarFallbackText>
+                                                    <AvatarImage
+                                                        alt="user image"
+                                                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                                        source={{
+                                                            uri: p?.author?.picture,
+                                                        }}
+                                                    />
+                                                </Avatar>
+                                            ))}
+                                    </HStack>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                        {currentMessage?.replies?.totalCount}{' '}
+                                        {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                    </Text>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                        {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                    </Text>
+                                </HStack>
+                            )}
+                        </>
+                    </TouchableHighlight>
+                );
+            }
+        },
+        [navigation, channelId, role],
+    );
 
+    // Render action buttons (including image upload)
     const renderActions = (props) => {
         return (
             <Actions
                 {...props}
-                icon={() => <Ionicons name={'image'} size={30} color={'black'} onPress={onSelectImages} />}
+                // options={{
+                //     ['Choose from Library']: onSelectImages,
+                //     ['Cancel']: () => {}, // Add this option to make the sheet dismissible
+                // }}
+                optionTintColor="#000000"
+                cancelButtonIndex={1} // Set the Cancel option as the cancel button
+                icon={() => (
+                    <TouchableOpacity
+                        onPress={onSelectImages}
+                        style={{
+                            width: 25,
+                            height: 25,
+                            borderRadius: 20,
+                            backgroundColor: '#f5f5f5',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            marginRight: 8,
+                        }}
+                    >
+                        <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: 20,
+                    marginBottom: 0,
+                }}
             />
         );
     };
 
-    const renderAccessory = (props) => {
+    // Create a more visible and reliable image preview with cancel button
+    const renderAccessory = useCallback(() => {
+        if (!images.length) return null;
         return (
-            <Box>
-                {selectedImage !== '' ? (
-                    <HStack alignItems={'center'}>
-                        <Image
-                            ml={'$3'}
-                            key={selectedImage}
-                            alt={'image'}
-                            source={{ uri: selectedImage }}
-                            size={'xs'}
-                        />
-                        <Button
-                            variant={'solid'}
-                            bg={'transparent'}
-                            //colorScheme={'secondary'}
-                            onPress={() => {
-                                setFiles([]);
-                                setImage('');
-                                setImages([]);
+            <Box style={{ position: 'relative', height: 70, backgroundColor: 'transparent', justifyContent: 'center' }}>
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    style={{
+                        flexDirection: 'row',
+                        paddingLeft: 15,
+                        paddingRight: 5,
+                    }}
+                    contentContainerStyle={{
+                        alignItems: 'center',
+                        height: '100%',
+                    }}
+                >
+                    {images.map((img, index) => (
+                        <View
+                            key={`image-preview-${index}`}
+                            style={{
+                                width: 40,
+                                height: 40,
+                                marginRight: 15,
+                                borderRadius: 4,
+                                backgroundColor: colors.gray[200],
+                                overflow: 'hidden',
+                                borderWidth: 1,
+                                borderColor: '#e0e0e0',
+                                position: 'relative',
+                                zIndex: 10,
                             }}
                         >
-                            <ButtonText color={'$black'}>Cancel</ButtonText>
-                        </Button>
-                    </HStack>
-                ) : null}
+                            <Image
+                                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: -1,
+                                    right: -1,
+                                    backgroundColor: 'rgba(0,0,0,0.6)',
+                                    borderRadius: 12,
+                                    width: 20,
+                                    height: 20,
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    zIndex: 9999,
+                                }}
+                            >
+                                <Ionicons name="close" size={16} color="white" />
+                            </TouchableOpacity>
+                        </View>
+                    ))}
+                </ScrollView>
             </Box>
         );
-    };
+    }, [images]);
 
     const setImageViewerObject = (obj: any, v: boolean) => {
         setImageObject(obj);
@@ -701,17 +1651,16 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
     };
 
     const modalContent = React.useMemo(() => {
-        if (!imageObject) return <></>;
+        if (!imageObject || !imageObject.image) return null;
         const { image, _id } = imageObject;
+
         return (
             <CachedImage
                 style={{ width: '100%', height: '100%' }}
                 resizeMode={'cover'}
-                // cacheKey={`${_id}-conversation-modal-image-key`}
-                cacheKey={`${_id}-slack-bubble-imageKey`}
+                cacheKey={`${_id}-modal-imageKey`}
                 source={{
                     uri: image,
-                    //headers: `Authorization: Bearer ${token}`,
                     expiresIn: 86400,
                 }}
                 alt={'image'}
@@ -719,24 +1668,10 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
         );
     }, [imageObject]);
 
+    // Update the message rendering to show images instantly without loaders
     const renderMessage = useCallback(
         (props: any) => {
-            // const {
-            //     currentMessage: { text: currText },
-            // } = props;
-
-            //let messageTextStyle: any;
-
-            // Make "pure emoji" messages much bigger than plain text.
-            // if (currText && emojiUtils.isPureEmojiString(currText)) {
-            //   messageTextStyle = {
-            //     fontSize: 28,
-            //     // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
-            //     lineHeight: Platform.OS === 'android' ? 34 : 30,
-            //   }
-            // }
-
-            // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
+            // For all messages, use the SlackMessage component directly
             return (
                 <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
             );
@@ -744,170 +1679,376 @@ const ConversationViewComponent = ({ channelId: ChannelId, role, isShowThreadMes
         [isShowImageViewer],
     );
 
-    // const renderMessage = (props: any) => {
-    //     // const {
-    //     //     currentMessage: { text: currText },
-    //     // } = props;
-
-    //     //let messageTextStyle: any;
-
-    //     // Make "pure emoji" messages much bigger than plain text.
-    //     // if (currText && emojiUtils.isPureEmojiString(currText)) {
-    //     //   messageTextStyle = {
-    //     //     fontSize: 28,
-    //     //     // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
-    //     //     lineHeight: Platform.OS === 'android' ? 34 : 30,
-    //     //   }
-    //     // }
-
-    //     // return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
-    //     return <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />;
-    // };
-
     let onScroll = false;
 
+    // Optimize onMomentumScrollBegin for better scroll performance
     const onMomentumScrollBegin = async ({ nativeEvent }: any) => {
+        // Set scroll state
         onScroll = true;
-        console.log('scroll top');
-        if (!loadingOldMessages && isCloseToTop(nativeEvent) && totalCount > channelMessages?.length) {
-            await onFetchOld();
+
+        // Use the debounced fetch function to prevent excessive calls
+        if (isCloseToTop(nativeEvent)) {
+            onFetchOld();
         }
     };
 
     const onEndReached = () => {
-        console.log('on end reached');
         if (!onScroll) return;
-        // load messages, show ActivityIndicator
         onScroll = false;
-        // setLoadingOldMessages(true);
     };
 
-    return (
-        <>
-            {loadEarlierMsg && <Spinner color={'$blue500'} />}
-
-            <GiftedChat
-                ref={messageRootListRef}
-                wrapInSafeArea={false}
-                renderLoading={() => <Spinner color={'$blue500'} />}
-                messages={messageList}
-                listViewProps={{
-                    onEndReached: onEndReached,
-                    onEndReachedThreshold: 0.5,
-                    onMomentumScrollBegin: onMomentumScrollBegin,
-                }}
-                // listViewProps={{
-                //     scrollEventThrottle: 400,
-                //     onScroll: ({ nativeEvent }) => { console.log('scroll')
-                //       if (!loadingOldMessages  && isCloseToTop(nativeEvent)) {
-                //         onFetchOld();
-                //       }
-                //     }
-                //   }}
-                onSend={(messages) =>
-                    rest?.isCreateNewChannel && !channelId
-                        ? rest?.newChannelData?.type === RoomType?.Direct
-                            ? createDirectChannel(messages[0]?.text ?? ' ')
-                            : null
-                        : channelId && handleSend(messages[0]?.text ?? ' ')
-                }
-                text={msg ? msg : ' '}
-                onInputTextChanged={(text) => setMsg(text)}
-                renderFooter={() =>
-                    loading ? <Spinner color={'$blue500'} /> : imageLoading ? <Spinner color={'$blue500'} /> : ''
-                }
-                scrollToBottom
-                user={{
-                    // _id: currentUser?.id || '',
-                    _id: auth?.id || '',
+    // Add a loader for when more messages are being loaded
+    const renderLoadEarlier = useCallback(() => {
+        return loadingOldMessages ? (
+            <View
+                style={{
+                    padding: 10,
+                    backgroundColor: 'rgba(255,255,255,0.8)',
+                    borderRadius: 10,
+                    marginTop: 10,
                 }}
-                isTyping={true}
-                alwaysShowSend={loading ? false : true}
-                //onLoadEarlier={onFetchOld}
-                //infiniteScroll={true}
-                renderSend={renderSend}
-                // loadEarlier={data?.messages?.totalCount > channelMessages.length}
-                //isLoadingEarlier={loadEarlierMsg}
-                //extraData={{ isLoadingEarlier: loadingOldMessages }}
-                // renderLoadEarlier={() =>
-                //     !loadEarlierMsg && (
-                //         <Center py={2}>
-                //             <Button
-                //                 onPress={() => onFetchOld()}
-                //                 variant={'outline'}
-                //                 _text={{ color: 'black', fontSize: 15, fontWeight: 'bold' }}
-                //             >
-                //                 Load earlier messages
-                //             </Button>
-                //         </Center>
-                //     )
-                // }
-                renderMessageText={renderMessageText}
-                minInputToolbarHeight={50}
-                renderActions={channelId && renderActions}
-                renderAccessory={renderAccessory}
-                renderMessage={renderMessage}
-                renderChatFooter={() => (
-                    <>
-                        <ImageViewerModal
-                            isVisible={isShowImageViewer}
-                            setVisible={setImageViewer}
-                            modalContent={modalContent}
-                        />
-                        <SubscriptionHandler
-                            channelId={channelId?.toString()}
-                            subscribeToNewMessages={() =>
-                                subscribeToMore({
-                                    document: CHAT_MESSAGE_ADDED,
-                                    variables: {
-                                        channelId: channelId?.toString(),
-                                    },
-                                    updateQuery: (prev, { subscriptionData }: any) => {
-                                        if (!subscriptionData.data) return prev;
-                                        setSkip(0);
-                                        const newMessage: any = subscriptionData?.data?.chatMessageAdded;
-                                        const previousData = prev?.messages?.data
-                                            ? [...prev.messages.data, newMessage]
-                                            : [];
-                                        const totalMsgCount = prev?.messages?.totalCount + 1;
-                                        setChannelMessages((oldMessages: any) =>
-                                            uniqBy([...oldMessages, newMessage], ({ id }) => id),
-                                        );
-                                        setTotalCount(totalMsgCount);
-                                        const merged = {
-                                            ...prev,
-                                            messages: {
-                                                ...prev?.messages,
-                                                data: [...(prev?.messages?.data ?? []), newMessage],
-                                                totalCount: totalMsgCount,
-                                            },
-                                        };
-                                        return merged;
-                                        // return Object.assign({}, prev, {
-                                        //     messages: {
-                                        //         data: [...prev.messages.data, newMessage],
-                                        //         totalCount: prev.messages.totalCount + 1,
-                                        //     },
-                                        // });
-                                    },
-                                })
-                            }
+            >
+                <Spinner size="small" color="#3b82f6" />
+            </View>
+        ) : null;
+    }, [loadingOldMessages]);
+
+    // 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>
                 )}
-                lightboxProps={{
-                    underlayColor: 'transparent',
-                    springConfig: { tension: 90000, friction: 90000 },
-                    disabled: true,
-                }}
-            />
-        </>
+            </View>
+        ),
+        [onSelectImages, messageText, images, isUploadingImage, loading, handleSend, handleRemoveImage],
     );
-};
 
-const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: ISubscriptionHandlerProps) => {
-    useEffect(() => subscribeToNewMessages(), [channelId]);
-    return <></>;
+    // Create a memoized ImageViewerModal component
+    const imageViewerModal = useMemo(
+        () => (
+            <ImageViewerModal isVisible={isShowImageViewer} setVisible={setImageViewer} modalContent={modalContent} />
+        ),
+        [isShowImageViewer, modalContent],
+    );
+
+    // Create a memoized renderChatFooter function
+    const renderChatFooter = useCallback(() => {
+        return (
+            <>
+                {imageViewerModal}
+                <SubscriptionHandler
+                    subscribeToMore={subscribe}
+                    document={CHAT_MESSAGE_ADDED}
+                    variables={{ channelId: channelId?.toString() }}
+                    updateQuery={undefined}
+                />
+            </>
+        );
+    }, [imageViewerModal, subscribe]);
+
+    // Add optimized listViewProps to reduce re-renders and improve list performance
+    const listViewProps = useMemo(
+        () => ({
+            onEndReached: onEndReached,
+            onEndReachedThreshold: 0.5,
+            onMomentumScrollBegin: onMomentumScrollBegin,
+            removeClippedSubviews: true, // Improve performance by unmounting components when not visible
+            initialNumToRender: 10, // Reduce initial render amount
+            maxToRenderPerBatch: 7, // Reduce number in each render batch
+            windowSize: 7, // Reduce the window size
+            updateCellsBatchingPeriod: 50, // Batch cell updates to improve scrolling
+            keyExtractor: (item) => item._id, // Add explicit key extractor
+        }),
+        [onEndReached, onMomentumScrollBegin],
+    );
+
+    // Debug helper function to inspect files in messages
+    const debugFileData = useCallback((message: any, prefix: string = 'Message') => {
+        if (__DEV__) {
+            console.log(
+                `${prefix} ID: ${message?.id}, ` +
+                    `Has files object: ${!!message?.files}, ` +
+                    `Files typename: ${message?.files?.__typename}, ` +
+                    `Files data exists: ${!!message?.files?.data}, ` +
+                    `Files count: ${message?.files?.data?.length || 0}`,
+            );
+
+            if (message?.files?.data && message?.files?.data?.length > 0) {
+                const file = message?.files?.data[0];
+                console.log(
+                    `File[0] ID: ${file?.id}, ` +
+                        `URL: ${file?.url?.substring(0, 30)}..., ` +
+                        `Name: ${file?.name}, ` +
+                        `Type: ${file?.mimeType}`,
+                );
+            }
+        }
+    }, []);
+
+    // Return optimized component with performance improvements
+    return (
+        <KeyboardAvoidingView
+            style={{ flex: 1, justifyContent: 'flex-end' }}
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
+        >
+            <View
+                style={{
+                    flex: 1,
+                    backgroundColor: 'white',
+                    position: 'relative',
+                    marginBottom: images.length > 0 ? 5 : bottomMargin,
+                }}
+            >
+                {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>
+    );
 };
 
-export const ConversationView = React.memo(ConversationViewComponent);
+// 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
+    return (
+        prevProps.channelId === nextProps.channelId &&
+        prevProps.role === nextProps.role &&
+        prevProps.isShowThreadMessage === nextProps.isShowThreadMessage
+    );
+});