@repzo/widget-react-native 1.3.1 → 1.5.0

package/lib/commonjs/ui/screens/chat/ChatView.js

@@ -7,6 +7,7 @@ exports.ChatView = ChatView;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _agentUiBlocks = require("../../../agent-ui-blocks.js");
+var _localPreviews = require("../../../attachments/local-previews.js");
 var _pickers = require("../../../attachments/pickers.js");
 var _i18n = require("../../../i18n.js");
 var _AgentUiBlocks = require("../../components/AgentUiBlocks.js");
@@ -21,11 +22,14 @@ var _icons = require("../../components/icons.js");
 var _TeamAvatars = require("../../components/TeamAvatars.js");
 var _Markdown = require("../../components/Markdown.js");
 var _useReduceMotion = require("../../hooks/use-reduce-motion.js");
+var _useRetainedState = require("../../hooks/use-retained-state.js");
 var _useTopInset = require("../../hooks/use-top-inset.js");
 var _global = require("../../styles/global.js");
 var _theme = require("../../styles/theme.js");
 var _conversations = require("../../utils/conversations.js");
 var _html = require("../../utils/html.js");
+var _imageLoadQueue = require("../../utils/image-load-queue.js");
+var _inlineAttachments = require("../../utils/inline-attachments.js");
 var _safeUrl = require("../../utils/safe-url.js");
 var _voice = require("../../../audio/voice.js");
 var _VoiceNote = require("../../components/VoiceNote.js");
@@ -38,12 +42,63 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Chat thread — message list, typing indicator and composer.
  * Port of `client/src/widget/components/ChatView.tsx`.
  *
- * Mobile differences: older messages load through an explicit "Load earlier
- * messages" control (a scroll-anchored infinite list fights the keyboard), and
- * the attach button only shows when the host app has a picker to open (see
+ * Mobile differences: the thread is an inverted list, so it opens on the
+ * newest message and older pages load as the visitor scrolls up, and the
+ * attach button only shows when the host app has a picker to open (see
  * `attachments/pickers.ts`).
  */
 
+/** A message with what its place in the thread decides about it. */
+
+const rowKey = row => row.message.id;
+
+/** How far above the newest message the visitor scrolls before "jump to latest" shows. */
+const JUMP_TO_LATEST_OFFSET = 240;
+
+/**
+ * Workstation's refusal of a message that names an expired upload. Only this
+ * one puts the files up again: a deleted conversation or a rejected message
+ * would refuse the fresh uploads too.
+ */
+const UPLOAD_EXPIRED_STATUS = 410;
+/**
+ * An upload this close to expiring goes up again with the message instead of
+ * being named by its token, which could lapse before the message arrives.
+ */
+const UPLOAD_EXPIRY_MARGIN_MS = 10 * 60 * 1000;
+
+/**
+ * Photos above this take turns to download, two at a time; smaller ones load
+ * at once. Two 50 MB photos stay well inside Android's download pool (see
+ * `ImageLoadQueue`), and ordinary photos never wait.
+ */
+const LARGE_IMAGE_BYTES = 10_000_000;
+const LARGE_IMAGE_LOADS_AT_ONCE = 2;
+/** A photo that loads quicker than this never shows its loader. */
+const PHOTO_LOADER_DELAY_MS = 200;
+
+/** A photo download that waits its turn; the phone's own copy never does. */
+const isLargeDownload = (url, size) => (0, _safeUrl.isHttpUrl)(url) && (size ?? 0) > LARGE_IMAGE_BYTES;
+const ImageQueueContext = /*#__PURE__*/(0, _react.createContext)(null);
+const subscribeNowhere = () => () => {};
+
+/**
+ * Whether an image may load yet, and the callback that tells the queue it
+ * has (or failed). Images the queue doesn't handle load right away.
+ */
+function useImageTurn(key, priority, queued) {
+  const queue = (0, _react.useContext)(ImageQueueContext);
+  const active = !!queue && queued;
+  (0, _react.useEffect)(() => active ? queue.add(key, priority) : undefined, [active, queue, key, priority]);
+  const turn = (0, _react.useSyncExternalStore)(queue ? queue.subscribe : subscribeNowhere, () => active ? queue.canLoad(key) : true);
+  const settled = (0, _react.useCallback)(() => queue?.finish(key), [queue, key]);
+  return [turn, settled];
+}
+function ThreadGap() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: _ChatViewStyles.styles.threadGap
+  });
+}
 function ChatView({
   messages,
   loading,
@@ -63,11 +118,13 @@ function ChatView({
   labels,
   attachmentSources = [],
   onPickAttachments,
+  onUploadAttachment,
   onSendMessage,
   onRetryMessage,
   onIdentifyVisitor,
   onRateConversation,
   defaultLocale,
+  photoAlbums = true,
   onLoadMore,
   onTyping,
   onBack,
@@ -77,30 +134,58 @@ function ChatView({
   const [composerFocused, setComposerFocused] = (0, _react.useState)(false);
   const [drafts, setDrafts] = (0, _react.useState)([]);
   const [menuOpen, setMenuOpen] = (0, _react.useState)(false);
-  const [viewerImage, setViewerImage] = (0, _react.useState)(null);
+  const [viewerGallery, setViewerGallery] = (0, _react.useState)(null);
   const [picking, setPicking] = (0, _react.useState)(false);
   // Only attachment sends hold the composer; text sends stay fire-and-forget.
   const [sending, setSending] = (0, _react.useState)(false);
   const [notice, setNotice] = (0, _react.useState)(null);
   const reduceMotion = (0, _useReduceMotion.useReduceMotion)();
-  const scrollRef = (0, _react.useRef)(null);
+  const listRef = (0, _react.useRef)(null);
+  // One per thread: the screen remounts for each conversation.
+  const [largeImageQueue] = (0, _react.useState)(() => new _imageLoadQueue.ImageLoadQueue(LARGE_IMAGE_LOADS_AT_ONCE));
   const typingStopTimer = (0, _react.useRef)(null);
   const noticeTimer = (0, _react.useRef)(null);
   const pickerTimer = (0, _react.useRef)(null);
   const mounted = (0, _react.useRef)(false);
+  // Uploads in flight, by draft id. A removed chip cancels its own; a retry
+  // replaces it, and the replaced attempt's result is dropped.
+  const uploads = (0, _react.useRef)(new Map());
+  // Files already put up again after a refused send; never twice, so a
+  // refusal uploads can't fix costs one round, not one per tap on Send.
+  const reuploaded = (0, _react.useRef)(new Set());
+  // Set as the visitor sends: the list scrolls down once their bubble is in
+  // it. Scrolled up, scrolling first let the list hold its place as the new
+  // row arrived, which could cut the scroll short.
+  const followSend = (0, _react.useRef)(false);
+  // Set by a tap on Send until the composer re-renders. Taps that pile up
+  // while the JS thread is busy (a slow phone, the host app at work) are all
+  // handled before React re-renders, so each still sees the typed text and
+  // would send it again. A ref changes at once: only the first goes out.
+  const sendTapped = (0, _react.useRef)(false);
+
+  // After every render, and after the send button has taken this render's
+  // handler (its own effect runs first): from here a tap sees the composer as
+  // the last send left it.
+  (0, _react.useEffect)(() => {
+    sendTapped.current = false;
+  });
   (0, _react.useEffect)(() => {
     if (prefillText) setInput(prefillText);
   }, [prefillText]);
 
   // The provider keys this screen by the store's thread generation. Pending
-  // picks and sends belong to this mount, even before a draft gets a server ID.
+  // picks, uploads and sends belong to this mount, even before a draft gets a
+  // server ID.
   (0, _react.useEffect)(() => {
     mounted.current = true;
+    const inFlight = uploads.current;
     return () => {
       mounted.current = false;
       if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
       if (noticeTimer.current) clearTimeout(noticeTimer.current);
       if (pickerTimer.current) clearTimeout(pickerTimer.current);
+      inFlight.forEach(upload => upload.cancel());
+      inFlight.clear();
     };
   }, []);
   const showNotice = (0, _react.useCallback)(message => {
@@ -108,50 +193,66 @@ function ChatView({
     setNotice(message);
     if (message) noticeTimer.current = setTimeout(() => setNotice(null), 5000);
   }, []);
+
+  // The list is inverted, so offset 0 is the newest message: the thread opens
+  // there without scrolling, stays there as the keyboard rises or replies
+  // arrive, and older pages land above it without moving the reader.
   const scrollToBottom = (0, _react.useCallback)((animated = true) => {
-    scrollRef.current?.scrollToEnd({
+    listRef.current?.scrollToOffset({
+      offset: 0,
       animated
     });
   }, []);
 
-  // Land on the newest message the moment the thread opens — notification
-  // taps and conversation-list taps both mount this screen. The content-size
-  // handler below covers later growth (loads, images, incoming messages).
-  (0, _react.useEffect)(() => {
-    const frame = requestAnimationFrame(() => scrollToBottom(false));
-    return () => cancelAnimationFrame(frame);
-  }, [scrollToBottom]);
-
-  // "Load earlier" PREPENDS history; skipping one auto-scroll keeps the reader
-  // anchored where they were instead of yanking them back to the bottom.
-  const skipNextAutoScroll = (0, _react.useRef)(false);
+  // Fires as the visitor nears the oldest message; the row up there is the
+  // fallback when a page fails to load.
   const handleLoadEarlier = (0, _react.useCallback)(() => {
-    skipNextAutoScroll.current = true;
-    onLoadMore();
-  }, [onLoadMore]);
-  const handleContentSizeChange = (0, _react.useCallback)(() => {
-    if (skipNextAutoScroll.current) {
-      skipNextAutoScroll.current = false;
-      return;
-    }
-    scrollToBottom(false);
-  }, [scrollToBottom]);
-
-  // The keyboard shortens the thread instead of scrolling it, so whatever was
-  // at the bottom — the newest message, an agent form — would slide in behind
-  // the composer. Re-pin on every shrink, unanimated, so the list tracks the
-  // keyboard as it rises rather than jumping once it lands.
-  const viewportHeight = (0, _react.useRef)(0);
-  const handleViewportLayout = (0, _react.useCallback)(event => {
-    const {
-      height
-    } = event.nativeEvent.layout;
-    const shrank = viewportHeight.current - height > 1;
-    viewportHeight.current = height;
-    if (shrank) scrollToBottom(false);
-  }, [scrollToBottom]);
+    if (hasMoreMessages && !loading) onLoadMore();
+  }, [hasMoreMessages, loading, onLoadMore]);
   const showAttach = attachmentSources.length > 0 && !!onPickAttachments;
-  const canSend = !sending && (input.trim().length > 0 || drafts.length > 0);
+  // Send waits until every picked file is up, so the message goes out at once.
+  const uploadsPending = drafts.some(draft => draft.uploadStatus === 'uploading' || draft.uploadStatus === 'failed');
+  const canSend = !sending && !uploadsPending && (input.trim().length > 0 || drafts.length > 0);
+  const updateDraft = (0, _react.useCallback)((id, patch) => setDrafts(current => current.map(draft => draft.id === id ? {
+    ...draft,
+    ...patch
+  } : draft)), []);
+
+  /** Puts a picked local file up while the visitor writes; inline files need nothing. */
+  const startUpload = draft => {
+    if (!onUploadAttachment || !draft.fileUri) return;
+    uploads.current.get(draft.id)?.cancel();
+    const controller = typeof AbortController === 'function' ? new AbortController() : null;
+    const attempt = {
+      cancel: () => controller?.abort()
+    };
+    uploads.current.set(draft.id, attempt);
+    updateDraft(draft.id, {
+      uploadStatus: 'uploading',
+      uploadToken: undefined,
+      uploadExpiresAt: undefined
+    });
+    onUploadAttachment(draft, controller?.signal).then(({
+      uploadToken,
+      expiresAt
+    }) => {
+      if (!mounted.current || uploads.current.get(draft.id) !== attempt) return;
+      uploads.current.delete(draft.id);
+      updateDraft(draft.id, {
+        uploadStatus: 'uploaded',
+        uploadToken,
+        uploadExpiresAt: expiresAt
+      });
+    }, error => {
+      if (!mounted.current || uploads.current.get(draft.id) !== attempt) return;
+      console.warn('[repzo-widget] attachment upload failed', error);
+      uploads.current.delete(draft.id);
+      updateDraft(draft.id, {
+        uploadStatus: 'failed'
+      });
+      showNotice(labels.attach.uploadFailedNotice);
+    });
+  };
   const problemLabel = problem => {
     switch (problem) {
       case 'tooMany':
@@ -176,6 +277,8 @@ function ChatView({
       if (!mounted.current) return;
       if (result.added.length > 0) {
         setDrafts(current => [...current, ...result.added].slice(0, _pickers.MAX_ATTACHMENTS));
+        // Opted out, the files go up when the visitor taps Send instead.
+        if ((0, _pickers.uploadsOnPick)()) result.added.forEach(startUpload);
       }
       showNotice(problemLabel(result.problem));
     } finally {
@@ -211,23 +314,29 @@ function ChatView({
   };
   const handleSend = () => {
     const trimmed = input.trim();
-    if (!canSend) return;
+    if (!canSend || sendTapped.current) return;
+    sendTapped.current = true;
     setInput('');
     if (typingStopTimer.current) clearTimeout(typingStopTimer.current);
     onTyping(false);
-    scrollToBottom();
+    followSend.current = true;
     if (drafts.length === 0) {
       // The failed bubble already surfaces a failure to the visitor.
       onSendMessage(trimmed).catch(() => {});
       return;
     }
     const sent = drafts;
+    // Named by its token while that lasts; otherwise the file goes up again
+    // as the message is sent.
+    const sendBy = Date.now() + UPLOAD_EXPIRY_MARGIN_MS;
+    const stillUploaded = draft => !!draft.uploadToken && (draft.uploadExpiresAt ?? Infinity) > sendBy;
     setSending(true);
     showNotice(null);
     onSendMessage(trimmed, sent.map(draft => ({
       name: draft.name,
       url: draft.dataUrl,
       fileUri: draft.fileUri,
+      uploadToken: stillUploaded(draft) ? draft.uploadToken : undefined,
       contentType: draft.contentType,
       size: draft.size,
       previewUrl: draft.previewUri
@@ -243,6 +352,15 @@ function ChatView({
       setInput(current => current || trimmed);
       const status = error?.status;
       showNotice(status === 413 ? labels.attach.tooLargeTogether : labels.failedToSend);
+      // An upload expired before this phone's clock said it would: put the
+      // files sent by token up again, once. After a lost connection the
+      // uploads still stand for the next try.
+      if (status === UPLOAD_EXPIRED_STATUS) {
+        sent.filter(draft => stillUploaded(draft) && !reuploaded.current.has(draft.id)).forEach(draft => {
+          reuploaded.current.add(draft.id);
+          startUpload(draft);
+        });
+      }
     }).finally(() => {
       if (mounted.current) setSending(false);
     });
@@ -262,17 +380,17 @@ function ChatView({
         phone: stringPayload(action.payload.phone)
       });
     }
+    followSend.current = true;
     onSendMessage((0, _agentUiBlocks.formatAgentUiActionMessage)(action), undefined, action).catch(() => {});
-    scrollToBottom();
-  }, [onIdentifyVisitor, onSendMessage, scrollToBottom]);
+  }, [onIdentifyVisitor, onSendMessage]);
   const handleSubmitProcedureForm = (0, _react.useCallback)(body => void onSendMessage(body).catch(() => {}), [onSendMessage]);
 
   // The retried bubble moves to the end of the thread; follow it there.
   // A second failure shows on the bubble again.
   const handleRetryMessage = (0, _react.useCallback)(messageId => {
+    followSend.current = true;
     onRetryMessage?.(messageId).catch(() => {});
-    scrollToBottom();
-  }, [onRetryMessage, scrollToBottom]);
+  }, [onRetryMessage]);
 
   // Recomputed only when the list changes — never on a keystroke.
   const thread = (0, _react.useMemo)(() => deriveThread(messages), [messages]);
@@ -292,6 +410,143 @@ function ChatView({
   const headerControl = {
     backgroundColor: (0, _theme.withAlpha)(headerTextColor, 0.16)
   };
+
+  // Newest first, for the inverted list; each row still compares itself with
+  // the message sent before it.
+  const rows = (0, _react.useMemo)(() => messages.map((message, index) => {
+    const previous = index > 0 ? messages[index - 1] : undefined;
+    return {
+      message,
+      startsDay: !previous || !(0, _conversations.isSameDay)(message.createdAt, previous.createdAt),
+      // Name only at the top of a run, the way every messenger does it.
+      startsRun: !previous || previous.direction === 'inbound' || previous.messageType === 'system' || previous.senderName !== message.senderName
+    };
+  }).reverse(), [messages]);
+  (0, _react.useEffect)(() => {
+    if (!followSend.current) return;
+    followSend.current = false;
+    scrollToBottom();
+  }, [rows, scrollToBottom]);
+
+  // The thread's message ids when the visitor scrolled away from the newest,
+  // null while it's in view. Teammate replies newer than all of them are
+  // counted on the button. A set, not the newest id alone: that may be the
+  // visitor's own bubble, whose temporary id changes once the server has it.
+  const [awayFrom, setAwayFrom] = (0, _react.useState)(null);
+  const rowIds = (0, _react.useRef)([]);
+  (0, _react.useEffect)(() => {
+    rowIds.current = rows.map(row => row.message.id);
+  }, [rows]);
+  const handleScroll = (0, _react.useCallback)(event => {
+    // Inverted: the offset is the distance up from the newest message.
+    const away = event.nativeEvent.contentOffset.y > JUMP_TO_LATEST_OFFSET;
+    setAwayFrom(current => away ? current ?? new Set(rowIds.current) : null);
+  }, []);
+  const unseenReplies = (0, _react.useMemo)(() => {
+    if (!awayFrom) return 0;
+    let count = 0;
+    for (const {
+      message
+    } of rows) {
+      if (awayFrom.has(message.id)) break;
+      if (message.direction !== 'inbound' && message.messageType !== 'system') count += 1;
+    }
+    return count;
+  }, [awayFrom, rows]);
+  const handleJumpToLatest = (0, _react.useCallback)(() => scrollToBottom(), [scrollToBottom]);
+
+  // Android only: it detaches rows scrolled out of view, where a large photo
+  // still downloading would never finish and keep its turn. Keyed as in usePhotoSource.
+  const handleViewableItemsChanged = (0, _react.useCallback)(({
+    viewableItems
+  }) => largeImageQueue.setOnScreen(viewableItems.flatMap(({
+    item
+  }) => (item.message.attachments ?? []).map(attachment => attachment.id || attachment.url))), [largeImageQueue]);
+  const renderRow = (0, _react.useCallback)(({
+    item: {
+      message,
+      startsDay,
+      startsRun
+    }
+  }) => {
+    const isAgentMessage = message.direction !== 'inbound' && message.messageType !== 'system';
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: _ChatViewStyles.styles.threadRow,
+      children: [startsDay ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _ChatViewStyles.styles.daySeparator,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: _ChatViewStyles.styles.dayLine
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: _ChatViewStyles.styles.dayLabel,
+          children: (0, _conversations.formatDayLabel)(message.createdAt, locale, labels)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: _ChatViewStyles.styles.dayLine
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.WidgetErrorBoundary, {
+        fallback: null,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageBubble, {
+          message: message,
+          color: color,
+          labels: labels,
+          onOpenImage: setViewerGallery,
+          onRateConversation: onRateConversation,
+          locales: locales,
+          senderLabel: isAgentMessage && (startsRun || startsDay) ? message.senderName || agentName || labels.team : null,
+          timeLabel: (0, _conversations.formatClockTime)(message.createdAt, locale),
+          receiptLabel: message.id === thread.lastVisitorMessageId ? receiptLabel(message, labels) : undefined,
+          onSubmitProcedureForm: message.id === thread.procedureFormMessageId ? handleSubmitProcedureForm : undefined,
+          onAgentUiAction: thread.agentBlocksShown.has(message.id) ? handleAgentUiAction : undefined,
+          onRetry: onRetryMessage && (0, _conversations.canRetryMessage)(message) ? handleRetryMessage : undefined,
+          photoAlbums: photoAlbums
+        })
+      })]
+    });
+  }, [agentName, color, handleAgentUiAction, handleRetryMessage, handleSubmitProcedureForm, labels, locale, locales, onRateConversation, onRetryMessage, photoAlbums, thread]);
+  const loadEarlierRow = hasMoreMessages ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: handleLoadEarlier,
+    accessibilityRole: "button",
+    style: _ChatViewStyles.styles.loadMore,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [_ChatViewStyles.styles.loadMoreLabel, {
+        color
+      }],
+      children: loading ? labels.loading : labels.loadEarlier
+    })
+  }) : null;
+
+  // Under the newest message.
+  const threadTail = awaitingTeammate || agentTyping ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _ChatViewStyles.styles.threadTail,
+    children: [awaitingTeammate ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: _ChatViewStyles.styles.waitingRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TeamAvatars.TeamAvatars, {
+        avatars: teamAvatars,
+        size: 20,
+        color: color
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.waitingText,
+        children: labels.waitingForTeammate
+      })]
+    }) : null, agentTyping ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: _ChatViewStyles.styles.typingRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: _ChatViewStyles.styles.typingBubble,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
+          index: 0,
+          reduceMotion: reduceMotion
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
+          index: 1,
+          reduceMotion: reduceMotion
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
+          index: 2,
+          reduceMotion: reduceMotion
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.typingLabel,
+        children: labels.thinking
+      })]
+    }) : null]
+  }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: _global.globalStyles.screen,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Gradient.GradientBackground, {
@@ -396,29 +651,76 @@ function ChatView({
           color: headerTextColor
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      ref: scrollRef,
+    }), messages.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: _global.globalStyles.fill,
-      contentContainerStyle: [_ChatViewStyles.styles.messagesContent, isEmptyThread && _ChatViewStyles.styles.messagesContentEmpty, isLoadingThread && _ChatViewStyles.styles.messagesContentLoading],
-      keyboardShouldPersistTaps: "handled"
-      // Interactive dismissal drags the keyboard down under the finger while
-      // the composer stays where the last keyboard event left it, which opens
-      // a gap under the thread; on-drag hands us a normal hide event instead.
-      ,
-      keyboardDismissMode: "on-drag",
-      onLayout: handleViewportLayout,
-      onContentSizeChange: handleContentSizeChange,
-      children: [hasMoreMessages ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        onPress: handleLoadEarlier,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageQueueContext.Provider, {
+        value: largeImageQueue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+          ref: listRef,
+          data: rows,
+          inverted: true,
+          keyExtractor: rowKey,
+          renderItem: renderRow,
+          style: _global.globalStyles.fill,
+          contentContainerStyle: _ChatViewStyles.styles.threadContent,
+          ItemSeparatorComponent: ThreadGap
+          // Inverted, the header sits under the newest message and the footer
+          // above the oldest.
+          ,
+          ListHeaderComponent: threadTail,
+          ListHeaderComponentStyle: _ChatViewStyles.styles.threadTailInList,
+          ListFooterComponent: loadEarlierRow,
+          onEndReached: handleLoadEarlier,
+          onEndReachedThreshold: 0.5,
+          onScroll: handleScroll,
+          scrollEventThrottle: 100
+          // A reply arriving below doesn't move what a visitor reads further
+          // up; near the newest message the list follows it into view.
+          ,
+          maintainVisibleContentPosition: {
+            minIndexForVisible: 0,
+            autoscrollToTopThreshold: JUMP_TO_LATEST_OFFSET
+          },
+          onViewableItemsChanged: _reactNative.Platform.OS === 'android' ? handleViewableItemsChanged : undefined,
+          keyboardShouldPersistTaps: "handled"
+          // Interactive dismissal drags the keyboard down under the finger while
+          // the composer stays where the last keyboard event left it, which opens
+          // a gap under the thread; on-drag hands us a normal hide event instead.
+          ,
+          keyboardDismissMode: "on-drag"
+        })
+      }), awayFrom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+        onPress: handleJumpToLatest,
         accessibilityRole: "button",
-        style: _ChatViewStyles.styles.loadMore,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [_ChatViewStyles.styles.loadMoreLabel, {
-            color
+        accessibilityLabel: unseenReplies ? (0, _i18n.formatLabel)(labels.jumpToLatestNew, {
+          count: unseenReplies
+        }) : labels.jumpToLatest,
+        hitSlop: 8,
+        style: ({
+          pressed
+        }) => [_ChatViewStyles.styles.jumpToLatest, pressed && _global.globalStyles.pressed],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ChevronIcon, {
+          size: 18,
+          direction: "down",
+          color: _theme.palette.text
+        }), unseenReplies ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [_ChatViewStyles.styles.jumpBadge, {
+            backgroundColor: color
           }],
-          children: loading ? labels.loading : labels.loadEarlier
-        })
-      }) : null, isLoadingThread ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessagesSkeleton.MessagesSkeleton, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [_ChatViewStyles.styles.jumpBadgeText, {
+              color: (0, _theme.contrastingTextColor)(color)
+            }],
+            children: unseenReplies > 9 ? '9+' : unseenReplies
+          })
+        }) : null]
+      }) : null]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: _global.globalStyles.fill,
+      contentContainerStyle: [_ChatViewStyles.styles.messagesContent, isEmptyThread && _ChatViewStyles.styles.messagesContentEmpty, isLoadingThread && _ChatViewStyles.styles.messagesContentLoading],
+      keyboardShouldPersistTaps: "handled",
+      keyboardDismissMode: "on-drag",
+      children: [loadEarlierRow, isLoadingThread ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessagesSkeleton.MessagesSkeleton, {
         color: color,
         label: labels.loading
       }) : null, isEmptyThread ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -435,70 +737,7 @@ function ChatView({
           style: _ChatViewStyles.styles.emptyText,
           children: labels.emptyConversation
         })]
-      }) : null, messages.map((message, index) => {
-        const previous = index > 0 ? messages[index - 1] : undefined;
-        const startsDay = !previous || !(0, _conversations.isSameDay)(message.createdAt, previous.createdAt);
-        const isAgentMessage = message.direction !== 'inbound' && message.messageType !== 'system';
-        // Name only at the top of a run, the way every messenger does it.
-        const startsRun = !previous || previous.direction === 'inbound' || previous.messageType === 'system' || previous.senderName !== message.senderName;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-          children: [startsDay ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: _ChatViewStyles.styles.daySeparator,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: _ChatViewStyles.styles.dayLine
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: _ChatViewStyles.styles.dayLabel,
-              children: (0, _conversations.formatDayLabel)(message.createdAt, locale, labels)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: _ChatViewStyles.styles.dayLine
-            })]
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.WidgetErrorBoundary, {
-            fallback: null,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageBubble, {
-              message: message,
-              color: color,
-              labels: labels,
-              onOpenImage: setViewerImage,
-              onRateConversation: onRateConversation,
-              locales: locales,
-              senderLabel: isAgentMessage && (startsRun || startsDay) ? message.senderName || agentName || labels.team : null,
-              timeLabel: (0, _conversations.formatClockTime)(message.createdAt, locale),
-              receiptLabel: message.id === thread.lastVisitorMessageId ? receiptLabel(message, labels) : undefined,
-              onSubmitProcedureForm: message.id === thread.procedureFormMessageId ? handleSubmitProcedureForm : undefined,
-              onAgentUiAction: thread.agentBlocksShown.has(message.id) ? handleAgentUiAction : undefined,
-              onRetry: onRetryMessage && (0, _conversations.canRetryMessage)(message) ? handleRetryMessage : undefined
-            })
-          })]
-        }, message.id);
-      }), awaitingTeammate ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _ChatViewStyles.styles.waitingRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TeamAvatars.TeamAvatars, {
-          avatars: teamAvatars,
-          size: 20,
-          color: color
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: _ChatViewStyles.styles.waitingText,
-          children: labels.waitingForTeammate
-        })]
-      }) : null, agentTyping ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _ChatViewStyles.styles.typingRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: _ChatViewStyles.styles.typingBubble,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
-            index: 0,
-            reduceMotion: reduceMotion
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
-            index: 1,
-            reduceMotion: reduceMotion
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TypingDot, {
-            index: 2,
-            reduceMotion: reduceMotion
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: _ChatViewStyles.styles.typingLabel,
-          children: labels.thinking
-        })]
-      }) : null]
+      }) : null, threadTail]
     }), offlineMessage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: _ChatViewStyles.styles.offlineBanner,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -515,10 +754,18 @@ function ChatView({
       }) : null, drafts.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AttachmentChips.AttachmentChips, {
         attachments: drafts,
         disabled: sending,
-        removeLabel: labels.attach.remove,
+        labels: labels.attach,
         onRemove: id => {
+          uploads.current.get(id)?.cancel();
+          uploads.current.delete(id);
           setDrafts(current => current.filter(draft => draft.id !== id));
           showNotice(null);
+        },
+        onRetry: id => {
+          const draft = drafts.find(item => item.id === id);
+          if (!draft) return;
+          showNotice(null);
+          startUpload(draft);
         }
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: [_ChatViewStyles.styles.composer, showAttach && _ChatViewStyles.styles.composerWithAttach, composerFocused && _ChatViewStyles.styles.composerFocused, composerFocused && {
@@ -556,6 +803,7 @@ function ChatView({
           onPress: handleSend,
           disabled: !canSend,
           accessibilityRole: "button",
+          accessibilityLabel: labels.send,
           accessibilityState: {
             disabled: !canSend
           },
@@ -578,11 +826,11 @@ function ChatView({
       onSelect: handleMenuSelect,
       onClose: () => setMenuOpen(false)
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageViewer.ImageViewer, {
-      image: viewerImage,
+      gallery: viewerGallery,
       labels: labels.viewer,
-      onClose: () => setViewerImage(null),
+      onClose: () => setViewerGallery(null),
       onOpenExternally: url => {
-        setViewerImage(null);
+        setViewerGallery(null);
         void (0, _safeUrl.openExternalUrl)(url);
       }
     })]
@@ -605,7 +853,8 @@ const MessageBubble = /*#__PURE__*/(0, _react.memo)(function MessageBubble({
   onOpenImage,
   onRateConversation,
   locales,
-  onRetry
+  onRetry,
+  photoAlbums
 }) {
   const joinedName = message.metadata?.event === 'agent_joined' ? message.metadata?.agentName : null;
   if (message.messageType === 'system' && typeof joinedName === 'string' && joinedName) {
@@ -668,6 +917,56 @@ const MessageBubble = /*#__PURE__*/(0, _react.memo)(function MessageBubble({
   const procedureForm = !isVisitor ? (0, _agentUiBlocks.getProcedureForm)(message.metadata) : null;
   const agentUiBlocks = !isVisitor ? (0, _agentUiBlocks.getAgentUiBlocks)(message.metadata) : [];
   const textColor = isVisitor ? _theme.palette.white : _theme.palette.ink;
+  // A reply with images between its paragraphs shows them where the teammate put them.
+  const inlineParts = isVisitor ? null : (0, _inlineAttachments.splitInlineAttachments)(message.body, message.attachments);
+  const files = inlineParts ? inlineParts.files : message.attachments ?? [];
+  // Two or more photos share one album; any other files follow it.
+  const photos = files.filter(attachment => (0, _pickers.isImageAttachment)(attachment.contentType));
+  const album = photoAlbums && photos.length > 1 ? photos : null;
+  const sentAt = Date.parse(message.createdAt) || 0;
+  // A tap on one of the message's photos opens them all, at that one, in the
+  // order the bubble shows them.
+  const openPhotos = tapped => {
+    const photos = [...(inlineParts?.parts.flatMap(part => 'attachment' in part ? [part.attachment] : []) ?? []), ...files].filter(attachment => (0, _pickers.isImageAttachment)(attachment.contentType)).map(attachment => {
+      const url = attachment.id === tapped.id ? tapped.url : (0, _localPreviews.localPreviewFor)(attachment.url) || attachment.url;
+      // The phone's copy may be gone by now; the stored one stands in.
+      const fallbackUrl = url !== attachment.url && (0, _safeUrl.isHttpUrl)(attachment.url) ? attachment.url : undefined;
+      return {
+        id: attachment.id,
+        url,
+        name: attachment.name,
+        large: isLargeDownload(url, attachment.size),
+        fallbackUrl
+      };
+    }).filter(photo => !!photo.url);
+    const index = photos.findIndex(photo => photo.id === tapped.id);
+    onOpenImage(index < 0 ? {
+      images: [tapped],
+      index: 0
+    } : {
+      images: photos.map(({
+        url,
+        name,
+        large,
+        fallbackUrl
+      }) => ({
+        url,
+        name,
+        large,
+        fallbackUrl
+      })),
+      index
+    });
+  };
+  const renderAttachment = attachment => /*#__PURE__*/(0, _jsxRuntime.jsx)(AttachmentPreview, {
+    loadPriority: sentAt,
+    attachment: attachment,
+    isVisitor: isVisitor,
+    color: color,
+    voiceLabels: labels.voice,
+    openLabel: labels.openAttachment,
+    onOpenImage: openPhotos
+  }, attachment.id);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [_ChatViewStyles.styles.messageRow, isVisitor ? _ChatViewStyles.styles.messageRowRight : _ChatViewStyles.styles.messageRowLeft],
     children: [senderLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -677,7 +976,13 @@ const MessageBubble = /*#__PURE__*/(0, _react.memo)(function MessageBubble({
       style: [_ChatViewStyles.styles.bubble, isVisitor ? [_ChatViewStyles.styles.bubbleVisitor, {
         backgroundColor: color
       }] : _ChatViewStyles.styles.bubbleAgent, rtl && (isVisitor ? _ChatViewStyles.styles.bubbleVisitorRTL : _ChatViewStyles.styles.bubbleAgentRTL), message.status === 'pending' && _ChatViewStyles.styles.bubblePending],
-      children: [hasBody ? isVisitor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: [inlineParts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _ChatViewStyles.styles.inlineParts,
+        children: inlineParts.parts.map((part, index) => 'text' in part ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Markdown.Markdown, {
+          content: part.text,
+          color: textColor
+        }, `text-${index}`) : renderAttachment(part.attachment))
+      }) : hasBody ? isVisitor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [_ChatViewStyles.styles.bubbleText, {
           color: textColor
         }],
@@ -685,16 +990,14 @@ const MessageBubble = /*#__PURE__*/(0, _react.memo)(function MessageBubble({
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Markdown.Markdown, {
         content: messageText,
         color: textColor
-      }) : null, message.attachments && message.attachments.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [_ChatViewStyles.styles.attachments, hasBody && _ChatViewStyles.styles.attachmentsSpaced],
-        children: message.attachments.map(attachment => /*#__PURE__*/(0, _jsxRuntime.jsx)(AttachmentPreview, {
-          attachment: attachment,
-          isVisitor: isVisitor,
-          color: color,
-          voiceLabels: labels.voice,
-          openLabel: labels.openAttachment,
-          onOpenImage: onOpenImage
-        }, attachment.id))
+      }) : null, files.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [_ChatViewStyles.styles.attachments, (hasBody || !!inlineParts) && _ChatViewStyles.styles.attachmentsSpaced],
+        children: [album ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PhotoAlbum, {
+          photos: album,
+          loadPriority: sentAt,
+          moreLabel: labels.morePhotos,
+          onOpen: openPhotos
+        }) : null, (album ? files.filter(attachment => !album.includes(attachment)) : files).map(renderAttachment)]
       }) : null, timeLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [_ChatViewStyles.styles.messageTime, {
           color: isVisitor ? (0, _theme.withAlpha)(_theme.palette.white, 0.7) : _theme.palette.textSubtle
@@ -725,6 +1028,7 @@ const MessageBubble = /*#__PURE__*/(0, _react.memo)(function MessageBubble({
       labels: labels.blocks,
       onAction: onAgentUiAction
     }) : null, agentUiBlocks.length === 0 && procedureForm && onSubmitProcedureForm ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ProcedureFieldForm, {
+      messageId: message.id,
       form: procedureForm,
       color: color,
       labels: labels,
@@ -738,26 +1042,194 @@ function receiptLabel(message, labels) {
   if (message.deletedAt || message.status === 'pending' || message.status === 'failed') return undefined;
   return message.status === 'read' ? labels.messageSeen : labels.messageSent;
 }
+
+/**
+ * Where a photo shows from, and whether it may load yet. `url` is empty when
+ * the server sent a non-http(s) URL (see resolveUrl). The visitor's own
+ * attachment points at the picked file until the server copy replaces it (or
+ * is empty without one). A photo they sent this session keeps showing from
+ * the phone after that: the stored copy may not load yet. Whichever fails to
+ * load gives way to the next.
+ */
+function usePhotoSource(attachment, loadPriority) {
+  const [failedUrls, setFailedUrls] = (0, _react.useState)([]);
+  const [loadedUrl, setLoadedUrl] = (0, _react.useState)(null);
+  const url = [(0, _localPreviews.localPreviewFor)(attachment.url), attachment.url].find(candidate => !!candidate && !failedUrls.includes(candidate));
+  const isPhoto = (0, _pickers.isImageAttachment)(attachment.contentType) && !!url;
+  // A large download waits its turn; small photos and the phone's own copy don't.
+  const [turn, settled] = useImageTurn(attachment.id || attachment.url, loadPriority, isPhoto && isLargeDownload(url, attachment.size));
+  return {
+    url,
+    isPhoto,
+    turn,
+    /** Waiting for its turn or still downloading; the next URL after a failure starts over. */
+    loading: isPhoto && loadedUrl !== url,
+    onLoad: () => {
+      settled();
+      if (url) setLoadedUrl(url);
+    },
+    onError: () => {
+      settled();
+      if (!url) return;
+      setFailedUrls(current => [...current, url]);
+      // The viewer and the message's other views stop offering it too.
+      if (url !== attachment.url && url === (0, _localPreviews.localPreviewFor)(attachment.url)) (0, _localPreviews.forgetLocalPreview)(attachment.url);
+    }
+  };
+}
+
+/**
+ * Several photos in one message, the way WhatsApp shows them: one square,
+ * two side by side, three as one tall beside two stacked, four in a grid, and
+ * past four the last tile covered with how many more there are.
+ */
+function PhotoAlbum({
+  photos,
+  loadPriority,
+  moreLabel,
+  onOpen
+}) {
+  const shown = photos.slice(0, 4);
+  // The covered tile counts too: it's no more visible than the ones after it.
+  const more = photos.length > 4 ? photos.length - 3 : 0;
+  const tile = (attachment, index, size) => /*#__PURE__*/(0, _jsxRuntime.jsx)(PhotoTile, {
+    attachment: attachment,
+    loadPriority: loadPriority,
+    style: size,
+    more: index === 3 ? more : 0,
+    moreLabel: moreLabel,
+    onOpen: onOpen
+  }, attachment.id);
+  if (shown.length === 2) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_ChatViewStyles.styles.album, _ChatViewStyles.styles.albumRow],
+      children: shown.map((photo, i) => tile(photo, i, _ChatViewStyles.styles.albumHalf))
+    });
+  }
+  if (shown.length === 3) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_ChatViewStyles.styles.album, _ChatViewStyles.styles.albumRow],
+      children: [tile(shown[0], 0, _ChatViewStyles.styles.albumHalf), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _ChatViewStyles.styles.albumColumn,
+        children: shown.slice(1).map((photo, i) => tile(photo, i + 1, _ChatViewStyles.styles.albumQuarter))
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [_ChatViewStyles.styles.album, _ChatViewStyles.styles.albumGrid],
+    children: shown.map((photo, i) => tile(photo, i, _ChatViewStyles.styles.albumQuarter))
+  });
+}
+function PhotoTile({
+  attachment,
+  loadPriority,
+  style,
+  more,
+  moreLabel,
+  onOpen
+}) {
+  const photo = usePhotoSource(attachment, loadPriority);
+  // One that can't load still opens, so the viewer can offer the browser.
+  const openUrl = photo.url ?? ((0, _safeUrl.isHttpUrl)(attachment.url) ? attachment.url : undefined);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: openUrl ? () => onOpen({
+      id: attachment.id,
+      url: openUrl,
+      name: attachment.name
+    }) : undefined,
+    accessibilityRole: "imagebutton",
+    accessibilityLabel: more > 0 ? `${attachment.name}, ${(0, _i18n.formatLabel)(moreLabel, {
+      count: more
+    })}` : attachment.name,
+    style: ({
+      pressed
+    }) => [_ChatViewStyles.styles.albumTile, style, pressed && _global.globalStyles.pressed],
+    children: [photo.isPhoto && photo.turn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      source: {
+        uri: photo.url
+      },
+      style: _ChatViewStyles.styles.albumImage,
+      resizeMode: "cover"
+      // Decoded at the tile's size, like a single photo.
+      ,
+      resizeMethod: "resize",
+      accessibilityIgnoresInvertColors: true,
+      onLoad: photo.onLoad,
+      onError: photo.onError
+    }) : null, !photo.isPhoto ?
+    /*#__PURE__*/
+    // Nothing left to load (an expired link): its type and name, not a blank square.
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: _ChatViewStyles.styles.albumFallback,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.albumFallbackType,
+        children: (0, _FileCard.fileTypeLabel)(attachment.name, attachment.contentType)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.albumFallbackName,
+        numberOfLines: 2,
+        children: attachment.name
+      })]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(PhotoLoader, {
+      loading: photo.loading && more === 0
+    }), more > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _ChatViewStyles.styles.albumMore,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: _ChatViewStyles.styles.albumMoreText,
+        children: ["+", more]
+      })
+    }) : null]
+  });
+}
+
+/**
+ * Spins over a photo until it has loaded. Held back a moment, so a photo that
+ * comes straight from the cache never flashes it.
+ */
+function PhotoLoader({
+  loading
+}) {
+  const [due, setDue] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (!loading) return undefined;
+    const timer = setTimeout(() => setDue(true), PHOTO_LOADER_DELAY_MS);
+    return () => {
+      clearTimeout(timer);
+      setDue(false);
+    };
+  }, [loading]);
+  if (!loading || !due) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: _ChatViewStyles.styles.photoLoader,
+    pointerEvents: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _ChatViewStyles.styles.photoLoaderBadge,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+        size: "small",
+        color: _theme.palette.white
+      })
+    })
+  });
+}
 function AttachmentPreview({
   attachment,
+  loadPriority,
   isVisitor,
   color,
   voiceLabels,
   openLabel,
   onOpenImage
 }) {
-  // `url` is empty when the server sent a non-http(s) URL (see resolveUrl).
-  // The visitor's own attachment points at the picked file until the server
-  // copy replaces it (or is empty without one).
-  const [imageFailed, setImageFailed] = (0, _react.useState)(false);
   const [audioFailed, setAudioFailed] = (0, _react.useState)(false);
-  const isImage = (0, _pickers.isImageAttachment)(attachment.contentType) && !!attachment.url && !imageFailed;
+  const photo = usePhotoSource(attachment, loadPriority);
+  const imageUrl = photo.url;
+  const isImage = photo.isPhoto;
   const openable = (0, _safeUrl.isHttpUrl)(attachment.url);
   // Images open in the in-app viewer, a local photo too since it already
   // renders here. Other files (PDF, sheets) need the OS, which can only open
   // the server copy.
   const open = isImage ? () => onOpenImage({
-    url: attachment.url,
+    id: attachment.id,
+    url: imageUrl,
     name: attachment.name
   }) : openable ? () => void (0, _safeUrl.openExternalUrl)(attachment.url) : undefined;
 
@@ -776,22 +1248,35 @@ function AttachmentPreview({
     });
   }
   if (isImage) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
       onPress: open,
       accessibilityRole: "imagebutton",
       accessibilityLabel: attachment.name,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+      children: [photo.turn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
         source: {
-          uri: attachment.url
+          uri: imageUrl
         },
         style: _ChatViewStyles.styles.attachmentImage,
-        resizeMode: "cover",
-        accessibilityIgnoresInvertColors: true
+        resizeMode: "cover"
+        // Android otherwise decodes a server image at full size: two 20 MP
+        // photos fill its shared bitmap budget, and every later image in
+        // the app fails to load. Decoded at the bubble's size instead.
+        ,
+        resizeMethod: "resize",
+        accessibilityIgnoresInvertColors: true,
+        onLoad: photo.onLoad
         // An image that can't load (expired link, deleted file) falls back to
         // the file row below instead of an empty box.
         ,
-        onError: () => setImageFailed(true)
-      })
+        onError: photo.onError
+      }) :
+      /*#__PURE__*/
+      // Same box as the image, so nothing moves when its turn comes.
+      (0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _ChatViewStyles.styles.attachmentImage
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PhotoLoader, {
+        loading: photo.loading
+      })]
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCard.FileCard, {
@@ -805,14 +1290,15 @@ function AttachmentPreview({
   });
 }
 function ProcedureFieldForm({
+  messageId,
   form,
   color,
   labels,
   onSubmit
 }) {
-  const [values, setValues] = (0, _react.useState)({});
-  const [submitted, setSubmitted] = (0, _react.useState)(false);
-  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const [values, setValues] = (0, _useRetainedState.useRetainedState)(`${messageId}:values`, {});
+  const [submitted, setSubmitted] = (0, _useRetainedState.useRetainedState)(`${messageId}:submitted`, false);
+  const [expanded, setExpanded] = (0, _useRetainedState.useRetainedState)(`${messageId}:expanded`, false);
   const canSubmit = form.fields.every(field => !field.required || values[field.name]?.trim());
   const handleSubmit = () => {
     if (!canSubmit || submitted) return;