@repzo/widget-react-native 1.3.1 → 1.4.0

package/src/ui/screens/chat/ChatView.tsx

@@ -2,16 +2,28 @@
  * 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 {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import {
+  ActivityIndicator,
   Animated,
   Easing,
+  FlatList,
   Image,
   Platform,
   Pressable,
@@ -20,16 +32,25 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import type { LayoutChangeEvent } from 'react-native';
+import type {
+  ListRenderItem,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewStyle,
+  ViewToken,
+} from 'react-native';
 
 import {
   formatAgentUiActionMessage,
   getAgentUiBlocks,
   getProcedureForm,
 } from '../../../agent-ui-blocks';
+import { forgetLocalPreview, localPreviewFor } from '../../../attachments/local-previews';
 import {
   MAX_ATTACHMENTS,
   isImageAttachment,
+  uploadsOnPick,
   type AttachmentProblem,
   type DraftAttachment,
 } from '../../../attachments/pickers';
@@ -45,7 +66,7 @@ import { AgentUiBlocks } from '../../components/AgentUiBlocks';
 import { AttachmentChips } from '../../components/AttachmentChips';
 import { AttachmentMenu, showNativeAttachmentMenu } from '../../components/AttachmentMenu';
 import { Avatar } from '../../components/Avatar';
-import { ImageViewer } from '../../components/ImageViewer';
+import { ImageViewer, type ViewerGallery } from '../../components/ImageViewer';
 import { getRatingRequest, RatingCard } from '../../components/RatingCard';
 import { WidgetErrorBoundary } from '../../components/ErrorBoundary';
 import { GradientBackground } from '../../components/Gradient';
@@ -53,20 +74,85 @@ import { AlertIcon, ArrowUpIcon, ChatOutlineIcon, ChevronIcon, ClockIcon, PlusIc
 import { TeamAvatars } from '../../components/TeamAvatars';
 import { Markdown } from '../../components/Markdown';
 import { useReduceMotion } from '../../hooks/use-reduce-motion';
+import { useRetainedState } from '../../hooks/use-retained-state';
 import { useTopInset } from '../../hooks/use-top-inset';
 import { globalStyles } from '../../styles/global';
 import { contrastingTextColor, mixHex, palette, spacing, withAlpha } from '../../styles/theme';
 import { canRetryMessage, formatClockTime, formatDayLabel, isSameDay } from '../../utils/conversations';
 import { stripHtml } from '../../utils/html';
+import { ImageLoadQueue } from '../../utils/image-load-queue';
+import { splitInlineAttachments } from '../../utils/inline-attachments';
 import { isHttpUrl, openExternalUrl } from '../../utils/safe-url';
 import { isPlayableAudio } from '../../../audio/voice';
 import { VoiceNote, type VoiceNoteLabels } from '../../components/VoiceNote';
-import { FileCard } from '../../components/FileCard';
+import { FileCard, fileTypeLabel } from '../../components/FileCard';
 import { MessagesSkeleton } from '../../components/MessagesSkeleton';
 import { backDirection, isRTL } from '../../utils/rtl';
 import { styles } from './ChatView.styles';
 import type { ChatLabels, ChatViewProps } from './ChatView.types';
 
+/** A message with what its place in the thread decides about it. */
+interface ThreadRow {
+  message: Message;
+  /** First message of its day: a day separator goes above it. */
+  startsDay: boolean;
+  /** First of a teammate's run: their name goes above it. */
+  startsRun: boolean;
+}
+
+const rowKey = (row: ThreadRow) => 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: string, size: number | undefined) =>
+  isHttpUrl(url) && (size ?? 0) > LARGE_IMAGE_BYTES;
+
+const ImageQueueContext = createContext<ImageLoadQueue | null>(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: string, priority: number, queued: boolean): [boolean, () => void] {
+  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 <View style={styles.threadGap} />;
+}
+
 export function ChatView({
   messages,
   loading,
@@ -86,11 +172,13 @@ export function ChatView({
   labels,
   attachmentSources = [],
   onPickAttachments,
+  onUploadAttachment,
   onSendMessage,
   onRetryMessage,
   onIdentifyVisitor,
   onRateConversation,
   defaultLocale,
+  photoAlbums = true,
   onLoadMore,
   onTyping,
   onBack,
@@ -100,31 +188,47 @@ export function ChatView({
   const [composerFocused, setComposerFocused] = useState(false);
   const [drafts, setDrafts] = useState<DraftAttachment[]>([]);
   const [menuOpen, setMenuOpen] = useState(false);
-  const [viewerImage, setViewerImage] = useState<{ url: string; name: string } | null>(null);
+  const [viewerGallery, setViewerGallery] = useState<ViewerGallery | null>(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<string | null>(null);
   const reduceMotion = useReduceMotion();
-  const scrollRef = useRef<ScrollView>(null);
+  const listRef = useRef<FlatList<ThreadRow>>(null);
+  // One per thread: the screen remounts for each conversation.
+  const [largeImageQueue] = useState(() => new ImageLoadQueue(LARGE_IMAGE_LOADS_AT_ONCE));
   const typingStopTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const noticeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pickerTimer = useRef<ReturnType<typeof setTimeout> | null>(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<string, { cancel: () => void }>());
+  // 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<string>());
+  // 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();
     };
   }, []);
 
@@ -134,51 +238,57 @@ export function ChatView({
     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({ animated });
+    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]);
+    if (hasMoreMessages && !loading) onLoadMore();
+  }, [hasMoreMessages, loading, 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: LayoutChangeEvent) => {
-      const { height } = event.nativeEvent.layout;
-      const shrank = viewportHeight.current - height > 1;
-      viewportHeight.current = height;
-      if (shrank) scrollToBottom(false);
-    },
-    [scrollToBottom]
+  const showAttach = attachmentSources.length > 0 && !!onPickAttachments;
+  // 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: string, patch: Partial<DraftAttachment>) =>
+      setDrafts((current) =>
+        current.map((draft) => (draft.id === id ? { ...draft, ...patch } : draft))
+      ),
+    []
   );
 
-  const showAttach = attachmentSources.length > 0 && !!onPickAttachments;
-  const canSend = !sending && (input.trim().length > 0 || drafts.length > 0);
+  /** Puts a picked local file up while the visitor writes; inline files need nothing. */
+  const startUpload = (draft: DraftAttachment) => {
+    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: unknown) => {
+        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: AttachmentProblem | null): string | null => {
     switch (problem) {
@@ -205,6 +315,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 {
@@ -253,7 +365,7 @@ 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.
@@ -262,6 +374,11 @@ export function ChatView({
     }
 
     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: DraftAttachment) =>
+      !!draft.uploadToken && (draft.uploadExpiresAt ?? Infinity) > sendBy;
     setSending(true);
     showNotice(null);
     onSendMessage(
@@ -270,6 +387,7 @@ export function ChatView({
         name: draft.name,
         url: draft.dataUrl,
         fileUri: draft.fileUri,
+        uploadToken: stillUploaded(draft) ? draft.uploadToken : undefined,
         contentType: draft.contentType,
         size: draft.size,
         previewUrl: draft.previewUri,
@@ -288,6 +406,17 @@ export function ChatView({
         setInput((current) => current || trimmed);
         const status = (error as { status?: unknown } | null)?.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);
@@ -316,10 +445,10 @@ 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(
@@ -331,10 +460,10 @@ export function ChatView({
   // A second failure shows on the bubble again.
   const handleRetryMessage = useCallback(
     (messageId: string) => {
+      followSend.current = true;
       onRetryMessage?.(messageId).catch(() => {});
-      scrollToBottom();
     },
-    [onRetryMessage, scrollToBottom]
+    [onRetryMessage]
   );
 
   // Recomputed only when the list changes — never on a keystroke.
@@ -356,6 +485,169 @@ export function ChatView({
   const headerGradient = [color, mixHex(color, '#000000', 0.16)];
   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<ThreadRow[]>(
+    () =>
+      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<ReadonlySet<string> | null>(null);
+  const rowIds = useRef<string[]>([]);
+  useEffect(() => {
+    rowIds.current = rows.map((row) => row.message.id);
+  }, [rows]);
+
+  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    // 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 }: { viewableItems: Array<ViewToken<ThreadRow>> }) =>
+      largeImageQueue.setOnScreen(
+        viewableItems.flatMap(({ item }) =>
+          (item.message.attachments ?? []).map((attachment) => attachment.id || attachment.url)
+        )
+      ),
+    [largeImageQueue]
+  );
+
+  const renderRow = useCallback<ListRenderItem<ThreadRow>>(
+    ({ item: { message, startsDay, startsRun } }) => {
+      const isAgentMessage = message.direction !== 'inbound' && message.messageType !== 'system';
+      return (
+        <View style={styles.threadRow}>
+          {startsDay ? (
+            <View style={styles.daySeparator}>
+              <View style={styles.dayLine} />
+              <Text style={styles.dayLabel}>
+                {formatDayLabel(message.createdAt, locale, labels)}
+              </Text>
+              <View style={styles.dayLine} />
+            </View>
+          ) : null}
+          {/* One malformed message (agent blocks, markdown) drops out of
+              the thread instead of blanking the whole chat. */}
+          <WidgetErrorBoundary fallback={null}>
+            <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}
+            />
+          </WidgetErrorBoundary>
+        </View>
+      );
+    },
+    [
+      agentName,
+      color,
+      handleAgentUiAction,
+      handleRetryMessage,
+      handleSubmitProcedureForm,
+      labels,
+      locale,
+      locales,
+      onRateConversation,
+      onRetryMessage,
+      photoAlbums,
+      thread,
+    ]
+  );
+
+  const loadEarlierRow = hasMoreMessages ? (
+    <Pressable onPress={handleLoadEarlier} accessibilityRole="button" style={styles.loadMore}>
+      <Text style={[styles.loadMoreLabel, { color }]}>
+        {loading ? labels.loading : labels.loadEarlier}
+      </Text>
+    </Pressable>
+  ) : null;
+
+  // Under the newest message.
+  const threadTail =
+    awaitingTeammate || agentTyping ? (
+      <View style={styles.threadTail}>
+        {awaitingTeammate ? (
+          <View style={styles.waitingRow}>
+            <TeamAvatars avatars={teamAvatars} size={20} color={color} />
+            <Text style={styles.waitingText}>{labels.waitingForTeammate}</Text>
+          </View>
+        ) : null}
+        {agentTyping ? (
+          <View style={styles.typingRow}>
+            <View style={styles.typingBubble}>
+              <TypingDot index={0} reduceMotion={reduceMotion} />
+              <TypingDot index={1} reduceMotion={reduceMotion} />
+              <TypingDot index={2} reduceMotion={reduceMotion} />
+            </View>
+            <Text style={styles.typingLabel}>{labels.thinking}</Text>
+          </View>
+        ) : null}
+      </View>
+    ) : null;
+
   return (
     <View style={globalStyles.screen}>
       {/* One bar instead of a brand band above a separate back row: the band
@@ -447,117 +739,89 @@ export function ChatView({
         </Pressable>
       </GradientBackground>
 
-      <ScrollView
-        ref={scrollRef}
-        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}>
-        {hasMoreMessages ? (
-          <Pressable onPress={handleLoadEarlier} accessibilityRole="button" style={styles.loadMore}>
-            <Text style={[styles.loadMoreLabel, { color }]}>
-              {loading ? labels.loading : labels.loadEarlier}
-            </Text>
-          </Pressable>
-        ) : null}
-
-        {isLoadingThread ? <MessagesSkeleton color={color} label={labels.loading} /> : null}
-
-        {isEmptyThread ? (
-          <View style={styles.emptyState}>
-            <View style={[styles.emptyIcon, { backgroundColor: withAlpha(color, 0.08) }]}>
-              <ChatOutlineIcon size={28} color={color} />
-            </View>
-            <Text style={styles.emptyText}>{labels.emptyConversation}</Text>
-          </View>
-        ) : 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 (
-            <Fragment key={message.id}>
-              {startsDay ? (
-                <View style={styles.daySeparator}>
-                  <View style={styles.dayLine} />
-                  <Text style={styles.dayLabel}>
-                    {formatDayLabel(message.createdAt, locale, labels)}
+      {messages.length > 0 ? (
+        <View style={globalStyles.fill}>
+          <ImageQueueContext.Provider value={largeImageQueue}>
+            <FlatList
+              ref={listRef}
+              data={rows}
+              inverted
+              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"
+            />
+          </ImageQueueContext.Provider>
+          {awayFrom ? (
+            <Pressable
+              onPress={handleJumpToLatest}
+              accessibilityRole="button"
+              accessibilityLabel={
+                unseenReplies
+                  ? formatLabel(labels.jumpToLatestNew, { count: unseenReplies })
+                  : labels.jumpToLatest
+              }
+              hitSlop={8}
+              style={({ pressed }) => [styles.jumpToLatest, pressed && globalStyles.pressed]}>
+              <ChevronIcon size={18} direction="down" color={palette.text} />
+              {unseenReplies ? (
+                <View style={[styles.jumpBadge, { backgroundColor: color }]}>
+                  <Text style={[styles.jumpBadgeText, { color: contrastingTextColor(color) }]}>
+                    {unseenReplies > 9 ? '9+' : unseenReplies}
                   </Text>
-                  <View style={styles.dayLine} />
                 </View>
               ) : null}
-              {/* One malformed message (agent blocks, markdown) drops out of
-                  the thread instead of blanking the whole chat. */}
-              <WidgetErrorBoundary fallback={null}>
-                <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}
-                />
-              </WidgetErrorBoundary>
-            </Fragment>
-          );
-        })}
-
-        {awaitingTeammate ? (
-          <View style={styles.waitingRow}>
-            <TeamAvatars avatars={teamAvatars} size={20} color={color} />
-            <Text style={styles.waitingText}>{labels.waitingForTeammate}</Text>
-          </View>
-        ) : null}
-
-        {agentTyping ? (
-          <View style={styles.typingRow}>
-            <View style={styles.typingBubble}>
-              <TypingDot index={0} reduceMotion={reduceMotion} />
-              <TypingDot index={1} reduceMotion={reduceMotion} />
-              <TypingDot index={2} reduceMotion={reduceMotion} />
+            </Pressable>
+          ) : null}
+        </View>
+      ) : (
+        <ScrollView
+          style={globalStyles.fill}
+          contentContainerStyle={[
+            styles.messagesContent,
+            isEmptyThread && styles.messagesContentEmpty,
+            isLoadingThread && styles.messagesContentLoading,
+          ]}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag">
+          {loadEarlierRow}
+
+          {isLoadingThread ? <MessagesSkeleton color={color} label={labels.loading} /> : null}
+
+          {isEmptyThread ? (
+            <View style={styles.emptyState}>
+              <View style={[styles.emptyIcon, { backgroundColor: withAlpha(color, 0.08) }]}>
+                <ChatOutlineIcon size={28} color={color} />
+              </View>
+              <Text style={styles.emptyText}>{labels.emptyConversation}</Text>
             </View>
-            <Text style={styles.typingLabel}>{labels.thinking}</Text>
-          </View>
-        ) : null}
-      </ScrollView>
+          ) : null}
+
+          {threadTail}
+        </ScrollView>
+      )}
 
       {offlineMessage ? (
         <View style={styles.offlineBanner}>
@@ -578,11 +842,19 @@ export function ChatView({
           <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}
         <View
@@ -623,6 +895,7 @@ export function ChatView({
             onPress={handleSend}
             disabled={!canSend}
             accessibilityRole="button"
+            accessibilityLabel={labels.send}
             accessibilityState={{ disabled: !canSend }}
             hitSlop={8}
             style={({ pressed }) => [
@@ -648,11 +921,11 @@ export function ChatView({
         />
       ) : null}
       <ImageViewer
-        image={viewerImage}
+        gallery={viewerGallery}
         labels={labels.viewer}
-        onClose={() => setViewerImage(null)}
+        onClose={() => setViewerGallery(null)}
         onOpenExternally={(url) => {
-          setViewerImage(null);
+          setViewerGallery(null);
           void openExternalUrl(url);
         }}
       />
@@ -677,6 +950,7 @@ const MessageBubble = memo(function MessageBubble({
   onRateConversation,
   locales,
   onRetry,
+  photoAlbums,
 }: {
   message: Message;
   color: string;
@@ -686,11 +960,13 @@ const MessageBubble = memo(function MessageBubble({
   receiptLabel?: string;
   onSubmitProcedureForm?: (body: string) => void;
   onAgentUiAction?: (action: AgentUiAction) => void | Promise<void>;
-  onOpenImage: (image: { url: string; name: string }) => void;
+  onOpenImage: (gallery: ViewerGallery) => void;
   onRateConversation?: ChatViewProps['onRateConversation'];
   locales: Array<string | null | undefined>;
   /** Re-sends this message when it failed. */
   onRetry?: (messageId: string) => void;
+  /** Off: each photo shows on its own, full width. */
+  photoAlbums: boolean;
 }) {
   const joinedName = message.metadata?.event === 'agent_joined' ? message.metadata?.agentName : null;
   if (message.messageType === 'system' && typeof joinedName === 'string' && joinedName) {
@@ -753,6 +1029,54 @@ const MessageBubble = 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: { id: string; url: string; name: string }) => {
+    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: WidgetAttachment) => (
+    <AttachmentPreview
+      key={attachment.id}
+      loadPriority={sentAt}
+      attachment={attachment}
+      isVisitor={isVisitor}
+      color={color}
+      voiceLabels={labels.voice}
+      openLabel={labels.openAttachment}
+      onOpenImage={openPhotos}
+    />
+  );
 
   return (
     <View style={[styles.messageRow, isVisitor ? styles.messageRowRight : styles.messageRowLeft]}>
@@ -764,7 +1088,17 @@ const MessageBubble = memo(function MessageBubble({
           rtl && (isVisitor ? styles.bubbleVisitorRTL : styles.bubbleAgentRTL),
           message.status === 'pending' && styles.bubblePending,
         ]}>
-        {hasBody ? (
+        {inlineParts ? (
+          <View style={styles.inlineParts}>
+            {inlineParts.parts.map((part, index) =>
+              'text' in part ? (
+                <Markdown key={`text-${index}`} content={part.text} color={textColor} />
+              ) : (
+                renderAttachment(part.attachment)
+              )
+            )}
+          </View>
+        ) : hasBody ? (
           isVisitor ? (
             <Text style={[styles.bubbleText, { color: textColor }]}>{messageText}</Text>
           ) : (
@@ -772,19 +1106,20 @@ const MessageBubble = memo(function MessageBubble({
           )
         ) : null}
 
-        {message.attachments && message.attachments.length > 0 ? (
-          <View style={[styles.attachments, hasBody && styles.attachmentsSpaced]}>
-            {message.attachments.map((attachment) => (
-              <AttachmentPreview
-                key={attachment.id}
-                attachment={attachment}
-                isVisitor={isVisitor}
-                color={color}
-                voiceLabels={labels.voice}
-                openLabel={labels.openAttachment}
-                onOpenImage={onOpenImage}
+        {files.length > 0 ? (
+          <View
+            style={[styles.attachments, (hasBody || !!inlineParts) && styles.attachmentsSpaced]}>
+            {album ? (
+              <PhotoAlbum
+                photos={album}
+                loadPriority={sentAt}
+                moreLabel={labels.morePhotos}
+                onOpen={openPhotos}
               />
-            ))}
+            ) : null}
+            {(album ? files.filter((attachment) => !album.includes(attachment)) : files).map(
+              renderAttachment
+            )}
           </View>
         ) : null}
 
@@ -828,6 +1163,7 @@ const MessageBubble = memo(function MessageBubble({
 
       {agentUiBlocks.length === 0 && procedureForm && onSubmitProcedureForm ? (
         <ProcedureFieldForm
+          messageId={message.id}
           form={procedureForm}
           color={color}
           labels={labels}
@@ -844,8 +1180,181 @@ function receiptLabel(message: Message, labels: ChatLabels): string | 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: WidgetAttachment, loadPriority: number) {
+  const [failedUrls, setFailedUrls] = useState<string[]>([]);
+  const [loadedUrl, setLoadedUrl] = useState<string | null>(null);
+  const url = [localPreviewFor(attachment.url), attachment.url].find(
+    (candidate): candidate is string => !!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,
+}: {
+  photos: WidgetAttachment[];
+  loadPriority: number;
+  /** Keeps `{count}`. */
+  moreLabel: string;
+  onOpen: (image: { id: string; url: string; name: string }) => void;
+}) {
+  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: WidgetAttachment, index: number, size: StyleProp<ViewStyle>) => (
+    <PhotoTile
+      key={attachment.id}
+      attachment={attachment}
+      loadPriority={loadPriority}
+      style={size}
+      more={index === 3 ? more : 0}
+      moreLabel={moreLabel}
+      onOpen={onOpen}
+    />
+  );
+
+  if (shown.length === 2) {
+    return <View style={[styles.album, styles.albumRow]}>{shown.map((photo, i) => tile(photo, i, styles.albumHalf))}</View>;
+  }
+  if (shown.length === 3) {
+    return (
+      <View style={[styles.album, styles.albumRow]}>
+        {tile(shown[0]!, 0, styles.albumHalf)}
+        <View style={styles.albumColumn}>
+          {shown.slice(1).map((photo, i) => tile(photo, i + 1, styles.albumQuarter))}
+        </View>
+      </View>
+    );
+  }
+  return <View style={[styles.album, styles.albumGrid]}>{shown.map((photo, i) => tile(photo, i, styles.albumQuarter))}</View>;
+}
+
+function PhotoTile({
+  attachment,
+  loadPriority,
+  style,
+  more,
+  moreLabel,
+  onOpen,
+}: {
+  attachment: WidgetAttachment;
+  loadPriority: number;
+  style: StyleProp<ViewStyle>;
+  /** Photos past this tile, shown over it; 0 for none. */
+  more: number;
+  moreLabel: string;
+  onOpen: (image: { id: string; url: string; name: string }) => void;
+}) {
+  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 (
+    <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]}>
+      {photo.isPhoto && photo.turn ? (
+        <Image
+          source={{ uri: photo.url }}
+          style={styles.albumImage}
+          resizeMode="cover"
+          // Decoded at the tile's size, like a single photo.
+          resizeMethod="resize"
+          accessibilityIgnoresInvertColors
+          onLoad={photo.onLoad}
+          onError={photo.onError}
+        />
+      ) : null}
+      {!photo.isPhoto ? (
+        // Nothing left to load (an expired link): its type and name, not a blank square.
+        <View style={styles.albumFallback}>
+          <Text style={styles.albumFallbackType}>{fileTypeLabel(attachment.name, attachment.contentType)}</Text>
+          <Text style={styles.albumFallbackName} numberOfLines={2}>
+            {attachment.name}
+          </Text>
+        </View>
+      ) : null}
+      {/* The "+N" cover already hides this tile, so it doesn't spin too. */}
+      <PhotoLoader loading={photo.loading && more === 0} />
+      {more > 0 ? (
+        <View style={styles.albumMore}>
+          <Text style={styles.albumMoreText}>+{more}</Text>
+        </View>
+      ) : null}
+    </Pressable>
+  );
+}
+
+/**
+ * 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 }: { loading: boolean }) {
+  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 (
+    <View style={styles.photoLoader} pointerEvents="none">
+      <View style={styles.photoLoaderBadge}>
+        <ActivityIndicator size="small" color={palette.white} />
+      </View>
+    </View>
+  );
+}
+
 function AttachmentPreview({
   attachment,
+  loadPriority,
   isVisitor,
   color,
   voiceLabels,
@@ -853,25 +1362,26 @@ function AttachmentPreview({
   onOpenImage,
 }: {
   attachment: WidgetAttachment;
+  /** Among large images waiting to download, higher goes first: newer messages. */
+  loadPriority: number;
   isVisitor: boolean;
   color: string;
   voiceLabels: VoiceNoteLabels;
   /** Keeps `{name}`. */
   openLabel: string;
-  onOpenImage: (image: { url: string; name: string }) => void;
+  /** With the URL this bubble shows, which the viewer opens at. */
+  onOpenImage: (image: { id: string; url: string; name: string }) => void;
 }) {
-  // `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, name: attachment.name })
+    ? () => onOpenImage({ id: attachment.id, url: imageUrl!, name: attachment.name })
     : openable
       ? () => void openExternalUrl(attachment.url)
       : undefined;
@@ -899,15 +1409,26 @@ function AttachmentPreview({
         onPress={open}
         accessibilityRole="imagebutton"
         accessibilityLabel={attachment.name}>
-        <Image
-          source={{ uri: attachment.url }}
-          style={styles.attachmentImage}
-          resizeMode="cover"
-          accessibilityIgnoresInvertColors
-          // 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)}
-        />
+        {photo.turn ? (
+          <Image
+            source={{ uri: imageUrl }}
+            style={styles.attachmentImage}
+            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
+            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={photo.onError}
+          />
+        ) : (
+          // Same box as the image, so nothing moves when its turn comes.
+          <View style={styles.attachmentImage} />
+        )}
+        <PhotoLoader loading={photo.loading} />
       </Pressable>
     );
   }
@@ -926,19 +1447,22 @@ function AttachmentPreview({
 }
 
 function ProcedureFieldForm({
+  messageId,
   form,
   color,
   labels,
   onSubmit,
 }: {
+  /** Keeps what was typed while the row is scrolled far away and unmounted. */
+  messageId: string;
   form: AgentProcedureForm;
   color: string;
   labels: ChatLabels;
   onSubmit: (body: string) => void;
 }) {
-  const [values, setValues] = useState<Record<string, string>>({});
-  const [submitted, setSubmitted] = useState(false);
-  const [expanded, setExpanded] = useState(false);
+  const [values, setValues] = useRetainedState<Record<string, string>>(`${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());