@droppii-org/chat-mobile 0.2.14 → 0.2.16

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/hooks/useAttachmentSendHandler.ts

@@ -73,25 +73,31 @@ export const useAttachmentSendHandler = ({
     );
 
     // Auto-generate thumbnails for gallery videos
+    // Use unique ID per video to avoid race conditions and path mismatches
     const galleryVideoThumbnails: Record<
       string,
       { url: string; size: number }
     > = {};
+    const failedVideos: string[] = []; // Track failed videos
 
     if (uploadedVideosFromGallery.length > 0) {
       console.log(
         '[ChatComposer] Auto-generating thumbnails for gallery videos...'
       );
 
-      for (const vidItem of uploadedVideosFromGallery) {
+      for (let idx = 0; idx < uploadedVideosFromGallery.length; idx++) {
+        const vidItem = uploadedVideosFromGallery[idx]!;
+        const videoId = vidItem.uploadedUrl || `video-${idx}`; // Use unique ID instead of path
         let cachedVideoPath: string | null = null;
+
         try {
           const originalVideoPath = vidItem.image.path;
-          const videoDuration = (vidItem.image as any).duration || 0;
+          let videoDuration = (vidItem.image as any).duration || 0;
           const videoMime = (vidItem.image as any).mime;
           const filename = vidItem.image.filename || 'video.mp4';
 
-          console.log('[ChatComposer] Generating thumbnail for:', {
+          console.log('[ChatComposer] Generating thumbnail for video:', {
+            index: idx,
             filename,
             originalVideoPath,
             videoDuration,
@@ -99,9 +105,20 @@ export const useAttachmentSendHandler = ({
             uploadedUrl: vidItem.uploadedUrl,
           });
 
+          // ✅ FIX: Validate duration is reasonable
+          if (videoDuration <= 0 || videoDuration > 3600000) {
+            // Duration should be between 0 and 1 hour (3600000ms)
+            console.warn(
+              '[ChatComposer] Invalid duration, using default:',
+              videoDuration
+            );
+            videoDuration = 5000; // Default 5 seconds
+          }
+
           // Copy video to persistent location
           const ext = filename.split('.').pop() || 'mp4';
-          const cachedFileName = `thumb-cache-${Date.now()}-${Math.random()
+          // ✅ FIX: Use unique ID to avoid race condition
+          const cachedFileName = `thumb-cache-${idx}-${Date.now()}-${Math.random()
             .toString(36)
             .slice(2)}.${ext}`;
           cachedVideoPath = `${RNFS.DocumentDirectoryPath}/${cachedFileName}`;
@@ -114,10 +131,16 @@ export const useAttachmentSendHandler = ({
           await RNFS.copyFile(originalVideoPath, cachedVideoPath);
           console.log('[ChatComposer] Video cached successfully');
 
-          // Use smaller time offset if video is very short
-          const timeMs = Math.min(1000, Math.floor(videoDuration / 2));
+          // ✅ FIX: Choose frame at 30-40% for better representation
+          // (not exactly middle, to avoid black frames/transitions)
+          const timeMs = Math.min(
+            Math.max(1000, Math.floor(videoDuration * 0.35)),
+            videoDuration - 1000
+          );
 
-          console.log('[ChatComposer] Thumbnail settings:', {
+          console.log('[ChatComposer] Thumbnail settings for video:', {
+            index: idx,
+            videoDuration,
             timeMs,
             quality: 80,
             videoPath: cachedVideoPath,
@@ -126,21 +149,27 @@ export const useAttachmentSendHandler = ({
           // Generate thumbnail from cached copy
           const thumbnail = await VideoThumbnailUtil.generateThumbnail(
             cachedVideoPath,
-            { time: timeMs, quality: 80 }
+            {
+              time: timeMs,
+              quality: 80,
+              cacheId: `thumb-${idx}-${Date.now()}`,
+            }
           );
 
           if (!thumbnail) {
             throw new Error('Failed to generate thumbnail');
           }
 
-          console.log('[ChatComposer] Thumbnail generated:', {
+          console.log('[ChatComposer] Thumbnail generated for video:', {
+            index: idx,
             path: thumbnail.path,
             width: thumbnail.width,
             height: thumbnail.height,
           });
 
           // Upload thumbnail
-          const baseName = vidItem.image.filename?.split('.')[0] || 'video';
+          const baseName =
+            vidItem.image.filename?.split('.')[0] || `video-${idx}`;
           const uploadedThumbnail = await ImageUploadAPI.uploadImageFile(
             {
               path: thumbnail.path,
@@ -152,6 +181,7 @@ export const useAttachmentSendHandler = ({
             },
             (progress) => {
               console.log('[ChatComposer] Thumbnail upload progress:', {
+                videoIndex: idx,
                 percentage: progress,
               });
             }
@@ -161,33 +191,41 @@ export const useAttachmentSendHandler = ({
             throw new Error('No thumbnail URL returned');
           }
 
-          // Store thumbnail data
-          galleryVideoThumbnails[vidItem.image.path] = {
+          // ✅ FIX: Store with unique ID instead of path
+          galleryVideoThumbnails[videoId] = {
             url: uploadedThumbnail.url,
             size: uploadedThumbnail.size || 0,
           };
 
-          console.log('[ChatComposer] Thumbnail ready:', {
+          console.log('[ChatComposer] Thumbnail ready for video:', {
+            videoIndex: idx,
+            videoId,
             url: uploadedThumbnail.url,
             size: uploadedThumbnail.size,
           });
           console.log(
-            `✅ [ChatComposer] THUMBNAIL URL: ${uploadedThumbnail.url}`
+            `✅ [ChatComposer] Video #${idx} THUMBNAIL URL: ${uploadedThumbnail.url}`
           );
         } catch (error) {
-          console.error('[ChatComposer] Thumbnail generation error:', error);
-          UIUtils.toast.open({
-            title: 'Thumbnail Error',
-            message: `Failed to generate thumbnail for ${vidItem.image.filename}`,
-            theme: 'danger',
-          });
-          return;
+          // ✅ FIX: Skip failed video instead of aborting all
+          const errorMsg =
+            error instanceof Error ? error.message : String(error);
+          console.error(
+            '[ChatComposer] Thumbnail generation error for video:',
+            idx,
+            errorMsg
+          );
+          failedVideos.push(vidItem.image.filename);
+
+          // Mark this video as failed (no thumbnail)
+          galleryVideoThumbnails[videoId] = { url: '', size: 0 };
         } finally {
           // Cleanup cached video file
           if (cachedVideoPath) {
             try {
               await RNFS.unlink(cachedVideoPath);
               console.log('[ChatComposer] Cleaned up cached video:', {
+                videoIndex: idx,
                 path: cachedVideoPath,
               });
             } catch (err) {
@@ -196,6 +234,19 @@ export const useAttachmentSendHandler = ({
           }
         }
       }
+
+      // Show error about failed videos if any
+      if (failedVideos.length > 0) {
+        UIUtils.toast.open({
+          title: 'Thumbnail Generation Failed',
+          message: `Failed for: ${failedVideos.join(', ')}. Videos will be sent without thumbnails.`,
+          theme: 'warning',
+        });
+        console.warn(
+          '[ChatComposer] Failed to generate thumbnails for:',
+          failedVideos
+        );
+      }
     }
 
     const allUploadedVideos = [...uploadedVideosFromGallery];
@@ -210,10 +261,13 @@ export const useAttachmentSendHandler = ({
 
     // Log thumbnail URLs
     if (uploadedVideosFromGallery.length > 0) {
-      uploadedVideosFromGallery.forEach((vid: any) => {
-        const thumbnail = galleryVideoThumbnails[vid.image.path];
+      uploadedVideosFromGallery.forEach((vid: any, vidIdx: number) => {
+        // ✅ Use same key as storage: uploadedUrl or video-${idx}
+        const videoId = vid.uploadedUrl || `video-${vidIdx}`;
+        const thumbnail = galleryVideoThumbnails[videoId];
         console.log(`✅ [ChatComposer] Gallery Video Thumbnail:`, {
           filename: vid.image.filename,
+          videoId,
           thumbnailUrl: thumbnail?.url || 'NOT FOUND',
           videoUrl: vid.uploadedUrl,
         });
@@ -228,8 +282,10 @@ export const useAttachmentSendHandler = ({
           type: 'image' as const,
         })),
         // Videos from gallery picker with auto-generated thumbnails
-        ...uploadedVideosFromGallery.map((vid: any) => {
-          const thumbnail = galleryVideoThumbnails[vid.image.path];
+        ...uploadedVideosFromGallery.map((vid: any, vidIdx: number) => {
+          // ✅ Use same key as storage: uploadedUrl or video-${idx}
+          const videoId = vid.uploadedUrl || `video-${vidIdx}`;
+          const thumbnail = galleryVideoThumbnails[videoId];
           return {
             type: 'video' as const,
             video: vid.image,

package/src/services/attachmentHandlers/imageAttachmentHandler.ts

@@ -9,7 +9,14 @@ export const ImageAttachmentHandler: IAttachmentHandler = {
       return { valid: false, reason: 'Image exceeds 5MB limit' };
     }
 
-    const validMimes = ['image/jpeg', 'image/png', 'image/webp', 'image/jpg'];
+    const validMimes = [
+      'image/jpeg',
+      'image/png',
+      'image/webp',
+      'image/jpg',
+      'image/heic',
+      'image/heif',
+    ];
     if (!validMimes.includes(attachment.sourceFile.mimeType)) {
       return {
         valid: false,
@@ -28,6 +35,7 @@ export const ImageAttachmentHandler: IAttachmentHandler = {
     console.log('[ImageAttachmentHandler] Building payload for', {
       filename: attachment.sourceFile.filename,
       url: uploadedUrl,
+      // path: attachment.sourceFile.path,
     });
 
     const picInfo = {
@@ -43,10 +51,12 @@ export const ImageAttachmentHandler: IAttachmentHandler = {
       sourcePicture: picInfo,
       bigPicture: picInfo,
       snapshotPicture: picInfo,
+      sourcePath: attachment.sourceFile.path, // Required by OpenIM SDK to attach image to message
     };
 
     console.log('[ImageAttachmentHandler] Payload created for', {
       fileName: attachment.sourceFile.filename,
+      sourcePath: attachment.sourceFile.path,
     });
 
     return payload;

package/src/services/auth.ts

@@ -5,6 +5,8 @@
  */
 
 let authToken: string | null = null;
+let tokenRefreshCallback: (() => Promise<string>) | null = null;
+let tokenRefreshFailedCallback: (() => void) | null = null;
 
 /**
  * Set auth token (call once at app startup)
@@ -26,9 +28,84 @@ export const getAuthToken = (): string => {
   return authToken;
 };
 
+/**
+ * Set callback for token refresh when 401 Unauthorized occurs
+ * Callback should refresh token from server and return the new token
+ * Example:
+ * setTokenRefreshCallback(async () => {
+ *   const newToken = await api.post('/auth/refresh');
+ *   return newToken;
+ * });
+ */
+export const setTokenRefreshCallback = (
+  callback: () => Promise<string>
+): void => {
+  tokenRefreshCallback = callback;
+};
+
+/**
+ * Set callback when token refresh fails
+ * Called when token refresh throws error or returns invalid token
+ * Use this to redirect to login, show error message, etc.
+ * Example:
+ * setTokenRefreshFailedCallback(() => {
+ *   navigation.navigate('Login');
+ *   showToast('Your session expired. Please login again.');
+ * });
+ */
+export const setTokenRefreshFailedCallback = (callback: () => void): void => {
+  tokenRefreshFailedCallback = callback;
+};
+
+/**
+ * Refresh auth token when 401 Unauthorized occurs
+ * Calls the refresh callback and updates the stored token
+ * If refresh fails:
+ * 1. Clears the invalid token
+ * 2. Calls tokenRefreshFailedCallback (if set) to notify app
+ * 3. Throws error
+ * @returns new auth token
+ * @throws Error if callback not set or refresh fails
+ */
+export const refreshAuthToken = async (): Promise<string> => {
+  if (!tokenRefreshCallback) {
+    throw new Error(
+      'Token refresh callback not set. Call setTokenRefreshCallback() during app initialization.'
+    );
+  }
+
+  try {
+    const newToken = await tokenRefreshCallback();
+    if (!newToken) {
+      throw new Error('Refresh callback returned empty token');
+    }
+    setAuthToken(newToken);
+    return newToken;
+  } catch (error) {
+    // Clear invalid token
+    clearAuthToken();
+
+    // Notify app that refresh failed
+    if (tokenRefreshFailedCallback) {
+      try {
+        tokenRefreshFailedCallback();
+      } catch (callbackError) {
+        console.error(
+          '[Auth] Token refresh failed callback error:',
+          callbackError
+        );
+      }
+    }
+
+    // Throw original error
+    throw error instanceof Error ? error : new Error('Token refresh failed');
+  }
+};
+
 /**
  * Clear token (logout)
  */
 export const clearAuthToken = () => {
   authToken = null;
+  tokenRefreshCallback = null;
 };

package/src/services/imageUpload.ts

@@ -1,9 +1,9 @@
 import ReactNativeBlobUtil from 'react-native-blob-util';
 import RNFS from 'react-native-fs';
 import { getImageUploadEndpoint, getMimeType } from '../utils/imageUtils';
-import { getAuthToken } from './auth';
+import { getAuthToken, refreshAuthToken } from './auth';
 import { getApiEndpoint } from '../config/api-endpoints';
-import { getBaseUrl } from '../config/configuration';
+import { apiInstance } from './apis';
 import type {
   ImageFile,
   UploadedImage,
@@ -11,31 +11,12 @@ import type {
 } from '../types/imageUpload';
 
 export namespace ImageUploadAPI {
-  export const uploadImageFile = async (
+  const performUpload = async (
+    uploadUrl: string,
     file: ImageFile,
+    token: string,
     onProgress?: (progress: number) => void
-  ): Promise<UploadedImage> => {
-    let token: string;
-    let uploadUrl: string;
-
-    try {
-      token = getAuthToken();
-      const relativePath = getApiEndpoint('imageUpload');
-      const baseUrl = getBaseUrl();
-
-      if (!baseUrl) {
-        throw new Error(
-          'Image upload base URL not configured. Call initChatSdk() with apiBaseUrl during app initialization.'
-        );
-      }
-
-      // Construct absolute URL for ReactNativeBlobUtil.fetch()
-      uploadUrl = getImageUploadEndpoint(`${baseUrl}${relativePath}`);
-    } catch (e) {
-      if (__DEV__) console.error('[ImageUploadAPI] Auth error:', e);
-      throw e;
-    }
-
+  ): Promise<any> => {
     return new Promise((resolve, reject) => {
       ReactNativeBlobUtil.fetch(
         'POST',
@@ -56,57 +37,119 @@ export namespace ImageUploadAPI {
           const progress = Math.round((written / total) * 100);
           onProgress?.(progress);
         })
-        .then((response) => {
-          // Check for HTTP error status
-          const status = response.respInfo?.status;
-          if (status && status >= 400) {
-            if (__DEV__)
-              console.error('[ImageUploadAPI] Server error response', {
-                status,
-                data: response.data,
-              });
-            reject(new Error(`Upload failed with status ${status}`));
-            return;
-          }
+        .then((response) => resolve(response))
+        .catch((error) => reject(error));
+    });
+  };
 
-          if (!response.data || response.data.length === 0) {
-            if (__DEV__)
-              console.error('[ImageUploadAPI] Empty response', {
-                dataType: typeof response.data,
-                data: response.data,
-              });
-            reject(new Error('Empty response from server'));
-            return;
-          }
+  const parseUploadResponse = (responseData: string): UploadedImage | null => {
+    try {
+      const json = JSON.parse(responseData);
+      const uploaded = json.data?.[0] || json.files?.[0];
+      const imageUrl = uploaded?.publicUrl || uploaded?.url || uploaded?.data;
+      if (imageUrl) {
+        return {
+          url: imageUrl,
+          name: uploaded?.fileName,
+          width: uploaded?.width,
+          height: uploaded?.height,
+          size: uploaded?.size,
+        };
+      }
+      return null;
+    } catch (err) {
+      if (__DEV__) console.error('[ImageUploadAPI] Parse error:', err);
+      return null;
+    }
+  };
 
-          try {
-            const json = JSON.parse(response.data);
-            const uploaded = json.data?.[0] || json.files?.[0];
-            const imageUrl =
-              uploaded?.publicUrl || uploaded?.url || uploaded?.data;
-            if (imageUrl) {
-              resolve({
-                url: imageUrl,
-                name: uploaded?.fileName,
-                width: file.width,
-                height: file.height,
-                size: file.size,
-              });
-            } else {
-              if (__DEV__)
-                console.error('[ImageUploadAPI] No URL in response:', json);
-              reject(new Error('No URL in response'));
-            }
-          } catch (err) {
-            if (__DEV__) console.error('[ImageUploadAPI] Parse error:', err);
-            reject(new Error('Invalid response format'));
-          }
-        })
-        .catch((error) => {
-          if (__DEV__) console.error('[ImageUploadAPI] Fetch error:', error);
-          reject(error);
+  export const uploadImageFile = async (
+    file: ImageFile,
+    onProgress?: (progress: number) => void
+  ): Promise<UploadedImage> => {
+    let token: string;
+    let uploadUrl: string;
+
+    try {
+      token = getAuthToken();
+      const relativePath = getApiEndpoint('imageUpload');
+      const baseUrl = apiInstance?.defaults?.baseURL;
+
+      if (!baseUrl) {
+        throw new Error(
+          'Image upload base URL not configured. Call initApiInstance() during app initialization.'
+        );
+      }
+
+      uploadUrl = getImageUploadEndpoint(`${baseUrl}${relativePath}`);
+    } catch (e) {
+      if (__DEV__) console.error('[ImageUploadAPI] Auth error:', e);
+      throw e;
+    }
+
+    let response = await performUpload(uploadUrl, file, token, onProgress);
+    const status = response.respInfo?.status;
+
+    // Handle 401 Unauthorized - refresh token and retry once
+    if (status === 401) {
+      if (__DEV__)
+        console.warn('[ImageUploadAPI] Got 401, attempting token refresh...');
+
+      try {
+        const newToken = await refreshAuthToken();
+        if (__DEV__)
+          console.log('[ImageUploadAPI] Token refreshed, retrying upload...');
+
+        // Retry upload with new token
+        response = await performUpload(uploadUrl, file, newToken, onProgress);
+        const retryStatus = response.respInfo?.status;
+
+        if (retryStatus === 401) {
+          throw new Error(
+            'Auth token still invalid after refresh. (401 Unauthorized)'
+          );
+        }
+
+        if (retryStatus && retryStatus >= 400) {
+          throw new Error(`Upload failed with status ${retryStatus}`);
+        }
+      } catch (refreshError) {
+        if (__DEV__)
+          console.error('[ImageUploadAPI] Token refresh failed:', refreshError);
+        throw refreshError instanceof Error
+          ? refreshError
+          : new Error('Token refresh failed');
+      }
+    } else if (status && status >= 400) {
+      if (__DEV__)
+        console.error('[ImageUploadAPI] Server error response', {
+          status,
+          data: response.data,
         });
-    });
+      throw new Error(`Upload failed with status ${status}`);
+    }
+
+    if (!response.data || response.data.length === 0) {
+      if (__DEV__)
+        console.error('[ImageUploadAPI] Empty response', {
+          dataType: typeof response.data,
+          data: response.data,
+        });
+      throw new Error('Empty response from server');
+    }
+
+    const uploadedImage = parseUploadResponse(response.data);
+    if (!uploadedImage) {
+      throw new Error('No URL in response');
+    }
+
+    return {
+      url: uploadedImage.url,
+      name: uploadedImage.name,
+      width: file.width,
+      height: file.height,
+      size: file.size,
+    };
   };
 
   export const uploadImageQueue = async (

package/src/utils/chatImageDimens.ts

@@ -139,6 +139,7 @@ class ChatImageDimens {
   /**
    * Get optimized image URL with custom dimensions (generic approach)
    * Useful for dynamic sizing based on actual content
+   * Automatically applies pixel ratio for high-DPI displays
    */
   public static getOptimizedImageUrlWithDimensions(
     url: string | undefined,
@@ -154,6 +155,20 @@ class ChatImageDimens {
       return url;
     }
 
+    // Check if image format is supported for WebP conversion
+    // Only convert standard formats (jpg, jpeg, png) to WebP
+    // For unsupported formats (heic, heif, etc.), return original URL
+    const unsupportedFormats = ['.heic', '.heif'];
+    const urlLower = url.toLowerCase();
+    const isUnsupportedFormat = unsupportedFormats.some((format) =>
+      urlLower.includes(format)
+    );
+
+    if (isUnsupportedFormat) {
+      // Return original URL without optimization for unsupported formats
+      return url;
+    }
+
     const domainRegex = /^(https?:\/\/[^/]+)/;
     const domainMatches = url.match(domainRegex);
 
@@ -164,8 +179,13 @@ class ChatImageDimens {
     const domain = domainMatches[1];
     const restOfUrl = url.replace(domain as string, '');
 
+    // Account for device pixel ratio: request higher resolution for high-DPI displays
+    const pixelRatio = PixelRatio.get();
+    const optimizedWidth = Math.round(width * pixelRatio);
+    const optimizedHeight = Math.round(height * pixelRatio);
+
     // Build optimized URL: domain/cache/WIDTHxHEIGHT/path.webp
-    let optimizedUrl = `${domain}/cache/${width}x${height}${restOfUrl}`;
+    let optimizedUrl = `${domain}/cache/${optimizedWidth}x${optimizedHeight}${restOfUrl}`;
 
     if (!restOfUrl.endsWith('.webp')) {
       optimizedUrl += '.webp';