@marktiderman/genesis-chat 0.1.1 → 0.2.0

package/src/native/thread-screen.tsx

@@ -0,0 +1,620 @@
+/**
+ * @feat:chat
+ * One conversation: a list oldest first, top to bottom, the order it reads in
+ * with VoiceOver (FlashList's bottom-anchored chat mode when the app gave it,
+ * else FlatList), that opens at the newest message, follows new ones while
+ * you are at the bottom, goes to the bottom when you send, and keeps its
+ * place while earlier ones load at the top; day separators, the "New messages" line,
+ * grouped bubbles with names and avatars in groups, who is typing or
+ * recording, retry and delete on a send that failed, the long-press sheet and
+ * swipe to reply, a message's photos in the full-screen viewer, and the composer above
+ * the keyboard (or, when your role couldn't be read, Retry). Render it as the screen's only content, under the
+ * navigator's header with `useChatThreadStackOptions` (an opaque bar).
+ *
+ * Not inverted: FlashList 2 keeps the first visible row in place when rows
+ * change and only follows new rows at the bottom (`autoscrollToBottomThreshold`;
+ * it declares `autoscrollToTopThreshold` but never reads it), so in an inverted list a new message
+ * at index 0 was pushed under the composer. Inverted, VoiceOver also read
+ * each day's heading after its messages.
+ *
+ * Organising: a topic bar when the conversation has topics (the list shows the topic chosen; a
+ * closed one takes no posts from members), the away line under the header, scheduled send
+ * (touch and hold Send) with the thread's scheduled messages over the composer, `jumpTo` a
+ * message (a search result), and moderation's markers.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, type ComponentType } from "react";
+import { AccessibilityInfo, FlatList, KeyboardAvoidingView, Platform, Pressable, View, type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { NativeEmptyState, NativeSkeleton, NativeText, useGenesisModules, useToast } from "@marktiderman/genesis-ui-native/components";
+import { useReducedMotion, useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
+import { activityLine, previewText } from "../core/thread";
+import type { ChatMessage, PendingFile } from "../core/types";
+import { useChat, useConversation, useFileUrls, useLinkPreviews, useMessageActions, usePeople, usePins, useTopics } from "../react/index";
+import { recordingLimitMs } from "../core/media";
+import type { OpenAttachment } from "./attachment-cards";
+import { linkPreviewIds, previewToShow } from "./link-preview";
+import { ChatVideoRecorder } from "./video-recorder";
+import { VideoUploadTray } from "./video-upload-tray";
+import { videoUploads, type MintedUpload, type RecordedVideo } from "./video-upload";
+import { ChatAwayLine, useAwayLine } from "./availability";
+import { fill } from "./copy";
+import { ChatScheduledBar, ChatScheduleSheet, useScheduleSend } from "./schedule-sheet";
+import { canManageTopics, ChatTopicBar, topicClosedFor } from "./topics";
+import { rowIndexOf, useJumpToMessage, type JumpTarget } from "./use-jump";
+import type { MessageActionId } from "./actions";
+import { ChatComposer } from "./composer";
+import { composerDisabledReason, filesFromAssets, replyTargetFor } from "./composer-state";
+import { ChatPeopleScope, useChatNative } from "./context";
+import { useChatComposer } from "./use-composer";
+import { ChatAccessError } from "./access-error";
+import { attachmentPaths } from "./media";
+import { ChatPhotoViewer, galleryFor, type ChatPhoto } from "./photo-viewer";
+import { MessageActionsSheet } from "./message-actions-sheet";
+import { displayBody, MessageBubble } from "./message-bubble";
+import { haptic } from "./modules";
+import { buildThreadRows, type ThreadRow } from "./rows";
+
+/** How long an upload minted for a thrown-away take is kept for the next one. */
+const PREPARED_UPLOAD_MS = 20 * 60_000;
+
+export interface ChatThreadScreenProps {
+  conversationId: string;
+  /** One thread's replies instead of the main timeline. */
+  threadRootId?: string | null;
+  /**
+   * Points from the top of the screen to the top of this view, for keeping the composer above the
+   * keyboard. Measured from the screen's own position when left out (under an opaque header it is
+   * the header's bottom).
+   */
+  keyboardVerticalOffset?: number;
+  /** Open at this message (a search result's `messageId` and `seq`): earlier pages load until it is held. */
+  jumpTo?: JumpTarget | null;
+  /** Only this topic's messages, with no topic bar. */
+  topic?: string;
+  /** Show the topic bar before the first topic exists, so an owner or admin can add one. */
+  showTopics?: boolean;
+  /** Scheduled send (touch and hold Send) and the scheduled list. Default true. */
+  scheduling?: boolean;
+  /** The away line under the header. Default true. */
+  availability?: boolean;
+  /** An app attachment card's button (a form, a check-in), when its kind gives no `onPress`. */
+  onOpenAttachment?: OpenAttachment;
+  testID?: string;
+}
+
+/** The list props chat passes; FlashList v2 and FlatList both take them. */
+interface ChatListProps {
+  ref?: unknown;
+  data: readonly ThreadRow[];
+  renderItem: (info: { item: ThreadRow; index: number }) => React.ReactElement | null;
+  keyExtractor: (row: ThreadRow) => string;
+  getItemType?: (row: ThreadRow) => string;
+  inverted?: boolean;
+  onStartReached?: () => void;
+  onStartReachedThreshold?: number;
+  ListHeaderComponent?: React.ReactElement | null;
+  ListFooterComponent?: React.ReactElement | null;
+  keyboardShouldPersistTaps?: "handled";
+  keyboardDismissMode?: "interactive" | "on-drag";
+  contentContainerStyle?: Record<string, unknown>;
+  maintainVisibleContentPosition?: Record<string, unknown>;
+  onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  scrollEventThrottle?: number;
+  onContentSizeChange?: (width: number, height: number) => void;
+  onLayout?: (e: LayoutChangeEvent) => void;
+  extraData?: unknown;
+  onScrollToIndexFailed?: (info: { index: number; averageItemLength: number }) => void;
+  testID?: string;
+}
+
+/** Points from the bottom that still count as "at the bottom" (FlatList, which follows by hand). */
+export const AT_BOTTOM_POINTS = 120;
+
+/**
+ * How the thread's list is set up, oldest first and not inverted. FlashList:
+ * its chat mode (opens at the bottom, follows new rows while within a fifth of
+ * a screen of it, keeps the first visible row in place when earlier ones load
+ * at the top). FlatList: keeps its place when earlier rows load at the top;
+ * the screen follows new rows itself (`followsByHand`).
+ */
+export function threadListMode(flash: boolean, reducedMotion: boolean): { followsByHand: boolean; maintainVisibleContentPosition: Record<string, unknown> } {
+  if (flash) {
+    return {
+      followsByHand: false,
+      maintainVisibleContentPosition: { startRenderingFromBottom: true, autoscrollToBottomThreshold: 0.2, animateAutoScrollToBottom: !reducedMotion },
+    };
+  }
+  return { followsByHand: true, maintainVisibleContentPosition: { minIndexForVisible: 0 } };
+}
+
+/** Whether a scroll position is at (or near) the bottom of its content. */
+export function nearBottom(m: { contentOffset: { y: number }; contentSize: { height: number }; layoutMeasurement: { height: number } }, slack = AT_BOTTOM_POINTS): boolean {
+  return m.contentOffset.y + m.layoutMeasurement.height >= m.contentSize.height - slack;
+}
+
+export function ChatThreadScreen(props: ChatThreadScreenProps) {
+  const { conversationId, threadRootId = null, keyboardVerticalOffset, onOpenAttachment, jumpTo, topic: topicProp, showTopics = false, scheduling = true, availability = true, testID = "chat-thread" } = props;
+  const chat = useChat();
+  const { userId, videoUpload, attachmentKinds, outbox } = chat;
+  // Off unless the app turns it on: an og:image fetched from the phone tells its site who reads it.
+  const linkPreviewImages = (chat as { linkPreviewImages?: boolean }).linkPreviewImages === true;
+  const topicsState = useTopics(threadRootId ? null : conversationId);
+  const [chosenTopic, setChosenTopic] = useState<string | null>(null);
+  // Another conversation in this screen starts in All.
+  const [topicFor, setTopicFor] = useState(conversationId);
+  if (topicFor !== conversationId) {
+    setTopicFor(conversationId);
+    setChosenTopic(null);
+  }
+  // A message to go to is looked for in All, not in the topic shown.
+  const [jumpedFor, setJumpedFor] = useState(jumpTo);
+  if (jumpTo !== jumpedFor) {
+    setJumpedFor(jumpTo);
+    if (jumpTo) setChosenTopic(null);
+  }
+  const topic = topicProp ?? chosenTopic ?? undefined;
+  const conv = useConversation(conversationId, { threadRootId: threadRootId ?? undefined, topic });
+  const pins = usePins(conversationId);
+  const messageActions = useMessageActions();
+  const { modules, copy, person } = useChatNative();
+  const toast = useToast();
+  const colors = useThemeRoles();
+  const reducedMotion = useReducedMotion();
+  const genesis = useGenesisModules();
+  const List = (genesis.list ?? FlatList) as unknown as ComponentType<ChatListProps>;
+  const mode = threadListMode(Boolean(genesis.list), reducedMotion);
+  const listRef = useRef<{
+    scrollToEnd?: (o?: { animated?: boolean }) => void;
+    scrollToIndex?: (o: { index: number; animated?: boolean; viewPosition?: number }) => void;
+    scrollToOffset?: (o: { offset: number; animated?: boolean }) => void;
+  } | null>(null);
+  // FlatList follows by hand: at the bottom (or not yet scrolled), new rows and a shorter list keep it there.
+  const atBottom = useRef(true);
+  // FlatList opens at the top and is moved to the bottom a frame later: until it has been, the top
+  // isn't "reached" (it would load an earlier page on every open).
+  const placed = useRef(!mode.followsByHand);
+  const toBottom = useCallback(
+    (animated: boolean) => {
+      const go = (a: boolean) => listRef.current?.scrollToEnd?.({ animated: a && !reducedMotion });
+      requestAnimationFrame(() => {
+        go(animated);
+        placed.current = true;
+      });
+      // Once more after the new row has its size (FlashList measures it after the first pass).
+      if (animated) setTimeout(() => go(true), 180);
+    },
+    [reducedMotion],
+  );
+  const composer = useChatComposer(conversationId, threadRootId, userId);
+  const { setReply } = composer;
+  const [actionsFor, setActionsFor] = useState<ChatMessage | null>(null);
+  const [viewer, setViewer] = useState<{ photos: ChatPhoto[]; index: number } | null>(null);
+  const [retryingAccess, setRetryingAccess] = useState(false);
+  // Where this screen starts on the window: the keyboard offset when the app gives none.
+  const rootRef = useRef<{ measureInWindow?: (callback: (x: number, y: number) => void) => void } | null>(null);
+  const [measuredTop, setMeasuredTop] = useState(0);
+  const measureTop = useCallback(() => {
+    rootRef.current?.measureInWindow?.((_x: number, y: number) => {
+      if (Number.isFinite(y)) setMeasuredTop(Math.max(0, Math.round(y)));
+    });
+  }, []);
+
+  // Names and avatars show for more than two people: the kind's rule once it is read, else the member count.
+  const group = conv.kind ? conv.kind.maxMembers !== 2 : conv.members.length > 2;
+  const peopleIds = useMemo(
+    () => [...conv.members.map((m) => m.userId), ...conv.messages.map((m) => m.senderId)],
+    [conv.members, conv.messages],
+  );
+
+  const rows = useMemo(() => buildThreadRows(conv.items, { me: userId, firstUnreadId: conv.firstUnreadId, group }), [conv.items, userId, conv.firstUnreadId, group]);
+  const paths = useMemo(() => conv.items.flatMap((i) => (i.type === "message" ? attachmentPaths(i.message.attachments) : [])), [conv.items]);
+  const urls = useFileUrls(paths);
+  const byId = useMemo(() => new Map(conv.messages.map((m) => [m.id, m])), [conv.messages]);
+  const linkIds = useMemo(() => linkPreviewIds(conv.messages), [conv.messages]);
+  const previews = useLinkPreviews(linkIds);
+  const people = usePeople(peopleIds);
+  const nameOf = useCallback(
+    (id: string | null) => (id === userId ? copy.you : ((person(id) ?? (id ? people[id] : undefined))?.name ?? copy.someone)),
+    [userId, copy, person, people],
+  );
+
+  const fail = useCallback(() => {
+    haptic(modules.haptics, "error");
+    toast.show({ title: copy.actionFailed, variant: "destructive" });
+  }, [modules.haptics, toast, copy.actionFailed]);
+
+  const reply = useCallback(
+    (m: ChatMessage) => {
+      setReply(replyTargetFor(m, nameOf(m.senderId), previewText(displayBody(m.body), m.attachments[0]?.kind, Boolean(m.deletedAt))));
+    },
+    [setReply, nameOf],
+  );
+
+  const onAction = useCallback(
+    (m: ChatMessage, action: MessageActionId) => {
+      switch (action) {
+        case "reply":
+          return reply(m);
+        case "copy":
+          void modules.clipboard
+            ?.setStringAsync(displayBody(m.body))
+            .then(() => toast.show({ title: copy.copied, variant: "success", duration: 1500 }))
+            .catch(fail);
+          return;
+        case "pin":
+        case "unpin":
+          void messageActions.pin(m, action === "pin").catch(fail);
+          return;
+        case "delete":
+          void messageActions.remove(m).catch(fail);
+          return;
+      }
+    },
+    [reply, modules.clipboard, toast, copy.copied, fail, messageActions],
+  );
+
+  const react = useCallback(
+    (m: ChatMessage, emoji: string, on: boolean) => {
+      haptic(modules.haptics, "select");
+      void messageActions.react(m, emoji, on).catch(fail);
+    },
+    [modules.haptics, fail, messageActions],
+  );
+
+  // Stable handlers, so MessageBubble's memo holds while someone types or a row elsewhere changes.
+  const { retry, discard, canPost: allowed } = conv;
+  const onLongPress = useCallback(
+    (message: ChatMessage) => {
+      haptic(modules.haptics, "select");
+      setActionsFor(message);
+    },
+    [modules.haptics],
+  );
+  const onSwipeReply = useCallback(() => haptic(modules.haptics, "select"), [modules.haptics]);
+  const onRetry = useCallback((clientId: string) => void retry(clientId), [retry]);
+  const onDiscard = useCallback((clientId: string) => void discard(clientId), [discard]);
+  // Read when a photo is tapped, so the handler stays stable for MessageBubble's memo.
+  const forGallery = useRef({ messages: conv.messages, urls });
+  forGallery.current = { messages: conv.messages, urls };
+  const onOpenImage = useCallback(
+    (uri: string, alt: string) => {
+      const { messages, urls: signed } = forGallery.current;
+      setViewer(galleryFor(messages, signed, uri, alt, (a) => (a.name ? `${copy.photo}, ${a.name}` : copy.photo)));
+    },
+    [copy.photo],
+  );
+  // Files that didn't survive a relaunch: photos and videos can be picked again; anything else can only be deleted.
+  const { reattach } = conv;
+  const picker = modules.imagePicker;
+  const onReattach = useCallback(
+    async (clientId: string, files: readonly PendingFile[]) => {
+      if (!picker) return;
+      try {
+        // Only the slots that were lost: reattach fills those and keeps the rest.
+        const lostCount = Math.max(1, files.filter((f) => f.lost).length);
+        const result = await picker.launchImageLibraryAsync({ mediaTypes: ["images", "videos"], allowsMultipleSelection: lostCount > 1, selectionLimit: lostCount, quality: 0.8 });
+        if (!result || result.canceled || !result.assets?.length) return;
+        const { attachments, notice } = filesFromAssets(result.assets, copy);
+        if (notice) toast.show({ title: notice, variant: "destructive" });
+        if (attachments.length) await reattach(clientId, attachments.map((a) => a.file));
+      } catch {
+        fail();
+      }
+    },
+    [picker, copy, toast, reattach, fail],
+  );
+  const observer = conv.role === "observer";
+  const { loadUntil } = conv;
+  // The message being gone to, for FlatList's retry once it has measured that far (by id: rows may have moved).
+  const jumpingTo = useRef<{ id: string; tries: number } | null>(null);
+  const retryTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => {
+    if (retryTimer.current) clearTimeout(retryTimer.current);
+  }, []);
+  const rowsNow = useRef(rows);
+  rowsNow.current = rows;
+  const { highlightedId, jumping } = useJumpToMessage({
+    target: jumpTo,
+    rows,
+    loading: conv.isLoading,
+    has: useCallback((id: string) => byId.has(id), [byId]),
+    loadUntil,
+    scrollTo: (index, id) => {
+      jumpingTo.current = { id, tries: 0 };
+      requestAnimationFrame(() => listRef.current?.scrollToIndex?.({ index, animated: !reducedMotion, viewPosition: 0.5 }));
+    },
+    onStart: () => {
+      atBottom.current = false;
+      placed.current = true;
+    },
+    onLanded: (id) => {
+      const m = byId.get(id);
+      if (m) AccessibilityInfo.announceForAccessibility?.(fill(copy.jumpedTo, { name: nameOf(m.senderId), text: previewText(displayBody(m.body), m.attachments[0]?.kind, Boolean(m.deletedAt)) }));
+    },
+    onGone: () => {
+      toast.show({ title: copy.messageGone });
+      // Back to where the thread opens: the newest messages.
+      atBottom.current = true;
+      toBottom(false);
+    },
+    onError: fail,
+  });
+  const reattachable = useCallback((files: readonly PendingFile[]) => files.every((f) => !f.lost || f.kind === "image" || f.kind === "video"), []);
+
+  const renderItem = useCallback(
+    ({ item: row }: { item: ThreadRow }) => {
+      if (row.type === "day") return <DaySeparator label={row.label} testID={`${testID}-day-${row.key}`} />;
+      if (row.type === "unread") return <UnreadDivider label={copy.newMessages} testID={`${testID}-unread`} />;
+      const m = row.item.type === "message" ? row.item.message : null;
+      const replyTo = m?.replyToId ?? (row.item.type === "pending" ? row.item.pending.input.replyToId : null);
+      return (
+        <MessageBubble
+          row={row}
+          me={userId}
+          urls={urls}
+          repliedTo={replyTo ? byId.get(replyTo) : null}
+          group={group}
+          reducedMotion={reducedMotion}
+          onLongPress={onLongPress}
+          onReply={allowed ? reply : undefined}
+          onSwipeReply={onSwipeReply}
+          onRetry={onRetry}
+          onDiscard={onDiscard}
+          onReattach={picker && row.item.type === "pending" && reattachable(row.item.pending.files ?? []) ? onReattach : undefined}
+          onToggleReaction={allowed ? react : undefined}
+          onOpenImage={onOpenImage}
+          observer={observer}
+          highlighted={Boolean(m && m.id === highlightedId)}
+          linkPreview={m ? previewToShow(previews[m.id]) : null}
+          linkPreviewImages={linkPreviewImages}
+          attachmentKinds={attachmentKinds}
+          onOpenAttachment={onOpenAttachment}
+          testID={`${testID}-message-${m?.id ?? row.key}`}
+        />
+      );
+    },
+    [testID, copy.newMessages, userId, urls, byId, group, reducedMotion, onLongPress, allowed, reply, onSwipeReply, onRetry, onDiscard, react, onOpenImage, picker, reattachable, onReattach, previews, linkPreviewImages, attachmentKinds, onOpenAttachment, observer, highlightedId],
+  );
+
+  // ---- Video messages ----
+  const [videoOpen, setVideoOpen] = useState(false);
+  // Minted when a take starts, so its bytes go the moment it stops. Kept for the next take when this
+  // one is thrown away, but only for this conversation and only while it is fresh (Mux's direct
+  // uploads expire; the uploader mints another if one has).
+  const preparedVideo = useRef<{ conversationId: string; at: number; upload: Promise<MintedUpload> } | null>(null);
+  const takePrepared = useCallback(() => {
+    const p = preparedVideo.current;
+    preparedVideo.current = null;
+    return p && p.conversationId === conversationId && Date.now() - p.at < PREPARED_UPLOAD_MS ? p.upload : null;
+  }, [conversationId]);
+  const onVideoStart = useCallback(() => {
+    if (!videoUpload) return;
+    const before = preparedVideo.current;
+    const kept = takePrepared();
+    const upload = kept ?? videoUpload.create(conversationId);
+    upload.catch(() => {
+      if (preparedVideo.current?.upload === upload) preparedVideo.current = null;
+    });
+    preparedVideo.current = { conversationId, at: kept && before ? before.at : Date.now(), upload };
+  }, [videoUpload, conversationId, takePrepared]);
+  const replyNow = composer.state.replyTo?.messageId ?? null;
+  const onVideoRecorded = useCallback(
+    (video: RecordedVideo) => {
+      videoUploads.start({ conversationId, userId, video, extra: { replyToId: replyNow, threadRootId }, send: outbox.send, videoUpload, prepared: takePrepared(), openFile: modules.openFile });
+      if (replyNow) setReply(null);
+      atBottom.current = true;
+      toBottom(true);
+    },
+    [conversationId, userId, replyNow, threadRootId, outbox, videoUpload, takePrepared, modules.openFile, setReply, toBottom],
+  );
+
+  const activity = activityLine(conv.activity, (id) => nameOf(id));
+  // Unknown while access loads: the composer waits quietly instead of saying you can't post. A
+  // read that failed (and no role known from before) offers Retry in the composer's place.
+  const topics = topicsState.topics;
+  const currentTopic = topic ? (topics.find((t) => t.topic === topic) ?? null) : null;
+  const topicClosed = topicClosedFor(currentTopic, conv.role);
+  const showTopicBar = !threadRootId && topicProp === undefined && (topics.length > 0 || (showTopics && canManageTopics(conv.role)));
+  const canPost = topicClosed ? false : conv.accessLoading ? null : conv.canPost;
+  const disabledReason = topicClosed ? copy.topicClosedNotice : composerDisabledReason(canPost, conv.conversation, conv.role, copy);
+  const awayLine = useAwayLine(availability ? conversationId : null, conv.members, userId, nameOf);
+  // Scheduled send: not in a reply thread (a scheduled message has no thread).
+  const canSchedule = scheduling && !threadRootId && canPost === true;
+  const schedule = useScheduleSend({ conversationId, topic: topic ?? null, composer, enabled: scheduling && !threadRootId });
+  const accessFailed = Boolean(conv.accessError) && conv.role === null && !conv.accessLoading;
+  const { refetchAccess } = conv;
+  const retryAccess = useCallback(() => {
+    setRetryingAccess(true);
+    void Promise.resolve(refetchAccess()).finally(() => setRetryingAccess(false));
+  }, [refetchAccess]);
+  const KeyboardAvoiding = (modules.keyboardAvoidingView ?? KeyboardAvoidingView) as ComponentType<Record<string, unknown>>;
+  const offset = keyboardVerticalOffset ?? measuredTop;
+  const keyboardProps = modules.keyboardAvoidingView
+    ? { behavior: "translate-with-padding", keyboardVerticalOffset: offset }
+    : { behavior: Platform.OS === "ios" ? "padding" : undefined, keyboardVerticalOffset: offset };
+
+  const empty = !conv.isLoading && rows.length === 0;
+  return (
+    <ChatPeopleScope userIds={peopleIds}>
+      <SafeAreaView ref={rootRef as never} onLayout={measureTop} testID={testID} edges={["left", "right", "bottom"]} style={{ flex: 1, backgroundColor: colors.groupedBackground }}>
+        <KeyboardAvoiding style={{ flex: 1 }} {...keyboardProps}>
+          {showTopicBar ? (
+            <ChatTopicBar topics={topics} value={topic ?? null} onValueChange={setChosenTopic} canManage={canManageTopics(conv.role)} onSetTopic={topicsState.setTopic} testID={`${testID}-topics`} />
+          ) : null}
+          <ChatAwayLine text={awayLine} testID={`${testID}-away`} />
+          <View style={{ flex: 1 }}>
+            {conv.isLoading ? (
+              <LoadingThread testID={`${testID}-loading`} />
+            ) : empty ? (
+              <View style={{ flex: 1, justifyContent: "center" }}>
+                <NativeEmptyState variant="first-run" title={copy.threadEmptyTitle} body={copy.threadEmptyBody} testID={`${testID}-empty`} />
+              </View>
+            ) : (
+              <List
+                ref={listRef}
+                testID={`${testID}-list`}
+                data={rows}
+                renderItem={renderItem}
+                keyExtractor={(row) => row.key}
+                getItemType={(row) => (row.type === "message" ? (row.mine ? "mine" : "theirs") : row.type)}
+                onStartReached={() => {
+                  // Not while going to a message: its pages are loading, and new rows would move it.
+                  if (placed.current && !jumping && conv.hasEarlier && !conv.loadingEarlier) void conv.loadEarlier();
+                }}
+                onStartReachedThreshold={0.5}
+                keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="interactive"
+                contentContainerStyle={{ paddingVertical: 8 }}
+                maintainVisibleContentPosition={mode.maintainVisibleContentPosition}
+                extraData={highlightedId}
+                onScrollToIndexFailed={({ index, averageItemLength }) => {
+                  // FlatList hasn't measured that far up yet: get near it, then try again (three times at most).
+                  listRef.current?.scrollToOffset?.({ offset: Math.max(0, index * averageItemLength - 200), animated: false });
+                  const target = jumpingTo.current;
+                  if (!target || target.tries >= 3) return;
+                  target.tries += 1;
+                  if (retryTimer.current) clearTimeout(retryTimer.current);
+                  retryTimer.current = setTimeout(() => {
+                    const at = rowIndexOf(rowsNow.current, target.id);
+                    if (at >= 0) listRef.current?.scrollToIndex?.({ index: at, animated: !reducedMotion, viewPosition: 0.5 });
+                  }, 250);
+                }}
+                {...(mode.followsByHand
+                  ? {
+                      scrollEventThrottle: 32,
+                      onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+                        atBottom.current = nearBottom(e.nativeEvent);
+                      },
+                      onContentSizeChange: () => {
+                        if (atBottom.current) toBottom(false);
+                      },
+                      onLayout: () => {
+                        if (atBottom.current) toBottom(false);
+                      },
+                    }
+                  : {})}
+                ListHeaderComponent={
+                  conv.hasEarlier ? (
+                    <EarlierAnchor loading={conv.loadingEarlier} label={copy.loadEarlier} onPress={() => void conv.loadEarlier()} testID={`${testID}-earlier`} />
+                  ) : null
+                }
+                ListFooterComponent={activity ? <ActivityLine text={activity} testID={`${testID}-activity`} /> : null}
+              />
+            )}
+          </View>
+          {scheduling && !threadRootId ? <ChatScheduledBar conversationId={conversationId} testID={`${testID}-scheduled`} /> : null}
+          <VideoUploadTray conversationId={conversationId} userId={userId} testID={`${testID}-video-uploads`} />
+          {accessFailed ? (
+            <ChatAccessError onRetry={retryAccess} retrying={retryingAccess} testID={`${testID}-access-error`} />
+          ) : (
+          <ChatComposer
+            composer={composer}
+            userId={userId}
+            placeholder={currentTopic ? fill(copy.topicPlaceholder, { name: currentTopic.title }) : undefined}
+            onSchedule={canSchedule ? schedule.request : undefined}
+            canPost={canPost}
+            disabledReason={disabledReason}
+            role={conv.role}
+            onSend={({ input, files }) => {
+              void conv.send(input, files).catch(fail);
+              // What you send is what you look at next, wherever the list was.
+              atBottom.current = true;
+              toBottom(true);
+            }}
+            signalTyping={conv.signalTyping}
+            signalRecording={conv.signalRecording}
+            onRecordVideo={modules.camera ? () => setVideoOpen(true) : undefined}
+            testID={`${testID}-composer`}
+          />
+          )}
+        </KeyboardAvoiding>
+        <MessageActionsSheet
+          message={actionsFor}
+          context={{ me: userId, role: conv.role, canPost: conv.canPost, pinned: actionsFor ? pins.includes(actionsFor.id) : false, canPin: conv.canPin, canCopy: Boolean(modules.clipboard) }}
+          onClose={() => setActionsFor(null)}
+          onReact={react}
+          onAction={onAction}
+          testID={`${testID}-actions`}
+        />
+        <ChatPhotoViewer photos={viewer?.photos ?? null} initialIndex={viewer?.index} onClose={() => setViewer(null)} testID={`${testID}-viewer`} />
+        {canSchedule ? <ChatScheduleSheet open={schedule.open} onOpenChange={schedule.setOpen} onSchedule={(at) => void schedule.scheduleAt(at)} testID={`${testID}-schedule`} /> : null}
+        <ChatVideoRecorder
+          open={videoOpen}
+          onClose={() => setVideoOpen(false)}
+          limitMs={recordingLimitMs(conv.role)}
+          onStart={onVideoStart}
+          onTick={conv.signalRecordingVideo}
+          onRecorded={onVideoRecorded}
+          testID={`${testID}-video-recorder`}
+        />
+      </SafeAreaView>
+    </ChatPeopleScope>
+  );
+}
+
+function DaySeparator({ label, testID }: { label: string; testID: string }) {
+  const colors = useThemeRoles();
+  return (
+    <View testID={testID} accessibilityRole="header" style={{ alignItems: "center", paddingVertical: 10 }}>
+      <NativeText preset="caption" style={{ color: colors.secondaryLabel, fontWeight: "600" }}>
+        {label}
+      </NativeText>
+    </View>
+  );
+}
+
+function UnreadDivider({ label, testID }: { label: string; testID: string }) {
+  const colors = useThemeRoles();
+  return (
+    <View testID={testID} accessible accessibilityLabel={label} style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 16, paddingVertical: 8 }}>
+      <View style={{ flex: 1, height: 1, backgroundColor: colors.tint }} />
+      <NativeText preset="caption" style={{ color: colors.tint, fontWeight: "600" }}>
+        {label}
+      </NativeText>
+      <View style={{ flex: 1, height: 1, backgroundColor: colors.tint }} />
+    </View>
+  );
+}
+
+function ActivityLine({ text, testID }: { text: string; testID: string }) {
+  const colors = useThemeRoles();
+  return (
+    <View testID={testID} accessibilityLiveRegion="polite" style={{ paddingHorizontal: 20, paddingVertical: 6 }}>
+      <NativeText preset="caption" style={{ color: colors.secondaryLabel, fontStyle: "italic" }}>
+        {text}
+      </NativeText>
+    </View>
+  );
+}
+
+function EarlierAnchor({ loading, label, onPress, testID }: { loading: boolean; label: string; onPress: () => void; testID: string }) {
+  const colors = useThemeRoles();
+  return (
+    <View style={{ alignItems: "center", paddingVertical: 12 }}>
+      {loading ? (
+        <View testID={`${testID}-loading`} style={{ gap: 8, alignItems: "center" }}>
+          <NativeSkeleton width={180} height={14} />
+          <NativeSkeleton width={120} height={14} />
+        </View>
+      ) : (
+        <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={label} onPress={onPress} style={{ minHeight: 44, justifyContent: "center", paddingHorizontal: 16 }}>
+          <NativeText preset="label" style={{ color: colors.tint }}>
+            {label}
+          </NativeText>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+function LoadingThread({ testID }: { testID: string }) {
+  return (
+    <View testID={testID} style={{ flex: 1, justifyContent: "flex-end", padding: 16, gap: 10 }}>
+      <NativeSkeleton width={200} height={36} className="rounded-2xl" />
+      <View style={{ alignItems: "flex-end" }}>
+        <NativeSkeleton width={160} height={36} className="rounded-2xl" />
+      </View>
+      <NativeSkeleton width={240} height={36} className="rounded-2xl" />
+    </View>
+  );
+}