@ethora/chat-component-rn 26.8.1 → 26.8.3

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -1,20 +1,43 @@
 /** @format */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
+  ActivityIndicator,
   Animated,
   Easing,
+  Image,
   Modal,
+  PanResponder,
   Platform,
+  ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
-import { CameraIcon, DocumentIcon, MediaIcon } from '../../../assets/icons';
+import { CameraIcon, DocumentIcon } from '../../../assets/icons';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useTheme } from '../../../hooks/useTheme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { useT } from '../../../i18n/useT';
+import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
+import {
+  shouldClaimVerticalDrag,
+  shouldDismissOnDrag,
+} from '../../../helpers/sheetGestures';
+
+interface RecentItem {
+  id: string;
+  uri: string;
+  filename: string;
+}
+
+export interface PickedMedia {
+  uri: string;
+  name: string;
+  mimeType?: string;
+  isVideo: boolean;
+}
 
 interface AttachSheetProps {
   visible: boolean;
@@ -22,13 +45,54 @@ interface AttachSheetProps {
   onCamera: () => void;
   onGallery: () => void;
   onDocument: () => void;
+  onPickMedia?: (media: PickedMedia) => void;
   primaryColor?: string;
 }
 
 // Starting translateY for the sheet. Larger than any realistic sheet
 // height so it sits fully below the viewport before opening; the exact
 // number doesn't matter visually because it animates to 0.
-const SHEET_OFFSCREEN = 600;
+const SHEET_OFFSCREEN = 800;
+// Re-exported so this sheet's own tests keep addressing them here.
+export { shouldClaimVerticalDrag, shouldDismissOnDrag };
+
+const RECENTS_COUNT = 12;
+const THUMB_SIZE = 88;
+const THUMB_DECODE = THUMB_SIZE * 2;
+
+const EXT_MIME: Record<string, string> = {
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  png: 'image/png',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  heic: 'image/heic',
+  heif: 'image/heif',
+};
+
+const guessMimeType = (name: string) => {
+  const ext = name.split('.').pop()?.toLowerCase() ?? '';
+  return EXT_MIME[ext] ?? 'image/jpeg';
+};
+
+const toRecentItem = async (
+  MediaLibrary: any,
+  asset: any
+): Promise<RecentItem | null> => {
+  const filename = asset?.filename || `photo_${asset?.id ?? Date.now()}`;
+  if (asset?.uri && !asset.uri.startsWith('ph://')) {
+    return { id: asset.id, uri: asset.uri, filename };
+  }
+  try {
+    const info = await MediaLibrary?.getAssetInfoAsync?.(asset, {
+      shouldDownloadFromNetwork: false,
+    });
+    if (!info?.localUri) {return null;}
+    return { id: asset.id, uri: info.localUri, filename };
+  } catch {
+    return null;
+  }
+};
 
 const AttachSheet: React.FC<AttachSheetProps> = ({
   visible,
@@ -36,17 +100,25 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onCamera,
   onGallery,
   onDocument,
-  primaryColor = '#0052CD',
+  onPickMedia,
+  primaryColor,
 }) => {
   const { config } = useChatSettingState();
+  const theme = useTheme();
   const ts = config?.typography?.attachSheet;
+  const accent = primaryColor || theme.primary;
+  // Sheet chrome tints. Light keeps the historical iOS-ish greys (not in
+  // the palette); dark reads everything off the theme.
+  const chromeText = theme.dark ? theme.text : '#1C1C1E';
+  const chromeMuted = theme.dark ? theme.textSecondary : '#8A8A8E';
+  const chromeHairline = theme.dark ? theme.divider : '#EFEFF2';
   const t = useT();
-  // Pending handler captured on row tap — runs once the EXIT animation
-  // finishes so iOS doesn't try to present an image picker over a
-  // still-dismissing modal (was the original reason for the
-  // platform-split + Modal.onDismiss dance). The animation completion
-  // callback now drives this on both platforms.
   const pendingRef = useRef<(() => void) | null>(null);
+  const runPending = () => {
+    const fn = pendingRef.current;
+    pendingRef.current = null;
+    fn?.();
+  };
 
   // Local "modal stays mounted while animating out" state. The parent
   // controls `visible`; we mirror it but delay unmount until the exit
@@ -65,6 +137,9 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
     new Animated.Value(SHEET_OFFSCREEN)
   ).current;
 
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
   useEffect(() => {
     if (visible) {
       setMounted(true);
@@ -97,8 +172,6 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       return () => cancelAnimationFrame(raf);
     }
     if (!mounted) {return;}
-    // Exit: fade the backdrop, slide the sheet down, then unmount and
-    // fire any pending picker handler.
     Animated.parallel([
       Animated.timing(backdropOpacity, {
         toValue: 0,
@@ -115,43 +188,133 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
     ]).start(({ finished }) => {
       if (!finished) {return;} // interrupted (rapid re-open) → leave state alone
       setMounted(false);
-      const fn = pendingRef.current;
-      pendingRef.current = null;
-      fn?.();
+      if (Platform.OS !== 'ios') {
+        runPending();
+      }
     });
     return undefined;
   }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const makeDragResponder = (claimOnStart: boolean) =>
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => claimOnStart,
+      // Capture, so a pull that starts on a row (whose Touchable grabbed
+      // the responder on touch-down) still drags the sheet.
+      onMoveShouldSetPanResponderCapture: (_evt, g) =>
+        claimOnStart || shouldClaimVerticalDrag(g.dy, g.dx),
+      onMoveShouldSetPanResponder: (_evt, g) =>
+        claimOnStart || shouldClaimVerticalDrag(g.dy, g.dx),
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderMove: (_evt, g) => {
+        sheetTranslateY.setValue(Math.max(0, g.dy));
+      },
+      onPanResponderRelease: (_evt, g) => {
+        if (shouldDismissOnDrag(g.dy, g.vy)) {
+          onCloseRef.current();
+          return;
+        }
+        Animated.spring(sheetTranslateY, {
+          toValue: 0,
+          tension: 90,
+          friction: 14,
+          useNativeDriver: true,
+        }).start();
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(sheetTranslateY, {
+          toValue: 0,
+          tension: 90,
+          friction: 14,
+          useNativeDriver: true,
+        }).start();
+      },
+    });
+
+  const sheetPanRef = useRef<ReturnType<typeof makeDragResponder> | null>(null);
+  const grabberPanRef = useRef<ReturnType<typeof makeDragResponder> | null>(null);
+  if (!sheetPanRef.current) {sheetPanRef.current = makeDragResponder(false);}
+  if (!grabberPanRef.current) {grabberPanRef.current = makeDragResponder(true);}
+  const sheetPan = sheetPanRef.current;
+  const grabberPan = grabberPanRef.current;
+
+  const [recents, setRecents] = useState<RecentItem[]>([]);
+  const [loadingRecents, setLoadingRecents] = useState(false);
+  const lastLoadRef = useRef(0);
+  const RECENTS_TTL_MS = 15000;
+
+  const loadRecents = useCallback(async () => {
+    const MediaLibrary = getMediaLibrary();
+    if (!MediaLibrary?.getAssetsAsync) {
+      setLoadingRecents(false);
+      return;
+    }
+    try {
+      const perm = await MediaLibrary.getPermissionsAsync();
+      if (!perm?.granted) {
+        setRecents([]);
+        return;
+      }
+      const page = await MediaLibrary.getAssetsAsync({
+        first: RECENTS_COUNT,
+        sortBy: [MediaLibrary.SortBy?.creationTime ?? 'creationTime'],
+        mediaType: [MediaLibrary.MediaType?.photo ?? 'photo'],
+      });
+      const items = await Promise.all(
+        (page?.assets ?? []).map((asset: any) => toRecentItem(MediaLibrary, asset))
+      );
+      lastLoadRef.current = Date.now();
+      setRecents(items.filter(Boolean) as RecentItem[]);
+    } catch (err) {
+      console.warn('AttachSheet: could not read recent media', err);
+      setRecents([]);
+    } finally {
+      setLoadingRecents(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!visible) {return undefined;}
+    if (recents.length && Date.now() - lastLoadRef.current < RECENTS_TTL_MS) {
+      return undefined;
+    }
+    setLoadingRecents(true);
+    const timer = setTimeout(() => {
+      loadRecents();
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [visible]);
+
   const trigger = (handler: () => void) => () => {
-    // Capture the handler and ask parent to close. The exit-animation
-    // completion above fires `handler` AFTER the sheet has slid away,
-    // so iOS no longer tries to present a picker over a dismissing
-    // modal — and Android no longer needs the ad-hoc 150ms setTimeout.
     pendingRef.current = handler;
+    if (Platform.OS === 'ios') {
+      setMounted(false);
+    }
     onClose();
   };
 
+  const handleRecentPress = (item: RecentItem) =>
+    trigger(() => {
+      if (onPickMedia) {
+        onPickMedia({
+          uri: item.uri,
+          name: item.filename,
+          mimeType: guessMimeType(item.filename),
+          isVideo: false,
+        });
+      } else {
+        onGallery();
+      }
+    });
+
   const rows: {
+    id: string;
     label: string;
-    hint: string;
     Icon: React.ComponentType<any>;
     handler: () => void;
   }[] = [
     {
-      label: t('attach.takePhoto'),
-      hint: t('attach.takePhotoHint'),
-      Icon: CameraIcon,
-      handler: onCamera,
-    },
-    {
-      label: t('attach.photoOrVideo'),
-      hint: t('attach.photoOrVideoHint'),
-      Icon: MediaIcon,
-      handler: onGallery,
-    },
-    {
-      label: t('attach.document'),
-      hint: t('attach.documentHint'),
+      id: 'Document',
+      label: t('attach.uploadFile'),
       Icon: DocumentIcon,
       handler: onDocument,
     },
@@ -168,11 +331,19 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       onRequestClose={onClose}
       // Hardware-back / iOS gesture also routes through onClose, which
       // flips `visible` and triggers our exit animation above.
+      onDismiss={Platform.OS === 'ios' ? runPending : undefined}
     >
       <Animated.View
-        style={[styles.backdrop, { opacity: backdropOpacity }]}
+        style={[
+          styles.backdrop,
+          {
+            opacity: backdropOpacity,
+            backgroundColor: theme.dark ? theme.overlay : 'rgba(15,15,20,0.45)',
+          },
+        ]}
       >
         <TouchableOpacity
+          testID="attach-backdrop"
           style={StyleSheet.absoluteFill}
           activeOpacity={1}
           onPress={onClose}
@@ -180,44 +351,134 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
         <Animated.View
           style={[
             styles.sheet,
-            { transform: [{ translateY: sheetTranslateY }] },
+            {
+              backgroundColor: theme.surface,
+              shadowColor: theme.shadow,
+              transform: [{ translateY: sheetTranslateY }],
+            },
           ]}
+          {...sheetPan.panHandlers}
         >
-          <TouchableOpacity activeOpacity={1}>
-            <View style={styles.grabber} />
-            <Text style={[styles.title, chatTextStyle(ts?.title)]}>{t('attach.title')}</Text>
-            {rows.map(({ label, hint, Icon, handler }, idx) => (
-              <TouchableOpacity
-                key={label}
-                activeOpacity={0.6}
+          <View
+            testID="attach-grabber"
+            style={styles.grabberArea}
+            {...grabberPan.panHandlers}
+          >
+            <View
+              style={[
+                styles.grabber,
+                { backgroundColor: theme.dark ? theme.border : '#D9D9DE' },
+              ]}
+            />
+          </View>
+
+          {/* Photos & Videos ------------------------------------------------ */}
+          <View style={styles.sectionHeader}>
+            <Text
+              style={[
+                styles.sectionTitle,
+                { color: chromeText },
+                chatTextStyle(ts?.title),
+              ]}
+            >
+              {t('attach.photosAndVideos')}
+            </Text>
+            <TouchableOpacity
+              testID="attach-view-library"
+              activeOpacity={0.6}
+              onPress={trigger(onGallery)}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            >
+              <Text
                 style={[
-                  styles.row,
-                  idx < rows.length - 1 && styles.rowDivider,
+                  styles.sectionAction,
+                  { color: accent },
+                  chatTextStyle(ts?.viewLibrary),
                 ]}
-                onPress={trigger(handler)}
               >
-                <View
-                  style={[
-                    styles.iconBubble,
-                    { backgroundColor: primaryColor + '14' },
-                  ]}
-                >
-                  <Icon color={primaryColor} width={20} height={20} />
-                </View>
-                <View style={styles.rowText}>
-                  <Text style={[styles.rowLabel, chatTextStyle(ts?.rowLabel)]}>{label}</Text>
-                  <Text style={[styles.rowHint, chatTextStyle(ts?.rowHint)]}>{hint}</Text>
-                </View>
+                {t('attach.viewLibrary')}
+              </Text>
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.strip}
+            keyboardShouldPersistTaps="handled"
+          >
+            {/* Camera tile — always first, works without library access. */}
+            <TouchableOpacity
+              testID="attach-row-Camera"
+              accessibilityRole="button"
+              accessibilityLabel={t('attach.takePhoto')}
+              activeOpacity={0.7}
+              style={[
+                styles.cameraTile,
+                {
+                  borderColor: theme.dark ? theme.border : '#E4E4E9',
+                  backgroundColor: theme.dark ? theme.surfaceSecondary : '#FAFAFC',
+                },
+              ]}
+              onPress={trigger(onCamera)}
+            >
+              <CameraIcon color={chromeMuted} width={26} height={26} />
+            </TouchableOpacity>
+
+            {loadingRecents && recents.length === 0 && (
+              <View style={styles.loadingTile}>
+                <ActivityIndicator color={chromeMuted} />
+              </View>
+            )}
+
+            {recents.map((item) => (
+              <TouchableOpacity
+                key={item.id}
+                testID={`attach-recent-${item.id}`}
+                activeOpacity={0.8}
+                style={[styles.thumbWrap, { backgroundColor: chromeHairline }]}
+                onPress={handleRecentPress(item)}
+              >
+                <Image
+                  source={{
+                    uri: item.uri,
+                    width: THUMB_DECODE,
+                    height: THUMB_DECODE,
+                  }}
+                  style={styles.thumb}
+                  resizeMethod="resize"
+                  resizeMode="cover"
+                  fadeDuration={0}
+                />
               </TouchableOpacity>
             ))}
+          </ScrollView>
+
+          <View
+            style={[styles.rowsDivider, { backgroundColor: chromeHairline }]}
+          />
+          {rows.map(({ id, label, Icon, handler }) => (
             <TouchableOpacity
+              key={id}
+              testID={`attach-row-${id}`}
               activeOpacity={0.6}
-              style={styles.cancelRow}
-              onPress={onClose}
+              style={styles.row}
+              onPress={trigger(handler)}
             >
-              <Text style={[styles.cancelLabel, chatTextStyle(ts?.cancelButton)]}>{t('action.cancel')}</Text>
+              <View style={styles.rowIcon}>
+                <Icon color={chromeText} width={20} height={20} />
+              </View>
+              <Text
+                style={[
+                  styles.rowLabel,
+                  { color: chromeText },
+                  chatTextStyle(ts?.rowLabel),
+                ]}
+              >
+                {label}
+              </Text>
             </TouchableOpacity>
-          </TouchableOpacity>
+          ))}
         </Animated.View>
       </Animated.View>
     </Modal>
@@ -225,83 +486,92 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
 };
 
 const styles = StyleSheet.create({
+  // Colours live inline (theme-dependent); only layout stays here.
   backdrop: {
     flex: 1,
-    backgroundColor: 'rgba(15,15,20,0.45)',
     justifyContent: 'flex-end',
   },
   sheet: {
-    backgroundColor: '#fff',
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
-    paddingTop: 8,
+    paddingTop: 4,
     paddingBottom: Platform.OS === 'ios' ? 32 : 20,
-    shadowColor: '#000',
     shadowOffset: { width: 0, height: -2 },
     shadowOpacity: 0.08,
     shadowRadius: 12,
     elevation: 16,
   },
+  grabberArea: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 14,
+  },
   grabber: {
-    alignSelf: 'center',
     width: 40,
     height: 4,
     borderRadius: 2,
-    backgroundColor: '#D9D9DE',
-    marginBottom: 12,
-  },
-  title: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: '#8A8A8E',
-    letterSpacing: 0.4,
-    textTransform: 'uppercase',
-    paddingHorizontal: 20,
-    paddingBottom: 8,
   },
-  row: {
+  sectionHeader: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
     paddingHorizontal: 20,
-    paddingVertical: 14,
+    paddingBottom: 12,
   },
-  rowDivider: {
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#EFEFF2',
+  sectionTitle: {
+    fontSize: 17,
+    fontWeight: '700',
   },
-  iconBubble: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+  sectionAction: {
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  strip: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    gap: 8,
+  },
+  cameraTile: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: 16,
+    borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: 14,
   },
-  rowText: {
-    flex: 1,
+  loadingTile: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  rowLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#1C1C1E',
+  thumbWrap: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  thumb: {
+    width: '100%',
+    height: '100%',
   },
-  rowHint: {
-    fontSize: 12,
-    color: '#8A8A8E',
-    marginTop: 2,
+  rowsDivider: {
+    height: StyleSheet.hairlineWidth,
   },
-  cancelRow: {
-    marginTop: 8,
-    marginHorizontal: 16,
-    paddingVertical: 14,
-    borderRadius: 14,
+  row: {
+    flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#F2F2F7',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
   },
-  cancelLabel: {
+  rowIcon: {
+    width: 28,
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  rowLabel: {
     fontSize: 16,
-    fontWeight: '600',
-    color: '#1C1C1E',
+    fontWeight: '500',
   },
 });