@droppii-org/chat-mobile 0.2.17 → 0.2.18

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

@@ -1,26 +1,145 @@
-import { memo } from 'react';
-import { KContainer, KLabel } from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
 import type { BaseLegendMessageProps } from '../types';
+import { useFileDownload } from '../../../hooks/useFileDownload';
+import {
+  getFileIcon,
+  getMimeType,
+  formatFileSize,
+} from '../../../utils/imageUtils';
+import { trans } from '../../../translation';
 
 export const FileMessage = memo(
   ({ message, isOutgoing }: BaseLegendMessageProps) => {
-    const fileName = message.fileElem?.fileName || message.content || '[File]';
+    const fileName = message.fileElem?.fileName || '[File]';
+    const fileSize = message.fileElem?.fileSize ?? 0;
+    const url =
+      (message.fileElem as any)?.sourceUrl ||
+      (message.fileElem as any)?.url ||
+      '';
+
+    const { state, handleView, handleDownload } = useFileDownload(
+      fileName,
+      url
+    );
+
+    const mimeType = useMemo(() => getMimeType(fileName), [fileName]);
+    const iconSource = useMemo(() => getFileIcon(mimeType), [mimeType]);
+
+    const subtitle = useMemo(() => {
+      if (state.status === 'downloading') {
+        return trans('chat:file_downloading', {
+          received: state.receivedMB ?? 0,
+          total: state.totalMB ?? 0,
+        });
+      }
+      if (state.status === 'error') {
+        return state.error ?? trans('chat:file_download_failed');
+      }
+      return formatFileSize(fileSize);
+    }, [state, fileSize]);
+
+    const subtitleColor =
+      state.status === 'error'
+        ? (KColors.palette.danger?.w400 ?? '#FF3B30')
+        : KColors.palette.gray.w500;
+
+    const isDownloading = state.status === 'downloading';
 
     return (
-      <KContainer.View style={messageStyles.wrapper}>
+      <KContainer.View
+        padding={'0.5rem'}
+        style={[
+          styles.wrapper,
+          messageStyles.wrapper,
+          isOutgoing ? messageStyles.bubbleSent : messageStyles.bubbleReceived,
+        ]}
+      >
         <KContainer.View
-          style={[
-            messageStyles.bubble,
-            isOutgoing
-              ? messageStyles.bubbleSent
-              : messageStyles.bubbleReceived,
-          ]}
+          row
+          alignItems
+          br={'3x'}
+          paddingR={'0.75rem'}
+          paddingV={'0.25rem'}
+          background={KColors.white}
         >
-          <KLabel.Text typo="TextSmNormal" color={CHAT_BUBBLE_COLORS.text}>
-            📎 {fileName}
-          </KLabel.Text>
+          <KContainer.VisibleView visible={isDownloading}>
+            <KContainer.Touchable
+              center
+              br="round"
+              style={styles.cancelBtn}
+              width={32}
+              height={32}
+              onPress={handleDownload}
+            >
+              <KContainer.View
+                center
+                br="round"
+                style={styles.cancelBtnIconContainer}
+                width={26}
+                height={26}
+              >
+                <KImage.VectorIcons
+                  name="close"
+                  provider="MaterialCommunityIcons"
+                  size={24}
+                  color={KColors.white}
+                />
+              </KContainer.View>
+            </KContainer.Touchable>
+          </KContainer.VisibleView>
+          <KContainer.VisibleView visible={!isDownloading}>
+            <KImage.Base
+              uri={iconSource}
+              style={styles.fileIcon}
+              resizeMode="contain"
+            />
+          </KContainer.VisibleView>
+
+          {/* File name + size/progress */}
+          <KContainer.View flexS={1}>
+            <KLabel.Text
+              typo="TextSmMedium"
+              color={CHAT_BUBBLE_COLORS.text}
+              numberOfLines={1}
+              ellipsizeMode="middle"
+            >
+              {fileName}
+            </KLabel.Text>
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={subtitleColor}
+              numberOfLines={1}
+            >
+              {subtitle}
+            </KLabel.Text>
+          </KContainer.View>
+
+          {/* Eye (view) button */}
+          <KImage.VectorIcons
+            name="eye-outline"
+            provider="MaterialCommunityIcons"
+            onPress={handleView}
+            size={20}
+            color={KColors.palette.gray.w600}
+            containerStyle={styles.viewIcon}
+          />
+
+          <KImage.VectorIcons
+            name={'download-o'}
+            provider="DroppiiNew"
+            onPress={isDownloading ? undefined : handleDownload}
+            size={20}
+            color={
+              state.status === 'error'
+                ? (KColors.palette.danger?.w400 ?? '#FF3B30')
+                : KColors.palette.gray.w600
+            }
+            containerStyle={isDownloading ? styles.disabledIcon : undefined}
+          />
         </KContainer.View>
       </KContainer.View>
     );
@@ -28,3 +147,27 @@ export const FileMessage = memo(
 );
 
 FileMessage.displayName = 'FileMessage';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 20,
+  },
+  fileIcon: {
+    width: 24,
+    height: 24,
+    marginHorizontal: 12,
+  },
+  cancelBtn: {
+    backgroundColor: KColors.hexToRgba('#6355CA', 0.3),
+    marginHorizontal: 6,
+  },
+  cancelBtnIconContainer: {
+    backgroundColor: '#6355CA',
+  },
+  viewIcon: {
+    marginHorizontal: 12,
+  },
+  disabledIcon: {
+    opacity: 0.3,
+  },
+});

package/src/hooks/useFileAttachment.ts

@@ -0,0 +1,163 @@
+import { useCallback, useState } from 'react';
+import { ImageUploadAPI } from '../services/imageUpload';
+import DeviceUtils from '../utils/device';
+import UIUtils from '../utils/ui';
+import { trans } from '../translation';
+import { MAX_FILE_SIZE } from '../services/attachmentHandlers';
+
+const MAX_FILE_COUNT = 3;
+
+export interface FileWithUploadStatus {
+  id: string;
+  uri: string;
+  name: string;
+  size: number;
+  mimeType: string;
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+}
+
+export interface UseFileAttachmentReturn {
+  selectedFiles: FileWithUploadStatus[];
+  isFilePreviewVisible: boolean;
+  handleFileAttach: () => Promise<void>;
+  handleFileRemove: (id: string) => void;
+  clearAllFiles: () => void;
+}
+
+export const useFileAttachment = (): UseFileAttachmentReturn => {
+  const [selectedFiles, setSelectedFiles] = useState<FileWithUploadStatus[]>(
+    []
+  );
+
+  const updateFileStatus = useCallback(
+    (id: string, updates: Partial<Omit<FileWithUploadStatus, 'id'>>) => {
+      setSelectedFiles((prev) =>
+        prev.map((f) => (f.id === id ? { ...f, ...updates } : f))
+      );
+    },
+    []
+  );
+
+  const uploadFile = useCallback(
+    async (file: FileWithUploadStatus) => {
+      try {
+        updateFileStatus(file.id, {
+          isUploading: true,
+          error: null,
+          uploadProgress: 0,
+        });
+
+        const uploaded = await ImageUploadAPI.uploadImageFile(
+          {
+            path: file.uri.startsWith('file://') ? file.uri.slice(7) : file.uri,
+            filename: file.name,
+            size: file.size,
+            width: 0,
+            height: 0,
+            mime: file.mimeType,
+          },
+          (progress) => updateFileStatus(file.id, { uploadProgress: progress })
+        );
+
+        if (!uploaded?.url) throw new Error('No URL returned from server');
+
+        updateFileStatus(file.id, {
+          isUploading: false,
+          uploadProgress: 100,
+          uploadedUrl: uploaded.url,
+        });
+      } catch (error: any) {
+        // TODO: handle upload failure
+        console.error('[FileAttach] Upload failed:', error);
+        updateFileStatus(file.id, {
+          isUploading: false,
+          error: error?.message ?? trans('chat:file_upload_failed'),
+        });
+      }
+    },
+    [updateFileStatus]
+  );
+
+  const handleFileAttach = useCallback(async () => {
+    try {
+      const currentCount = selectedFiles.length;
+      if (currentCount >= MAX_FILE_COUNT) {
+        UIUtils.toast.open({
+          title: trans('chat:file_max_count'),
+          theme: 'danger',
+        });
+        return;
+      }
+
+      const picked = await DeviceUtils.openFilePicker(true);
+      if (!picked || picked.length === 0) return;
+
+      const oversized = picked.filter((f) => f.size > MAX_FILE_SIZE);
+      let candidates = picked;
+      if (oversized.length > 0) {
+        UIUtils.toast.open({
+          title: trans('chat:file_too_large'),
+          theme: 'danger',
+        });
+        candidates = picked.filter((f) => f.size <= MAX_FILE_SIZE);
+        if (candidates.length === 0) return;
+      }
+
+      const deduplicated = candidates.filter(
+        (f) =>
+          !selectedFiles.some((s) => s.name === f.name && s.size === f.size)
+      );
+      if (deduplicated.length === 0) return;
+
+      const remaining = MAX_FILE_COUNT - currentCount;
+      const toAdd = deduplicated.slice(0, remaining);
+
+      if (toAdd.length < deduplicated.length) {
+        UIUtils.toast.open({
+          title: trans('chat:file_max_count'),
+          theme: 'danger',
+        });
+      }
+
+      const newFiles: FileWithUploadStatus[] = toAdd.map((f) => ({
+        id: `file-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+        uri: f.uri,
+        name: f.name,
+        size: f.size,
+        mimeType: f.mimeType,
+        uploadProgress: 0,
+        error: null,
+        isUploading: true,
+      }));
+
+      setSelectedFiles((prev) => [...prev, ...newFiles]);
+
+      await Promise.all(newFiles.map((f) => uploadFile(f)));
+    } catch (error: any) {
+      UIUtils.toast.open({
+        title: trans('chat:file_pick_failed'),
+        message: error instanceof Error ? error.message : 'Unknown error',
+        theme: 'danger',
+      });
+    }
+  }, [selectedFiles, uploadFile]);
+
+  const handleFileRemove = useCallback((id: string) => {
+    setSelectedFiles((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+
+  const clearAllFiles = useCallback(() => {
+    setSelectedFiles([]);
+  }, []);
+
+  return {
+    selectedFiles,
+    isFilePreviewVisible: selectedFiles.length > 0,
+    handleFileAttach,
+    handleFileRemove,
+    clearAllFiles,
+  };
+};

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;