@ethora/chat-component-rn 26.10.4 → 26.10.6

package/lib/module/hooks/useSendMessage.js

@@ -5,7 +5,7 @@ import { Platform } from 'react-native';
 import { v4 as uuidv4 } from 'uuid';
 import { useXmppClient } from '../context/xmppProvider';
 import { useDispatch, useSelector, useStore } from 'react-redux';
-import { addRoomMessage, setEditAction } from '../roomStore/roomsSlice';
+import { addRoomMessage, setEditAction, setMediaUploadState, setMessageAttachments } from '../roomStore/roomsSlice';
 import { addMessageToHeap, clearMessageFailure, markMessageFailed } from '../roomStore/roomHeapSlice';
 import { uploadFileV2 } from '../networking/api-requests/auth.api';
 import { enqueueOutboundSend, removeOutboundSend } from '../networking/outboundQueue';
@@ -14,6 +14,13 @@ import { getGlobalXmppClient } from '../utils/clientRegistry';
 import { useEventHandlers } from './useEventHandlers';
 import { canEditMessage, canSendMediaToRoom, canSendToRoom } from '../e2ee';
 import { shouldEncrypt } from '../e2ee/send';
+import { MAX_SEAL_BYTES } from '../e2ee/limits';
+import { mapWithConcurrency } from '../helpers/mapWithConcurrency';
+import { normalizeCaptionInput } from '../helpers/caption';
+import { toUploadedAttachment } from '../helpers/attachments';
+import { mediaFileCap, mediaSizeLimit } from '../helpers/mediaLimits';
+import { hasMediaRetry, registerMediaRetry, retryMediaSend, unregisterMediaRetry } from '../helpers/mediaSendRetry';
+
 // Watchdog: if a message stays "pending" (no server echo) for this
 // long after the optimistic dispatch, mark it failed so the bubble
 // flips out of the "sending..." state. Covers the silent-failure
@@ -46,10 +53,48 @@ const MEDIA_PENDING_WATCHDOG_MS = 30_000;
 let __sendIdSeq = 0;
 const nextStanzaId = prefix => `${prefix}-${Date.now()}-${__sendIdSeq = __sendIdSeq + 1 >>> 0}`;
 
-// Hard client-side cap on a single upload. The backend rejects oversized
-// bodies with HTTP 413; SendInput blocks oversized files at pick time,
-// and this mirrors that limit on every send path (including retries).
-const MAX_MEDIA_BYTES = 50 * 1024 * 1024;
+// Uploads in flight per send. A sealed (e2ee) file is encrypted on the device
+// before it goes up, which is slow, so an e2ee send runs fewer at once.
+const MEDIA_UPLOAD_CONCURRENCY = 4;
+const MEDIA_E2EE_UPLOAD_CONCURRENCY = 2;
+
+/** The local id of a tile until the upload gives it the server's `_id`. */
+const localAttachmentId = (messageId, index) => `${messageId}:${index}`;
+
+/** A tile without its local upload state (the file itself is unchanged). */
+const withoutUploadState = attachment => {
+  const copy = {
+    ...attachment
+  };
+  delete copy.uploadStatus;
+  delete copy.uploadProgress;
+  return copy;
+};
+
+/** A picker uri as a plain file uri (iOS asset-library scheme rewritten). */
+const normalizeFileUri = uri => typeof uri === 'string' ? uri.replace(/^assets-library:\/\//, 'file://') : '';
+
+/** The file's own uri when it is on this device, for the sender's preview. */
+const localPreviewUrl = uri => {
+  const normalized = normalizeFileUri(uri);
+  return /^(file|content):\/\//.test(normalized) ? normalized : undefined;
+};
+
+/** One file as a failed send keeps it: plain fields only, so it persists. */
+const toFailedFile = (file, fallbackType) => ({
+  uri: typeof file?.uri === 'string' ? file.uri : undefined,
+  type: file?.type || file?.mimeType || fallbackType || undefined,
+  name: file?.name || file?.fileName || undefined,
+  ...(typeof file?.size === 'number' ? {
+    size: file.size
+  } : {}),
+  ...(typeof file?.duration === 'number' ? {
+    duration: file.duration
+  } : {}),
+  ...(typeof file?.waveForm === 'string' ? {
+    waveForm: file.waveForm
+  } : {})
+});
 export const useSendMessage = _configOverride => {
   const {
     client
@@ -300,47 +345,91 @@ export const useSendMessage = _configOverride => {
       });
     }
   }, [editAction, client, user, langSource, dispatch, handleMessageSent, handleMessageEdited, handleMessageFailed, reduxStore]);
-  const sendMedia = useCallback(async (data, type, activeRoomJID, isReply = false, isChecked = false, mainMessage = '', existingId) => {
+  const sendMedia = useCallback(async (data, type, activeRoomJID, isReply = false, isChecked = false, mainMessage = '', existingId, caption) => {
     if (!canSendMediaToRoom(activeRoomJID)) {
       console.warn('media not sent: room is end-to-end encrypted');
-      return;
+      return false;
     }
     client?.onCriticalSend?.(activeRoomJID);
 
-    // Defensive 50 MB guard on every send path (SendInput blocks it at
+    // One send = one message, whatever the caller handed us: a single file,
+    // the composer's array, or the saved list on a retry. Extra files past
+    // the cap are dropped here as well as in the composer.
+    const files = (Array.isArray(data) ? data : [data]).filter(file => !!file && typeof file === 'object').slice(0, mediaFileCap(config));
+    if (files.length === 0) {
+      return false;
+    }
+    const first = files[0];
+    const isE2ee = shouldEncrypt(activeRoomJID);
+    const sizeLimit = mediaSizeLimit(config, isE2ee ? MAX_SEAL_BYTES : undefined);
+    const captionFields = normalizeCaptionInput(caption);
+    const id = existingId || `send-media-message:${uuidv4()}`;
+
+    // Everything a retry needs to replay this send, in selection order.
+    const failedPayload = () => ({
+      kind: 'media',
+      id,
+      roomJID: activeRoomJID,
+      data: toFailedFile(first, type),
+      type,
+      isReply,
+      isChecked,
+      mainMessage,
+      files: files.map(file => toFailedFile(file, type)),
+      ...(captionFields ? {
+        caption: captionFields.caption,
+        ...(captionFields.mentions ? {
+          captionMentions: captionFields.mentions
+        } : {})
+      } : {})
+    });
+
+    // Defensive size guard on every send path (the composer blocks it at
     // pick time, but retries replay the saved payload straight here).
-    if (typeof data?.size === 'number' && data.size > MAX_MEDIA_BYTES) {
-      console.warn('media exceeds 50MB cap — not uploading', {
-        name: data?.name,
-        size: data?.size
+    const oversize = files.find(file => typeof file?.size === 'number' && file.size > sizeLimit);
+    if (oversize) {
+      console.warn('media exceeds the size cap - not uploading', {
+        name: oversize?.name,
+        size: oversize?.size
       });
+      const error = new Error(`File exceeds the ${Math.round(sizeLimit / (1024 * 1024))} MB upload limit`);
       if (existingId) {
-        dispatch(markMessageFailed({
-          kind: 'media',
-          id: existingId,
-          roomJID: activeRoomJID,
-          data,
-          type,
-          isReply,
-          isChecked,
-          mainMessage
-        }));
+        dispatch(markMessageFailed(failedPayload()));
       }
       handleMessageFailed({
         message: 'media',
         roomJID: activeRoomJID,
-        error: new Error('File exceeds the 50 MB upload limit'),
+        error,
         messageType: 'media'
       });
-      return;
+      return false;
     }
-    const id = existingId || `send-media-message:${uuidv4()}`;
     const optimisticTimestamp = Date.now();
     const optimisticDate = new Date(optimisticTimestamp).toISOString();
     const selfId = user?.xmppUsername || user?.walletAddress || '';
     const displayName = `${user?.firstName || ''} ${user?.lastName || ''}`.trim() || selfId;
-    const fileSizeStr = data?.size != null ? String(data.size) : '';
-    const normalizedFileUri = typeof data?.uri === 'string' ? data.uri.replace(/^assets-library:\/\//, 'file://') : '';
+    const normalizedFileUri = normalizeFileUri(first?.uri);
+    const fileSizeStr = first?.size != null ? String(first.size) : '';
+
+    // One tile per file, in selection order. A tile's id is local until the
+    // upload returns the server's `_id`; the tile's upload state is keyed on it.
+    const tiles = files.map((file, index) => {
+      const localUrl = localPreviewUrl(file?.uri);
+      return {
+        attachmentId: localAttachmentId(id, index),
+        location: '',
+        mimetype: file?.type || file?.mimeType || type,
+        originalName: file?.name,
+        fileName: file?.name,
+        size: file?.size != null ? String(file.size) : undefined,
+        duration: file?.duration != null ? String(file.duration) : undefined,
+        ...(localUrl ? {
+          localUrl
+        } : {}),
+        uploadStatus: 'uploading',
+        uploadProgress: 0
+      };
+    });
     if (!config?.disableSentLogic && !existingId) {
       dispatch(addRoomMessage({
         roomJID: activeRoomJID,
@@ -360,17 +449,22 @@ export const useSendMessage = _configOverride => {
           xmppId: id,
           xmppFrom: `${activeRoomJID}/${selfId}`,
           isMediafile: 'true',
-          fileName: data?.name,
+          fileName: first?.name,
           location: normalizedFileUri,
           locationPreview: normalizedFileUri,
           mimetype: type,
-          originalName: data?.name,
+          originalName: first?.name,
           size: fileSizeStr,
-          duration: data?.duration,
-          waveForm: data?.waveForm,
+          duration: first?.duration,
+          waveForm: first?.waveForm,
+          attachments: tiles,
           isReply: isReply ? 'true' : 'false',
           showInChannel: `${isChecked}`,
-          mainMessage
+          mainMessage,
+          ...(captionFields ? {
+            caption: captionFields.caption,
+            captionMentions: captionFields.mentions
+          } : {})
         }
       }));
       dispatch(addMessageToHeap({
@@ -391,31 +485,25 @@ export const useSendMessage = _configOverride => {
       }));
     }
 
-    // Silent-failure watchdog for media-send (bug #18). Same shape
-    // as the text path: if the optimistic bubble never gets the echo
-    // (e.g. upload completed but XMPP send is buffered offline), flip
-    // to failed → tap to retry.
-    const mediaWatchdog = setTimeout(() => {
+    // Silent-failure watchdog for media-send (bug #18). Re-armed on every
+    // retry, so a retried send gets its own window. While files are still
+    // going up it is not a failure: it waits one more window instead.
+    const armWatchdog = () => setTimeout(() => {
+      if (running) {
+        mediaWatchdog = armWatchdog();
+        return;
+      }
       const state = reduxStore.getState();
       const roomMsgs = state.rooms?.rooms?.[activeRoomJID]?.messages || [];
       const stillPending = roomMsgs.find(m => m.id === id && m.pending);
       const alreadyFailed = state.roomHeapSlice?.failedMessages?.[id];
       if (stillPending && !alreadyFailed) {
-        console.warn(`Media-send watchdog fired — ${id} stuck pending > ${PENDING_WATCHDOG_MS}ms; marking failed`);
+        console.warn(`Media-send watchdog fired - ${id} stuck pending > ${MEDIA_PENDING_WATCHDOG_MS}ms; marking failed`);
         // See the text-send watchdog above: drop the buffered replay so
         // a later onOnline flush can't silently resend behind the
         // "failed / tap to retry" bubble.
         removeOutboundSend(id);
-        dispatch(markMessageFailed({
-          kind: 'media',
-          id,
-          roomJID: activeRoomJID,
-          data,
-          type,
-          isReply,
-          isChecked,
-          mainMessage
-        }));
+        dispatch(markMessageFailed(failedPayload()));
         handleMessageFailed({
           message: 'media',
           roomJID: activeRoomJID,
@@ -424,138 +512,220 @@ export const useSendMessage = _configOverride => {
         });
       }
     }, MEDIA_PENDING_WATCHDOG_MS);
-
-    // Help RN's FormData polyfill build a proper multipart/file part
-    // (instead of serialising the JS object as JSON). On iOS the
-    // picker can return ph:// or assets-library:// URIs for some
-    // legacy library items — those can't be read as files. Coerce
-    // to a file:// scheme when possible so the body is a real blob.
-    const fileBlob = {
-      uri: normalizedFileUri || data?.uri,
-      type: data?.type || data?.mimeType || type || 'application/octet-stream',
-      name: data?.name || data?.fileName || `media_${Date.now()}`
+    const uploaded = files.map(() => undefined);
+    const rawResults = files.map(() => undefined);
+    const sealedUploads = files.map(() => undefined);
+    // Per-file key material, kept apart from the sealed upload: the upload
+    // is disposed once the message is assembled, but a send that fails after
+    // that point is retried and must still carry every key.
+    const keyMaterials = files.map(() => undefined);
+    let delivered = false;
+    let running = false;
+    const concurrency = isE2ee ? MEDIA_E2EE_UPLOAD_CONCURRENCY : MEDIA_UPLOAD_CONCURRENCY;
+    let mediaWatchdog = armWatchdog();
+    const publishTile = (index, patch) => {
+      const attachmentId = tiles[index]?.attachmentId;
+      if (config?.disableSentLogic || !attachmentId) {
+        return;
+      }
+      dispatch(setMediaUploadState({
+        roomJID: activeRoomJID,
+        messageId: id,
+        attachmentId,
+        ...patch
+      }));
     };
-    let sealed;
-    const tryUpload = async () => {
-      if (shouldEncrypt(activeRoomJID) && !sealed) {
+    const missingIndices = () => uploaded.reduce((acc, item, index) => item ? acc : [...acc, index], []);
+    const uploadOne = async index => {
+      const file = files[index];
+      publishTile(index, {
+        uploadStatus: 'uploading',
+        uploadProgress: 0
+      });
+
+      // Helps RN's FormData polyfill build a proper multipart/file part
+      // (instead of serialising the JS object as JSON). On iOS the picker
+      // can return ph:// or assets-library:// URIs; coerce to file:// when
+      // possible so the body is a real blob.
+      const fileBlob = {
+        uri: normalizeFileUri(file?.uri) || file?.uri,
+        type: file?.type || file?.mimeType || type || 'application/octet-stream',
+        name: file?.name || file?.fileName || `media_${Date.now()}_${index}`
+      };
+
+      // In an e2ee room each file is sealed before it leaves the device:
+      // the server only ever sees opaque bytes under a random name. The
+      // per-file keys ride in the encrypted <body> (see sendMediaMessage).
+      if (isE2ee) {
+        sealedUploads[index]?.dispose();
+        sealedUploads[index] = undefined;
         const {
           sealPickedFile
         } = require('../e2ee/sealedFiles');
-        sealed = await sealPickedFile({
+        sealedUploads[index] = await sealPickedFile({
           uri: fileBlob.uri,
           name: fileBlob.name,
           type: fileBlob.type,
-          size: typeof data?.size === 'number' ? data.size : undefined
+          size: typeof file?.size === 'number' ? file.size : undefined
         });
       }
+      const sealed = sealedUploads[index];
+      if (sealed) {
+        keyMaterials[index] = sealed.keyMaterial;
+      }
       const part = sealed ? {
         uri: sealed.uri,
         type: 'application/octet-stream',
         name: sealed.name
       } : fileBlob;
       const options = {
-        clientEncrypted: !!sealed
+        clientEncrypted: !!sealed,
+        onProgress: percent => publishTile(index, {
+          uploadProgress: percent
+        })
+      };
+      const post = field => {
+        const fd = new FormData();
+        fd.append(field, part);
+        return uploadFileV2(fd, activeRoomJID, options);
       };
-      const fd = new FormData();
-      fd.append('files', part);
+      let response;
       try {
-        return await uploadFileV2(fd, activeRoomJID, options);
+        response = await post('files');
       } catch (err) {
-        if (err?.response?.status === 500) {
-          console.warn('upload "files" field returned 500 — retrying with "file" (singular)', {
-            name: part.name,
-            type: part.type
-          });
-          const fd2 = new FormData();
-          fd2.append('file', part);
-          return await uploadFileV2(fd2, activeRoomJID, options);
+        if (err?.response?.status !== 500) {
+          throw err;
         }
-        throw err;
+        console.warn('upload "files" field returned 500 - retrying with "file" (singular)', {
+          name: part.name,
+          type: part.type
+        });
+        response = await post('file');
       }
+      const raw = Array.isArray(response?.data?.results) ? response.data.results[0] : undefined;
+      if (!raw) {
+        throw new Error('media_upload_empty_response');
+      }
+      uploaded[index] = toUploadedAttachment(raw);
+      rawResults[index] = raw;
+      // The bytes are up; the message waits for its siblings.
+      publishTile(index, {
+        uploadStatus: 'uploading',
+        uploadProgress: 100
+      });
     };
-    try {
-      const response = await tryUpload();
-      // Upload succeeded — the stanza is now in flight. If the
-      // server echo arrives within the watchdog window the bubble
-      // flips normally; if not, the watchdog still fires and marks
-      // it failed. We don't clear the timer on upload success because
-      // the XMPP send could still fail silently.
-
-      for (const item of response.data.results) {
-        const messagePayload = {
-          firstName: user.firstName,
-          lastName: user.lastName,
-          walletAddress: user.walletAddress,
-          createdAt: item.createdAt,
-          expiresAt: item.expiresAt,
-          fileName: item.filename,
-          isVisible: item?.isVisible,
-          location: item.location,
-          locationPreview: item.locationPreview,
-          mimetype: item.mimetype,
-          originalName: item?.originalname,
-          ownerKey: item?.ownerKey,
-          size: item.size,
-          duration: item?.duration ?? data?.duration,
-          waveForm: data?.waveForm,
-          updatedAt: item?.updatedAt,
-          userId: item?.userId,
-          attachmentId: item?._id,
-          wrappable: true,
-          roomJid: activeRoomJID,
-          showInChannel: isChecked,
-          isReply,
-          mainMessage,
-          isPrivate: item?.isPrivate,
-          __v: item.__v,
-          e2eeKeys: sealed ? [sealed.keyMaterial] : undefined
-        };
-        if (sealed) {
+    const sendAssembled = async () => {
+      const raws = rawResults;
+      const attachments = uploaded;
+      const head = raws[0];
+      const messagePayload = {
+        firstName: user.firstName,
+        lastName: user.lastName,
+        walletAddress: user.walletAddress,
+        createdAt: head.createdAt,
+        expiresAt: head.expiresAt,
+        fileName: head.filename,
+        isVisible: head?.isVisible,
+        location: head.location,
+        locationPreview: head.locationPreview,
+        mimetype: head.mimetype,
+        originalName: head?.originalname,
+        ownerKey: head?.ownerKey,
+        size: head.size,
+        duration: head?.duration ?? first?.duration,
+        waveForm: first?.waveForm,
+        updatedAt: head?.updatedAt,
+        userId: head?.userId,
+        attachmentId: head?._id,
+        // Only when there is more than one file: sendMediaMessage stamps
+        // the list on <data> and leaves a single-file stanza untouched.
+        attachments: attachments.length > 1 ? attachments : undefined,
+        caption: captionFields?.caption,
+        captionMentions: captionFields?.mentions,
+        wrappable: true,
+        roomJid: activeRoomJID,
+        showInChannel: isChecked,
+        isReply,
+        mainMessage,
+        isPrivate: head?.isPrivate,
+        __v: head.__v,
+        // One key per sealed file, in selection order.
+        e2eeKeys: isE2ee ? keyMaterials : undefined
+      };
+
+      // The local copies of sealed files are remembered for the sender and
+      // the scratch ciphertext is dropped.
+      if (isE2ee) {
+        const {
+          rememberOpened
+        } = require('../e2ee/sealedFiles');
+        for (let index = 0; index < files.length; index++) {
+          const item = attachments[index];
           try {
-            const {
-              rememberOpened
-            } = require('../e2ee/sealedFiles');
             await rememberOpened(item.location, {
-              uri: fileBlob.uri,
-              name: fileBlob.name,
-              type: fileBlob.type,
-              size: typeof data?.size === 'number' ? data.size : undefined
+              uri: normalizeFileUri(files[index]?.uri) || files[index]?.uri,
+              name: files[index]?.name,
+              type: files[index]?.type || files[index]?.mimeType || type,
+              size: typeof files[index]?.size === 'number' ? files[index].size : undefined
             });
           } catch (err) {
             console.warn('could not keep the sent attachment', err);
           }
-          sealed.dispose();
+          sealedUploads[index]?.dispose();
+          sealedUploads[index] = undefined;
         }
-        // Stanza id == placeholder id so the MUC echo's outer
-        // <message id="..."> matches xmppId on the placeholder and
-        // insertMessageWithDelimiter merges in place + flips pending.
+      }
+
+      // Replace the optimistic tiles with the uploaded files. A sealed
+      // message keeps its local tiles (the server copies are ciphertext) and
+      // only drops the upload state. `pending` is left alone: only the
+      // server echo confirms the message.
+      if (!config?.disableSentLogic) {
+        dispatch(setMessageAttachments({
+          roomJID: activeRoomJID,
+          messageId: id,
+          attachments: isE2ee ? tiles.map(withoutUploadState) : attachments.map((attachment, index) => {
+            const localUrl = tiles[index]?.localUrl;
+            return localUrl ? {
+              ...attachment,
+              localUrl
+            } : attachment;
+          })
+        }));
+      }
+      const effectiveMediaClient = [client, getGlobalXmppClient(), store.getState()?.chatSettingStore?.client].find(c => c && c.status === 'online');
+      if (effectiveMediaClient) {
+        effectiveMediaClient.setActiveRoomJid?.(activeRoomJID);
+        await Promise.resolve(effectiveMediaClient.prioritizeRoomPresence?.(activeRoomJID)).catch(() => false);
+        effectiveMediaClient.sendMediaMessageStanza(activeRoomJID, messagePayload, id);
+        try {
+          effectiveMediaClient.ensureStreamAlive?.();
+        } catch {}
+      } else {
         // Same online-only guard as the text path: a surviving-but-offline
-        // client must NOT be used (the stanza would vanish into a dead
-        // socket) — fall through to enqueue so the reconnect flush replays.
-        const effectiveMediaClient = [client, getGlobalXmppClient(), store.getState()?.chatSettingStore?.client].find(c => c && c.status === 'online');
-        if (effectiveMediaClient) {
-          effectiveMediaClient.setActiveRoomJid?.(activeRoomJID);
-          await Promise.resolve(effectiveMediaClient.prioritizeRoomPresence?.(activeRoomJID)).catch(() => false);
-          effectiveMediaClient.sendMediaMessageStanza(activeRoomJID, messagePayload, id);
-          try {
-            effectiveMediaClient.ensureStreamAlive?.();
-          } catch {}
-        } else {
-          const anyMediaClient = client || getGlobalXmppClient() || store.getState()?.chatSettingStore?.client;
-          try {
-            anyMediaClient?.forceReconnect?.();
-          } catch {}
-          enqueueOutboundSend({
-            optimisticId: id,
-            roomJID: activeRoomJID,
-            enqueuedAt: Date.now(),
-            // Match the media watchdog so a reconnect within the (longer)
-            // media window still auto-replays the buffered stanza.
-            ttlMs: MEDIA_PENDING_WATCHDOG_MS,
-            send: c => c.sendMediaMessageStanza(activeRoomJID, messagePayload, id)
-          });
-        }
+        // client must NOT be used. Buffer the stanza for the reconnect flush.
+        const anyMediaClient = client || getGlobalXmppClient() || store.getState()?.chatSettingStore?.client;
+        try {
+          anyMediaClient?.forceReconnect?.();
+        } catch {}
+        enqueueOutboundSend({
+          optimisticId: id,
+          roomJID: activeRoomJID,
+          enqueuedAt: Date.now(),
+          // Match the media watchdog so a reconnect within the (longer)
+          // media window still auto-replays the buffered stanza.
+          ttlMs: MEDIA_PENDING_WATCHDOG_MS,
+          send: c => c.sendMediaMessageStanza(activeRoomJID, messagePayload, id)
+        });
       }
+
+      // The upload time is spent: the wait for the server echo gets a full
+      // watchdog window of its own, not what was left of the upload's.
+      clearTimeout(mediaWatchdog);
+      mediaWatchdog = armWatchdog();
+      delivered = true;
+      unregisterMediaRetry(id);
+      dispatch(clearMessageFailure(id));
       await handleMessageSent({
         message: 'media',
         roomJID: activeRoomJID,
@@ -568,59 +738,73 @@ export const useSendMessage = _configOverride => {
           fileData: data,
           fileType: type,
           messageId: id,
-          uploadResults: response.data.results
+          uploadResults: raws
         }
       });
-    } catch (error) {
-      // Upload (or stanza send) threw an explicit error. Clear the
-      // watchdog so it doesn't double-fire `markMessageFailed`.
-      clearTimeout(mediaWatchdog);
-      sealed?.dispose();
-      // Surface the real server payload so we can see why the upload
-      // was rejected (axios collapses the message to "Request failed
-      // with status code N"; the actual reason lives in
-      // `error.response.data`).
-      const uriStr = typeof data?.uri === 'string' ? data.uri : '';
-      const uriScheme = uriStr.match(/^([a-z]+):/i)?.[1] ?? 'unknown';
-      console.error('upload failed', {
-        status: error?.response?.status,
-        statusText: error?.response?.statusText,
-        serverBody: error?.response?.data,
-        requestUrl: error?.config?.url,
-        axiosMessage: error?.message,
-        axiosCode: error?.code,
-        axiosCauseMessage: error?.cause?.message,
-        uri: uriStr,
-        uriScheme,
-        mime: fileBlob.type,
-        fileSizeBytes: data?.size ?? null,
-        fileName: fileBlob.name,
-        platformOS: Platform.OS,
-        platformVersion: Platform.Version
-      });
-      dispatch(markMessageFailed({
-        kind: 'media',
-        id,
-        roomJID: activeRoomJID,
-        data,
-        type,
-        isReply,
-        isChecked,
-        mainMessage
-      }));
+    };
+    const failMessage = error => {
+      console.error('Media send failed:', error);
+      // Every file stays held: the bubble shows Failed, and Retry replays
+      // the files that did not make it (in-session) or the whole list.
+      dispatch(markMessageFailed(failedPayload()));
       handleMessageFailed({
         message: 'media',
         roomJID: activeRoomJID,
         error: error,
         messageType: 'media'
       });
-    }
+    };
+
+    /**
+     * Uploads `indices` (a retry passes only the files that failed), then
+     * sends once nothing is missing. Any failure leaves the message failed
+     * with its tiles marked, ready for a retry.
+     */
+    const run = async indices => {
+      if (delivered || running) {
+        return false;
+      }
+      running = true;
+      clearTimeout(mediaWatchdog);
+      mediaWatchdog = armWatchdog();
+      try {
+        await mapWithConcurrency(indices, concurrency, async index => {
+          try {
+            await uploadOne(index);
+          } catch (error) {
+            console.error('upload failed', {
+              status: error?.response?.status,
+              serverBody: error?.response?.data,
+              axiosMessage: error?.message,
+              fileName: files[index]?.name,
+              fileSizeBytes: files[index]?.size ?? null,
+              platformOS: Platform.OS
+            });
+            publishTile(index, {
+              uploadStatus: 'failed',
+              uploadProgress: 0
+            });
+          }
+        });
+        if (missingIndices().length > 0) {
+          throw new Error('media_upload_failed');
+        }
+        await sendAssembled();
+        return true;
+      } catch (error) {
+        failMessage(error);
+        return false;
+      } finally {
+        running = false;
+      }
+    };
+    registerMediaRetry(id, indices => run(missingIndices().filter(position => indices === undefined || indices.includes(position))));
+    return run(files.map((_, index) => index));
   }, [client, config, user, dispatch, handleMessageSent, handleMessageFailed, reduxStore]);
 
-  // Retry a previously-failed send by replaying the saved payload from
-  // the heap. Clears the failure flag first so the bubble flips back to
-  // "sending..."; if the retry fails again `markMessageFailed` re-arms
-  // it. No-op when the id isn't in the failed map.
+  // Retry a previously-failed send. An in-session send re-runs only the files
+  // still missing (its runner is still registered); after a restart the
+  // saved payload is replayed as a whole. No-op when the id isn't failed.
   const retryMessage = useCallback(async failedId => {
     const payload = reduxStore.getState().roomHeapSlice?.failedMessages?.[failedId];
     if (!payload) {
@@ -649,9 +833,17 @@ export const useSendMessage = _configOverride => {
       // Re-use the failed message's id so the retry resends in place
       // instead of spawning a duplicate bubble.
       failedId);
-    } else {
-      await sendMedia(payload.data, payload.type, payload.roomJID, payload.isReply, payload.isChecked, payload.mainMessage, failedId);
+      return;
+    }
+    if (hasMediaRetry(failedId)) {
+      await retryMediaSend(failedId);
+      return;
     }
+    const list = Array.isArray(payload.files) && payload.files.length > 0 ? payload.files : payload.data;
+    await sendMedia(list, payload.type, payload.roomJID, payload.isReply, payload.isChecked, payload.mainMessage, failedId, payload.caption ? {
+      text: payload.caption,
+      mentions: payload.captionMentions
+    } : undefined);
   }, [reduxStore, dispatch, handleMessageRetry, sendMessage, sendMedia]);
 
   // ChatRoom/ThreadWrapper consume this as the "edit branch" of send.