@droppii-org/chat-mobile 0.2.7 → 0.2.8

package/src/hooks/useImageAttachment.ts

@@ -0,0 +1,348 @@
+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';
+import { trans } from '../translation';
+import { getMimeType, isVideoFromPicker } from '../utils/imageUtils';
+import { ImageUploadAPI } from '../services/imageUpload';
+import VideoThumbnailUtil from '../utils/videoThumbnail';
+
+interface ImageWithUploadStatus {
+  image: PickedImage;
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+  thumbnailUrl?: string;
+  thumbnailSize?: number;
+}
+
+export interface UseImageAttachmentReturn {
+  selectedImages: ImageWithUploadStatus[];
+  isImagePreviewVisible: boolean;
+  handleImageAttach: () => Promise<void>;
+  handleImageRemove: (index: number) => void;
+  clearAllImages: () => void;
+}
+
+export const useImageAttachment = (): UseImageAttachmentReturn => {
+  const [selectedImages, setSelectedImages] = useState<ImageWithUploadStatus[]>(
+    []
+  );
+  const [isImagePreviewVisible, setIsImagePreviewVisible] = useState(false);
+
+  const updateImageStatus = useCallback(
+    (index: number, updates: Partial<Omit<ImageWithUploadStatus, 'image'>>) => {
+      setSelectedImages((prev) => {
+        const newImages = [...prev];
+        if (newImages[index]) {
+          newImages[index] = { ...newImages[index], ...updates };
+        }
+        return newImages;
+      });
+    },
+    []
+  );
+
+  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...');
+        updateImageStatus(index, {
+          isUploading: true,
+          error: null,
+          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'}`
+          );
+        }
+
+        const filename = image.filename || 'image.jpg';
+
+        const setProgress = (progress: number) => {
+          try {
+            console.log('Upload', 'Progress', { percentage: progress });
+            updateImageStatus(index, { uploadProgress: progress });
+          } catch (err) {
+            console.error('Upload', 'Progress update error', err);
+          }
+        };
+
+        let uploadedImage;
+        try {
+          console.log('Upload', 'Step 6: Uploading to server...', {
+            filename,
+            size: image.size,
+          });
+          uploadedImage = await ImageUploadAPI.uploadImageFile(
+            {
+              path: cachedFilePath || '',
+              filename,
+              size: image.size || 0,
+              width: image.width || 0,
+              height: image.height || 0,
+              mime: getMimeType(filename),
+            },
+            setProgress
+          );
+          console.log('Upload', 'Step 7: Upload successful!', {
+            url: uploadedImage?.url,
+          });
+        } catch (uploadError: any) {
+          console.error('Upload', 'Server upload error', uploadError);
+          throw new Error(
+            `Upload failed: ${uploadError?.message || 'Unknown error'}`
+          );
+        }
+
+        if (!uploadedImage?.url) {
+          throw new Error('No URL returned from server');
+        }
+
+        console.log('Upload', 'Step 8: Upload complete, preparing data...');
+        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 ✓');
+      } catch (error: any) {
+        console.error('Upload', 'ERROR', error);
+        const errorMsg = error?.message || trans('chat:image_upload_failed');
+        updateImageStatus(index, {
+          isUploading: false,
+          error: errorMsg,
+        });
+
+        try {
+          if (cachedFilePath) {
+            await ImageUploadAPI.cleanupImageFile(cachedFilePath);
+          }
+        } catch (cleanupError) {
+          console.warn('Upload', 'Cleanup after error', cleanupError);
+        }
+
+        console.error('uploadImage', 'Full error', error);
+      }
+    },
+    [updateImageStatus]
+  );
+
+  const generateVideoThumbnail = useCallback(
+    async (index: number, image: PickedImage) => {
+      if (!isVideoFromPicker(image)) return; // Only for videos
+
+      try {
+        console.log('[ImageAttach] Generating thumbnail for video:', {
+          index,
+          filename: image.filename,
+        });
+
+        const videoDuration = (image as any).duration || 0;
+        const timeMs = Math.min(1000, Math.floor(videoDuration / 2));
+
+        // 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}`;
+
+        await RNFS.copyFile(image.path, cachedVideoPath);
+
+        // Generate thumbnail
+        const thumbnail = await VideoThumbnailUtil.generateThumbnail(
+          cachedVideoPath,
+          { time: timeMs, quality: 80 }
+        );
+
+        if (!thumbnail) throw new Error('Thumbnail generation failed');
+
+        // Upload thumbnail (force .jpg extension for image file)
+        const baseName = image.filename?.split('.')[0] || 'video';
+        const uploadedThumbnail = await ImageUploadAPI.uploadImageFile(
+          {
+            path: thumbnail.path,
+            filename: `thumb-${baseName}.jpg`,
+            size: 0,
+            width: thumbnail.width || 320,
+            height: thumbnail.height || 180,
+            mime: 'image/jpeg',
+          },
+          (progress) => {
+            console.log('[ImageAttach] Thumbnail upload progress:', {
+              index,
+              percentage: progress,
+            });
+          }
+        );
+
+        if (!uploadedThumbnail?.url) {
+          throw new Error('No thumbnail URL returned');
+        }
+
+        // Update state with thumbnail
+        updateImageStatus(index, {
+          thumbnailUrl: uploadedThumbnail.url,
+          thumbnailSize: uploadedThumbnail.size || 0,
+        });
+
+        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({
+          title: 'Thumbnail Error',
+          message: `Failed to generate thumbnail for ${image.filename}`,
+          theme: 'danger',
+        });
+      }
+    },
+    [updateImageStatus]
+  );
+
+  const handleImageAttach = useCallback(
+    async (multipleMode: boolean = true) => {
+      console.log('ImageAttach', 'Step 1: User tapped attachment button', {
+        multipleMode,
+      });
+      try {
+        console.log('ImageAttach', 'Step 2: Opening image picker...');
+        const images = await DeviceUtils.openImagePicker(multipleMode);
+
+        if (!images || images.length === 0) {
+          console.log('ImageAttach', 'Step 3: User cancelled picker');
+          return;
+        }
+
+        console.log('ImageAttach', 'Step 4: Images picked', {
+          count: images.length,
+        });
+
+        const MAX_FILE_SIZE = 5 * 1024 * 1024;
+        const oversizedImages = images.filter(
+          (img) => (img.size || 0) > MAX_FILE_SIZE
+        );
+
+        if (oversizedImages.length > 0) {
+          console.warn('ImageAttach', 'Step 5: Some images too large', {
+            count: oversizedImages.length,
+            maxSize: MAX_FILE_SIZE,
+          });
+          UIUtils.toast.open({
+            title: trans('chat:image_too_large'),
+            theme: 'danger',
+          });
+          const validImages = images.filter(
+            (img) => (img.size || 0) <= MAX_FILE_SIZE
+          );
+          if (validImages.length === 0) return;
+          images.splice(0, images.length, ...validImages);
+        }
+
+        console.log('ImageAttach', 'Step 6: Size validation passed');
+        const startIndex = selectedImages.length;
+
+        console.log('ImageAttach', 'Step 7: Adding to preview list', {
+          count: images.length,
+          startIndex,
+        });
+
+        setSelectedImages((prev) => [
+          ...prev,
+          ...images.map((image) => ({
+            image,
+            uploadProgress: 0,
+            error: null,
+            isUploading: true,
+          })),
+        ]);
+        setIsImagePreviewVisible(true);
+
+        // Generate thumbnails for videos (parallel)
+        console.log(
+          'ImageAttach',
+          'Step 7.5: Generating thumbnails for videos...'
+        );
+        await Promise.all(
+          images.map((image, offset) =>
+            generateVideoThumbnail(startIndex + offset, image)
+          )
+        );
+
+        console.log('ImageAttach', 'Step 8: Starting uploads...');
+        await Promise.all(
+          images.map((image, offset) => uploadImage(startIndex + offset, image))
+        );
+      } catch (error) {
+        console.error('ImageAttach', 'ERROR', error);
+        UIUtils.toast.open({
+          title: trans('chat:image_pick_failed'),
+          message: error instanceof Error ? error.message : 'Unknown error',
+          theme: 'danger',
+        });
+      }
+    },
+    [selectedImages.length, uploadImage, generateVideoThumbnail]
+  );
+
+  const handleImageRemove = useCallback((index: number) => {
+    setSelectedImages((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const clearAllImages = useCallback(() => {
+    setSelectedImages([]);
+    setIsImagePreviewVisible(false);
+  }, []);
+
+  return {
+    selectedImages,
+    isImagePreviewVisible,
+    handleImageAttach,
+    handleImageRemove,
+    clearAllImages,
+  };
+};

package/src/hooks/useMediaViewer.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react';
+
+export interface MediaItem {
+  url: string;
+  isVideo?: boolean;
+}
+
+export interface UseMediaViewerReturn {
+  visible: boolean;
+  mediaList: MediaItem[];
+  initIndex: number;
+  show: (items: MediaItem[], index?: number) => void;
+  hide: () => void;
+}
+
+export function useMediaViewer(): UseMediaViewerReturn {
+  const [visible, setVisible] = useState(false);
+  const [mediaList, setMediaList] = useState<MediaItem[]>([]);
+  const [initIndex, setInitIndex] = useState(0);
+
+  const show = useCallback((items: MediaItem[], index = 0) => {
+    setMediaList(items);
+    setInitIndex(index);
+    setVisible(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  return { visible, mediaList, initIndex, show, hide };
+}

package/src/hooks/useSendAttachment.ts

@@ -0,0 +1,295 @@
+import { useCallback, useState } from 'react';
+import { AttachmentOrchestratorService } from '../services/attachmentOrchestrator';
+import type { Attachment, AttachmentSendOptions } from '../types/attachment';
+import { getMimeType } from '../utils/imageUtils';
+
+export interface ImageItem {
+  type: 'image';
+  image: {
+    path: string;
+    filename?: string;
+    size?: number;
+    width?: number;
+    height?: number;
+  };
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+}
+
+export interface VideoItem {
+  type: 'video';
+  video: {
+    path: string;
+    filename?: string;
+    size?: number;
+    width?: number;
+    height?: number;
+    duration?: number;
+  };
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+  thumbnailUrl?: string;
+  thumbnailSize?: number;
+}
+
+export interface FileItem {
+  type: 'file';
+  file: {
+    path: string;
+    filename?: string;
+    size?: number;
+  };
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+}
+
+export type AttachmentItem = ImageItem | VideoItem | FileItem;
+
+export interface UseSendAttachmentReturn {
+  isLoading: boolean;
+  error: string | null;
+  send(
+    items: AttachmentItem[],
+    options?: Partial<AttachmentSendOptions>,
+    onMessageSent?: (message: any) => void
+  ): Promise<boolean>;
+  clearError(): void;
+}
+
+/**
+ * Smart hook để send mixed attachments (images + videos + files cùng lúc)
+ * - Detect type của từng item
+ * - Group by type
+ * - Send với handler riêng cho mỗi type
+ */
+export function useSendAttachment(): UseSendAttachmentReturn {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const send = useCallback(
+    async (
+      items: AttachmentItem[],
+      options?: Partial<AttachmentSendOptions>,
+      onMessageSent?: (message: any) => void
+    ): Promise<boolean> => {
+      console.log('[useSendAttachment] Start sending', {
+        totalItems: items.length,
+        strategy: options?.strategy || 'individual',
+      });
+
+      // Filter uploaded items
+      const uploadedItems = items.filter((item) => item.uploadedUrl);
+      console.log('[useSendAttachment] Filtered uploaded items', {
+        uploadedCount: uploadedItems.length,
+        uploadedTypes: uploadedItems.map((i) => i.type),
+      });
+
+      if (uploadedItems.length === 0) {
+        setError('No uploaded attachments to send');
+        console.warn('[useSendAttachment] No uploaded items to send');
+        return false;
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Convert items → Attachments (detect type)
+        console.log('[useSendAttachment] Converting to Attachment objects...', {
+          itemCount: uploadedItems.length,
+          itemTypes: uploadedItems.map((i) => i.type),
+        });
+        const attachments = uploadedItems.map((item) => {
+          const baseId = `att-${Date.now()}-${Math.random()}`;
+
+          // Auto-detect video from mime type if not explicitly typed
+          let itemType = item.type;
+          if (
+            itemType === 'image' &&
+            item.uploadedUrl &&
+            item.uploadedUrl.includes('.MP4')
+          ) {
+            itemType = 'video';
+            console.log('[useSendAttachment] Auto-detected video from URL');
+          }
+
+          console.log('[useSendAttachment] Converting item:', {
+            originalType: item.type,
+            detectedType: itemType,
+          });
+
+          if (itemType === 'image' && item.type === 'image') {
+            return {
+              id: baseId,
+              type: 'image' as const,
+              sourceFile: {
+                path: (item as ImageItem).image.path,
+                filename: (item as ImageItem).image.filename || 'image.jpg',
+                size: (item as ImageItem).image.size || 0,
+                mimeType: getMimeType(
+                  (item as ImageItem).image.filename || 'jpg'
+                ),
+              },
+              metadata: {
+                width: (item as ImageItem).image.width || 0,
+                height: (item as ImageItem).image.height || 0,
+              },
+            };
+          }
+
+          if (itemType === 'video') {
+            // Handle both VideoItem and auto-detected video from ImageItem
+            const videoData =
+              item.type === 'video'
+                ? (item as VideoItem).video
+                : (item as ImageItem).image;
+            const duration =
+              item.type === 'video'
+                ? (item as VideoItem).video.duration || 0
+                : 0;
+            const thumbnailUrl =
+              item.type === 'video'
+                ? (item as VideoItem).thumbnailUrl
+                : undefined;
+            const thumbnailSize =
+              item.type === 'video'
+                ? (item as VideoItem).thumbnailSize
+                : undefined;
+
+            const metadata: any = {
+              width: videoData.width || 0,
+              height: videoData.height || 0,
+              duration,
+            };
+
+            if (thumbnailUrl) {
+              metadata.thumbnail = {
+                url: thumbnailUrl,
+                width: videoData.width || 320,
+                height: videoData.height || 180,
+                size: thumbnailSize,
+              };
+            }
+
+            return {
+              id: baseId,
+              type: 'video' as const,
+              sourceFile: {
+                path: videoData.path,
+                filename: videoData.filename || 'video.mp4',
+                size: videoData.size || 0,
+                mimeType: getMimeType(videoData.filename || 'mp4'),
+              },
+              metadata,
+            };
+          }
+
+          if (itemType === 'file' && item.type === 'file') {
+            return {
+              id: baseId,
+              type: 'file' as const,
+              sourceFile: {
+                path: (item as FileItem).file.path,
+                filename: (item as FileItem).file.filename || 'file.bin',
+                size: (item as FileItem).file.size || 0,
+                mimeType: getMimeType(
+                  (item as FileItem).file.filename || 'bin'
+                ),
+              },
+              metadata: {
+                extension:
+                  (item as FileItem).file.filename?.split('.').pop() || '',
+                category: 'other' as const,
+              },
+            };
+          }
+
+          // Fallback - shouldn't reach here
+          throw new Error(`Unknown attachment type: ${itemType}`);
+        });
+
+        // Map uploadedUrl
+        console.log('[useSendAttachment] Mapping uploaded URLs...');
+        const uploadedUrls: Record<string, string> = {};
+        uploadedItems.forEach((item) => {
+          let sourcePath = '';
+          if (item.type === 'image') sourcePath = item.image.path;
+          else if (item.type === 'video') sourcePath = item.video.path;
+          else sourcePath = item.file.path;
+
+          const att = attachments.find((a) => a.sourceFile.path === sourcePath);
+          if (att && item.uploadedUrl) {
+            uploadedUrls[att.id] = item.uploadedUrl;
+            console.log(`[useSendAttachment] Mapped ${att.type}:`, {
+              attachmentId: att.id,
+              url: item.uploadedUrl,
+            });
+          }
+        });
+
+        // Send all (mixed types)
+        console.log('[useSendAttachment] Calling sendPreparedAttachments...', {
+          attachmentCount: attachments.length,
+          strategy: options?.strategy || 'individual',
+        });
+        const result =
+          await AttachmentOrchestratorService.sendPreparedAttachments(
+            attachments as Attachment[],
+            uploadedUrls,
+            {
+              strategy: 'individual',
+              ...options,
+            },
+            onMessageSent
+          );
+
+        console.log('[useSendAttachment] Send result:', {
+          success: result.success,
+          sentCount: result.sentAttachmentIds.length,
+          failedCount: result.failedAttachmentIds.length,
+          mergedMessageId: result.mergedMessageId,
+          errors: result.errors,
+        });
+
+        if (!result.success) {
+          const errorMsg =
+            Object.values(result.errors).join(', ') ||
+            'Failed to send attachments';
+          setError(errorMsg);
+          console.error('[useSendAttachment] Send failed:', errorMsg);
+          return false;
+        }
+
+        console.log('[useSendAttachment] Successfully sent attachments');
+        return true;
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : 'Unknown error';
+        setError(errorMsg);
+        console.error('[useSendAttachment] Exception:', {
+          error: errorMsg,
+          stack: err instanceof Error ? err.stack : undefined,
+        });
+        return false;
+      } finally {
+        setIsLoading(false);
+        console.log('[useSendAttachment] Finished');
+      }
+    },
+    []
+  );
+
+  const clearError = useCallback(() => setError(null), []);
+
+  return {
+    isLoading,
+    error,
+    send,
+    clearError,
+  };
+}