let model = new ScrollFollowModel({ pinned: true });
let turns = [];
let streaming = false;

// A reply arrives a word at a time, which is what the viewport follows.
function send() {
	let exchange = script[sent++];
	let answerId = `answer-${sent}`;
	turns = [
		...turns,
		{ id: `ask-${sent}`, from: "reader", body: exchange.ask },
		{ id: answerId, from: "assistant", body: "" },
	];
	streaming = true;
	void handle.update();

	// Sending is the reader asking to be at the live edge, wherever they were reading.
	model.scrollToEnd();

	let words = exchange.answer.split(" ");
	let written = 0;

	timer = setInterval(() => {
		written += 1;
		turns = [
			...turns.slice(0, -1),
			{ id: answerId, from: "assistant", body: words.slice(0, written).join(" ") },
		];
		if (written >= words.length) {
			clearInterval(timer);
			streaming = false;
		}
		void handle.update();
	}, 45);
}

<MessageScroller>
	<MessageScroller.Viewport mix={[messageFollow(model), scrollFade({ axis: "block" })]}>
		<MessageScroller.Content aria-busy={streaming || undefined}>
			{turns.map((turn) => (
				<MessageScroller.Item key={turn.id} messageId={turn.id} scrollAnchor mix={[p(3)]}>
					{/* The reader's own turns hug the trailing edge in a frame; everyone else's
					    run unframed, so the answer reads as one column of prose. */}
					<Bubble
						variant={turn.from === "reader" ? "muted" : "ghost"}
						align={turn.from === "reader" ? "end" : "start"}
					>
						<Bubble.Content>{turn.body}</Bubble.Content>
					</Bubble>
				</MessageScroller.Item>
			))}
		</MessageScroller.Content>
	</MessageScroller.Viewport>

	{/* The control floats over the frame rather than scrolling inside it, so the
	    viewport's own edge fade stays on the conversation. */}
	<MessageScroller.Button
		aria-label="Jump to latest"
		hidden={false}
		data-scroll-jump
		mix={[when("&:not([data-visible])", hidden())]}
	>
		<ArrowDownIcon />
	</MessageScroller.Button>
</MessageScroller>