@ethora/chat-component-rn 26.10.4 → 26.10.6

package/src/components/VideoCalls/usePipTile.ts

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, LayoutChangeEvent, PanResponder } from 'react-native';
+
+/**
+ * The small video tile of a call, Telegram-style: drag it anywhere and it
+ * snaps to the nearest corner when released (a flick carries it towards
+ * the flick), pinch it to switch between a small and a large size.
+ *
+ * Positions are kept per corner rather than per pixel, so the tile stays
+ * glued to its corner when the stage changes size (rotation, iPad split
+ * view) or the tile itself changes size.
+ */
+
+export type PipTileSize = 'small' | 'large';
+
+export const PIP_TILE_SIZES: Record<PipTileSize, { width: number; height: number }> = {
+  small: { width: 104, height: 148 },
+  large: { width: 156, height: 222 },
+};
+
+const MARGIN = 12;
+// How far a flick carries the tile before picking a corner, in ms of velocity.
+const FLICK_PROJECTION_MS = 160;
+// Pinch past these ratios to change size; in between keeps the current one.
+const GROW_RATIO = 1.12;
+const SHRINK_RATIO = 0.9;
+
+interface Corner {
+  right: boolean;
+  bottom: boolean;
+}
+
+interface Stage {
+  width: number;
+  height: number;
+}
+
+const SPRING = { useNativeDriver: false, damping: 20, stiffness: 220, mass: 0.8 };
+
+const touchDistance = (touches: ReadonlyArray<{ pageX: number; pageY: number }>) => {
+  const [a, b] = touches;
+  return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
+};
+
+export const usePipTile = ({ topInset = 0 }: { topInset?: number } = {}) => {
+  const [stage, setStage] = useState<Stage | null>(null);
+  const [size, setSize] = useState<PipTileSize>('small');
+  const stageRef = useRef<Stage | null>(null);
+  const sizeRef = useRef<PipTileSize>('small');
+  const cornerRef = useRef<Corner>({ right: true, bottom: false });
+  const topInsetRef = useRef(topInset);
+  topInsetRef.current = topInset;
+
+  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const width = useRef(new Animated.Value(PIP_TILE_SIZES.small.width)).current;
+  const height = useRef(new Animated.Value(PIP_TILE_SIZES.small.height)).current;
+  const pinchScale = useRef(new Animated.Value(1)).current;
+  // Where the tile rests, i.e. where a drag starts from.
+  const restRef = useRef({ x: 0, y: 0 });
+  const gestureRef = useRef({ pinching: false, startDistance: 0, scale: 1 });
+
+  const cornerPoint = useCallback((corner: Corner, tileSize: PipTileSize) => {
+    const area = stageRef.current;
+    if (!area) {return { x: 0, y: 0 };}
+    const tile = PIP_TILE_SIZES[tileSize];
+    const top = MARGIN + topInsetRef.current;
+    return {
+      x: corner.right ? Math.max(MARGIN, area.width - tile.width - MARGIN) : MARGIN,
+      y: corner.bottom ? Math.max(top, area.height - tile.height - MARGIN) : top,
+    };
+  }, []);
+
+  const settle = useCallback(
+    (animated: boolean) => {
+      const tileSize = sizeRef.current;
+      const target = cornerPoint(cornerRef.current, tileSize);
+      const tile = PIP_TILE_SIZES[tileSize];
+      restRef.current = target;
+      if (!animated) {
+        position.setValue(target);
+        width.setValue(tile.width);
+        height.setValue(tile.height);
+        pinchScale.setValue(1);
+        return;
+      }
+      Animated.parallel([
+        Animated.spring(position, { ...SPRING, toValue: target }),
+        Animated.spring(width, { ...SPRING, toValue: tile.width }),
+        Animated.spring(height, { ...SPRING, toValue: tile.height }),
+        Animated.spring(pinchScale, { ...SPRING, toValue: 1 }),
+      ]).start();
+    },
+    [cornerPoint, position, width, height, pinchScale]
+  );
+
+  const onStageLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width: w, height: h } = event.nativeEvent.layout;
+      const prev = stageRef.current;
+      if (prev && prev.width === w && prev.height === h) {return;}
+      stageRef.current = { width: w, height: h };
+      setStage(stageRef.current);
+      settle(false);
+    },
+    [settle]
+  );
+
+  // The safe-area inset arrives after the first layout on some devices.
+  useEffect(() => {
+    if (stageRef.current) {settle(false);}
+  }, [topInset, settle]);
+
+  const panHandlers = useMemo(
+    () =>
+      PanResponder.create({
+        // Two fingers are always ours (pinch); one finger only once it
+        // moves, so a tap still reaches the tile's onPress (swap videos).
+        onStartShouldSetPanResponderCapture: (event) =>
+          event.nativeEvent.touches.length >= 2,
+        // Own the touch from the start when the tile has no tap target
+        // (nothing to swap): an ancestor outside the call Modal would take
+        // it otherwise, and the move-capture below would never be asked.
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: (event, gesture) =>
+          event.nativeEvent.touches.length >= 2 ||
+          Math.abs(gesture.dx) > 4 ||
+          Math.abs(gesture.dy) > 4,
+        // Never hand the tile over to the swipe-to-minimize of the screen.
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: () => {
+          position.stopAnimation();
+          width.stopAnimation();
+          height.stopAnimation();
+          pinchScale.stopAnimation();
+          gestureRef.current = { pinching: false, startDistance: 0, scale: 1 };
+        },
+        onPanResponderMove: (event, gesture) => {
+          const touches = event.nativeEvent.touches;
+          const state = gestureRef.current;
+          if (touches.length >= 2) {
+            const distance = touchDistance(touches);
+            if (!state.pinching || state.startDistance <= 0) {
+              state.pinching = true;
+              state.startDistance = distance;
+            } else {
+              state.scale = Math.min(1.8, Math.max(0.6, distance / state.startDistance));
+              pinchScale.setValue(state.scale);
+            }
+          }
+          position.setValue({
+            x: restRef.current.x + gesture.dx,
+            y: restRef.current.y + gesture.dy,
+          });
+        },
+        onPanResponderRelease: (_event, gesture) => {
+          const area = stageRef.current;
+          const state = gestureRef.current;
+          if (state.pinching) {
+            const next: PipTileSize =
+              state.scale >= GROW_RATIO
+                ? 'large'
+                : state.scale <= SHRINK_RATIO
+                  ? 'small'
+                  : sizeRef.current;
+            if (next !== sizeRef.current) {
+              // Keep the size the finger left it at, then let the spring
+              // carry it to the new one, so the tile doesn't jump.
+              const from = PIP_TILE_SIZES[sizeRef.current];
+              width.setValue(from.width * state.scale);
+              height.setValue(from.height * state.scale);
+              pinchScale.setValue(1);
+              sizeRef.current = next;
+              setSize(next);
+            }
+          }
+          if (area) {
+            const tile = PIP_TILE_SIZES[sizeRef.current];
+            const centerX =
+              restRef.current.x + gesture.dx + gesture.vx * FLICK_PROJECTION_MS + tile.width / 2;
+            const centerY =
+              restRef.current.y + gesture.dy + gesture.vy * FLICK_PROJECTION_MS + tile.height / 2;
+            cornerRef.current = {
+              right: centerX > area.width / 2,
+              bottom: centerY > area.height / 2,
+            };
+          }
+          settle(true);
+        },
+        onPanResponderTerminate: () => settle(true),
+      }).panHandlers,
+    [position, width, height, pinchScale, settle]
+  );
+
+  return {
+    /** Put on the area the tile moves within. */
+    onStageLayout,
+    panHandlers,
+    size,
+    /** Hidden until the stage is measured, so it never flashes at 0,0. */
+    style: {
+      position: 'absolute' as const,
+      left: 0,
+      top: 0,
+      width,
+      height,
+      opacity: stage ? 1 : 0,
+      transform: [
+        { translateX: position.x },
+        { translateY: position.y },
+        { scale: pinchScale },
+      ],
+    },
+  };
+};

package/src/components/styled/MediaFilePreview.tsx

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView, ScrollView } from 'react-native';
 import {
   MediaContainer,
   MediaImage,
@@ -8,6 +8,7 @@ import { RemoveButton, RemoveButtonText } from './StyledComponents';
 import { FC, useState } from 'react';
 import { MediaFile } from '../../types/types';
 import { useVideoPlayer, VideoView } from 'expo-video';
+import { useT } from '../../i18n/useT';
 
 interface MediaFilePreviewProps {
   filePreviews: MediaFile[];
@@ -62,42 +63,56 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
   handleRemoveImage,
 }) => {
   const [previewUri, setPreviewUri] = useState<string | null>(null);
+  const t = useT();
 
+  // The tray holds up to ten files, so it scrolls sideways rather than wrap.
   return (
-    <MediaContainer>
-      {filePreviews.map((file, index) => {
-        const isImage = file.type?.startsWith('image');
-        const isVideo = file.type?.startsWith('video');
-        return (
-          <View key={`${file.name}_${index}`}>
-            {isImage ? (
-              <MediaImage source={{ uri: file.uri }} />
-            ) : isVideo ? (
-              <VideoThumb uri={file.uri} onPress={() => setPreviewUri(file.uri)} />
-            ) : (
-              <View style={{ width: 70, height: 70, borderRadius: 8 }}>
-                <FileIcon width={70} height={70} />
-              </View>
-            )}
-            <RemoveButton onPress={() => handleRemoveImage(index)}>
-              <RemoveButtonText>&times;</RemoveButtonText>
-            </RemoveButton>
-          </View>
-        );
-      })}
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      keyboardShouldPersistTaps="handled"
+      testID="media-tray"
+    >
+      <MediaContainer>
+        {filePreviews.map((file, index) => {
+          const isImage = file.type?.startsWith('image');
+          const isVideo = file.type?.startsWith('video');
+          return (
+            <View key={`${file.name}_${index}`}>
+              {isImage ? (
+                <MediaImage source={{ uri: file.uri }} />
+              ) : isVideo ? (
+                <VideoThumb uri={file.uri} onPress={() => setPreviewUri(file.uri)} />
+              ) : (
+                <View style={{ width: 70, height: 70, borderRadius: 8 }}>
+                  <FileIcon width={70} height={70} />
+                </View>
+              )}
+              <RemoveButton
+                testID={`media-tray-remove-${index}`}
+                accessibilityRole="button"
+                accessibilityLabel={t('attachment.remove')}
+                onPress={() => handleRemoveImage(index)}
+              >
+                <RemoveButtonText>&times;</RemoveButtonText>
+              </RemoveButton>
+            </View>
+          );
+        })}
 
-      <Modal visible={!!previewUri} animationType="fade" transparent>
-        <SafeAreaView style={styles.modalContainer}>
-          <TouchableOpacity
-            style={styles.closeButton}
-            onPress={() => setPreviewUri(null)}
-          >
-            <Text style={styles.closeText}>✕</Text>
-          </TouchableOpacity>
-          {previewUri && <FullscreenPreviewVideo uri={previewUri} />}
-        </SafeAreaView>
-      </Modal>
-    </MediaContainer>
+        <Modal visible={!!previewUri} animationType="fade" transparent>
+          <SafeAreaView style={styles.modalContainer}>
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => setPreviewUri(null)}
+            >
+              <Text style={styles.closeText}>✕</Text>
+            </TouchableOpacity>
+            {previewUri && <FullscreenPreviewVideo uri={previewUri} />}
+          </SafeAreaView>
+        </Modal>
+      </MediaContainer>
+    </ScrollView>
   );
 };
 

package/src/components/styled/MessageImage.tsx

@@ -36,6 +36,13 @@ interface CustomMessageImageProps {
    * route; rendering it inline is what left the bubbles blank.
    */
   locationPreview?: string;
+  /**
+   * Album mode: fill a tile of exactly this size (cover, square corners; the
+   * tile clips) instead of sizing itself to the picture.
+   */
+  tile?: { width: number; height: number };
+  /** Replaces the default "open this one file" tap, e.g. to open an album at an index. */
+  onOpen?: () => void;
 }
 
 /** Keep the personal file token out of the logs. */
@@ -51,6 +58,8 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   originalName,
   mimetype,
   locationPreview,
+  tile,
+  onOpen,
 }) => {
   // Preview first, original only as a fallback — mirrors the web client,
   // where the <img> src is the preview and `fileURL` is reserved for the
@@ -59,12 +68,13 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   const [loading, setLoading] = useState(true);
   // Start with a neutral box; swap to the real aspect ratio once the
   // image's natural dimensions are known so it's shown scaled, not cropped.
-  const [dims, setDims] = useState<MediaDims>(defaultMediaDims());
+  const [measured, setDims] = useState<MediaDims>(defaultMediaDims());
+  const dims: MediaDims = tile ?? measured;
 
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!displayURL) {
+    if (!displayURL || tile) {
       return;
     }
     let active = true;
@@ -88,15 +98,21 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
     return () => {
       active = false;
     };
-  }, [displayURL]);
+  }, [displayURL, tile]);
 
   const handleOpen = () => {
+    if (onOpen) {
+      onOpen();
+      return;
+    }
     dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 
   return (
-    <Container style={{ width: dims.width }}>
+    <Container
+      style={tile ? { width: dims.width, borderRadius: 0 } : { width: dims.width }}
+    >
       <TouchableOpacity onPress={handleOpen} activeOpacity={0.9}>
         {loading && (
           <View
@@ -117,7 +133,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
           style={{
             width: dims.width,
             height: dims.height,
-            borderRadius: 10,
+            borderRadius: tile ? 0 : 10,
             backgroundColor: 'rgba(0, 0, 0, 0)',
           }}
           onLoadEnd={() => setLoading(false)}

package/src/components/styled/SendInput.tsx

@@ -17,6 +17,7 @@ import { getElementFont } from '../../helpers/getElementFont';
 import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
 import { getMediaLibrary } from '../../helpers/mediaLibraryRuntime';
+import { mediaFileCap, mediaSizeLimit } from '../../helpers/mediaLimits';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
@@ -44,14 +45,6 @@ import {
 // receivers draw it without downloading and decoding the clip first.
 const VOICE_PRESET = { ...RecordingPresets.HIGH_QUALITY, isMeteringEnabled: true };
 
-// iOS photos default to HEIC; many web backends (incl. ours) 500 on
-// HEIC uploads because they can't decode it. Convert to JPEG before
-// upload — JPEG is universally supported. JPEGs pass through.
-// Server rejects uploads over its body-size cap with HTTP 413 (Request
-// Entity Too Large). Guard client-side so the user gets a clear message
-// instead of a silent failed bubble. 50 MB matches the backend limit.
-const MAX_MEDIA_BYTES = 50 * 1024 * 1024;
-
 const formatBytes = (bytes: number): string => {
   if (bytes >= 1024 * 1024) {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
@@ -89,7 +82,11 @@ interface SendInputProps {
   sendMessage: (message: string) => void;
   isLoading: boolean;
   editMessage?: string;
-  sendMedia: (data: any, type: string) => void;
+  /**
+   * Sends one message carrying `data` (a file or the picked list). The typed
+   * text, when there is any, goes with it as the caption.
+   */
+  sendMedia: (data: any, type: string, caption?: { text: string }) => unknown;
   config?: IConfig;
   onFocus?: () => void;
   onBlur?: () => void;
@@ -164,25 +161,64 @@ const SendInput: React.FC<SendInputProps> = ({
   // "Document" row or a dev-mode double-run of the sheet's close callback.
   const pickingDocRef = useRef(false);
 
-  const handleFileSelect = (files: MediaFile[]) => {
-    // Enforce the upload size cap before anything reaches the network.
-    // The backend rejects oversized bodies with HTTP 413; catching it
-    // here gives a clear message instead of a silent failed bubble.
-    const limit = maxMediaBytes ?? MAX_MEDIA_BYTES;
-    const oversize = files.find(
-      (f) => typeof f.size === 'number' && f.size > limit
-    );
-    if (oversize) {
-      Alert.alert(
-        'File too large',
-        `"${oversize.name}" is ${formatBytes(oversize.size!)}. The maximum allowed size is ${Math.round(
-          limit / (1024 * 1024)
-        )} MB.`
-      );
-      return;
+  /**
+   * Adds picked files to the tray. The tray is a list, not a slot: a second
+   * pick or a camera shot appends. Enforces the per-message file cap and the
+   * per-file size cap before anything reaches the network; the size cap is
+   * the upload limit (50 MB, or the sealed-file limit in an e2ee room),
+   * lowered by `config.attachments.maxSizeMB`. The backend rejects oversized
+   * bodies with HTTP 413, so catching them here gives a clear message.
+   */
+  const handleFileSelect = (incoming: MediaFile[]) => {
+    if (incoming.length === 0) {return;}
+    const limit = mediaSizeLimit(config, maxMediaBytes);
+    const fitting = incoming.filter((file) => {
+      if (typeof file.size === 'number' && file.size > limit) {
+        Alert.alert(
+          t('attachment.tooLarge', {
+            name: file.name,
+            max: formatBytes(limit),
+          })
+        );
+        return false;
+      }
+      return true;
+    });
+    const cap = mediaFileCap(config);
+    const room = cap - filePreviewsRef.current.length;
+    if (fitting.length === 0) {return;}
+    if (room <= 0 || fitting.length > room) {
+      Alert.alert(t('attachment.limit', { count: cap }));
     }
-    filePreviewsRef.current = files;
-    setFilePreviews([...files]);
+    const accepted = fitting.slice(0, Math.max(0, room));
+    if (accepted.length === 0) {return;}
+    const next = [...filePreviewsRef.current, ...accepted];
+    filePreviewsRef.current = next;
+    setFilePreviews(next);
+  };
+
+  /** One picked image or video as the file the tray and the upload carry. */
+  const assetToFile = async (
+    asset: ImagePicker.ImagePickerAsset,
+    fallbackPrefix: string
+  ): Promise<MediaFile> => {
+    if (asset.type === 'video') {
+      return {
+        uri: asset.uri,
+        type: asset.mimeType || 'video/mp4',
+        name: asset.fileName || asset.uri.split('/').pop() || `${fallbackPrefix}_${Date.now()}.mp4`,
+        size: (asset as any).fileSize,
+      };
+    }
+    // Videos pass through unchanged; only images get the HEIC→JPEG
+    // normalization (manipulator is image-only).
+    const normalized = await normalizeImageAsset(asset);
+    return {
+      uri: normalized.uri,
+      type: normalized.mime,
+      name: normalized.name,
+      size: (asset as any).fileSize,
+    };
   };
 
   // Both pickers use expo-image-picker / expo-document-picker. They
@@ -205,33 +241,14 @@ const SendInput: React.FC<SendInputProps> = ({
     }
 
     try {
+      // Camera is a single shot per tap; the shot joins the tray.
       const result = await ImagePicker.launchCameraAsync({
         mediaTypes: ['images', 'videos'],
         quality: 0.9,
         videoQuality: ImagePicker.UIImagePickerControllerQualityType.Medium,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
-      const asset = result.assets[0];
-      if (asset.type === 'video') {
-        handleFileSelect([
-          {
-            uri: asset.uri,
-            type: asset.mimeType || 'video/mp4',
-            name: asset.fileName || asset.uri.split('/').pop() || `camera_${Date.now()}.mp4`,
-            size: (asset as any).fileSize,
-          },
-        ]);
-        return;
-      }
-      const normalized = await normalizeImageAsset(asset);
-      handleFileSelect([
-        {
-          uri: normalized.uri,
-          type: normalized.mime,
-          name: normalized.name,
-          size: (asset as any).fileSize,
-        },
-      ]);
+      handleFileSelect([await assetToFile(result.assets[0], 'camera')]);
     } catch (error) {
       console.error('Camera error:', error);
     }
@@ -244,38 +261,29 @@ const SendInput: React.FC<SendInputProps> = ({
       return;
     }
 
+    // The library takes as many as the tray has room for (at least one).
+    const remaining = mediaFileCap(config) - filePreviewsRef.current.length;
+    if (remaining <= 0) {
+      Alert.alert(t('attachment.limit', { count: mediaFileCap(config) }));
+      return;
+    }
+
     try {
       const result = await ImagePicker.launchImageLibraryAsync({
         mediaTypes: ['images', 'videos'],
         allowsEditing: false,
         quality: 0.9,
+        allowsMultipleSelection: true,
+        selectionLimit: remaining,
         preferredAssetRepresentationMode:
           ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Compatible,
       });
-      if (result.canceled || !result.assets?.[0]) {return;}
-      const asset = result.assets[0];
-      // Videos pass through unchanged; only images get the HEIC→JPEG
-      // normalization (manipulator is image-only).
-      if (asset.type === 'video') {
-        handleFileSelect([
-          {
-            uri: asset.uri,
-            type: asset.mimeType || 'video/mp4',
-            name: asset.fileName || asset.uri.split('/').pop() || `gallery_${Date.now()}.mp4`,
-            size: (asset as any).fileSize,
-          },
-        ]);
-        return;
+      if (result.canceled || !result.assets?.length) {return;}
+      const picked: MediaFile[] = [];
+      for (const asset of result.assets) {
+        picked.push(await assetToFile(asset, 'gallery'));
       }
-      const normalized = await normalizeImageAsset(asset);
-      handleFileSelect([
-        {
-          uri: normalized.uri,
-          type: normalized.mime,
-          name: normalized.name,
-          size: (asset as any).fileSize,
-        },
-      ]);
+      handleFileSelect(picked);
     } catch (error) {
       console.error('Gallery error:', error);
     }
@@ -336,19 +344,18 @@ const SendInput: React.FC<SendInputProps> = ({
     try {
       const result = await DocumentPicker.getDocumentAsync({
         type: '*/*',
-        multiple: false,
+        multiple: true,
         copyToCacheDirectory: true,
       });
-      if (result.canceled || !result.assets?.[0]) {return;}
-      const asset = result.assets[0];
-      handleFileSelect([
-        {
+      if (result.canceled || !result.assets?.length) {return;}
+      handleFileSelect(
+        result.assets.map((asset) => ({
           uri: asset.uri,
           type: asset.mimeType || 'application/octet-stream',
           name: asset.name || `file_${Date.now()}`,
           size: asset.size ?? undefined,
-        },
-      ]);
+        }))
+      );
     } catch (err) {
       console.error('DocumentPicker error:', err);
     } finally {
@@ -383,6 +390,11 @@ const SendInput: React.FC<SendInputProps> = ({
   const libraryPermissionCheckedRef = useRef(false);
 
   const handleAttachPress = () => {
+    const cap = mediaFileCap(config);
+    if (filePreviewsRef.current.length >= cap) {
+      Alert.alert(t('attachment.limit', { count: cap }));
+      return;
+    }
     if (libraryPermissionCheckedRef.current) {
       setShowMediaMenu(true);
       return;
@@ -594,17 +606,19 @@ const SendInput: React.FC<SendInputProps> = ({
     setFilePreviews([]);
 
     try {
-      for (const file of filesToSend) {
-        try {
-          await sendMedia(file, file.type);
-        } catch (err) {
-          console.error(err);
-          return;
-        }
-      }
-      if (messageToSend) {
+      if (filesToSend.length > 0) {
+        // The files go as ONE message. The text typed with them is its
+        // caption, never a separate text message.
+        await sendMedia(
+          filesToSend,
+          filesToSend[0]!.type,
+          messageToSend ? { text: messageToSend } : undefined
+        );
+      } else if (messageToSend) {
         sendMessage(messageToSend);
       }
+    } catch (err) {
+      console.error(err);
     } finally {
       sendingRef.current = false;
     }