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

package/src/screens/inbox/components/SlackMessageContainer/SlackBubble.tsx

@@ -56,45 +56,255 @@ export default class Bubble extends React.Component<any> {
     }
 
     renderMessageImage() {
-        if (this.props.currentMessage.image) {
-            const { containerStyle, wrapperStyle, ...messageImageProps } = this.props;
+        const { currentMessage, containerStyle, wrapperStyle, ...messageImageProps } = this.props;
+
+        // Check if we have multiple images
+        if (currentMessage.images && Array.isArray(currentMessage.images) && currentMessage.images.length > 0) {
+            // Filter out any invalid or empty image URLs first
+            const validImages = currentMessage.images.filter((url) => url && typeof url === 'string');
+
+            // If no valid images after filtering, don't render anything
+            if (validImages.length === 0) {
+                return null;
+            }
+
+            // Render multiple images in a scrollable horizontal row
+            return (
+                <View style={{ marginVertical: 0 }}>
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            flexWrap: 'wrap',
+                            gap: 8,
+                        }}
+                    >
+                        {validImages.map((imageUrl, index) => {
+                            // Check if this is a local image
+                            const isLocalImage =
+                                imageUrl.startsWith('file:') ||
+                                imageUrl.startsWith('data:') ||
+                                imageUrl.startsWith('content:') ||
+                                (!imageUrl.startsWith('http://') && !imageUrl.startsWith('https://'));
+
+                            const imageSize =
+                                validImages.length === 1
+                                    ? { width: windowWidth * 0.6, height: windowWidth * 0.4 }
+                                    : { width: windowWidth * 0.3, height: windowWidth * 0.3 };
+
+                            // Show upload indicator if this message is uploading
+                            const isUploading = currentMessage.isUploading;
+
+                            return (
+                                <TouchableHighlight
+                                    key={`image-${index}-${currentMessage._id}`}
+                                    underlayColor={'transparent'}
+                                    onPress={() => {
+                                        // Don't allow viewing while uploading
+                                        if (isUploading) return;
+
+                                        // Create a message-like object with this image for the viewer
+                                        const imageObject = {
+                                            _id: `${currentMessage._id}-img-${index}`,
+                                            image: imageUrl,
+                                        };
+                                        this.props.setImageViewer(imageObject, true);
+                                    }}
+                                >
+                                    <View
+                                        style={{
+                                            ...imageSize,
+                                            maxHeight: 200,
+                                            borderRadius: 8,
+                                            overflow: 'hidden',
+                                            borderWidth: 1,
+                                            borderColor: '#e0e0e0',
+                                            backgroundColor: '#f7f7f7',
+                                        }}
+                                    >
+                                        {isLocalImage ? (
+                                            // For local images, use direct Image component with no loading state
+                                            <View style={{ width: '100%', height: '100%' }}>
+                                                <MessageImage
+                                                    {...messageImageProps}
+                                                    currentMessage={{ ...currentMessage, image: imageUrl }}
+                                                    imageStyle={{
+                                                        width: '100%',
+                                                        height: '100%',
+                                                        borderRadius: 8,
+                                                    }}
+                                                />
+
+                                                {/* Show upload indicator if needed */}
+                                                {isUploading && (
+                                                    <View
+                                                        style={{
+                                                            position: 'absolute',
+                                                            top: 0,
+                                                            left: 0,
+                                                            right: 0,
+                                                            bottom: 0,
+                                                            backgroundColor: 'rgba(0,0,0,0.2)',
+                                                            justifyContent: 'center',
+                                                            alignItems: 'center',
+                                                        }}
+                                                    >
+                                                        <Text style={{ color: 'white', fontWeight: 'bold' }}>
+                                                            Uploading...
+                                                        </Text>
+                                                    </View>
+                                                )}
+                                            </View>
+                                        ) : (
+                                            // For remote images, use CachedImage with loading placeholder
+                                            <CachedImage
+                                                style={[styles.slackImage, { width: '100%', height: '100%' }]}
+                                                cacheKey={`${currentMessage._id}-img-${index}-slack-bubble-imageKey`}
+                                                source={{
+                                                    uri: imageUrl,
+                                                    expiresIn: 86400,
+                                                }}
+                                                resizeMode={'cover'}
+                                                alt={'image'}
+                                                placeholderContent={
+                                                    <View
+                                                        style={[
+                                                            styles.slackImage,
+                                                            {
+                                                                width: '100%',
+                                                                height: '100%',
+                                                                backgroundColor: '#e1e1e1',
+                                                                justifyContent: 'center',
+                                                                alignItems: 'center',
+                                                                borderRadius: 8,
+                                                            },
+                                                        ]}
+                                                    >
+                                                        <Text>{isUploading ? 'Uploading...' : 'Loading...'}</Text>
+                                                    </View>
+                                                }
+                                            />
+                                        )}
+                                    </View>
+                                </TouchableHighlight>
+                            );
+                        })}
+                    </View>
+                </View>
+            );
+        }
+
+        // Fall back to single image rendering if no images array
+        if (currentMessage.image) {
             if (this.props.renderMessageImage) {
                 return this.props.renderMessageImage(messageImageProps);
             }
-            const { image, _id } = messageImageProps?.currentMessage;
+            const { image, _id } = currentMessage;
+
+            // Add validation for image URL
+            if (!image || typeof image !== 'string') {
+                return null;
+            }
 
+            // Check if this is a local image (from device camera/library)
+            const isLocalImage =
+                image.startsWith('file:') ||
+                image.startsWith('data:') ||
+                image.startsWith('content:') ||
+                // Check if the image is a pendingUpload by checking if it doesn't start with http/https
+                (!image.startsWith('http://') && !image.startsWith('https://'));
+
+            // Check uploading state
+            const isUploading = currentMessage.isUploading;
+
+            // Class components can't use hooks like useMemo
+            // Directly render the CachedImage instead
             return (
                 <TouchableHighlight
-                    // underlayColor={'#c0c0c0'}
                     underlayColor={'transparent'}
-                    style={{ width: '100%' }}
-                    onPress={() => this.props.setImageViewer(messageImageProps?.currentMessage, true)}
+                    style={{ width: '100%', marginVertical: 0 }}
+                    onPress={() => {
+                        // Don't allow viewing while uploading
+                        if (isUploading) return;
+                        this.props.setImageViewer(currentMessage, true);
+                    }}
                 >
                     <View
                         style={{
-                            width: windowWidth - (windowWidth - 150),
-                            height: windowHeight - (windowHeight - 100),
+                            width: windowWidth * 0.6, // 60% of screen width
+                            height: windowWidth * 0.4, // Maintain aspect ratio
+                            maxHeight: 200,
+                            borderRadius: 8,
+                            overflow: 'hidden',
+                            borderWidth: 1,
+                            borderColor: '#e0e0e0',
+                            backgroundColor: '#f7f7f7',
                         }}
                     >
-                        {/* <MessageImage
-                            {...messageImageProps}
-                            imageStyle={[styles.slackImage, messageImageProps.imageStyle]}
-                        /> */}
-                        <CachedImage
-                            style={[styles.slackImage, { width: '100%', height: '100%' }]}
-                            cacheKey={`${_id}-slack-bubble-imageKey`}
-                            source={{
-                                uri: image,
-                                //headers: `Authorization: Bearer ${token}`,
-                                expiresIn: 86400,
-                            }}
-                            resizeMode={'cover'}
-                            alt={'image'}
-                        />
+                        {isLocalImage ? (
+                            // For local images, use direct Image component with no loading state
+                            <View style={{ width: '100%', height: '100%', position: 'relative' }}>
+                                <MessageImage
+                                    {...messageImageProps}
+                                    imageStyle={{
+                                        width: '100%',
+                                        height: '100%',
+                                        borderRadius: 8,
+                                    }}
+                                />
+
+                                {/* Show upload indicator if needed */}
+                                {isUploading && (
+                                    <View
+                                        style={{
+                                            position: 'absolute',
+                                            top: 0,
+                                            left: 0,
+                                            right: 0,
+                                            bottom: 0,
+                                            backgroundColor: 'rgba(0,0,0,0.2)',
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                        }}
+                                    >
+                                        <Text style={{ color: 'white', fontWeight: 'bold' }}>Uploading...</Text>
+                                    </View>
+                                )}
+                            </View>
+                        ) : (
+                            // For remote images, use CachedImage with loading placeholder
+                            <CachedImage
+                                style={[styles.slackImage, { width: '100%', height: '100%' }]}
+                                cacheKey={`${_id}-slack-bubble-imageKey`}
+                                source={{
+                                    uri: image,
+                                    expiresIn: 86400,
+                                }}
+                                resizeMode={'cover'}
+                                alt={'image'}
+                                placeholderContent={
+                                    <View
+                                        style={[
+                                            styles.slackImage,
+                                            {
+                                                width: '100%',
+                                                height: '100%',
+                                                backgroundColor: '#e1e1e1',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                borderRadius: 8,
+                                            },
+                                        ]}
+                                    >
+                                        <Text>{isUploading ? 'Uploading...' : 'Loading...'}</Text>
+                                    </View>
+                                }
+                            />
+                        )}
                     </View>
                 </TouchableHighlight>
             );
         }
+
         return null;
     }
 

package/src/screens/inbox/components/SlackMessageContainer/SlackMessage.tsx

@@ -74,7 +74,7 @@ export default class Message extends React.Component<any> {
         const avatarProps: any = this.getInnerComponentProps();
 
         return (
-            <Avatar size={'sm'} bg={'transparent'} borderRadius={'$none'} marginRight={'$2'}>
+            <Avatar size={'sm'} className="bg-transparent rounded-none mr-2">
                 <AvatarFallbackText>
                     {isSameUserAndSameDay ? '' : avatarProps?.currentMessage?.user?.name[0]}
                 </AvatarFallbackText>

package/src/screens/inbox/components/SmartLoader.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Spinner, Text, VStack, Button, ButtonText } from '@admin-layout/gluestack-ui-mobile';
+import colors from 'tailwindcss/colors';
+
+interface SmartLoaderProps {
+    isLoading: boolean;
+    timeoutMs?: number;
+    message?: string;
+    onRetry?: () => void;
+}
+
+/**
+ * SmartLoader component that automatically shows a timeout message
+ * if loading takes too long, preventing infinite loading states
+ */
+export const SmartLoader: React.FC<SmartLoaderProps> = ({
+    isLoading,
+    timeoutMs = 20000, // Default 20 seconds
+    message = 'Taking longer than expected...',
+    onRetry,
+}) => {
+    const [showTimeout, setShowTimeout] = useState(false);
+
+    useEffect(() => {
+        if (!isLoading) {
+            setShowTimeout(false);
+            return;
+        }
+
+        const timeoutId = setTimeout(() => {
+            if (isLoading) {
+                setShowTimeout(true);
+            }
+        }, timeoutMs);
+
+        return () => clearTimeout(timeoutId);
+    }, [isLoading, timeoutMs]);
+
+    if (!isLoading) return null;
+
+    return (
+        <Box className="flex-1 bg-gray-100 dark:bg-gray-800 items-center justify-center">
+            <VStack space="md" className="items-center">
+                <Spinner color={colors.blue[500]} size="large" />
+
+                {showTimeout && (
+                    <VStack space="sm" className="p-4 items-center">
+                        <Text className="text-gray-700 dark:text-gray-300 text-center">{message}</Text>
+                        {onRetry && (
+                            <Button onPress={onRetry} className="bg-blue-500 mt-3 rounded-full">
+                                <ButtonText>Try Again</ButtonText>
+                            </Button>
+                        )}
+                    </VStack>
+                )}
+            </VStack>
+        </Box>
+    );
+};
+
+export default SmartLoader;

package/src/screens/inbox/components/SubscriptionHandler.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+
+/**
+ * Shared SubscriptionHandler for Apollo subscribeToMore
+ *
+ * @param subscribeToMore - Apollo subscribeToMore function
+ * @param document - GraphQL subscription document
+ * @param variables - Variables for the subscription
+ * @param updateQuery - Apollo updateQuery function
+ * @param onError - Optional error handler
+ * @param enabled - If false, disables the subscription
+ */
+export function SubscriptionHandler({
+    subscribeToMore,
+    document,
+    variables,
+    updateQuery,
+    onError,
+    enabled = true,
+}: {
+    subscribeToMore: Function;
+    document: any;
+    variables: Record<string, any>;
+    updateQuery: (prev: any, { subscriptionData }: any) => any;
+    onError?: (error: any) => void;
+    enabled?: boolean;
+}) {
+    useEffect(() => {
+        if (!enabled) return;
+        const unsubscribe = subscribeToMore({
+            document,
+            variables,
+            updateQuery,
+            onError,
+        });
+        return () => {
+            if (unsubscribe && typeof unsubscribe === 'function') unsubscribe();
+        };
+    }, [subscribeToMore, document, JSON.stringify(variables), updateQuery, onError, enabled]);
+    return null;
+}

package/src/screens/inbox/components/SupportServiceDialogsListItem.tsx

@@ -16,22 +16,35 @@ import { format, isToday, isYesterday } from 'date-fns';
 import { useFocusEffect } from '@react-navigation/native';
 import { IChannel, IUserAccount } from 'common';
 import {
+    THREAD_CREATED_UPDATED,
+    CHAT_MESSAGE_ADDED,
     useThreadMessagesQuery,
+    useThreadCreatedUpdatedSubscription,
+    useThreadChatMessageAddedSubscription,
     useMessagesQuery,
-    useUserAccountQuery,
-    useOnThreadCreatedUpdatedSubscription,
-    useOnThreadChatMessageAddedSubscription,
-    OnThreadCreatedUpdatedDocument as THREAD_CHAT_ADDED,
-    OnThreadChatMessageAddedDocument as CHAT_MESSAGE_ADDED,
-} from 'common/lib/generated/generated.js';
+} from '../../../queries/inboxQueries';
 import { startCase } from 'lodash-es';
+import colors from 'tailwindcss/colors';
 
 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');
+
+    try {
+        // Validate the date before processing
+        const timestamp = new Date(value).getTime();
+        if (isNaN(timestamp)) {
+            console.warn(`Invalid date value in createdAtText: ${value}`);
+            return 'Unknown date';
+        }
+
+        let date = new Date(value);
+        if (isToday(date)) return 'Today';
+        if (isYesterday(date)) return 'Yesterday';
+        return format(date, 'MMM dd, yyyy');
+    } catch (error) {
+        console.error(`Error processing date in createdAtText: ${value}`, error);
+        return 'Unknown date';
+    }
 };
 
 export interface IDialogListChannel extends IChannel {
@@ -165,34 +178,14 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
     return (
         <Pressable
             onPress={() => channel?.id !== selectedChannelId && onOpen(channel?.id, channel?.title, postParentId)}
-            borderWidth={'$1'}
-            borderRadius={'$md'}
-            borderColor={'$trueGray200'}
-            flex={1}
-            $dark-borderColor="$coolGray600"
-            $dark-backgroundColor="$trueGray700"
-            $light-backgroundColor="$trueGray50"
-            $light-borderColor="$trueGray200"
+            className="flex-1 border rounded-md border-gray-200 dark:border-gray-600 dark:bg-gray-700"
         >
-            <HStack
-                // px={2}
-                // pl={3}
-                py={'$3'}
-                space={'sm'}
-                w={'100%'}
-                flex={1}
-                // direction={'row'}
-                justifyContent={'space-between'}
-                alignItems={'center'}
-            >
-                <Box flex={0.1} alignItems={'flex-start'} pl={'$3'}>
+            <HStack space={'sm'} className="flex-1 w-[100%] py-3 justify-between items-center">
+                <Box className="flex-[0.1] items-start pl-3">
                     <Avatar
                         key={'support-service-channels-key-' + channel?.id}
-                        bg={'transparent'}
                         size={'sm'}
-                        top={'$0'}
-                        right={'$0'}
-                        zIndex={1}
+                        className="bg-transparent top-0 right-0 z-[1]"
                     >
                         <AvatarFallbackText> {startCase(channel?.creator?.username?.charAt(0))}</AvatarFallbackText>
                         <AvatarImage
@@ -204,13 +197,13 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
                         />
                     </Avatar>
                 </Box>
-                <Box flex={0.9}>
+                <Box className="flex-[0.9]">
                     <ServiceChannelWithLastMessage
                         channel={channel}
                         lastMessage={lastMessage}
                         subscribeToNewMessages={() =>
                             subscribeToMore({
-                                document: THREAD_CHAT_ADDED,
+                                document: THREAD_CREATED_UPDATED,
                                 variables: {
                                     channelId: channel?.id?.toString(),
                                     postParentId: postParentId ? servicePostParentId : null,
@@ -269,31 +262,36 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
 
 const ServiceChannelWithLastMessage = React.memo(({ channel, lastMessage, subscribeToNewMessages }: any) => {
     React.useEffect(() => subscribeToNewMessages(), []);
+
+    // Define message display text
+    let displayMessage = 'No messages yet';
+
+    if (lastMessage) {
+        // Check for file attachments
+        const hasFileAttachments = lastMessage.files?.data?.length > 0;
+
+        if (hasFileAttachments) {
+            displayMessage = '📎 File attachment';
+        } else if (lastMessage.message && lastMessage.message.trim() !== '') {
+            displayMessage = lastMessage.message;
+        } else {
+            displayMessage = '(Empty message)';
+        }
+    }
+
     return (
-        <HStack space={'sm'} flex={1} justifyContent={'center'} alignItems={'center'}>
-            <Box flex={0.8}>
-                <Text color="$trueGray600" fontSize="$lg" flexWrap={'wrap'} fontWeight="$semibold">
+        <HStack space={'sm'} className="flex-1 justify-center items-center">
+            <Box className="flex-[0.8]">
+                <Text color={colors.gray[600]} className="text-lg flex-wrap font-semibold">
                     {channel?.title}
                 </Text>
-                <Text color="$trueGray600" numberOfLines={1}>
-                    {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id)
-                    ? lastMessageCreatorAndMembers?.message ?? ''
-                    : lastMessage?.message ?? ''} */}
-                    {lastMessage?.message ?? ''}
+                <Text color={colors.gray[600]} numberOfLines={1}>
+                    {displayMessage}
                 </Text>
             </Box>
 
-            <Box flex={0.2}>
-                {/* {creatorAndMembersId?.length && creatorAndMembersId?.includes(currentUser?.id) ? (
-                <Text color="gray.500">
-                    {lastMessageCreatorAndMembers
-                        ? createdAtText(lastMessageCreatorAndMembers?.createdAt)
-                        : ''}
-                </Text>
-            ) : (
-                <Text color="gray.500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
-            )} */}
-                <Text color="$trueGray500">{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
+            <Box className="flex-[0.2]">
+                <Text color={colors.gray[500]}>{lastMessage ? createdAtText(lastMessage?.createdAt) : ''}</Text>
             </Box>
         </HStack>
     );