@repzo/widget-react-native 1.3.1 → 1.4.0

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

@@ -4,16 +4,17 @@
  * 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`).
  */
 
-import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Image, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { ActivityIndicator, Animated, Easing, FlatList, Image, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native';
 import { formatAgentUiActionMessage, getAgentUiBlocks, getProcedureForm } from "../../../agent-ui-blocks.js";
-import { MAX_ATTACHMENTS, isImageAttachment } from "../../../attachments/pickers.js";
+import { forgetLocalPreview, localPreviewFor } from "../../../attachments/local-previews.js";
+import { MAX_ATTACHMENTS, isImageAttachment, uploadsOnPick } from "../../../attachments/pickers.js";
 import { formatLabel } from "../../../i18n.js";
 import { AgentUiBlocks } from "../../components/AgentUiBlocks.js";
 import { AttachmentChips } from "../../components/AttachmentChips.js";
@@ -27,19 +28,73 @@ import { AlertIcon, ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PlusIc
 import { TeamAvatars } from "../../components/TeamAvatars.js";
 import { Markdown } from "../../components/Markdown.js";
 import { useReduceMotion } from "../../hooks/use-reduce-motion.js";
+import { useRetainedState } from "../../hooks/use-retained-state.js";
 import { useTopInset } from "../../hooks/use-top-inset.js";
 import { globalStyles } from "../../styles/global.js";
 import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from "../../styles/theme.js";
 import { canRetryMessage, formatClockTime, formatDayLabel, isSameDay } from "../../utils/conversations.js";
 import { stripHtml } from "../../utils/html.js";
+import { ImageLoadQueue } from "../../utils/image-load-queue.js";
+import { splitInlineAttachments } from "../../utils/inline-attachments.js";
 import { isHttpUrl, openExternalUrl } from "../../utils/safe-url.js";
 import { isPlayableAudio } from "../../../audio/voice.js";
 import { VoiceNote } from "../../components/VoiceNote.js";
-import { FileCard } from "../../components/FileCard.js";
+import { FileCard, fileTypeLabel } from "../../components/FileCard.js";
 import { MessagesSkeleton } from "../../components/MessagesSkeleton.js";
 import { backDirection, isRTL } from "../../utils/rtl.js";
 import { styles } from "./ChatView.styles.js";
+
+/** A message with what its place in the thread decides about it. */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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) => isHttpUrl(url) && (size ?? 0) > LARGE_IMAGE_BYTES;
+const ImageQueueContext = /*#__PURE__*/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 = useContext(ImageQueueContext);
+  const active = !!queue && queued;
+  useEffect(() => active ? queue.add(key, priority) : undefined, [active, queue, key, priority]);
+  const turn = useSyncExternalStore(queue ? queue.subscribe : subscribeNowhere, () => active ? queue.canLoad(key) : true);
+  const settled = useCallback(() => queue?.finish(key), [queue, key]);
+  return [turn, settled];
+}
+function ThreadGap() {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.threadGap
+  });
+}
 export function ChatView({
   messages,
   loading,
@@ -59,11 +114,13 @@ export function ChatView({
   labels,
   attachmentSources = [],
   onPickAttachments,
+  onUploadAttachment,
   onSendMessage,
   onRetryMessage,
   onIdentifyVisitor,
   onRateConversation,
   defaultLocale,
+  photoAlbums = true,
   onLoadMore,
   onTyping,
   onBack,
@@ -73,30 +130,46 @@ export function ChatView({
   const [composerFocused, setComposerFocused] = useState(false);
   const [drafts, setDrafts] = useState([]);
   const [menuOpen, setMenuOpen] = useState(false);
-  const [viewerImage, setViewerImage] = useState(null);
+  const [viewerGallery, setViewerGallery] = useState(null);
   const [picking, setPicking] = useState(false);
   // Only attachment sends hold the composer; text sends stay fire-and-forget.
   const [sending, setSending] = useState(false);
   const [notice, setNotice] = useState(null);
   const reduceMotion = useReduceMotion();
-  const scrollRef = useRef(null);
+  const listRef = useRef(null);
+  // One per thread: the screen remounts for each conversation.
+  const [largeImageQueue] = useState(() => new ImageLoadQueue(LARGE_IMAGE_LOADS_AT_ONCE));
   const typingStopTimer = useRef(null);
   const noticeTimer = useRef(null);
   const pickerTimer = useRef(null);
   const mounted = 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 = 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 = 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 = useRef(false);
   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.
   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 = useCallback(message => {
@@ -104,50 +177,66 @@ export 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 = 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).
-  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 = 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 = useCallback(() => {
-    skipNextAutoScroll.current = true;
-    onLoadMore();
-  }, [onLoadMore]);
-  const handleContentSizeChange = 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 = useRef(0);
-  const handleViewportLayout = 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 = 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':
@@ -172,6 +261,8 @@ export function ChatView({
       if (!mounted.current) return;
       if (result.added.length > 0) {
         setDrafts(current => [...current, ...result.added].slice(0, MAX_ATTACHMENTS));
+        // Opted out, the files go up when the visitor taps Send instead.
+        if (uploadsOnPick()) result.added.forEach(startUpload);
       }
       showNotice(problemLabel(result.problem));
     } finally {
@@ -211,19 +302,24 @@ export function ChatView({
     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
@@ -239,6 +335,15 @@ export 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);
     });
@@ -258,17 +363,17 @@ export function ChatView({
         phone: stringPayload(action.payload.phone)
       });
     }
+    followSend.current = true;
     onSendMessage(formatAgentUiActionMessage(action), undefined, action).catch(() => {});
-    scrollToBottom();
-  }, [onIdentifyVisitor, onSendMessage, scrollToBottom]);
+  }, [onIdentifyVisitor, onSendMessage]);
   const handleSubmitProcedureForm = 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 = useCallback(messageId => {
+    followSend.current = true;
     onRetryMessage?.(messageId).catch(() => {});
-    scrollToBottom();
-  }, [onRetryMessage, scrollToBottom]);
+  }, [onRetryMessage]);
 
   // Recomputed only when the list changes — never on a keystroke.
   const thread = useMemo(() => deriveThread(messages), [messages]);
@@ -288,6 +393,143 @@ export function ChatView({
   const headerControl = {
     backgroundColor: withAlpha(headerTextColor, 0.16)
   };
+
+  // Newest first, for the inverted list; each row still compares itself with
+  // the message sent before it.
+  const rows = useMemo(() => messages.map((message, index) => {
+    const previous = index > 0 ? messages[index - 1] : undefined;
+    return {
+      message,
+      startsDay: !previous || !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]);
+  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] = useState(null);
+  const rowIds = useRef([]);
+  useEffect(() => {
+    rowIds.current = rows.map(row => row.message.id);
+  }, [rows]);
+  const handleScroll = 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 = 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 = 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 = useCallback(({
+    viewableItems
+  }) => largeImageQueue.setOnScreen(viewableItems.flatMap(({
+    item
+  }) => (item.message.attachments ?? []).map(attachment => attachment.id || attachment.url))), [largeImageQueue]);
+  const renderRow = useCallback(({
+    item: {
+      message,
+      startsDay,
+      startsRun
+    }
+  }) => {
+    const isAgentMessage = message.direction !== 'inbound' && message.messageType !== 'system';
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.threadRow,
+      children: [startsDay ? /*#__PURE__*/_jsxs(View, {
+        style: styles.daySeparator,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.dayLine
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.dayLabel,
+          children: formatDayLabel(message.createdAt, locale, labels)
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.dayLine
+        })]
+      }) : null, /*#__PURE__*/_jsx(WidgetErrorBoundary, {
+        fallback: null,
+        children: /*#__PURE__*/_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: 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 && canRetryMessage(message) ? handleRetryMessage : undefined,
+          photoAlbums: photoAlbums
+        })
+      })]
+    });
+  }, [agentName, color, handleAgentUiAction, handleRetryMessage, handleSubmitProcedureForm, labels, locale, locales, onRateConversation, onRetryMessage, photoAlbums, thread]);
+  const loadEarlierRow = hasMoreMessages ? /*#__PURE__*/_jsx(Pressable, {
+    onPress: handleLoadEarlier,
+    accessibilityRole: "button",
+    style: styles.loadMore,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.loadMoreLabel, {
+        color
+      }],
+      children: loading ? labels.loading : labels.loadEarlier
+    })
+  }) : null;
+
+  // Under the newest message.
+  const threadTail = awaitingTeammate || agentTyping ? /*#__PURE__*/_jsxs(View, {
+    style: styles.threadTail,
+    children: [awaitingTeammate ? /*#__PURE__*/_jsxs(View, {
+      style: styles.waitingRow,
+      children: [/*#__PURE__*/_jsx(TeamAvatars, {
+        avatars: teamAvatars,
+        size: 20,
+        color: color
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.waitingText,
+        children: labels.waitingForTeammate
+      })]
+    }) : null, agentTyping ? /*#__PURE__*/_jsxs(View, {
+      style: styles.typingRow,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.typingBubble,
+        children: [/*#__PURE__*/_jsx(TypingDot, {
+          index: 0,
+          reduceMotion: reduceMotion
+        }), /*#__PURE__*/_jsx(TypingDot, {
+          index: 1,
+          reduceMotion: reduceMotion
+        }), /*#__PURE__*/_jsx(TypingDot, {
+          index: 2,
+          reduceMotion: reduceMotion
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.typingLabel,
+        children: labels.thinking
+      })]
+    }) : null]
+  }) : null;
   return /*#__PURE__*/_jsxs(View, {
     style: globalStyles.screen,
     children: [/*#__PURE__*/_jsxs(GradientBackground, {
@@ -392,29 +634,76 @@ export function ChatView({
           color: headerTextColor
         })
       })]
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      ref: scrollRef,
+    }), messages.length > 0 ? /*#__PURE__*/_jsxs(View, {
       style: globalStyles.fill,
-      contentContainerStyle: [styles.messagesContent, isEmptyThread && styles.messagesContentEmpty, isLoadingThread && 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__*/_jsx(Pressable, {
-        onPress: handleLoadEarlier,
+      children: [/*#__PURE__*/_jsx(ImageQueueContext.Provider, {
+        value: largeImageQueue,
+        children: /*#__PURE__*/_jsx(FlatList, {
+          ref: listRef,
+          data: rows,
+          inverted: true,
+          keyExtractor: rowKey,
+          renderItem: renderRow,
+          style: globalStyles.fill,
+          contentContainerStyle: styles.threadContent,
+          ItemSeparatorComponent: ThreadGap
+          // Inverted, the header sits under the newest message and the footer
+          // above the oldest.
+          ,
+          ListHeaderComponent: threadTail,
+          ListHeaderComponentStyle: 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: 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__*/_jsxs(Pressable, {
+        onPress: handleJumpToLatest,
         accessibilityRole: "button",
-        style: styles.loadMore,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.loadMoreLabel, {
-            color
+        accessibilityLabel: unseenReplies ? formatLabel(labels.jumpToLatestNew, {
+          count: unseenReplies
+        }) : labels.jumpToLatest,
+        hitSlop: 8,
+        style: ({
+          pressed
+        }) => [styles.jumpToLatest, pressed && globalStyles.pressed],
+        children: [/*#__PURE__*/_jsx(ChevronIcon, {
+          size: 18,
+          direction: "down",
+          color: palette.text
+        }), unseenReplies ? /*#__PURE__*/_jsx(View, {
+          style: [styles.jumpBadge, {
+            backgroundColor: color
           }],
-          children: loading ? labels.loading : labels.loadEarlier
-        })
-      }) : null, isLoadingThread ? /*#__PURE__*/_jsx(MessagesSkeleton, {
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.jumpBadgeText, {
+              color: contrastingTextColor(color)
+            }],
+            children: unseenReplies > 9 ? '9+' : unseenReplies
+          })
+        }) : null]
+      }) : null]
+    }) : /*#__PURE__*/_jsxs(ScrollView, {
+      style: globalStyles.fill,
+      contentContainerStyle: [styles.messagesContent, isEmptyThread && styles.messagesContentEmpty, isLoadingThread && styles.messagesContentLoading],
+      keyboardShouldPersistTaps: "handled",
+      keyboardDismissMode: "on-drag",
+      children: [loadEarlierRow, isLoadingThread ? /*#__PURE__*/_jsx(MessagesSkeleton, {
         color: color,
         label: labels.loading
       }) : null, isEmptyThread ? /*#__PURE__*/_jsxs(View, {
@@ -431,70 +720,7 @@ export function ChatView({
           style: styles.emptyText,
           children: labels.emptyConversation
         })]
-      }) : null, messages.map((message, index) => {
-        const previous = index > 0 ? messages[index - 1] : undefined;
-        const startsDay = !previous || !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__*/_jsxs(Fragment, {
-          children: [startsDay ? /*#__PURE__*/_jsxs(View, {
-            style: styles.daySeparator,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.dayLine
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.dayLabel,
-              children: formatDayLabel(message.createdAt, locale, labels)
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.dayLine
-            })]
-          }) : null, /*#__PURE__*/_jsx(WidgetErrorBoundary, {
-            fallback: null,
-            children: /*#__PURE__*/_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: 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 && canRetryMessage(message) ? handleRetryMessage : undefined
-            })
-          })]
-        }, message.id);
-      }), awaitingTeammate ? /*#__PURE__*/_jsxs(View, {
-        style: styles.waitingRow,
-        children: [/*#__PURE__*/_jsx(TeamAvatars, {
-          avatars: teamAvatars,
-          size: 20,
-          color: color
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.waitingText,
-          children: labels.waitingForTeammate
-        })]
-      }) : null, agentTyping ? /*#__PURE__*/_jsxs(View, {
-        style: styles.typingRow,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.typingBubble,
-          children: [/*#__PURE__*/_jsx(TypingDot, {
-            index: 0,
-            reduceMotion: reduceMotion
-          }), /*#__PURE__*/_jsx(TypingDot, {
-            index: 1,
-            reduceMotion: reduceMotion
-          }), /*#__PURE__*/_jsx(TypingDot, {
-            index: 2,
-            reduceMotion: reduceMotion
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.typingLabel,
-          children: labels.thinking
-        })]
-      }) : null]
+      }) : null, threadTail]
     }), offlineMessage ? /*#__PURE__*/_jsx(View, {
       style: styles.offlineBanner,
       children: /*#__PURE__*/_jsx(Text, {
@@ -511,10 +737,18 @@ export function ChatView({
       }) : null, drafts.length > 0 ? /*#__PURE__*/_jsx(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__*/_jsxs(View, {
         style: [styles.composer, showAttach && styles.composerWithAttach, composerFocused && styles.composerFocused, composerFocused && {
@@ -552,6 +786,7 @@ export function ChatView({
           onPress: handleSend,
           disabled: !canSend,
           accessibilityRole: "button",
+          accessibilityLabel: labels.send,
           accessibilityState: {
             disabled: !canSend
           },
@@ -574,11 +809,11 @@ export function ChatView({
       onSelect: handleMenuSelect,
       onClose: () => setMenuOpen(false)
     }) : null, /*#__PURE__*/_jsx(ImageViewer, {
-      image: viewerImage,
+      gallery: viewerGallery,
       labels: labels.viewer,
-      onClose: () => setViewerImage(null),
+      onClose: () => setViewerGallery(null),
       onOpenExternally: url => {
-        setViewerImage(null);
+        setViewerGallery(null);
         void openExternalUrl(url);
       }
     })]
@@ -601,7 +836,8 @@ const MessageBubble = /*#__PURE__*/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) {
@@ -664,6 +900,56 @@ const MessageBubble = /*#__PURE__*/memo(function MessageBubble({
   const procedureForm = !isVisitor ? getProcedureForm(message.metadata) : null;
   const agentUiBlocks = !isVisitor ? getAgentUiBlocks(message.metadata) : [];
   const textColor = isVisitor ? palette.white : palette.ink;
+  // A reply with images between its paragraphs shows them where the teammate put them.
+  const inlineParts = isVisitor ? null : 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 => 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 => isImageAttachment(attachment.contentType)).map(attachment => {
+      const url = attachment.id === tapped.id ? tapped.url : localPreviewFor(attachment.url) || attachment.url;
+      // The phone's copy may be gone by now; the stored one stands in.
+      const fallbackUrl = url !== attachment.url && 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__*/_jsx(AttachmentPreview, {
+    loadPriority: sentAt,
+    attachment: attachment,
+    isVisitor: isVisitor,
+    color: color,
+    voiceLabels: labels.voice,
+    openLabel: labels.openAttachment,
+    onOpenImage: openPhotos
+  }, attachment.id);
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.messageRow, isVisitor ? styles.messageRowRight : styles.messageRowLeft],
     children: [senderLabel ? /*#__PURE__*/_jsx(Text, {
@@ -673,7 +959,13 @@ const MessageBubble = /*#__PURE__*/memo(function MessageBubble({
       style: [styles.bubble, isVisitor ? [styles.bubbleVisitor, {
         backgroundColor: color
       }] : styles.bubbleAgent, rtl && (isVisitor ? styles.bubbleVisitorRTL : styles.bubbleAgentRTL), message.status === 'pending' && styles.bubblePending],
-      children: [hasBody ? isVisitor ? /*#__PURE__*/_jsx(Text, {
+      children: [inlineParts ? /*#__PURE__*/_jsx(View, {
+        style: styles.inlineParts,
+        children: inlineParts.parts.map((part, index) => 'text' in part ? /*#__PURE__*/_jsx(Markdown, {
+          content: part.text,
+          color: textColor
+        }, `text-${index}`) : renderAttachment(part.attachment))
+      }) : hasBody ? isVisitor ? /*#__PURE__*/_jsx(Text, {
         style: [styles.bubbleText, {
           color: textColor
         }],
@@ -681,16 +973,14 @@ const MessageBubble = /*#__PURE__*/memo(function MessageBubble({
       }) : /*#__PURE__*/_jsx(Markdown, {
         content: messageText,
         color: textColor
-      }) : null, message.attachments && message.attachments.length > 0 ? /*#__PURE__*/_jsx(View, {
-        style: [styles.attachments, hasBody && styles.attachmentsSpaced],
-        children: message.attachments.map(attachment => /*#__PURE__*/_jsx(AttachmentPreview, {
-          attachment: attachment,
-          isVisitor: isVisitor,
-          color: color,
-          voiceLabels: labels.voice,
-          openLabel: labels.openAttachment,
-          onOpenImage: onOpenImage
-        }, attachment.id))
+      }) : null, files.length > 0 ? /*#__PURE__*/_jsxs(View, {
+        style: [styles.attachments, (hasBody || !!inlineParts) && styles.attachmentsSpaced],
+        children: [album ? /*#__PURE__*/_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__*/_jsx(Text, {
         style: [styles.messageTime, {
           color: isVisitor ? withAlpha(palette.white, 0.7) : palette.textSubtle
@@ -721,6 +1011,7 @@ const MessageBubble = /*#__PURE__*/memo(function MessageBubble({
       labels: labels.blocks,
       onAction: onAgentUiAction
     }) : null, agentUiBlocks.length === 0 && procedureForm && onSubmitProcedureForm ? /*#__PURE__*/_jsx(ProcedureFieldForm, {
+      messageId: message.id,
       form: procedureForm,
       color: color,
       labels: labels,
@@ -734,26 +1025,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] = useState([]);
+  const [loadedUrl, setLoadedUrl] = useState(null);
+  const url = [localPreviewFor(attachment.url), attachment.url].find(candidate => !!candidate && !failedUrls.includes(candidate));
+  const isPhoto = 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 === localPreviewFor(attachment.url)) 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__*/_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__*/_jsx(View, {
+      style: [styles.album, styles.albumRow],
+      children: shown.map((photo, i) => tile(photo, i, styles.albumHalf))
+    });
+  }
+  if (shown.length === 3) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.album, styles.albumRow],
+      children: [tile(shown[0], 0, styles.albumHalf), /*#__PURE__*/_jsx(View, {
+        style: styles.albumColumn,
+        children: shown.slice(1).map((photo, i) => tile(photo, i + 1, styles.albumQuarter))
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.album, styles.albumGrid],
+    children: shown.map((photo, i) => tile(photo, i, 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 ?? (isHttpUrl(attachment.url) ? attachment.url : undefined);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: openUrl ? () => onOpen({
+      id: attachment.id,
+      url: openUrl,
+      name: attachment.name
+    }) : undefined,
+    accessibilityRole: "imagebutton",
+    accessibilityLabel: more > 0 ? `${attachment.name}, ${formatLabel(moreLabel, {
+      count: more
+    })}` : attachment.name,
+    style: ({
+      pressed
+    }) => [styles.albumTile, style, pressed && globalStyles.pressed],
+    children: [photo.isPhoto && photo.turn ? /*#__PURE__*/_jsx(Image, {
+      source: {
+        uri: photo.url
+      },
+      style: 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.
+    _jsxs(View, {
+      style: styles.albumFallback,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.albumFallbackType,
+        children: fileTypeLabel(attachment.name, attachment.contentType)
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.albumFallbackName,
+        numberOfLines: 2,
+        children: attachment.name
+      })]
+    }) : null, /*#__PURE__*/_jsx(PhotoLoader, {
+      loading: photo.loading && more === 0
+    }), more > 0 ? /*#__PURE__*/_jsx(View, {
+      style: styles.albumMore,
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: 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] = useState(false);
+  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__*/_jsx(View, {
+    style: styles.photoLoader,
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.photoLoaderBadge,
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: 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] = useState(false);
   const [audioFailed, setAudioFailed] = useState(false);
-  const isImage = isImageAttachment(attachment.contentType) && !!attachment.url && !imageFailed;
+  const photo = usePhotoSource(attachment, loadPriority);
+  const imageUrl = photo.url;
+  const isImage = photo.isPhoto;
   const openable = 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 openExternalUrl(attachment.url) : undefined;
 
@@ -772,22 +1231,35 @@ function AttachmentPreview({
     });
   }
   if (isImage) {
-    return /*#__PURE__*/_jsx(Pressable, {
+    return /*#__PURE__*/_jsxs(Pressable, {
       onPress: open,
       accessibilityRole: "imagebutton",
       accessibilityLabel: attachment.name,
-      children: /*#__PURE__*/_jsx(Image, {
+      children: [photo.turn ? /*#__PURE__*/_jsx(Image, {
         source: {
-          uri: attachment.url
+          uri: imageUrl
         },
         style: 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.
+      _jsx(View, {
+        style: styles.attachmentImage
+      }), /*#__PURE__*/_jsx(PhotoLoader, {
+        loading: photo.loading
+      })]
     });
   }
   return /*#__PURE__*/_jsx(FileCard, {
@@ -801,14 +1273,15 @@ function AttachmentPreview({
   });
 }
 function ProcedureFieldForm({
+  messageId,
   form,
   color,
   labels,
   onSubmit
 }) {
-  const [values, setValues] = useState({});
-  const [submitted, setSubmitted] = useState(false);
-  const [expanded, setExpanded] = useState(false);
+  const [values, setValues] = useRetainedState(`${messageId}:values`, {});
+  const [submitted, setSubmitted] = useRetainedState(`${messageId}:submitted`, false);
+  const [expanded, setExpanded] = useRetainedState(`${messageId}:expanded`, false);
   const canSubmit = form.fields.every(field => !field.required || values[field.name]?.trim());
   const handleSubmit = () => {
     if (!canSubmit || submitted) return;