@droppii-org/chat-mobile 0.2.17 → 0.2.18

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

@@ -21,15 +21,17 @@ import { getAttachmentPanelHeight } from './constants';
 import type { ChatComposerProps } from './types';
 import { useLinkPreview } from '../../hooks/useLinkPreview/useLinkPreview';
 import { useImageAttachment } from '../../hooks/useImageAttachment';
+import { useFileAttachment } from '../../hooks/useFileAttachment';
 import { useSendAttachment } from '../../hooks/useSendAttachment';
 import { useChatComposerState } from './hooks/useChatComposerState';
 import { useChatComposerAnimation } from './hooks/useChatComposerAnimation';
 import { useAttachmentSendHandler } from './hooks/useAttachmentSendHandler';
-import { isVideoFromPicker } from '../../utils/imageUtils';
 import { useChatDetailContext } from '../../context/ChatDetailContext';
 import { trans } from '../../translation';
 import { useRunFlow } from '../../hooks/flows/useFlow';
 import { ReactFlowsNodeTypes } from '../../types/flows';
+import { useAttachmentMapping } from './hooks/useAttachmentMapping';
+import type { AttachmentType } from '../../types/attachment';
 
 export const ChatComposer = memo(
   ({
@@ -73,6 +75,15 @@ export const ChatComposer = memo(
       clearAllImages,
     } = useImageAttachment();
 
+    // File attachment
+    const {
+      selectedFiles,
+      isFilePreviewVisible,
+      handleFileAttach,
+      handleFileRemove,
+      clearAllFiles,
+    } = useFileAttachment();
+
     // Send attachment
     const { send: sendAttachments } = useSendAttachment();
 
@@ -95,8 +106,10 @@ export const ChatComposer = memo(
     // Attachment send handler
     const { handleSend: handleAttachmentSend } = useAttachmentSendHandler({
       selectedImages,
+      selectedFiles,
       sendAttachments,
       clearAllImages,
+      clearAllFiles,
       onSend,
       onMessageSent,
       textMessage: (value ?? '').trim(),
@@ -135,15 +148,18 @@ export const ChatComposer = memo(
         onAttachmentOpenChange: setIsAttachmentOpen,
       });
 
-    // Check if any attachments are currently uploading
+    // Check if any attachments are currently uploading or have errors
     const isUploadingAttachments = useMemo(
-      () => selectedImages.some((img: any) => img.isUploading),
-      [selectedImages]
+      () =>
+        selectedImages.some((img: any) => img.isUploading) ||
+        selectedFiles.some((f) => f.isUploading || !!f.error),
+      [selectedImages, selectedFiles]
     );
 
     // Send handler - includes attachment and preview link features
     const handleSend = useCallback(() => {
-      const hasAttachments = selectedImages.length > 0;
+      const hasAttachments =
+        selectedImages.length > 0 || selectedFiles.length > 0;
       const hasText = (value ?? '').trim().length > 0;
       // Only send metadata if preview is CURRENTLY visible (user didn't dismiss it)
       const previewMetadata =
@@ -184,6 +200,7 @@ export const ChatComposer = memo(
       urlMetadata,
       showLinkPreview,
       selectedImages,
+      selectedFiles,
       handleAttachmentSend,
       value,
       isUploadingAttachments,
@@ -232,9 +249,22 @@ export const ChatComposer = memo(
       }
     }, [value, setIsInputWrapped]);
 
-    // Debounced image picker (prevent rapid clicks)
+    const handleImageAttachRef = useRef(handleImageAttach);
+    handleImageAttachRef.current = handleImageAttach;
     const debouncedImagePickerRef = useRef(
-      debounce(handleImageAttach, 300, { leading: true, trailing: false })
+      debounce(() => handleImageAttachRef.current(), 300, {
+        leading: true,
+        trailing: false,
+      })
+    );
+
+    const handleFileAttachRef = useRef(handleFileAttach);
+    handleFileAttachRef.current = handleFileAttach;
+    const debouncedFilePickerRef = useRef(
+      debounce(() => handleFileAttachRef.current(), 300, {
+        leading: true,
+        trailing: false,
+      })
     );
 
     // Attachment action handler
@@ -242,6 +272,8 @@ export const ChatComposer = memo(
       async (action: any) => {
         if (action.id === 'gallery') {
           debouncedImagePickerRef.current();
+        } else if (action.id === 'file') {
+          debouncedFilePickerRef.current();
         } else {
           onAttachmentAction?.(action);
         }
@@ -257,6 +289,24 @@ export const ChatComposer = memo(
       [insets.bottom, isAttachmentOpen]
     );
 
+    const attachments = useAttachmentMapping({
+      selectedImages,
+      selectedFiles,
+    });
+
+    const onRemove = useCallback(
+      (type: AttachmentType, data: unknown) => {
+        switch (type) {
+          case 'file':
+            return handleFileRemove(data as string);
+
+          default:
+            return handleImageRemove(data as number);
+        }
+      },
+      [handleImageRemove, handleFileRemove]
+    );
+
     if (
       isBotConversation &&
       conversationFlow?.flowCurrentStep?.type === ReactFlowsNodeTypes.Start &&
@@ -278,6 +328,7 @@ export const ChatComposer = memo(
         </KContainer.View>
       );
     }
+
     return (
       <KContainer.View background={'rgba(131, 137, 157, 0.05)'}>
         <ChatQuickActions
@@ -297,29 +348,9 @@ export const ChatComposer = memo(
         )}
 
         <AttachmentPreview
-          visible={isImagePreviewVisible}
-          attachments={selectedImages.map((img: any) => {
-            const isVideo = isVideoFromPicker(img.image);
-            return {
-              type: isVideo ? ('video' as const) : ('image' as const),
-              metadata: {
-                path: img.image.path,
-                filename: img.image.filename,
-                size: img.image.size,
-                width: img.image.width,
-                height: img.image.height,
-                ...(isVideo && { duration: (img.image as any).duration }),
-              },
-              uploadProgress: img.uploadProgress,
-              error: img.error,
-              isUploading: img.isUploading,
-              uploadedUrl: img.uploadedUrl,
-              ...(isVideo && { thumbnailUrl: img.thumbnailUrl }),
-            };
-          })}
-          onRemove={(type, index) => {
-            handleImageRemove(index);
-          }}
+          visible={isImagePreviewVisible || isFilePreviewVisible}
+          attachments={attachments}
+          onRemove={onRemove}
         />
 
         <KContainer.View

package/src/screens/chat-detail/hooks/useAttachmentMapping.ts

@@ -0,0 +1,58 @@
+import { isVideoFromPicker } from '../../../utils/imageUtils';
+import type { ImageWithUploadStatus } from '../../../hooks/useImageAttachment';
+import type { FileWithUploadStatus } from '../../../hooks/useFileAttachment';
+import type { AttachmentItem } from '../../../types/attachment';
+import { useMemo } from 'react';
+
+type Props = {
+  selectedImages: ImageWithUploadStatus[];
+  selectedFiles: FileWithUploadStatus[];
+};
+
+const mapMedia = (img: ImageWithUploadStatus): AttachmentItem => {
+  const isVideo = isVideoFromPicker(img.image);
+  return {
+    type: isVideo ? ('video' as const) : ('image' as const),
+    metadata: {
+      path: img.image.path,
+      filename: img.image.filename,
+      size: img.image.size,
+      width: img.image.width,
+      height: img.image.height,
+      ...(isVideo && { duration: (img.image as any).duration }),
+    },
+    uploadProgress: img.uploadProgress,
+    error: img.error,
+    isUploading: img.isUploading,
+    uploadedUrl: img.uploadedUrl,
+    ...(isVideo && { thumbnailUrl: img.thumbnailUrl }),
+  };
+};
+
+const mapFile = (file: FileWithUploadStatus): AttachmentItem => {
+  return {
+    type: 'file',
+    metadata: {
+      id: file.id,
+      path: file.uri,
+      filename: file.name,
+      size: file.size,
+      mimeType: file.mimeType,
+      uri: file.uri,
+    },
+    uploadProgress: file.uploadProgress,
+    error: file.error,
+    isUploading: file.isUploading,
+    uploadedUrl: file.uploadedUrl,
+  };
+};
+
+export const useAttachmentMapping = ({
+  selectedImages,
+  selectedFiles,
+}: Props) => {
+  return useMemo(
+    () => [...selectedImages.map(mapMedia), ...selectedFiles.map(mapFile)],
+    [selectedImages, selectedFiles]
+  );
+};

package/src/screens/chat-detail/hooks/useAttachmentSendHandler.ts

@@ -5,6 +5,7 @@ import VideoThumbnailUtil from '../../../utils/videoThumbnail';
 import { ImageUploadAPI } from '../../../services/imageUpload';
 import UIUtils from '../../../utils/ui';
 import type { DMessageItem } from '../../../types/chat';
+import type { FileWithUploadStatus } from '../../../hooks/useFileAttachment';
 
 interface AttachmentItem {
   image: any;
@@ -16,12 +17,14 @@ interface AttachmentItem {
 
 interface UseAttachmentSendHandlerProps {
   selectedImages: AttachmentItem[];
+  selectedFiles: FileWithUploadStatus[];
   sendAttachments: (
     items: any[],
     _: any,
     onMessageSent?: (message: DMessageItem) => void
   ) => Promise<boolean>;
   clearAllImages: () => void;
+  clearAllFiles?: () => void;
   onSend?: () => void;
   onMessageSent?: (message: DMessageItem) => void;
   textMessage?: string;
@@ -31,8 +34,10 @@ interface UseAttachmentSendHandlerProps {
 
 export const useAttachmentSendHandler = ({
   selectedImages,
+  selectedFiles,
   sendAttachments,
   clearAllImages,
+  clearAllFiles,
   onSend,
   onMessageSent,
   textMessage,
@@ -316,26 +321,60 @@ export const useAttachmentSendHandler = ({
       if (success) {
         clearAllImages();
         console.log('[ChatComposer] Images cleared after successful send');
+      }
+    }
 
-        // Send text message after attachments (follows attachment priority order)
-        // Note: urlMetadata is only passed if preview is still visible (not dismissed)
-        if (textMessage && onSendText) {
-          console.log('[ChatComposer] Sending text message after attachments', {
-            hasPreview: !!urlMetadata,
-            previewUrl: urlMetadata?.url,
-          });
-          onSendText(textMessage, urlMetadata);
-        }
+    // Send each file as its own individual message
+    const uploadedFiles = selectedFiles.filter(
+      (f) => f.uploadedUrl && !f.error
+    );
+    if (uploadedFiles.length > 0) {
+      console.log('[ChatComposer] Sending files individually:', {
+        count: uploadedFiles.length,
+      });
+      for (const file of uploadedFiles) {
+        await sendAttachments(
+          [
+            {
+              type: 'file' as const,
+              file: { path: file.uri, filename: file.name, size: file.size },
+              uploadProgress: 100,
+              error: null,
+              isUploading: false,
+              uploadedUrl: file.uploadedUrl,
+            },
+          ],
+          undefined,
+          onMessageSent
+        );
       }
+      clearAllFiles?.();
+    }
+
+    // Send text last
+    if (textMessage && onSendText) {
+      console.log('[ChatComposer] Sending text message after attachments', {
+        hasPreview: !!urlMetadata,
+        previewUrl: urlMetadata?.url,
+      });
+      onSendText(textMessage, urlMetadata);
       return;
     }
 
-    // Send text message only if no attachments
-    onSend?.();
+    const hasAnySent =
+      uploadedImages.length > 0 ||
+      allUploadedVideos.length > 0 ||
+      uploadedFiles.length > 0;
+    if (!hasAnySent) {
+      onSend?.();
+    }
+    return;
   }, [
     selectedImages,
+    selectedFiles,
     sendAttachments,
     clearAllImages,
+    clearAllFiles,
     onSend,
     onMessageSent,
     textMessage,

package/src/services/attachmentHandlers/fileAttachmentHandler.ts

@@ -6,12 +6,13 @@ interface FileElem {
   fileName: string;
   fileSize: number;
   fileType: string;
-  url: string;
+  sourceUrl: string;
 }
 
-export class FileAttachmentHandler implements IAttachmentHandler {
-  private static readonly MAX_FILE_SIZE = 200 * 1024 * 1024; // 200MB
+const MB = 1024 * 1024;
+export const MAX_FILE_SIZE = 50 * MB;
 
+export class FileAttachmentHandler implements IAttachmentHandler {
   validate(
     attachment: Attachment
   ): { valid: true } | { valid: false; reason: string } {
@@ -38,10 +39,10 @@ export class FileAttachmentHandler implements IAttachmentHandler {
       };
     }
 
-    if (sourceFile.size > FileAttachmentHandler.MAX_FILE_SIZE) {
+    if (sourceFile.size > MAX_FILE_SIZE) {
       return {
         valid: false,
-        reason: `File size exceeds maximum (${FileAttachmentHandler.MAX_FILE_SIZE / 1024 / 1024}MB)`,
+        reason: `File size exceeds maximum (${MAX_FILE_SIZE / 1024 / 1024}MB)`,
       };
     }
 
@@ -60,7 +61,7 @@ export class FileAttachmentHandler implements IAttachmentHandler {
       fileName: sourceFile.filename,
       fileSize: sourceFile.size,
       fileType: sourceFile.mimeType,
-      url: uploadedUrl,
+      sourceUrl: uploadedUrl,
     };
 
     console.warn('[FileAttachmentHandler] Built payload', {
@@ -68,7 +69,7 @@ export class FileAttachmentHandler implements IAttachmentHandler {
       fileName: fileElem.fileName,
       fileSize: fileElem.fileSize,
       fileType: fileElem.fileType,
-      url: uploadedUrl.substring(0, 50) + '...',
+      sourceUrl: uploadedUrl.substring(0, 50) + '...',
     });
 
     return fileElem;

package/src/services/attachmentHandlers/index.ts

@@ -7,4 +7,7 @@ export function initializeAttachmentHandlers(): void {
 
 export { ImageAttachmentHandler } from './imageAttachmentHandler';
 export { default as VideoAttachmentHandler } from './videoAttachmentHandler';
-export { default as FileAttachmentHandler } from './fileAttachmentHandler';
+export {
+  default as FileAttachmentHandler,
+  MAX_FILE_SIZE,
+} from './fileAttachmentHandler';

package/src/translation/resources/i18n.ts

@@ -1,6 +1,15 @@
 const i18nKey: Record<string, string> = {
   'thread_card_bot_crm_name': 'Droppii Hỗ Trợ',
   'thread_card_fallback_name': 'Người dùng',
+  'chat:file_too_large': 'Tệp quá lớn. Tối đa 10MB',
+  'chat:file_max_count': 'Chỉ có thể đính kèm tối đa 3 tệp',
+  'chat:file_pick_failed': 'Không thể chọn tệp',
+  'chat:file_upload_failed': 'Lỗi tải tệp lên',
+  'chat:file_preview_unsupported': 'Không thể xem trước tệp này',
+  'chat:file_downloading': 'Đang tải {{received}}/{{total}} MB',
+  'chat:file_downloaded_success': 'Đã tải thành công {{fileName}}',
+  'chat:file_download_failed': 'Tải tệp thất bại',
+  'chat:file_open_failed': 'Không thể mở tệp này',
   'chat:image_preview': 'Xem trước ảnh',
   'chat:image_too_large': 'Ảnh quá lớn. Tối đa 5MB',
   'chat:video_too_large': 'Video quá lớn. Tối đa 200MB',

package/src/types/attachment.ts

@@ -1,4 +1,4 @@
-export type AttachmentType = 'image' | 'video' | 'file' | 'audio';
+export type AttachmentType = 'image' | 'video' | 'file' | 'audio' | 'document';
 
 export interface BaseAttachment {
   id: string;
@@ -83,3 +83,25 @@ export interface AttachmentSendResult {
   mergedMessageId?: string;
   errors: Record<string, string>;
 }
+
+interface AttachmentMetadata {
+  id?: string;
+  path: string;
+  filename?: string;
+  size?: number;
+  duration?: number;
+  mimeType?: string;
+  width?: number;
+  height?: number;
+  uri?: string;
+}
+
+export interface AttachmentItem {
+  metadata: AttachmentMetadata;
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+  thumbnailUrl?: string;
+  type: AttachmentType;
+}

package/src/utils/device.ts

@@ -1,4 +1,18 @@
 import ImagePicker from 'react-native-image-crop-picker';
+import {
+  pick as pickDocument,
+  types as documentTypes,
+  isErrorWithCode,
+  errorCodes,
+  keepLocalCopy,
+} from '@react-native-documents/picker';
+
+export interface PickedFile {
+  uri: string;
+  name: string;
+  size: number;
+  mimeType: string;
+}
 
 const DeviceUtils = {
   openImagePicker: async (multiple: boolean = false) => {
@@ -68,6 +82,50 @@ const DeviceUtils = {
       throw error;
     }
   },
+
+  openFilePicker: async (
+    multiple: boolean = false
+  ): Promise<PickedFile[] | null> => {
+    try {
+      const results = await pickDocument({
+        allowMultiSelection: multiple,
+        type: [documentTypes.allFiles],
+        mode: 'import',
+      });
+
+      // Copy picked files to app's document directory so uploads can access them
+      const copies = await keepLocalCopy({
+        files: results.map((r) => ({
+          uri: r.uri,
+          fileName: r.name ?? 'file',
+        })) as [
+          { uri: string; fileName: string },
+          ...{ uri: string; fileName: string }[],
+        ],
+        destination: 'documentDirectory',
+      });
+
+      const files = results.map((r, i) => ({
+        uri: decodeURIComponent(
+          copies[i]?.status === 'success' ? copies[i].localUri : r.uri
+        ),
+        name: r.name ?? 'file',
+        size: r.size ?? 0,
+        mimeType: r.type ?? 'application/octet-stream',
+      }));
+
+      return files;
+    } catch (error: any) {
+      if (
+        isErrorWithCode(error) &&
+        error.code === errorCodes.OPERATION_CANCELED
+      ) {
+        return null;
+      }
+      console.error('[File Picker] Error:', error);
+      throw error;
+    }
+  },
 };
 
 export default DeviceUtils;

package/src/utils/imageUtils.ts

@@ -1,4 +1,5 @@
 import type { ImageFile } from '../types/imageUpload';
+import Images from '../assets/images';
 
 export const generateUUID = (): string => {
   return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
@@ -17,39 +18,60 @@ export const isVideoFromPicker = (pickedItem: any): boolean => {
   return mime.startsWith('video/');
 };
 
+const mimeMap: Record<string, string> = {
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  png: 'image/png',
+  webp: 'image/webp',
+  heic: 'image/heic',
+  heif: 'image/heif',
+  mp4: 'video/mp4',
+  mov: 'video/quicktime',
+  avi: 'video/x-msvideo',
+  mkv: 'video/x-matroska',
+  webm: 'video/webm',
+  m4v: 'video/mp4',
+  flv: 'video/x-flv',
+  wmv: 'video/x-ms-wmv',
+  mp3: 'audio/mpeg',
+  wav: 'audio/wav',
+  m4a: 'audio/mp4',
+  aac: 'audio/aac',
+  flac: 'audio/flac',
+  ogg: 'audio/ogg',
+  pdf: 'application/pdf',
+  doc: 'application/msword',
+  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  xls: 'application/vnd.ms-excel',
+  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  zip: 'application/zip',
+};
+
 export const getMimeType = (fileName: string): string => {
   const ext = fileName.split('.').pop()?.toLowerCase();
-  const mimeMap: Record<string, string> = {
-    jpg: 'image/jpeg',
-    jpeg: 'image/jpeg',
-    png: 'image/png',
-    webp: 'image/webp',
-    heic: 'image/heic',
-    heif: 'image/heif',
-    mp4: 'video/mp4',
-    mov: 'video/quicktime',
-    avi: 'video/x-msvideo',
-    mkv: 'video/x-matroska',
-    webm: 'video/webm',
-    m4v: 'video/mp4',
-    flv: 'video/x-flv',
-    wmv: 'video/x-ms-wmv',
-    mp3: 'audio/mpeg',
-    wav: 'audio/wav',
-    m4a: 'audio/mp4',
-    aac: 'audio/aac',
-    flac: 'audio/flac',
-    ogg: 'audio/ogg',
-    pdf: 'application/pdf',
-    doc: 'application/msword',
-    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    xls: 'application/vnd.ms-excel',
-    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-    zip: 'application/zip',
-  };
   return mimeMap[ext || ''] || 'application/octet-stream';
 };
 
+export const getFileIcon = (mimeType?: string): number => {
+  if (mimeType?.startsWith('image/')) return Images.ICON_IMG;
+
+  switch (mimeType) {
+    case mimeMap.pdf:
+      return Images.ICON_PDF;
+
+    case mimeMap.doc:
+    case mimeMap.docx:
+      return Images.ICON_WORD;
+
+    case mimeMap.xls:
+    case mimeMap.xlsx:
+      return Images.ICON_EXCEL;
+
+    default:
+      return Images.ICON_TXT;
+  }
+};
+
 export const formatFileSize = (bytes: number): string => {
   if (bytes === 0) return '0 Bytes';
   const k = 1024;