@droppii-org/chat-mobile 0.2.17 → 0.2.19

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;

package/src/hooks/useLinkPreview/useLinkPreview.ts

@@ -27,5 +27,10 @@ export function useLinkPreview(value: string | undefined) {
 
   const isVisible = !!detectedUrl && !isDismissed && (isLoading || !!metadata);
 
-  return { isVisible, metadata: metadata || undefined, isLoading, dismiss };
+  return {
+    isVisible,
+    metadata: !isLoading ? metadata || undefined : undefined,
+    isLoading,
+    dismiss,
+  };
 }

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/ChatDetail.tsx

@@ -43,8 +43,6 @@ const ChatDetail = memo(
     subtitle,
     avatarUri,
     avatarFullName,
-    peerType,
-    applicationType,
     showAddMember,
     getSubtitle,
     onBack,
@@ -139,9 +137,6 @@ const ChatDetail = memo(
     const resolvedAvatarUri =
       avatarUri ?? getConversationAvatarUri(conversation);
     const resolvedAvatarFullName = avatarFullName ?? resolvedTitle;
-    const resolvedPeerType = peerType;
-    const resolvedApplicationType =
-      applicationType ?? conversation?.applicationType;
     const resolvedShowAddMember =
       showAddMember ?? shouldShowAddMember(conversation);
     const resolvedSubtitle = useMemo(() => {
@@ -234,12 +229,11 @@ const ChatDetail = memo(
       <ChatDetailProvider>
         <KContainer.Page flex edges={['bottom']}>
           <ChatDetailHeader
+            conversationId={conversationId}
             title={resolvedTitle}
             subtitle={resolvedSubtitle}
             avatarUri={resolvedAvatarUri}
             avatarFullName={resolvedAvatarFullName}
-            peerType={resolvedPeerType}
-            applicationType={resolvedApplicationType}
             showAddMember={resolvedShowAddMember}
             onBack={onBack ?? handleBackDefault}
             onPressSearch={

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

@@ -9,6 +9,7 @@ import {
 import { AvatarSection } from '../../components/ThreadCard/AvatarSection';
 import { NamePrefixIcon } from '../../components/ThreadCard/NamePrefixIcon';
 import type { ChatDetailHeaderProps } from './types';
+import { useConversation } from '../../store';
 
 const ChatDetailHeader = memo(
   ({
@@ -16,15 +17,15 @@ const ChatDetailHeader = memo(
     subtitle,
     avatarUri,
     avatarFullName,
-    peerType,
-    applicationType,
     showAddMember = false,
+    conversationId,
     onBack,
     onPressSearch,
     onPressAddMember,
     onPressMenu,
     onPressAvatar,
   }: ChatDetailHeaderProps) => {
+    const conversation = useConversation(conversationId);
     const rightButtons = useMemo(() => {
       const buttons = [
         {
@@ -80,13 +81,12 @@ const ChatDetailHeader = memo(
             <AvatarSection
               avatar={avatarUri ?? null}
               fullName={avatarFullName ?? title}
-              peerType={peerType}
-              applicationType={applicationType}
+              peerType={conversation?.peerType}
             />
 
             <KContainer.View flex marginL="0.5rem">
               <KContainer.View row alignItems>
-                <NamePrefixIcon peerType={peerType} />
+                <NamePrefixIcon peerType={conversation?.peerType} />
                 <KLabel.Text
                   typo="TextLgBold"
                   color={KColors.gray.dark}
@@ -112,12 +112,11 @@ const ChatDetailHeader = memo(
       [
         avatarFullName,
         avatarUri,
-        peerType,
-        applicationType,
         onBack,
         onPressAvatar,
         subtitle,
         title,
+        conversation?.peerType,
       ]
     );
 

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

@@ -34,18 +34,22 @@ export const ChatLinkPreview = memo(
             />
           )}
         </KContainer.View>
-        <KContainer.View style={styles.center}>
-          <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
-            {metadata?.title}
-          </KLabel.Text>
-          <KLabel.Text
-            typo="TextSmNormal"
-            color={KColors.gray.light}
-            numberOfLines={1}
-          >
-            {metadata?.description}
-          </KLabel.Text>
-        </KContainer.View>
+        {metadata ? (
+          <KContainer.View style={styles.center}>
+            <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+              {metadata?.title}
+            </KLabel.Text>
+            <KLabel.Text
+              typo="TextSmNormal"
+              color={KColors.gray.light}
+              numberOfLines={1}
+            >
+              {metadata?.description}
+            </KLabel.Text>
+          </KContainer.View>
+        ) : (
+          <KContainer.View flex />
+        )}
         <KContainer.Touchable onPress={onDismiss} style={styles.right}>
           <KImage.VectorIcons name="close-o" size={16} />
         </KContainer.Touchable>

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

@@ -349,12 +349,8 @@ export const ChatListLegend = memo(
           renderItem={renderItem}
           estimatedItemSize={avgItemHeightRef.current}
           keyExtractor={(item) => String(item.clientMsgID || item.serverMsgID)}
-          recycleItems={!isBotConversation}
-          extraData={
-            !isBotConversation
-              ? `${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}`
-              : undefined
-          }
+          recycleItems={false}
+          extraData={`${conversationFlow?.flowCurrentStep?.id ?? ''}-${lastMessageId ?? ''}`}
           alignItemsAtEnd
           maintainVisibleContentPosition={maintainVisiblePositionConfig}
           maintainScrollAtEnd={maintainScrollConfig}

package/src/screens/chat-detail/conversationHeader.utils.ts

@@ -1,8 +1,8 @@
-import { PeerType } from '@droppii/openim-rn-client-sdk';
-import { type DConversationItem } from '../../types/chat';
+import { PeerType, type ConversationItem } from '@droppii/openim-rn-client-sdk';
+import type { IConversationItemEx } from '../../types/chat';
 
 export const getConversationTitle = (
-  conversation?: DConversationItem
+  conversation?: ConversationItem
 ): string => {
   if (!conversation) {
     return 'Tin nhắn';
@@ -12,13 +12,13 @@ export const getConversationTitle = (
 };
 
 export const getConversationAvatarUri = (
-  conversation?: DConversationItem
+  conversation?: ConversationItem
 ): string | null => {
   return conversation?.faceURL ?? null;
 };
 
 export const getConversationSubtitle = (
-  conversation?: DConversationItem
+  conversation?: ConversationItem
 ): string | undefined => {
   if (!conversation) {
     return undefined;
@@ -40,7 +40,17 @@ export const getConversationSubtitle = (
 };
 
 export const shouldShowAddMember = (
-  conversation?: DConversationItem
+  conversation?: ConversationItem
 ): boolean => {
   return conversation?.peerType === PeerType.Group;
 };
+
+export const getConversationEx = (ex?: string): IConversationItemEx | {} => {
+  let result: IConversationItemEx | {} = {};
+  try {
+    result = JSON.parse(ex || '{}');
+  } catch {
+    ///
+  }
+  return result;
+};

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]
+  );
+};