@droppii-org/chat-mobile 0.2.15 → 0.2.17

package/src/components/MergedImageGrid.tsx

@@ -1,6 +1,12 @@
 import { memo, useMemo, useState, useCallback } from 'react';
 import { StyleSheet, useWindowDimensions } from 'react-native';
-import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
 import ChatImageDimens from '../utils/chatImageDimens';
 import type { MediaItem } from '../hooks/useMediaViewer';
 
@@ -14,11 +20,11 @@ interface MergedImageGridProps {
 
 /**
  * Generic image grid for merged messages
- * Layout: 1 image (1x1), 2 images (1x2), 3 images (1x3), 4+ images (2x2)
- * Shows "+N more" overlay on last cell if images exceed limit
+ * Layout: always a single horizontal row (1xN), N capped at maxDisplay (default 3)
+ * Shows "+N more" overlay on last cell if images exceed limit (e.g. 4 images → 3 + "+1")
  */
 export const MergedImageGrid = memo(
-  ({ images, maxDisplay = 4, onMediaPress }: MergedImageGridProps) => {
+  ({ images, maxDisplay = 3, onMediaPress }: MergedImageGridProps) => {
     const windowWidth = useWindowDimensions().width;
     const [loadingState, setLoadingState] = useState<Record<number, boolean>>(
       {}
@@ -106,26 +112,33 @@ export const MergedImageGrid = memo(
       return null;
     }
 
-    // Calculate columns based on image count
-    let columns = 1;
-    if (displayedImages.length === 2) {
-      columns = 2; // 2 images: horizontal layout (1x2)
-    } else if (displayedImages.length === 3) {
-      columns = 3; // 3 images: horizontal layout (1x3)
-    } else if (displayedImages.length >= 4) {
-      columns = 2; // 4+ images: grid layout (2x2)
-    }
+    // Always lay out images in a single horizontal row (1xN)
+    const columns = displayedImages.length;
 
-    // Use calculated aspect ratio for single image, 100x100 for multiple images
-    const cellSize =
-      displayedImages.length === 1 && singleImageSize
-        ? singleImageSize.width
-        : 100;
-    const cellHeight =
-      displayedImages.length === 1 && singleImageSize
-        ? singleImageSize.height
-        : cellSize;
     const gap = 4;
+
+    // Mirror the parent layout chain so the row never exceeds its container:
+    //   messageRow: width 100% with 0.75rem horizontal padding (both sides)
+    //   bubble wrapper: maxWidth 80% of that
+    //   bubble: another 0.75rem horizontal padding (both sides)
+    const rowPaddingH = KSpacingValue['0.75rem'] * 2;
+    const bubblePaddingH = KSpacingValue['0.75rem'] * 2;
+    const availableWidth = (windowWidth - rowPaddingH) * 0.8 - bubblePaddingH;
+
+    // Single image keeps its aspect-ratio size; multiple images share the row
+    // width so the whole row fits inside the bubble (cell capped at 100px).
+    let cellSize: number;
+    let cellHeight: number;
+    if (displayedImages.length === 1 && singleImageSize) {
+      cellSize = singleImageSize.width;
+      cellHeight = singleImageSize.height;
+    } else {
+      const fitted = Math.floor(
+        (availableWidth - gap * (columns - 1)) / columns
+      );
+      cellSize = Math.min(100, fitted);
+      cellHeight = cellSize;
+    }
     const totalWidth = cellSize * columns + gap * (columns - 1);
 
     return (
@@ -203,7 +216,7 @@ MergedImageGrid.displayName = 'MergedImageGrid';
 const styles = StyleSheet.create({
   grid: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexWrap: 'nowrap',
     gap: 4,
     justifyContent: 'flex-start',
     alignItems: 'flex-start',

package/src/components/ThreadCard/ThreadCard.tsx

@@ -4,7 +4,8 @@ import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 import { AvatarSection } from './AvatarSection';
 import { NamePrefixIcon } from './NamePrefixIcon';
 import { UnreadBadge } from './UnreadBadge';
-import { formatTimestamp, getLastMessageText } from './thread-card.utils';
+import { formatTimestamp } from '../../utils/dateTimeUtils';
+import { getLastMessageText } from '../../utils/messageUtils';
 import { useConversation, useUserStore } from '../../store';
 
 interface ThreadCardProps {

package/src/components/messages/imageMessage/index.tsx

@@ -84,7 +84,6 @@ export const ImageMessage = memo(
       imageDimensions.width,
       imageDimensions.height
     );
-
     return (
       <KContainer.View style={[messageStyles.wrapper, styles.wrapper]}>
         <KContainer.Touchable

package/src/components/messages/mergedMessage/index.tsx

@@ -28,13 +28,11 @@ export const MergedMessage = memo(
           ]}
         >
           {imageMessages.length > 0 && (
-            <KContainer.View marginB="0.5rem">
-              <MergedImageGrid
-                images={imageMessages}
-                maxDisplay={4}
-                onMediaPress={onMediaPress}
-              />
-            </KContainer.View>
+            <MergedImageGrid
+              images={imageMessages}
+              maxDisplay={3}
+              onMediaPress={onMediaPress}
+            />
           )}
         </KContainer.View>
       </KContainer.View>

package/src/hooks/useImageAttachment.ts

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import RNFS from 'react-native-fs';
 import type { Image as PickedImage } from 'react-native-image-crop-picker';
 import DeviceUtils from '../utils/device';
 import UIUtils from '../utils/ui';
@@ -48,7 +47,6 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
   const uploadImage = useCallback(
     async (index: number, image: PickedImage) => {
       console.log('Upload', 'Step 1: Starting upload for image', { index });
-      let cachedFilePath: string | null = null;
 
       try {
         console.log('Upload', 'Step 2: Updating status to uploading...');
@@ -58,27 +56,10 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
           uploadProgress: 0,
         });
 
-        try {
-          console.log('Upload', 'Step 3: Preparing file...', {
-            originalPath: image.path,
-            filename: image.filename,
-          });
-          const ext = image.filename?.split('.').pop() || 'jpg';
-          const fileName = `temp-image-${Date.now()}-${index}.${ext}`;
-          cachedFilePath = `${RNFS.DocumentDirectoryPath}/${fileName}`;
-
-          console.log('Upload', 'Step 4: Copying file to cache...', {
-            from: image.path,
-            to: cachedFilePath,
-          });
-          await RNFS.copyFile(image.path, cachedFilePath);
-          console.log('Upload', 'Step 5: File copied successfully');
-        } catch (fileError: any) {
-          console.error('Upload', 'File copy error', fileError);
-          throw new Error(
-            `Failed to prepare file: ${fileError?.message || 'Unknown error'}`
-          );
-        }
+        // ✅ OPTIMIZED: Use original path directly, no copy
+        const filePath = image.path.startsWith('file://')
+          ? image.path.replace('file://', '')
+          : image.path;
 
         const filename = image.filename || 'image.jpg';
 
@@ -93,13 +74,14 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
 
         let uploadedImage;
         try {
-          console.log('Upload', 'Step 6: Uploading to server...', {
+          console.log('Upload', 'Uploading to server...', {
             filename,
             size: image.size,
+            filePath,
           });
           uploadedImage = await ImageUploadAPI.uploadImageFile(
             {
-              path: cachedFilePath || '',
+              path: filePath,
               filename,
               size: image.size || 0,
               width: image.width || 0,
@@ -108,7 +90,7 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
             },
             setProgress
           );
-          console.log('Upload', 'Step 7: Upload successful!', {
+          console.log('Upload', 'Upload successful!', {
             url: uploadedImage?.url,
           });
         } catch (uploadError: any) {
@@ -122,27 +104,14 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
           throw new Error('No URL returned from server');
         }
 
-        console.log('Upload', 'Step 8: Upload complete, preparing data...');
+        console.log('Upload', 'Upload complete, updating status...');
         updateImageStatus(index, {
           isUploading: false,
           uploadProgress: 100,
           uploadedUrl: uploadedImage.url,
         });
 
-        console.log(
-          'Upload',
-          'Step 9: Ready to send - waiting for user confirmation'
-        );
-
-        console.log('Upload', 'Step 11: Cleaning up cache file...');
-        try {
-          if (cachedFilePath) {
-            await ImageUploadAPI.cleanupImageFile(cachedFilePath);
-          }
-        } catch (cleanupError) {
-          console.warn('Upload', 'Cleanup warning', cleanupError);
-        }
-        console.log('Upload', 'Step 12: COMPLETE ✓');
+        console.log('Upload', 'COMPLETE ✓');
       } catch (error: any) {
         console.error('Upload', 'ERROR', error);
         const errorMsg = error?.message || trans('chat:image_upload_failed');
@@ -151,14 +120,6 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
           error: errorMsg,
         });
 
-        try {
-          if (cachedFilePath) {
-            await ImageUploadAPI.cleanupImageFile(cachedFilePath);
-          }
-        } catch (cleanupError) {
-          console.warn('Upload', 'Cleanup after error', cleanupError);
-        }
-
         console.error('uploadImage', 'Full error', error);
       }
     },
@@ -168,27 +129,48 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
   const generateVideoThumbnail = useCallback(
     async (index: number, image: PickedImage) => {
       if (!isVideoFromPicker(image)) return; // Only for videos
+      console.log('[ImageAttach] Generating thumbnail for video:', image);
 
       try {
-        console.log('[ImageAttach] Generating thumbnail for video:', {
-          index,
-          filename: image.filename,
-        });
+        let videoDuration = (image as any).duration || 0;
+
+        // ✅ FIX: Validate duration is reasonable
+        if (videoDuration <= 0 || videoDuration > 3600000) {
+          // Duration should be between 0 and 1 hour (3600000ms)
+          console.warn(
+            '[ImageAttach] Invalid duration, using default:',
+            videoDuration
+          );
+          videoDuration = 5000; // Default 5 seconds
+        }
 
-        const videoDuration = (image as any).duration || 0;
-        const timeMs = Math.min(1000, Math.floor(videoDuration / 2));
+        // ✅ FIX: Choose frame at 35% for better representation
+        const timeMs = Math.min(
+          Math.max(1000, Math.floor(videoDuration * 0.35)),
+          videoDuration - 1000
+        );
 
-        // Copy video to safe location
-        const ext = image.filename?.split('.').pop() || 'mp4';
-        const cachedFileName = `thumb-cache-${Date.now()}-${index}.${ext}`;
-        const cachedVideoPath = `${RNFS.DocumentDirectoryPath}/${cachedFileName}`;
+        // ✅ OPTIMIZED: Use original path directly, no copy
+        const videoPath = image.path.startsWith('file://')
+          ? image.path.replace('file://', '')
+          : image.path;
 
-        await RNFS.copyFile(image.path, cachedVideoPath);
+        console.log('[ImageAttach] Generating thumbnail for video:', {
+          filename: image.filename,
+          videoPath,
+          videoDuration,
+          timeMs,
+        });
 
-        // Generate thumbnail
+        // Generate thumbnail directly from original path
+        console.log('[ImageAttach] Generating thumbnail at timeMs:', timeMs);
         const thumbnail = await VideoThumbnailUtil.generateThumbnail(
-          cachedVideoPath,
-          { time: timeMs, quality: 80 }
+          videoPath,
+          {
+            time: timeMs,
+            quality: 80,
+            cacheId: `thumb-${index}-${Date.now()}`,
+          }
         );
 
         if (!thumbnail) throw new Error('Thumbnail generation failed');
@@ -225,13 +207,6 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
         console.log(
           `✅ [ImageAttach] THUMBNAIL URL (picked): ${uploadedThumbnail.url}`
         );
-
-        // Cleanup cached video
-        try {
-          await RNFS.unlink(cachedVideoPath);
-        } catch (err) {
-          console.warn('[ImageAttach] Failed to clean cached video:', err);
-        }
       } catch (error) {
         console.error('[ImageAttach] Video thumbnail generation error:', error);
         UIUtils.toast.open({
@@ -262,23 +237,33 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
           count: images.length,
         });
 
-        const MAX_FILE_SIZE = 5 * 1024 * 1024;
-        const oversizedImages = images.filter(
-          (img) => (img.size || 0) > MAX_FILE_SIZE
-        );
+        // The gallery picker can return both images and videos. Apply the
+        // correct size limit per type: 5MB for images, 200MB for videos.
+        const MAX_IMAGE_SIZE = 5 * 1024 * 1024;
+        const MAX_VIDEO_SIZE = 200 * 1024 * 1024;
+        const isWithinLimit = (item: PickedImage) => {
+          const maxSize = isVideoFromPicker(item)
+            ? MAX_VIDEO_SIZE
+            : MAX_IMAGE_SIZE;
+          return (item.size || 0) <= maxSize;
+        };
 
-        if (oversizedImages.length > 0) {
-          console.warn('ImageAttach', 'Step 5: Some images too large', {
-            count: oversizedImages.length,
-            maxSize: MAX_FILE_SIZE,
+        const oversizedItems = images.filter((img) => !isWithinLimit(img));
+
+        if (oversizedItems.length > 0) {
+          const hasOversizedVideo = oversizedItems.some(isVideoFromPicker);
+          console.warn('ImageAttach', 'Step 5: Some files too large', {
+            count: oversizedItems.length,
           });
           UIUtils.toast.open({
-            title: trans('chat:image_too_large'),
+            title: trans(
+              hasOversizedVideo
+                ? 'chat:video_too_large'
+                : 'chat:image_too_large'
+            ),
             theme: 'danger',
           });
-          const validImages = images.filter(
-            (img) => (img.size || 0) <= MAX_FILE_SIZE
-          );
+          const validImages = images.filter(isWithinLimit);
           if (validImages.length === 0) return;
           images.splice(0, images.length, ...validImages);
         }

package/src/hooks/useVideoAttachment.ts

@@ -260,7 +260,7 @@ export const useVideoAttachment = (): UseVideoAttachmentReturn => {
         count: videos.length,
       });
 
-      const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB for videos
+      const MAX_FILE_SIZE = 200 * 1024 * 1024; // 200MB for videos
       const oversizedVideos = videos.filter(
         (vid) => (vid.size || 0) > MAX_FILE_SIZE
       );

package/src/index.tsx

@@ -1,5 +1,12 @@
 export { ChatAPI } from './services';
-export { setAuthToken, getAuthToken, clearAuthToken } from './services/auth';
+export {
+  setAuthToken,
+  getAuthToken,
+  clearAuthToken,
+  setTokenRefreshCallback,
+  setTokenRefreshFailedCallback,
+  refreshAuthToken,
+} from './services/auth';
 export { initBaseUrl, getBaseUrl } from './config/configuration';
 export { Config } from './config';
 export * from './core';

package/src/screens/MediaView/VideoPlayer.tsx

@@ -140,6 +140,7 @@ const VideoPlayer = memo((props: Props) => {
     <KContainer.View
       style={[styles.videoContainer, memoHeight]}
       collapsable={false}
+      edges={['bottom']}
       onLayout={handleContainerLayout}
     >
       {renderIndicator()}

package/src/screens/MediaView/index.tsx

@@ -7,6 +7,7 @@ import {
   FlatList,
   type ListRenderItemInfo,
   type ViewToken,
+  StatusBar,
 } from 'react-native';
 
 import LinearGradient from 'react-native-linear-gradient';
@@ -58,12 +59,12 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
 
   const onDownload = useCallback(() => {}, []);
 
-  //   useEffect(() => {
-  //     StatusBar.setHidden(true);
-  //     return () => {
-  //       StatusBar.setHidden(false);
-  //     };
-  //   }, []);
+  useEffect(() => {
+    StatusBar.setHidden(true);
+    return () => {
+      StatusBar.setHidden(false);
+    };
+  }, []);
 
   useEffect(() => {
     if (Platform.OS === 'android') {
@@ -249,7 +250,7 @@ const styles = StyleSheet.create({
     right: 0,
     zIndex: 100,
     minHeight: 100,
-    paddingTop: 20,
+    paddingTop: 30,
   },
   // Figma: Header-First-Row — flex row, padding 8, alignItems center
   headerRow: {

package/src/screens/chat-detail/ChatComposer.tsx

@@ -1,5 +1,6 @@
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Platform, StyleSheet } from 'react-native';
+import { debounce } from 'lodash';
 import Reanimated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KContainer, KColors, KImage, KButton } from '@droppii/libs';
@@ -231,16 +232,21 @@ export const ChatComposer = memo(
       }
     }, [value, setIsInputWrapped]);
 
+    // Debounced image picker (prevent rapid clicks)
+    const debouncedImagePickerRef = useRef(
+      debounce(handleImageAttach, 300, { leading: true, trailing: false })
+    );
+
     // Attachment action handler
     const handleAttachmentActionInternal = useCallback(
       async (action: any) => {
         if (action.id === 'gallery') {
-          await handleImageAttach();
+          debouncedImagePickerRef.current();
         } else {
           onAttachmentAction?.(action);
         }
       },
-      [onAttachmentAction, handleImageAttach]
+      [onAttachmentAction]
     );
 
     // Input row padding

package/src/screens/chat-detail/ChatListLegend.tsx

@@ -191,12 +191,19 @@ export const ChatListLegend = memo(
         on: {
           dataChange: !isLoadingEarlier,
           layout: !isLoadingEarlier,
-          itemLayout: true,
+          // Must be disabled while prepending older history; otherwise re-measuring
+          // the freshly prepended items snaps the list back to the bottom.
+          itemLayout: !isLoadingEarlier,
         },
       }),
       [isLoadingEarlier]
     );
 
+    // Stable config so the native maintainVisibleContentPosition prop isn't toggled
+    // mid-prepend (toggling forces an extra layout recompute). `data` anchoring keeps
+    // the viewport pinned to the item being read when older messages are added on top.
+    const maintainVisiblePositionConfig = useMemo(() => ({ data: true }), []);
+
     const handleStartReached = useCallback(() => {
       if (__DEV__) {
         console.log('[LegendList] onStartReached triggered', {
@@ -349,7 +356,7 @@ export const ChatListLegend = memo(
               : undefined
           }
           alignItemsAtEnd
-          maintainVisibleContentPosition={!isLoadingEarlier}
+          maintainVisibleContentPosition={maintainVisiblePositionConfig}
           maintainScrollAtEnd={maintainScrollConfig}
           scrollEventThrottle={16}
           onScroll={handleScroll}