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

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

@@ -56,25 +56,177 @@ 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={'transparent'}
-                    style={{ width: '100%', marginVertical: 5 }}
-                    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={{
@@ -88,37 +240,71 @@ export default class Bubble extends React.Component<any> {
                             backgroundColor: '#f7f7f7',
                         }}
                     >
-                        <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',
+                        {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',
-                                            borderRadius: 8,
-                                        },
-                                    ]}
-                                >
-                                    <Text>Loading...</Text>
-                                </View>
-                            }
-                        />
+                                        }}
+                                    >
+                                        <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/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,14 +16,13 @@ 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/graphql';
+} from '../../../queries/inboxQueries';
 import { startCase } from 'lodash-es';
 import colors from 'tailwindcss/colors';
 
@@ -204,7 +203,7 @@ export const SupportServiceDialogsListItemComponent: React.FC<IDialogListItemPro
                         lastMessage={lastMessage}
                         subscribeToNewMessages={() =>
                             subscribeToMore({
-                                document: THREAD_CHAT_ADDED,
+                                document: THREAD_CREATED_UPDATED,
                                 variables: {
                                     channelId: channel?.id?.toString(),
                                     postParentId: postParentId ? servicePostParentId : null,