@droppii-org/chat-mobile 0.2.16 → 0.2.18

package/src/components/AttachmentPreview/index.tsx

@@ -0,0 +1,68 @@
+import { memo, useCallback } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import type { AttachmentItem, AttachmentType } from '../../types/attachment';
+import { MediaPreview } from './MediaPreview';
+import { FilePreview } from './FilePreview';
+
+interface AttachmentPreviewProps {
+  visible: boolean;
+  attachments?: Array<AttachmentItem>;
+  onRemove: (type: AttachmentType, data: unknown) => void;
+}
+
+export const AttachmentPreview = memo(
+  ({ visible, attachments, onRemove }: AttachmentPreviewProps) => {
+    const onFileRemove = useCallback(
+      (id: string) => {
+        onRemove('file', id);
+      },
+      [onRemove]
+    );
+
+    if (!visible || !attachments?.length) {
+      return null;
+    }
+
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        scrollEventThrottle={16}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {attachments?.map((item, index) => {
+          switch (item.type) {
+            case 'file':
+              return (
+                <FilePreview
+                  key={`${item.type}-${index}`}
+                  file={item}
+                  onRemove={onFileRemove}
+                />
+              );
+
+            default:
+              return (
+                <MediaPreview
+                  key={`${item.type}-${index}`}
+                  index={index}
+                  item={item}
+                  onRemove={onRemove}
+                />
+              );
+          }
+        })}
+      </ScrollView>
+    );
+  }
+);
+
+AttachmentPreview.displayName = 'AttachmentPreview';
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    padding: 8,
+    paddingTop: 12,
+    gap: 8,
+  },
+});

package/src/components/MergedImageGrid.tsx

@@ -1,6 +1,12 @@
 import { memo, useMemo, useState, useCallback } from 'react';
 import { StyleSheet, useWindowDimensions } from 'react-native';
-import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
 import ChatImageDimens from '../utils/chatImageDimens';
 import type { MediaItem } from '../hooks/useMediaViewer';
 
@@ -14,11 +20,11 @@ interface MergedImageGridProps {
 
 /**
  * Generic image grid for merged messages
- * Layout: 1 image (1x1), 2 images (1x2), 3 images (1x3), 4+ images (2x2)
- * Shows "+N more" overlay on last cell if images exceed limit
+ * Layout: always a single horizontal row (1xN), N capped at maxDisplay (default 3)
+ * Shows "+N more" overlay on last cell if images exceed limit (e.g. 4 images → 3 + "+1")
  */
 export const MergedImageGrid = memo(
-  ({ images, maxDisplay = 4, onMediaPress }: MergedImageGridProps) => {
+  ({ images, maxDisplay = 3, onMediaPress }: MergedImageGridProps) => {
     const windowWidth = useWindowDimensions().width;
     const [loadingState, setLoadingState] = useState<Record<number, boolean>>(
       {}
@@ -106,26 +112,33 @@ export const MergedImageGrid = memo(
       return null;
     }
 
-    // Calculate columns based on image count
-    let columns = 1;
-    if (displayedImages.length === 2) {
-      columns = 2; // 2 images: horizontal layout (1x2)
-    } else if (displayedImages.length === 3) {
-      columns = 3; // 3 images: horizontal layout (1x3)
-    } else if (displayedImages.length >= 4) {
-      columns = 2; // 4+ images: grid layout (2x2)
-    }
+    // Always lay out images in a single horizontal row (1xN)
+    const columns = displayedImages.length;
 
-    // Use calculated aspect ratio for single image, 100x100 for multiple images
-    const cellSize =
-      displayedImages.length === 1 && singleImageSize
-        ? singleImageSize.width
-        : 100;
-    const cellHeight =
-      displayedImages.length === 1 && singleImageSize
-        ? singleImageSize.height
-        : cellSize;
     const gap = 4;
+
+    // Mirror the parent layout chain so the row never exceeds its container:
+    //   messageRow: width 100% with 0.75rem horizontal padding (both sides)
+    //   bubble wrapper: maxWidth 80% of that
+    //   bubble: another 0.75rem horizontal padding (both sides)
+    const rowPaddingH = KSpacingValue['0.75rem'] * 2;
+    const bubblePaddingH = KSpacingValue['0.75rem'] * 2;
+    const availableWidth = (windowWidth - rowPaddingH) * 0.8 - bubblePaddingH;
+
+    // Single image keeps its aspect-ratio size; multiple images share the row
+    // width so the whole row fits inside the bubble (cell capped at 100px).
+    let cellSize: number;
+    let cellHeight: number;
+    if (displayedImages.length === 1 && singleImageSize) {
+      cellSize = singleImageSize.width;
+      cellHeight = singleImageSize.height;
+    } else {
+      const fitted = Math.floor(
+        (availableWidth - gap * (columns - 1)) / columns
+      );
+      cellSize = Math.min(100, fitted);
+      cellHeight = cellSize;
+    }
     const totalWidth = cellSize * columns + gap * (columns - 1);
 
     return (
@@ -203,7 +216,7 @@ MergedImageGrid.displayName = 'MergedImageGrid';
 const styles = StyleSheet.create({
   grid: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexWrap: 'nowrap',
     gap: 4,
     justifyContent: 'flex-start',
     alignItems: 'flex-start',

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/components/messages/mergedMessage/index.tsx

@@ -28,13 +28,11 @@ export const MergedMessage = memo(
           ]}
         >
           {imageMessages.length > 0 && (
-            <KContainer.View marginB="0.5rem">
-              <MergedImageGrid
-                images={imageMessages}
-                maxDisplay={4}
-                onMediaPress={onMediaPress}
-              />
-            </KContainer.View>
+            <MergedImageGrid
+              images={imageMessages}
+              maxDisplay={3}
+              onMediaPress={onMediaPress}
+            />
           )}
         </KContainer.View>
       </KContainer.View>

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,
+  };
+};