@droppii-org/chat-mobile 0.2.16 → 0.2.18

package/src/hooks/useFileDownload.ts

@@ -0,0 +1,200 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform, Share } from 'react-native';
+import RNFS from 'react-native-fs';
+import FileViewer from 'react-native-file-viewer';
+import UIUtils from '../utils/ui';
+import { trans } from '../translation';
+
+export type DownloadStatus = 'idle' | 'downloading' | 'done' | 'error';
+
+export interface DownloadState {
+  status: DownloadStatus;
+  progress: number;
+  receivedMB: number;
+  totalMB: number;
+  localPath: string | null;
+  error: string | null;
+}
+
+const INITIAL_STATE: DownloadState = {
+  status: 'idle',
+  progress: 0,
+  receivedMB: 0,
+  totalMB: 0,
+  localPath: null,
+  error: null,
+};
+
+const CacheDir = RNFS.CachesDirectoryPath;
+const DownloadDir =
+  Platform.OS === 'android'
+    ? RNFS.DownloadDirectoryPath
+    : RNFS.CachesDirectoryPath;
+
+export const useFileDownload = (fileName: string, url: string) => {
+  const [state, setState] = useState<DownloadState>(INITIAL_STATE);
+  const jobIdRef = useRef<number | null>(null);
+  const cancelledRef = useRef(false);
+
+  const openFile = useCallback(async (path: string) => {
+    try {
+      await FileViewer.open(path, {
+        showOpenWithDialog: true,
+        showAppsSuggestions: true,
+      });
+    } catch {
+      UIUtils.toast.open({
+        title: trans('chat:file_open_failed'),
+        theme: 'warning',
+      });
+    }
+  }, []);
+
+  const runDownload = useCallback(
+    async (destDir: string): Promise<string | null> => {
+      if (!url || !fileName) return null;
+
+      const destPath = `${destDir}/${fileName}`;
+      cancelledRef.current = false;
+      setState({
+        status: 'downloading',
+        progress: 0,
+        receivedMB: 0,
+        totalMB: 0,
+        localPath: null,
+        error: null,
+      });
+
+      const MB = 1024 * 1024;
+
+      const ret = RNFS.downloadFile({
+        fromUrl: url,
+        toFile: destPath,
+        progress: (res) => {
+          if (cancelledRef.current) return;
+          const r = res.bytesWritten;
+          const t = res.contentLength;
+          setState((prev) => ({
+            ...prev,
+            progress: t > 0 ? Math.round((r / t) * 100) : 0,
+            receivedMB: Math.round((r / MB) * 10) / 10,
+            totalMB: Math.round((t / MB) * 10) / 10,
+          }));
+        },
+      });
+
+      jobIdRef.current = ret.jobId;
+
+      try {
+        const result = await ret.promise;
+        if (cancelledRef.current) return null;
+
+        if (result.statusCode < 200 || result.statusCode >= 300) {
+          throw new Error(`HTTP ${result.statusCode}`);
+        }
+
+        setState({
+          status: 'done',
+          progress: 100,
+          receivedMB: 0,
+          totalMB: 0,
+          localPath: destPath,
+          error: null,
+        });
+        return destPath;
+      } catch (e: any) {
+        if (cancelledRef.current) return null;
+        setState({
+          status: 'error',
+          progress: 0,
+          receivedMB: 0,
+          totalMB: 0,
+          localPath: null,
+          error: e?.message ?? trans('chat:file_download_failed'),
+        });
+        return null;
+      }
+    },
+    [fileName, url]
+  );
+
+  const cancel = useCallback(() => {
+    cancelledRef.current = true;
+    if (jobIdRef.current !== null) {
+      RNFS.stopDownload(jobIdRef.current);
+      jobIdRef.current = null;
+    }
+    setState(INITIAL_STATE);
+  }, []);
+
+  useEffect(() => () => cancel(), [cancel]);
+
+  // Eye button — open from cache/downloads if available, otherwise download to cache
+  const handleView = useCallback(async () => {
+    if (state.status === 'downloading') return;
+
+    if (state.localPath) {
+      try {
+        const exists = await RNFS.exists(state.localPath);
+        if (exists) {
+          await openFile(state.localPath);
+          return;
+        }
+      } catch {
+        // fall through to search dirs
+      }
+    }
+
+    const searchDirs =
+      Platform.OS === 'android' ? [DownloadDir, CacheDir] : [CacheDir];
+    for (const dir of searchDirs) {
+      const dirPath = `${dir}/${fileName}`;
+      try {
+        const exists = await RNFS.exists(dirPath);
+        if (exists) {
+          setState({
+            status: 'done',
+            progress: 100,
+            receivedMB: 0,
+            totalMB: 0,
+            localPath: dirPath,
+            error: null,
+          });
+          await openFile(dirPath);
+          return;
+        }
+      } catch {
+        // try next dir
+      }
+    }
+
+    const path = await runDownload(CacheDir);
+    if (path) openFile(path);
+  }, [state.status, state.localPath, fileName, openFile, runDownload]);
+
+  // Download button — cancel if in progress; otherwise download and expose to Files app.
+  // iOS: download to cache then show share sheet (user can tap "Save to Files").
+  // Android: download to Downloads dir and trigger media scan.
+  const handleDownload = useCallback(async () => {
+    if (state.status === 'downloading') {
+      cancel();
+      return;
+    }
+    if (Platform.OS === 'ios') {
+      const cachedPath = `${CacheDir}/${fileName}`;
+      const exists = await RNFS.exists(cachedPath);
+      const localPath = exists ? cachedPath : await runDownload(CacheDir);
+      if (localPath) {
+        await Share.share({ url: `file://${localPath}` });
+      }
+    } else {
+      await runDownload(DownloadDir);
+    }
+    UIUtils.toast.open({
+      title: trans('chat:file_downloaded_success', { fileName }),
+      theme: 'info',
+    });
+  }, [state.status, fileName, runDownload, cancel]);
+
+  return { state, handleView, handleDownload };
+};

package/src/hooks/useImageAttachment.ts

@@ -7,7 +7,7 @@ import { getMimeType, isVideoFromPicker } from '../utils/imageUtils';
 import { ImageUploadAPI } from '../services/imageUpload';
 import VideoThumbnailUtil from '../utils/videoThumbnail';
 
-interface ImageWithUploadStatus {
+export interface ImageWithUploadStatus {
   image: PickedImage;
   uploadProgress: number;
   error: string | null;
@@ -237,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/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') {

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/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}

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,