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

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

@@ -0,0 +1,1467 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+    Avatar,
+    AvatarFallbackText,
+    AvatarImage,
+    Box,
+    Button,
+    ButtonText,
+    HStack,
+    Icon,
+    Image,
+    Spinner,
+    Text,
+    Skeleton,
+} from '@admin-layout/gluestack-ui-mobile';
+import { Platform, TouchableHighlight, SafeAreaView, View } from 'react-native';
+import { useFocusEffect, useIsFocused, useNavigation } from '@react-navigation/native';
+import { navigationRef } from '@common-stack/client-react';
+import { useSelector } from 'react-redux';
+import { orderBy, startCase, uniqBy } from 'lodash-es';
+import * as ImagePicker from 'expo-image-picker';
+import { encode as atob } from 'base-64';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { Actions, GiftedChat, IMessage, MessageText, Send, Composer, InputToolbar } from 'react-native-gifted-chat';
+import { PreDefinedRole, RoomType, IExpoNotificationData, IFileInfo, FileRefType, PostTypeEnum } from 'common';
+import {
+    OnChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
+    useMessagesQuery,
+    useSendExpoNotificationOnPostMutation,
+    useSendMessagesMutation,
+    useViewChannelDetailQuery,
+    useAddDirectChannelMutation,
+    MessagesDocument,
+} from 'common/graphql';
+import { useUploadFilesNative } from '@messenger-box/platform-client';
+import { objectId } from '@messenger-box/core';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+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 { v4 as uuidv4 } from 'uuid';
+
+// Define an extended interface for ImagePickerAsset with url property
+interface ExtendedImagePickerAsset extends ImagePicker.ImagePickerAsset {
+    url?: string;
+    fileName?: string;
+    mimeType?: string;
+}
+
+const {
+    MESSAGES_PER_PAGE,
+    CALL_TO_ACTION_BOX_BGCOLOR,
+    CALL_TO_ACTION_PATH,
+    CALL_TO_ACTION_BUTTON_BORDERCOLOR,
+    CALL_TO_ACTION_TEXT_COLOR,
+} = config;
+
+const createdAtText = (value: string) => {
+    if (!value) return '';
+    let date = new Date(value);
+    if (isToday(date)) return 'Today';
+    if (isYesterday(date)) return 'Yesterday';
+    return format(new Date(value), 'MMM dd, yyyy');
+};
+
+interface ISubscriptionHandlerProps {
+    subscribeToNewMessages: () => any;
+    channelId: string;
+}
+
+interface IMessageProps extends IMessage {
+    type: string;
+    propsConfiguration?: any;
+    replies?: any;
+    isShowThreadMessage?: boolean;
+}
+
+export interface AlertMessageAttachmentsInterface {
+    title: string;
+    isTitleHtml: boolean;
+    icon: string;
+    callToAction: {
+        title: string;
+        link: string;
+    };
+}
+
+// Fix for the optimistic response types
+type OptimisticPropsConfig = {
+    __typename: 'MachineConfiguration';
+    resource: string;
+};
+
+const ConversationViewComponent = ({ channelId: initialChannelId, role, isShowThreadMessage, ...rest }: any) => {
+    // Core state management using React hooks instead of XState
+    const [channelId, setChannelId] = useState<string | null>(initialChannelId || null);
+    const [messageText, setMessageText] = useState('');
+    const [skip, setSkip] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [loadingOldMessages, setLoadingOldMessages] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [selectedImage, setSelectedImage] = useState<string>('');
+    const [images, setImages] = useState<any[]>([]);
+    const [isShowImageViewer, setImageViewer] = useState<boolean>(false);
+    const [imageObject, setImageObject] = useState<any>({});
+
+    // Create refs for various operations
+    const messageRootListRef = useRef<any>(null);
+    const isMounted = useRef(true);
+    const fetchOldDebounceRef = useRef(false);
+
+    // Navigation and auth
+    const auth: any = useSelector(userSelector);
+    const currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+    const navigation = useNavigation<any>();
+    const isFocused = useIsFocused();
+
+    // Apollo mutations
+    const [addDirectChannel] = useAddDirectChannelMutation();
+    const { startUpload } = useUploadFilesNative();
+    const [sendMsg] = useSendMessagesMutation();
+    const [sendExpoNotificationOnPostMutation] = useSendExpoNotificationOnPostMutation();
+
+    // Apollo query for messages
+    const {
+        data,
+        loading: messageLoading,
+        refetch,
+        fetchMore: fetchMoreMessages,
+        subscribeToMore,
+    } = useMessagesQuery({
+        variables: {
+            channelId: channelId?.toString(),
+            parentId: null,
+            limit: MESSAGES_PER_PAGE,
+            skip: skip,
+        },
+        skip: !channelId,
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        refetchWritePolicy: 'merge',
+        notifyOnNetworkStatusChange: true,
+        onCompleted: (queryData) => {
+            // MESSAGE QUERY COMPLETED
+        },
+        onError: (error) => {
+            setError(String(error));
+        },
+    });
+
+    // Extract messages from the query data
+    const channelMessages = useMemo(() => {
+        return data?.messages?.data || [];
+    }, [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 () => {
+            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(() => {
+            if (channelId) {
+                // Refresh messages when screen comes into focus
+                refetch();
+            }
+            return () => {
+                // Nothing needed on unfocus
+            };
+        }, [channelId, isFocused, refetch]),
+    );
+
+    // Loading state for image selection
+    useEffect(() => {
+        if (selectedImage) {
+            setLoading(false);
+        }
+    }, [selectedImage]);
+
+    // Fetch more messages function
+    const fetchMoreMessagesImpl = useCallback(async () => {
+        try {
+            setLoadingOldMessages(true);
+            const response = await fetchMoreMessages({
+                variables: {
+                    channelId: channelId?.toString(),
+                    parentId: null,
+                    skip: channelMessages.length,
+                },
+                // updateQuery: (prev, { fetchMoreResult }) => {
+                //     if (!fetchMoreResult || !fetchMoreResult.messages) return prev;
+
+                //     // Create a new array of all messages deduped by ID
+                //     const combinedMessages = [...prev.messages.data, ...fetchMoreResult.messages.data].filter(
+                //         (message, index, self) => index === self.findIndex((m) => m.id === message.id),
+                //     );
+
+                //     return {
+                //         ...prev,
+                //         messages: {
+                //             ...prev.messages,
+                //             data: combinedMessages,
+                //             totalCount: fetchMoreResult.messages.totalCount,
+                //             __typename: prev.messages.__typename,
+                //         },
+                //     };
+                // },
+            });
+
+            setLoadingOldMessages(false);
+            if (!response?.data?.messages?.data) {
+                return { error: 'No messages returned' };
+            }
+
+            return { messages: response.data.messages.data };
+        } catch (error) {
+            setLoadingOldMessages(false);
+            setError(String(error));
+            return { error: String(error) };
+        }
+    }, [channelId, channelMessages.length, fetchMoreMessages]);
+
+    // Send message function
+    const sendMessageImpl = useCallback(async () => {
+        try {
+            // Store the current message text and clear input immediately for better UX
+            const currentMessageText = messageText;
+            setMessageText('');
+
+            const notificationData: IExpoNotificationData = {
+                url: config.INBOX_MESSEGE_PATH,
+                params: { channelId, hideTabBar: true },
+                screen: 'DialogMessages',
+                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
+            };
+
+            // Create optimistic message with consistent structure
+            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?.givenName || '',
+                    familyName: auth?.familyName || '',
+                    picture: auth?.picture || '',
+                    username: auth?.username || '',
+                    email: auth?.email || '',
+                    alias: [] as string[],
+                    tokens: [],
+                },
+                isDelivered: true,
+                isRead: false,
+                type: 'TEXT' as any,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: channelId,
+                },
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    resource: '' as any, // Cast to any to bypass the URI type check
+                },
+                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,
+                },
+            });
+
+            return { message: response.data?.sendMessage };
+        } catch (error) {
+            setLoading(false);
+            setError(String(error));
+            return { error: String(error) };
+        }
+    }, [channelId, messageText, sendMsg, auth]);
+
+    // Image selection handler
+    const onSelectImages = async () => {
+        setLoading(true);
+
+        try {
+            let imageSource = await ImagePicker.launchImageLibraryAsync({
+                mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                allowsEditing: true,
+                aspect: [4, 3],
+                quality: 0.8,
+                base64: true,
+                exif: false,
+            });
+
+            if (!imageSource?.canceled) {
+                // Get the asset
+                const selectedAsset = imageSource?.assets?.[0];
+                if (!selectedAsset) {
+                    setLoading(false);
+                    return;
+                }
+
+                // Create a base64 image string for preview
+                const base64Data = selectedAsset.base64;
+                const previewImage = base64Data ? `data:image/jpeg;base64,${base64Data}` : selectedAsset.uri;
+
+                // Format the asset for upload service requirements
+                const asset: ExtendedImagePickerAsset = {
+                    ...selectedAsset,
+                    url: selectedAsset.uri,
+                    fileName: selectedAsset.fileName || `image_${Date.now()}.jpg`,
+                    mimeType: 'image/jpeg',
+                };
+
+                // Update state with the new image
+                setSelectedImage(previewImage);
+                setImages([asset]);
+            } else {
+                setLoading(false);
+            }
+        } catch (error) {
+            setLoading(false);
+        }
+    };
+
+    // Add a state variable to track which message should show the skeleton
+    const [uploadingMessageId, setUploadingMessageId] = useState<string | null>(null);
+
+    // Send message with file function - update to set and clear uploadingMessageId
+    const sendMessageWithFileImpl = useCallback(async () => {
+        try {
+            // For file uploads, we still need loading state since we need to wait for the file upload
+            setLoading(true);
+
+            // Generate a unique post ID for the message
+            const postId = objectId();
+
+            // Set the message ID that should show the skeleton
+            setUploadingMessageId(postId);
+
+            // Prepare notification data
+            const notificationData: IExpoNotificationData = {
+                url: config.INBOX_MESSEGE_PATH,
+                params: { channelId, hideTabBar: true },
+                screen: 'DialogMessages',
+                other: { sound: Platform.OS === 'android' ? undefined : 'default' },
+            };
+
+            // Safety check for images
+            if (!images || images.length === 0) {
+                setLoading(false);
+                setUploadingMessageId(null);
+                return { error: 'No images available to upload' };
+            }
+
+            // Format the images for upload if needed
+            const imagesToUpload = images.map((img) => {
+                // Ensure the image has all required properties
+                return {
+                    ...img,
+                    uri: img.uri || img.url, // Use either uri or url
+                    type: 'image/jpeg',
+                    name: img.fileName || `image_${Date.now()}.jpg`,
+                };
+            });
+
+            // Store current message text and clear inputs immediately for better UX
+            const currentMessageText = messageText;
+            setMessageText('');
+
+            // Create file info for optimistic response
+            const optimisticFileInfo = {
+                __typename: 'FileInfo' as const,
+                id: objectId(),
+                url: selectedImage,
+                name: imagesToUpload[0]?.name || 'image.jpg',
+                extension: 'jpg',
+                mimeType: 'image/jpeg',
+                size: 0,
+                refType: FileRefType.Post,
+                height: imagesToUpload[0]?.height || 0,
+                width: imagesToUpload[0]?.width || 0,
+            };
+
+            // Create optimistic message with file
+            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?.givenName || '',
+                    familyName: auth?.familyName || '',
+                    picture: auth?.picture || '',
+                    username: auth?.username || '',
+                    email: auth?.email || '',
+                    alias: [] as string[],
+                    tokens: [],
+                },
+                isDelivered: true,
+                isRead: false,
+                type: 'TEXT' as any,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: channelId,
+                },
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    resource: '' as any, // Cast to any to bypass the URI type check
+                },
+                props: {},
+                files: {
+                    __typename: 'FilesInfo' as const,
+                    data: [
+                        {
+                            __typename: 'FileInfo' as const,
+                            id: objectId(),
+                            url: selectedImage,
+                            name: imagesToUpload[0]?.name || 'image.jpg',
+                            extension: 'jpg',
+                            mimeType: 'image/jpeg',
+                            size: 0,
+                            refType: FileRefType.Post,
+                            height: imagesToUpload[0]?.height || 0,
+                            width: imagesToUpload[0]?.width || 0,
+                        },
+                    ] as any,
+                    totalCount: 1,
+                },
+                replies: {
+                    __typename: 'Messages' as const,
+                    data: [],
+                    totalCount: 0,
+                },
+            };
+
+            // Upload the files
+            const uploadResponse = await startUpload({
+                file: imagesToUpload,
+                saveUploadedFile: {
+                    variables: { postId },
+                },
+                createUploadLink: {
+                    variables: { postId },
+                },
+            });
+
+            if (uploadResponse?.error) {
+                setLoading(false);
+                setUploadingMessageId(null);
+                return { error: String(uploadResponse.error) };
+            }
+
+            // Get uploaded file IDs
+            const uploadedFiles = uploadResponse.data as unknown as IFileInfo[];
+            const files = uploadedFiles?.map((f: any) => f.id) ?? null;
+
+            // Send the message with the uploaded files
+            const response = await sendMsg({
+                variables: {
+                    postId,
+                    channelId,
+                    content: currentMessageText || ' ', // Use a space if no text
+                    files,
+                    notificationParams: notificationData,
+                },
+                optimisticResponse: {
+                    __typename: 'Mutation',
+                    sendMessage: optimisticMessage,
+                },
+            });
+
+            if (response?.data?.sendMessage) {
+                // Clear the images after successful send
+                setSelectedImage('');
+                setImages([]);
+            }
+
+            setLoading(false);
+            setUploadingMessageId(null);
+            return { message: response.data?.sendMessage };
+        } catch (error) {
+            setLoading(false);
+            setUploadingMessageId(null);
+            setError(String(error));
+            return { error: String(error) };
+        }
+    }, [channelId, messageText, images, selectedImage, startUpload, sendMsg, auth]);
+
+    // 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);
+                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);
+                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();
+
+            // Fix the createDirectChannelImpl optimisticMessage with all required fields
+            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?.givenName || '',
+                    familyName: auth?.familyName || '',
+                    picture: auth?.picture || '',
+                    username: auth?.username || '',
+                    email: auth?.email || '',
+                    alias: [] as string[],
+                    tokens: [],
+                },
+                isDelivered: true,
+                isRead: false,
+                type: 'TEXT' as any,
+                parentId: null,
+                fromServer: false,
+                channel: {
+                    __typename: 'Channel' as const,
+                    id: newChannelId,
+                },
+                propsConfiguration: {
+                    __typename: 'MachineConfiguration' as const,
+                    resource: '' as any, // Cast to any to bypass the URI type check
+                },
+                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,
+                },
+            });
+
+            setLoading(false);
+            return { channelId: newChannelId };
+        } catch (error) {
+            setLoading(false);
+            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;
+    };
+
+    // Transform the message data for GiftedChat
+    const messageList = useMemo(() => {
+        // Short-circuit if no messages to process
+        if (!channelMessages || channelMessages.length === 0) {
+            return [];
+        }
+
+        // Use a more efficient approach - pre-filter messages once
+        const filteredMessages = uniqBy(channelMessages, ({ id }) => id);
+
+        // Skip processing if no filtered messages
+        if (filteredMessages.length === 0) {
+            return [];
+        }
+
+        // Transform messages only once and return
+        return orderBy(filteredMessages, ['createdAt'], ['desc']).map((msg) => {
+            const date = new Date(msg.createdAt);
+
+            // Extract image URL from files data
+            let imageUrl = null;
+            if (msg.files?.data && msg.files.data.length > 0) {
+                const fileData = msg.files.data[0];
+                if (fileData && fileData.url) {
+                    imageUrl = fileData.url;
+                }
+            }
+
+            // Create message in a more direct way
+            return {
+                _id: msg.id,
+                text: msg.message,
+                createdAt: date,
+                user: {
+                    _id: msg.author?.id || '',
+                    name: `${msg.author?.givenName || ''} ${msg.author?.familyName || ''}`,
+                    avatar: msg.author?.picture || '',
+                },
+                image: imageUrl,
+                sent: msg?.isDelivered,
+                received: msg?.isRead,
+                type: msg?.type,
+                propsConfiguration: msg?.propsConfiguration,
+                replies: msg?.replies ?? [],
+                isShowThreadMessage,
+            };
+        });
+    }, [channelMessages, isShowThreadMessage]);
+
+    // Render the send button
+    const renderSend = useCallback(
+        (props) => {
+            // 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;
+
+            return (
+                <Send
+                    {...props}
+                    disabled={!canSend}
+                    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={canSend ? colors.blue[500] : colors.gray[400]}
+                        />
+                    </View>
+                </Send>
+            );
+        },
+        [channelId, images, rest?.isCreateNewChannel],
+    );
+
+    // 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);
+
+            // Handle direct channel creation if needed
+            if (rest?.isCreateNewChannel && !channelId) {
+                if (rest?.newChannelData?.type === RoomType?.Direct) {
+                    createDirectChannelImpl();
+                }
+                return;
+            }
+
+            // Send message with or without image based on state
+            if (hasImages) {
+                sendMessageWithFileImpl();
+            } else {
+                sendMessageImpl();
+            }
+        },
+        [
+            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;
+
+            if (currentMessage.type === 'ALERT') {
+                const attachment = currentMessage?.propsConfiguration?.contents?.attachment;
+                let action: string = '';
+                let actionId: any = '';
+                let params: any = {};
+
+                if (attachment?.callToAction?.extraParams) {
+                    const extraParams: any = attachment?.callToAction?.extraParams;
+                    const route: any = extraParams?.route ?? null;
+                    let path: any = null;
+                    let param: any = null;
+                    if (role && role == PreDefinedRole.Guest) {
+                        path = route?.guest?.name ? route?.guest?.name ?? null : null;
+                        param = route?.guest?.params ? route?.guest?.params ?? null : null;
+                    } else if (role && role == PreDefinedRole.Owner) {
+                        path = route?.host?.name ? route?.host?.name ?? null : null;
+                        param = route?.host?.params ? route?.host?.params ?? null : null;
+                    } else {
+                        path = route?.host?.name ? route?.host?.name ?? null : null;
+                        param = route?.host?.params ? route?.host?.params ?? null : null;
+                    }
+
+                    action = path;
+                    params = { ...param };
+                } else if (attachment?.callToAction?.link) {
+                    action = CALL_TO_ACTION_PATH;
+                    actionId = attachment?.callToAction?.link.split('/').pop();
+                    params = { reservationId: actionId };
+                }
+
+                return (
+                    <>
+                        {attachment?.callToAction && action ? (
+                            <Box className={`bg-[${CALL_TO_ACTION_BOX_BGCOLOR}] rounded-[15] pb-2`}>
+                                <Button
+                                    variant={'outline'}
+                                    size={'sm'}
+                                    className={`border-[${CALL_TO_ACTION_BUTTON_BORDERCOLOR}]`}
+                                    onPress={() => action && params && navigation.navigate(action, params)}
+                                >
+                                    <ButtonText className={`color-[${CALL_TO_ACTION_TEXT_COLOR}]`}>
+                                        {attachment.callToAction.title}
+                                    </ButtonText>
+                                </Button>
+                                <MessageText
+                                    {...props}
+                                    textStyle={{
+                                        left: { marginLeft: 5, color: CALL_TO_ACTION_TEXT_COLOR, paddingHorizontal: 2 },
+                                    }}
+                                />
+                            </Box>
+                        ) : (
+                            <TouchableHighlight
+                                underlayColor={'#c0c0c0'}
+                                style={{ width: '100%' }}
+                                onPress={() => {
+                                    if (currentMessage?.isShowThreadMessage)
+                                        navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                            channelId: channelId,
+                                            title: 'Message',
+                                            postParentId: currentMessage?._id,
+                                            isPostParentIdThread: true,
+                                        });
+                                }}
+                            >
+                                <>
+                                    <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                                    {currentMessage?.replies?.data?.length > 0 && (
+                                        <HStack space={'sm'} className="px-1 items-center">
+                                            <HStack>
+                                                {currentMessage?.replies?.data
+                                                    ?.filter(
+                                                        (v: any, i: any, a: any) =>
+                                                            a.findIndex((t: any) => t?.author?.id === v?.author?.id) ===
+                                                            i,
+                                                    )
+                                                    ?.slice(0, 2)
+                                                    ?.reverse()
+                                                    ?.map((p: any, i: Number) => (
+                                                        <Avatar
+                                                            key={'conversations-view-key-' + i}
+                                                            size={'sm'}
+                                                            className="bg-transparent"
+                                                        >
+                                                            <AvatarFallbackText>
+                                                                {startCase(p?.author?.username?.charAt(0))}
+                                                            </AvatarFallbackText>
+                                                            <AvatarImage
+                                                                alt="user image"
+                                                                style={{
+                                                                    borderRadius: 6,
+                                                                    borderWidth: 2,
+                                                                    borderColor: '#fff',
+                                                                }}
+                                                                source={{
+                                                                    uri: p?.author?.picture,
+                                                                }}
+                                                            />
+                                                        </Avatar>
+                                                    ))}
+                                            </HStack>
+                                            <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                                {currentMessage?.replies?.totalCount}{' '}
+                                                {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                            </Text>
+                                            <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                                {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                            </Text>
+                                        </HStack>
+                                    )}
+                                </>
+                            </TouchableHighlight>
+                        )}
+                    </>
+                );
+            } else {
+                return (
+                    <TouchableHighlight
+                        underlayColor={'#c0c0c0'}
+                        style={{ width: '100%' }}
+                        onPress={() => {
+                            if (currentMessage?.isShowThreadMessage)
+                                navigation.navigate(config.THREAD_MESSEGE_PATH, {
+                                    channelId: channelId,
+                                    title: 'Message',
+                                    postParentId: currentMessage?._id,
+                                    isPostParentIdThread: true,
+                                });
+                        }}
+                    >
+                        <>
+                            <MessageText {...props} textStyle={{ left: { marginLeft: 5 } }} />
+                            {currentMessage?.replies?.data?.length > 0 && (
+                                <HStack space={'sm'} className="px-1 items-center">
+                                    <HStack>
+                                        {currentMessage?.replies?.data
+                                            ?.filter(
+                                                (v: any, i: any, a: any) =>
+                                                    a.findIndex((t: any) => t?.author?.id === v?.author?.id) === i,
+                                            )
+                                            ?.slice(0, 2)
+                                            ?.reverse()
+                                            ?.map((p: any, i: Number) => (
+                                                <Avatar
+                                                    key={'conversation-replies-key-' + i}
+                                                    className="bg-transparent"
+                                                    size={'sm'}
+                                                >
+                                                    <AvatarFallbackText>
+                                                        {startCase(p?.author?.username?.charAt(0))}
+                                                    </AvatarFallbackText>
+                                                    <AvatarImage
+                                                        alt="user image"
+                                                        style={{ borderRadius: 6, borderWidth: 2, borderColor: '#fff' }}
+                                                        source={{
+                                                            uri: p?.author?.picture,
+                                                        }}
+                                                    />
+                                                </Avatar>
+                                            ))}
+                                    </HStack>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-blue-800">
+                                        {currentMessage?.replies?.totalCount}{' '}
+                                        {currentMessage?.replies?.totalCount == 1 ? 'reply' : 'replies'}
+                                    </Text>
+                                    <Text style={{ fontSize: 12 }} className="font-bold color-gray-500">
+                                        {lastReply ? createdAtText(lastReply?.createdAt) : ''}
+                                    </Text>
+                                </HStack>
+                            )}
+                        </>
+                    </TouchableHighlight>
+                );
+            }
+        },
+        [navigation, channelId, role],
+    );
+
+    // Render action buttons (including image upload)
+    const renderActions = (props) => {
+        return (
+            <Actions
+                {...props}
+                options={{
+                    ['Choose from Library']: onSelectImages,
+                    ['Cancel']: () => {}, // Add this option to make the sheet dismissible
+                }}
+                optionTintColor="#000000"
+                cancelButtonIndex={1} // Set the Cancel option as the cancel button
+                icon={() => (
+                    <Box
+                        style={{
+                            width: 32,
+                            height: 32,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <Ionicons name="image" size={24} color={colors.blue[500]} />
+                    </Box>
+                )}
+                containerStyle={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: 8,
+                    marginBottom: 0,
+                }}
+            />
+        );
+    };
+
+    // Create a more visible and reliable image preview with cancel button
+    const renderAccessory = useCallback(() => {
+        if (!selectedImage) {
+            return null;
+        }
+
+        return (
+            <View
+                style={{
+                    height: 70,
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: '#e0e0e0',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    margin: 0,
+                    padding: 0,
+                    paddingVertical: 0,
+                    position: 'absolute',
+                    bottom: Platform.OS === 'ios' ? 105 : 95, // Position well above the input area
+                    left: 0,
+                    right: 0,
+                    zIndex: 1,
+                    elevation: 3,
+                    shadowColor: '#000',
+                    shadowOffset: { width: 0, height: -1 },
+                    shadowOpacity: 0.05,
+                    shadowRadius: 2,
+                }}
+            >
+                <View
+                    style={{
+                        flex: 1,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        paddingLeft: 15,
+                        paddingRight: 5,
+                    }}
+                >
+                    <View
+                        style={{
+                            width: 56,
+                            height: 56,
+                            marginRight: 15,
+                            borderRadius: 4,
+                            backgroundColor: colors.gray[200],
+                            overflow: 'hidden',
+                            borderWidth: 1,
+                            borderColor: '#e0e0e0',
+                        }}
+                    >
+                        <Image
+                            key={selectedImage}
+                            alt={'selected image'}
+                            source={{ uri: selectedImage }}
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                            }}
+                            size={'md'}
+                        />
+                        {loading && (
+                            <View
+                                style={{
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                }}
+                            >
+                                <Spinner size="small" color={colors.blue[500]} />
+                            </View>
+                        )}
+                    </View>
+
+                    <View style={{ flex: 1 }}>
+                        <Text style={{ fontSize: 14, fontWeight: '400', color: colors.gray[800] }}>
+                            {images[0]?.fileName || 'image_' + new Date().getTime() + '.jpg'}
+                        </Text>
+                        <Text style={{ fontSize: 12, color: colors.gray[500], marginTop: 2 }}>
+                            {loading ? 'Preparing...' : 'Ready to send'}
+                        </Text>
+                    </View>
+
+                    <TouchableHighlight
+                        underlayColor={'rgba(0,0,0,0.1)'}
+                        onPress={() => {
+                            setSelectedImage('');
+                            setImages([]);
+                        }}
+                        style={{
+                            backgroundColor: colors.red[500],
+                            borderRadius: 24,
+                            width: 36,
+                            height: 36,
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            marginRight: 10,
+                        }}
+                    >
+                        <Ionicons name="close" size={20} color="white" />
+                    </TouchableHighlight>
+                </View>
+            </View>
+        );
+    }, [selectedImage, loading, images]);
+
+    const setImageViewerObject = (obj: any, v: boolean) => {
+        setImageObject(obj);
+        setImageViewer(v);
+    };
+
+    const modalContent = React.useMemo(() => {
+        if (!imageObject || !imageObject.image) return null;
+        const { image, _id } = imageObject;
+
+        return (
+            <CachedImage
+                style={{ width: '100%', height: '100%' }}
+                resizeMode={'cover'}
+                cacheKey={`${_id}-modal-imageKey`}
+                source={{
+                    uri: image,
+                    expiresIn: 86400,
+                }}
+                alt={'image'}
+            />
+        );
+    }, [imageObject]);
+
+    // Create a skeleton component for message bubbles with images
+    const renderMessage = useCallback(
+        (props: any) => {
+            // Check if this message ID matches the uploading message ID
+            const isUploading = props.currentMessage._id === uploadingMessageId && loading;
+
+            if (isUploading && props.currentMessage.image) {
+                // Return a custom message skeleton during upload
+                return (
+                    <View
+                        style={{
+                            padding: 10,
+                            marginBottom: 10,
+                            marginRight: 10,
+                            alignSelf: 'flex-end',
+                            borderRadius: 15,
+                            backgroundColor: colors.gray[100],
+                            maxWidth: '80%',
+                        }}
+                    >
+                        {props.currentMessage.text && props.currentMessage.text.trim() !== '' && (
+                            <Box
+                                style={{
+                                    height: 15,
+                                    borderRadius: 4,
+                                    backgroundColor: colors.gray[200],
+                                    overflow: 'hidden',
+                                    marginBottom: 8,
+                                }}
+                            >
+                                <Skeleton variant="rounded" style={{ flex: 1 }} />
+                            </Box>
+                        )}
+                        <Box
+                            style={{
+                                height: 150,
+                                width: 150,
+                                borderRadius: 10,
+                                backgroundColor: colors.gray[200],
+                                overflow: 'hidden',
+                            }}
+                        >
+                            <Skeleton variant="rounded" style={{ flex: 1 }} />
+                        </Box>
+                    </View>
+                );
+            }
+
+            // Use memo to prevent unnecessary re-renders of each message
+            return (
+                <SlackMessage {...props} isShowImageViewer={isShowImageViewer} setImageViewer={setImageViewerObject} />
+            );
+        },
+        [isShowImageViewer, uploadingMessageId, loading],
+    );
+
+    let onScroll = false;
+
+    // Optimize onMomentumScrollBegin for better scroll performance
+    const onMomentumScrollBegin = async ({ nativeEvent }: any) => {
+        // Set scroll state
+        onScroll = true;
+
+        // Use the debounced fetch function to prevent excessive calls
+        if (isCloseToTop(nativeEvent)) {
+            onFetchOld();
+        }
+    };
+
+    const onEndReached = () => {
+        if (!onScroll) return;
+        onScroll = false;
+    };
+
+    // 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,
+                }}
+            >
+                <Spinner size="small" color="#3b82f6" />
+            </View>
+        ) : null;
+    }, [loadingOldMessages]);
+
+    // Add renderInputToolbar function
+    const renderInputToolbar = useCallback((props) => {
+        return (
+            <InputToolbar
+                {...props}
+                containerStyle={{
+                    backgroundColor: 'white',
+                    borderTopWidth: 1,
+                    borderTopColor: colors.gray[200],
+                    paddingHorizontal: 4,
+                    paddingVertical: 0,
+                    paddingTop: 2,
+                    marginBottom: 0,
+                    marginTop: 0,
+                }}
+                primaryStyle={{
+                    alignItems: 'center',
+                }}
+            />
+        );
+    }, []);
+
+    // Create a memoized ImageViewerModal component
+    const imageViewerModal = useMemo(
+        () => (
+            <ImageViewerModal isVisible={isShowImageViewer} setVisible={setImageViewer} modalContent={modalContent} />
+        ),
+        [isShowImageViewer, modalContent],
+    );
+
+    // Create a memoized subscription handler component
+    const subscriptionHandler = useMemo(
+        () => (
+            <SubscriptionHandler
+                channelId={channelId?.toString()}
+                subscribeToNewMessages={() =>
+                    subscribeToMore({
+                        document: CHAT_MESSAGE_ADDED,
+                        variables: {
+                            channelId: channelId?.toString(),
+                        },
+                        // updateQuery: (prev, { subscriptionData }: any) => {
+                        //     try {
+                        //         // Check if we have valid subscription data
+                        //         if (!subscriptionData?.data?.chatMessageAdded) {
+                        //             return prev;
+                        //         }
+
+                        //         const newMessage = subscriptionData.data.chatMessageAdded;
+
+                        //         // Check if message is from current user - skip update as it's handled by optimistic UI
+                        //         if (newMessage.author?.id === auth?.id) {
+                        //             return prev;
+                        //         }
+
+                        //         // Check if we already have this message to avoid duplicates
+                        //         const currentMessages = prev?.messages?.data || [];
+                        //         if (currentMessages.some((msg) => msg.id === newMessage.id)) {
+                        //             return prev;
+                        //         }
+
+                        //         // Update Apollo cache
+                        //         const updatedData = {
+                        //             ...prev,
+                        //             messages: {
+                        //                 ...prev.messages,
+                        //                 data: [newMessage, ...currentMessages],
+                        //                 totalCount: (prev?.messages?.totalCount || 0) + 1,
+                        //             },
+                        //         };
+
+                        //         return updatedData;
+                        //     } catch (error) {
+                        //         return prev;
+                        //     }
+                        // },
+                    })
+                }
+            />
+        ),
+        [channelId, subscribeToMore, auth?.id],
+    );
+
+    // Create a memoized renderChatFooter function
+    const renderChatFooter = useCallback(() => {
+        return (
+            <>
+                {imageViewerModal}
+                {subscriptionHandler}
+            </>
+        );
+    }, [imageViewerModal, subscriptionHandler]);
+
+    // 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],
+    );
+
+    // Return optimized component with performance improvements
+    return (
+        <View
+            style={{
+                flex: 1,
+                backgroundColor: 'white',
+                position: 'relative',
+            }}
+        >
+            {messageLoading && <Spinner color={'#3b82f6'} />}
+
+            {/* Render the image preview directly in the container so it's properly positioned */}
+            {selectedImage ? renderAccessory() : null}
+
+            <GiftedChat
+                ref={messageRootListRef}
+                wrapInSafeArea={true}
+                renderLoading={() => <Spinner color={'#3b82f6'} />}
+                messages={messageList}
+                listViewProps={{
+                    ...listViewProps,
+                    contentContainerStyle: {
+                        paddingBottom: selectedImage ? 90 : 0, // Add padding at the bottom when image is selected
+                    },
+                }}
+                onSend={handleSend}
+                text={messageText || ' '}
+                onInputTextChanged={(text) => setMessageText(text)}
+                renderFooter={() => (loading && !images.length ? <Spinner color={'#3b82f6'} /> : null)}
+                scrollToBottom
+                user={{
+                    _id: auth?.id || '',
+                }}
+                isTyping={false} // Setting to false to reduce animations
+                alwaysShowSend={true} // Always show send button regardless of text content
+                renderSend={renderSend}
+                renderMessageText={renderMessageText}
+                renderInputToolbar={renderInputToolbar}
+                minInputToolbarHeight={50}
+                renderActions={channelId && renderActions}
+                renderMessage={renderMessage}
+                renderChatFooter={renderChatFooter}
+                renderLoadEarlier={renderLoadEarlier}
+                loadEarlier={totalCount > channelMessages.length}
+                isLoadingEarlier={loadingOldMessages}
+                bottomOffset={Platform.OS === 'ios' ? (selectedImage ? 90 : 10) : 0} // Adjust bottom offset based on image preview
+                textInputProps={{
+                    style: {
+                        borderWidth: 1,
+                        borderColor: colors.gray[300],
+                        backgroundColor: '#f8f8f8',
+                        borderRadius: 20,
+                        minHeight: 36,
+                        maxHeight: 80,
+                        color: '#000',
+                        padding: 8,
+                        paddingHorizontal: 15,
+                        fontSize: 16,
+                        flex: 1,
+                        marginVertical: 2,
+                        marginBottom: 0,
+                    },
+                    multiline: true,
+                    returnKeyType: 'default',
+                    enablesReturnKeyAutomatically: true,
+                    placeholderTextColor: colors.gray[400],
+                }}
+                minComposerHeight={36}
+                maxComposerHeight={100}
+                isKeyboardInternallyHandled={true}
+                placeholder="Type a message..."
+                lightboxProps={{
+                    underlayColor: 'transparent',
+                    springConfig: { tension: 90000, friction: 90000 },
+                    disabled: true,
+                }}
+                infiniteScroll={false} // Disable automatic loading
+            />
+        </View>
+    );
+};
+
+const SubscriptionHandler = ({ subscribeToNewMessages, channelId }: ISubscriptionHandlerProps) => {
+    // Store the channelId in a ref to track changes
+    const channelIdRef = useRef(channelId);
+
+    useEffect(() => {
+        // Don't set up subscription if there's no channel ID
+        if (!channelId) {
+            return;
+        }
+
+        // Call the subscribe function and store the unsubscribe function
+        const unsubscribe = subscribeToNewMessages();
+
+        // Update the ref with the current channelId
+        channelIdRef.current = channelId;
+
+        // Return cleanup function
+        return () => {
+            if (unsubscribe && typeof unsubscribe === 'function') {
+                unsubscribe();
+            }
+        };
+    }, [channelId, subscribeToNewMessages]);
+
+    return null;
+};
+
+// Export with React.memo to prevent unnecessary re-renders
+export const ConversationView = React.memo(ConversationViewComponent, (prevProps, nextProps) => {
+    // Only re-render if these critical props change
+    return (
+        prevProps.channelId === nextProps.channelId &&
+        prevProps.role === nextProps.role &&
+        prevProps.isShowThreadMessage === nextProps.isShowThreadMessage
+    );
+});