fix(mobile): native chat streams replies token by token

apps/mobile/components/ai-elements/conversation.tsx

@@ -24,6 +24,10 @@ import { Text } from "@/components/ui/text";
 import { cn } from "@/lib/utils";
 
 const AT_BOTTOM_THRESHOLD = 48;
+const MAINTAIN_SCROLL_AT_END = {
+	animated: false,
+	on: { dataChange: true, layout: true },
+};
 
 interface ConversationContextType {
 	isAtBottom: boolean;
@@ -60,11 +64,14 @@ export const Conversation = <ItemT,>({
 	contentContainerClassName,
 	contentContainerStyle,
 	onScroll,
+	onScrollBeginDrag,
+	onScrollEndDrag,
 	children,
 	...listProps
 }: ConversationProps<ItemT>) => {
 	const listRef = useRef<LegendListRef>(null);
 	const [isAtBottom, setIsAtBottom] = useState(true);
+	const [isDragging, setIsDragging] = useState(false);
 	const resolvedContentContainerStyle = useResolveClassNames(
 		contentContainerClassName ?? "",
 	);
@@ -81,6 +88,22 @@ export const Conversation = <ItemT,>({
 		[onScroll],
 	);
 
+	const handleScrollBeginDrag = useCallback(
+		(event: NativeSyntheticEvent<NativeScrollEvent>) => {
+			setIsDragging(true);
+			onScrollBeginDrag?.(event);
+		},
+		[onScrollBeginDrag],
+	);
+
+	const handleScrollEndDrag = useCallback(
+		(event: NativeSyntheticEvent<NativeScrollEvent>) => {
+			setIsDragging(false);
+			onScrollEndDrag?.(event);
+		},
+		[onScrollEndDrag],
+	);
+
 	const scrollToBottom = useCallback(() => {
 		listRef.current?.scrollToEnd({ animated: true });
 	}, []);
@@ -105,11 +128,9 @@ export const Conversation = <ItemT,>({
 					// makes expanding a collapsible (tool card) yank the whole list up,
 					// so the chevron the user just tapped jumps away. Streaming still
 					// sticks to bottom via `dataChange` (every chunk replaces the data
-					// array) and `layout` covers keyboard/list resizes.
-					maintainScrollAtEnd={{
-						animated: false,
-						on: { dataChange: true, layout: true },
-					}}
+					// array) and `layout` covers keyboard/list resizes. Off while a
+					// finger drags, or each chunk pulls the reader back down.
+					maintainScrollAtEnd={isDragging ? false : MAINTAIN_SCROLL_AT_END}
 					maintainScrollAtEndThreshold={0.15}
 					recycleItems={false}
 					renderItem={renderItem}
@@ -120,6 +141,8 @@ export const Conversation = <ItemT,>({
 							: contentContainerStyle
 					}
 					onScroll={handleScroll}
+					onScrollBeginDrag={handleScrollBeginDrag}
+					onScrollEndDrag={handleScrollEndDrag}
 					ref={listRef}
 				/>
 				{children}

apps/mobile/screens/(authenticated)/workspace/[id]/components/ChatSessionView/ChatSessionView.tsx

@@ -55,6 +55,7 @@ import { DOCK_CHIP_HEIGHT, DockChip } from "./components/DockChip";
 import { ScrollToBottom } from "./components/ScrollToBottom";
 import { StickToBottom } from "./components/StickToBottom";
 import { useTapHandlers } from "./hooks/useTapHandlers";
+import { type TextRow, withRowText } from "./utils/withRowText";
 
 const CONFIG_OPTIONS_GRACE_MS = 1000;
 const BANNER_SPACE = 36;
@@ -139,6 +140,20 @@ export const ChatSessionView = forwardRef<
 		() => groupActivity(chatRows(groups, chat.outbox)),
 		[groups, chat.outbox],
 	);
+	const [textRowCache] = useState(() => new WeakMap<ChatRow, TextRow>());
+	const textRows = useMemo(
+		() =>
+			withRowText(
+				rows,
+				(row) =>
+					row.kind === "item" &&
+					(row.item.kind === "agent_message" || row.item.kind === "reasoning")
+						? displayText(chat.snapshot, row.item.id)
+						: "",
+				textRowCache,
+			),
+		[rows, chat.snapshot, textRowCache],
+	);
 	const positions = useMemo(() => groupPositions(rows), [rows]);
 	const replyEnds = useMemo(() => lastReplyKeys(rows), [rows]);
 	const [dockHeight, setDockHeight] = useState(0);
@@ -367,7 +382,7 @@ export const ChatSessionView = forwardRef<
 	}, [openActivityKey, rows, chat.snapshot]);
 
 	const renderRow = useCallback(
-		({ item: row, index }: { item: ChatRow; index: number }) => {
+		({ item: { row, text }, index }: { item: TextRow; index: number }) => {
 			const position = positions[index] ?? "single";
 			const parent =
 				row.kind === "item"
@@ -390,13 +405,7 @@ export const ChatSessionView = forwardRef<
 						onRetryPrompt={chat.retryPrompt}
 						isLastReply={replyEnds.has(row.key)}
 						row={row}
-						text={
-							row.kind === "item" &&
-							(row.item.kind === "agent_message" ||
-								row.item.kind === "reasoning")
-								? displayText(chat.snapshot, row.item.id)
-								: ""
-						}
+						text={text}
 					/>
 				</View>
 			);
@@ -440,8 +449,8 @@ export const ChatSessionView = forwardRef<
 						contentContainerStyle={{
 							paddingTop: headerHeight + 16 + (banner ? BANNER_SPACE : 0),
 						}}
-						data={rows}
-						keyExtractor={(row) => row.key}
+						data={textRows}
+						keyExtractor={({ row }) => row.key}
 						ListHeaderComponent={
 							chat.hasOlder ? (
 								<Pressable

apps/mobile/screens/(authenticated)/workspace/[id]/components/ChatSessionView/utils/withRowText/index.ts

@@ -0,0 +1 @@
+export { type TextRow, withRowText } from "./withRowText";

apps/mobile/screens/(authenticated)/workspace/[id]/components/ChatSessionView/utils/withRowText/withRowText.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, test } from "bun:test";
+import type { ChatRow } from "../../../../utils/chatRows";
+import { withRowText } from "./withRowText";
+
+const working: ChatRow = { kind: "working", key: "working:t1" };
+const reply: ChatRow = { kind: "working", key: "reply" };
+
+describe("withRowText", () => {
+	test("gives only the row whose text changed a new entry", () => {
+		const cache = new WeakMap();
+		const texts = new Map([[reply, "Hel"]]);
+		const textOf = (row: ChatRow) => texts.get(row) ?? "";
+
+		const first = withRowText([working, reply], textOf, cache);
+		texts.set(reply, "Hello");
+		const second = withRowText([working, reply], textOf, cache);
+
+		expect(second[0]).toBe(first[0]);
+		expect(second[1]).not.toBe(first[1]);
+		expect(second[1]).toEqual({ row: reply, text: "Hello" });
+	});
+});

apps/mobile/screens/(authenticated)/workspace/[id]/components/ChatSessionView/utils/withRowText/withRowText.ts

@@ -0,0 +1,26 @@
+import type { ChatRow } from "../../../../utils/chatRows";
+
+export interface TextRow {
+	row: ChatRow;
+	text: string;
+}
+
+/**
+ * Pairs each row with its text. A row keeps its entry until its text changes,
+ * so a list that re-renders a cell only when its data changes updates just
+ * the streaming row.
+ */
+export function withRowText(
+	rows: readonly ChatRow[],
+	textOf: (row: ChatRow) => string,
+	previous: WeakMap<ChatRow, TextRow>,
+): TextRow[] {
+	return rows.map((row) => {
+		const text = textOf(row);
+		const kept = previous.get(row);
+		if (kept?.text === text) return kept;
+		const entry = { row, text };
+		previous.set(row, entry);
+		return entry;
+	});
+}