@droppii-org/chat-mobile 0.2.17 → 0.2.18

package/lib/typescript/src/translation/resources/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AA4BA,wBAEE"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AAqCA,wBAEE"}

package/lib/typescript/src/types/attachment.d.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;
     type: AttachmentType;
@@ -69,4 +69,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;
+}
+export {};
 //# sourceMappingURL=attachment.d.ts.map

package/lib/typescript/src/types/attachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../../../src/types/attachment.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;KACnD,CAAC;CACH;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE;YACV,GAAG,EAAE,MAAM,CAAC;YACZ,KAAK,EAAE,MAAM,CAAC;YACd,MAAM,EAAE,MAAM,CAAC;YACf,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE;QACR,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,UAAU,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;KACjE,CAAC;CACH;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,MAAM,UAAU,GAClB,eAAe,GACf,eAAe,GACf,cAAc,GACd,eAAe,CAAC;AAEpB,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,aAAa,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC"}
+{"version":3,"file":"attachment.d.ts","sourceRoot":"","sources":["../../../../src/types/attachment.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/utils/device.d.ts

@@ -1,6 +1,13 @@
+export interface PickedFile {
+    uri: string;
+    name: string;
+    size: number;
+    mimeType: string;
+}
 declare const DeviceUtils: {
     openImagePicker: (multiple?: boolean) => Promise<(import("react-native-image-crop-picker").Image & any[]) | (import("react-native-image-crop-picker").Video & any[]) | import("react-native-image-crop-picker").ImageOrVideo[]>;
     openVideoPicker: (multiple?: boolean) => Promise<(import("react-native-image-crop-picker").Video & any[]) | import("react-native-image-crop-picker").Video[]>;
+    openFilePicker: (multiple?: boolean) => Promise<PickedFile[] | null>;
 };
 export default DeviceUtils;
 export { DeviceUtils };

package/lib/typescript/src/utils/device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../../../src/utils/device.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW;iCACmB,OAAO;iCAmCP,OAAO;CAgC1C,CAAC;AAEF,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../../../src/utils/device.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,WAAW;iCACmB,OAAO;iCAmCP,OAAO;gCAkC7B,OAAO,KAChB,OAAO,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC;CAyChC,CAAC;AAEF,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/lib/typescript/src/utils/imageUtils.d.ts

@@ -3,6 +3,7 @@ export declare const generateUUID: () => string;
 export declare const isVideoFile: (filename: string | undefined) => boolean;
 export declare const isVideoFromPicker: (pickedItem: any) => boolean;
 export declare const getMimeType: (fileName: string) => string;
+export declare const getFileIcon: (mimeType?: string) => number;
 export declare const formatFileSize: (bytes: number) => string;
 export declare const validateImageFile: (file: ImageFile) => string | null;
 export declare const getImageUploadEndpoint: (baseUrl: string) => string;

package/lib/typescript/src/utils/imageUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/imageUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,eAAO,MAAM,YAAY,QAAO,MAE/B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,GAAG,SAAS,KAAG,OAI1D,CAAC;AAGF,eAAO,MAAM,iBAAiB,GAAI,YAAY,GAAG,KAAG,OAInD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,MA+B9C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAM9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,IAmB5D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,MAAM,KAAG,MAExD,CAAC"}
+{"version":3,"file":"imageUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/imageUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGtD,eAAO,MAAM,YAAY,QAAO,MAE/B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,GAAG,SAAS,KAAG,OAI1D,CAAC;AAGF,eAAO,MAAM,iBAAiB,GAAI,YAAY,GAAG,KAAG,OAInD,CAAC;AA+BF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,MAG9C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,WAAW,MAAM,KAAG,MAkB/C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAM9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,IAmB5D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,MAAM,KAAG,MAExD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -85,6 +85,7 @@
     "@eslint/js": "^10.0.1",
     "@growthbook/growthbook-react": "*",
     "@jest/globals": "^30.0.0",
+    "@react-native-documents/picker": "^12.0.1",
     "@react-native/babel-preset": "0.85.0",
     "@react-native/eslint-config": "0.85.0",
     "@react-native/jest-preset": "0.85.0",
@@ -112,6 +113,7 @@
     "react-native-builder-bob": "^0.41.0",
     "react-native-create-thumbnail": "^2.2.0",
     "react-native-device-info": "*",
+    "react-native-file-viewer": "^2.1.5",
     "react-native-gesture-handler": "^3.0.0",
     "react-native-image-crop-picker": "^0.51.1",
     "react-native-keyboard-controller": "1.19.0",
@@ -134,11 +136,13 @@
   },
   "peerDependencies": {
     "@droppii/libs": "*",
+    "@react-native-documents/picker": "*",
     "@tanstack/react-query": "*",
     "react": "*",
     "react-native": "*",
     "react-native-blob-util": "*",
     "react-native-create-thumbnail": "*",
+    "react-native-file-viewer": "*",
     "react-native-gesture-handler": "*",
     "react-native-gifted-chat": "*",
     "react-native-image-crop-picker": "*",

package/src/assets/images/index.ts

@@ -1,5 +1,10 @@
 const Images = {
   ICON_BOT: require('./icon_bot.png'),
+  ICON_EXCEL: require('./icon_excel.png'),
+  ICON_IMG: require('./icon_img.png'),
+  ICON_PDF: require('./icon_pdf.png'),
+  ICON_TXT: require('./icon_txt.png'),
+  ICON_WORD: require('./icon_word.png'),
   TAG_BOT: require('./tag_bot.png'),
   TAG_MALL: require('./tag_mall.png'),
   ICON_DROPPII: require('./icon_droppii.png'),

package/src/components/AttachmentPreview/FilePreview.tsx

@@ -0,0 +1,137 @@
+import { memo, useCallback } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import FileViewer from 'react-native-file-viewer';
+import UIUtils from '../../utils/ui';
+import { trans } from '../../translation';
+import { formatFileSize, getFileIcon } from '../../utils/imageUtils';
+import type { AttachmentItem } from '../../types/attachment';
+
+export const FilePreview = memo(
+  ({
+    file,
+    onRemove,
+  }: {
+    file: AttachmentItem;
+    onRemove: (id: string) => void;
+  }) => {
+    const handlePress = useCallback(async () => {
+      if (file.isUploading || file.error) return;
+      try {
+        const path = file.metadata.uri?.startsWith('file://')
+          ? file.metadata.uri.slice(7)
+          : file.metadata.uri;
+        await FileViewer.open(path ?? '', {
+          showOpenWithDialog: true,
+          showAppsSuggestions: true,
+        });
+      } catch {
+        UIUtils.toast.open({
+          title: trans('chat:file_preview_unsupported'),
+          theme: 'warning',
+        });
+      }
+    }, [file]);
+
+    const handleRemove = useCallback(() => {
+      onRemove(file.metadata.id ?? '');
+    }, [file.metadata?.id, onRemove]);
+
+    const iconSource = getFileIcon(file.metadata.mimeType);
+    const hasError = !!file.error;
+
+    return (
+      <KContainer.Touchable
+        row
+        alignItems
+        width={160}
+        onPress={handlePress}
+        br="3x"
+        background={
+          !hasError
+            ? KColors.hexToRgba(KColors.palette.gray.w400, 0.1)
+            : KColors.hexToRgba(KColors.danger.light, 0.2)
+        }
+        paddingL={'0.5rem'}
+        paddingR={'1rem'}
+        paddingV={'0.25rem'}
+      >
+        {/* File icon */}
+        <KContainer.VisibleView visible={file.isUploading}>
+          <ActivityIndicator
+            size="small"
+            color={KColors.palette.primary.w400}
+            style={styles.loader}
+          />
+        </KContainer.VisibleView>
+        <KContainer.VisibleView visible={!file.isUploading}>
+          <KImage.Base
+            uri={iconSource}
+            style={styles.icon}
+            resizeMode="contain"
+          />
+        </KContainer.VisibleView>
+
+        {/* File info */}
+        <KContainer.View flex>
+          <KLabel.Text
+            typo="TextSmMedium"
+            color={KColors.gray.dark}
+            numberOfLines={1}
+            ellipsizeMode="middle"
+          >
+            {file.metadata.filename}
+          </KLabel.Text>
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={KColors.palette.gray.w500}
+            numberOfLines={1}
+          >
+            {hasError
+              ? file.error
+              : file.isUploading
+                ? `${file.uploadProgress}%`
+                : formatFileSize(file.metadata.size ?? 0)}
+          </KLabel.Text>
+        </KContainer.View>
+
+        {/* Remove button */}
+        <KContainer.Touchable
+          onPress={handleRemove}
+          center
+          width={20}
+          height={20}
+          br={'round'}
+          background={KColors.gray.dark}
+          hitSlop={8}
+          style={styles.removeBtn}
+        >
+          <KImage.VectorIcons
+            name="close"
+            provider="MaterialCommunityIcons"
+            size={18}
+            color={KColors.white}
+          />
+        </KContainer.Touchable>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+FilePreview.displayName = 'FilePreview';
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 7,
+  },
+  loader: {
+    marginRight: 8,
+  },
+  removeBtn: {
+    position: 'absolute',
+    right: -4,
+    top: -4,
+  },
+});

package/src/components/AttachmentPreview/MediaPreview.tsx

@@ -0,0 +1,238 @@
+import { memo } from 'react';
+import { KColors, KContainer, KImage, KLabel } from '@droppii/libs';
+import type { AttachmentItem, AttachmentType } from '../../types/attachment';
+import { StyleSheet } from 'react-native';
+
+type Props = {
+  item: AttachmentItem;
+  index: number;
+  onRemove(type: AttachmentType, index: number): void;
+};
+
+const formatDuration = (seconds: number): string => {
+  const totalSecs = Math.floor(seconds);
+  const mins = Math.floor(totalSecs / 60);
+  const secs = totalSecs % 60;
+  return `${mins.toString().padStart(2, '0')}:${secs
+    .toString()
+    .padStart(2, '0')}`;
+};
+
+const getAttachmentIcon = (type: AttachmentType): string => {
+  switch (type) {
+    case 'image':
+      return 'image';
+    case 'video':
+      return 'play-circle';
+    case 'audio':
+      return 'music';
+    case 'document':
+      return 'file-document';
+    case 'file':
+    default:
+      return 'file';
+  }
+};
+
+export const MediaPreview = memo(({ item, index, onRemove }: Props) => {
+  const { type, metadata, uploadProgress, error, isUploading, thumbnailUrl } =
+    item;
+
+  const isImage = type === 'image';
+  const isVideo = type === 'video';
+  const hasPreview = isImage || isVideo;
+
+  return (
+    <KContainer.View>
+      <KContainer.View style={styles.thumbnail} center>
+        {/* Video thumbnail */}
+        {isVideo && thumbnailUrl && (
+          <KImage.Base
+            uri={thumbnailUrl}
+            width={48}
+            height={48}
+            resizeMode="cover"
+          />
+        )}
+
+        {/* Video placeholder (no thumbnail yet) */}
+        {isVideo && !thumbnailUrl && (
+          <KContainer.View style={[styles.videoBg, styles.videoThumbnail]} />
+        )}
+
+        {/* Image preview */}
+        {isImage && (
+          <KImage.Base uri={`file://${metadata.path}`} width={48} height={48} />
+        )}
+
+        {/* Show icon overlay for non-media files */}
+        {!hasPreview && (
+          <KContainer.View
+            style={styles.iconOverlay}
+            center
+            background={KColors.palette.gray.w100}
+          >
+            <KImage.VectorIcons
+              name={getAttachmentIcon(type)}
+              provider="MaterialCommunityIcons"
+              size={24}
+              color={KColors.palette.primary.w400}
+            />
+          </KContainer.View>
+        )}
+
+        {/* Video duration badge */}
+        {isVideo && !!metadata.duration && (
+          <KContainer.View style={styles.durationBadge} center>
+            <KLabel.Text
+              typo="TextXsNormal"
+              color={KColors.white}
+              style={styles.durationText}
+            >
+              {formatDuration(metadata.duration / 1000)}
+            </KLabel.Text>
+          </KContainer.View>
+        )}
+
+        {/* Type icon for non-preview items */}
+        {!hasPreview && (
+          <KContainer.View style={styles.typeIcon} center>
+            <KImage.VectorIcons
+              name={getAttachmentIcon(type)}
+              provider="MaterialCommunityIcons"
+              size={14}
+              color={KColors.white}
+            />
+          </KContainer.View>
+        )}
+
+        {/* Error state */}
+        {error && (
+          <KContainer.View style={styles.errorOverlay} center>
+            <KImage.VectorIcons
+              name="close-circle"
+              provider="MaterialCommunityIcons"
+              size={28}
+              color={KColors.white}
+            />
+          </KContainer.View>
+        )}
+
+        {/* Progress overlay */}
+        {isUploading && (
+          <KContainer.View style={styles.progressOverlay} center>
+            <KLabel.Text typo="TextSmNormal" color={KColors.white}>
+              {uploadProgress}%
+            </KLabel.Text>
+          </KContainer.View>
+        )}
+      </KContainer.View>
+      {/* Remove button */}
+      <KContainer.Touchable
+        style={styles.removeButton}
+        center
+        br="round"
+        background={KColors.black}
+        onPress={() => onRemove(type, index)}
+        disabled={isUploading}
+        hitSlop={10}
+      >
+        <KImage.VectorIcons
+          name="close"
+          provider="MaterialCommunityIcons"
+          size={18}
+          color={KColors.white}
+        />
+      </KContainer.Touchable>
+    </KContainer.View>
+  );
+});
+
+MediaPreview.displayName = 'MediaPreview';
+
+const styles = StyleSheet.create({
+  thumbnail: {
+    position: 'relative',
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+    overflow: 'hidden',
+    backgroundColor: KColors.palette.gray.w50,
+  },
+  durationBadge: {
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderRadius: 3,
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+  },
+  durationText: {
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  iconOverlay: {
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+  },
+  videoIcon: {
+    position: 'absolute',
+    top: 2,
+    right: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    borderRadius: 8,
+    width: 20,
+    height: 20,
+  },
+  typeIcon: {
+    position: 'absolute',
+    bottom: 2,
+    right: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: 6,
+    width: 16,
+    height: 16,
+  },
+  videoBg: {
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+  },
+  videoThumbnail: {
+    backgroundColor: KColors.black,
+  },
+  progressOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  errorOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(255, 59, 48, 0.8)',
+  },
+  removeButton: {
+    position: 'absolute',
+    right: -4,
+    top: -4,
+    width: 22,
+    height: 22,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 3,
+  },
+  sendButton: {
+    width: 48,
+    height: 48,
+  },
+});

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