Follow & Jump-to-Latest

The transcript sticks to the bottom while streaming, never yanks you back after you scroll up to read, and shows a jump-to-latest button when you have.

While an answer streams the transcript follows it to the bottom — but the moment you scroll up to re-read something, following stops and a jump-to-latest button appears instead of dragging you back down.

transcript/scroll is called on every publish and from the scroll DOM event — the follow decision is data, not a scroll handler.

Quick Start

1. Seed the follow state

   import { initialFollow } from "praisonai-mobile/ui/transcript/scroll";
   
   let follow = initialFollow; // { sticky: true, pendingAutoScrolls: 0 }

   The app starts following, so the first tokens paint at the bottom.

2. Update on scroll

   import { onScroll } from "praisonai-mobile/ui/transcript/scroll";
   
   transcript.addEventListener("scroll", () => {
     follow = onScroll(follow, metricsOf());
     applyFollow();
   });

   Only a scroll event changes whether the view is following.

3. React to new content

   import { onContentChanged } from "praisonai-mobile/ui/transcript/scroll";
   
   const outcome = onContentChanged(follow, metricsOf());
   follow = outcome.state;
   if (outcome.action.kind === "scrollTo") transcript.scrollTop = outcome.action.top;

   New content asks to be scrolled to; whether it is depends on the follow state.

The follow state machine

Following is on by default. A user scroll off the bottom turns it off; a tap on jump-to-latest turns it back on.

The affordance

The jump-to-latest button lives inside the chat screen, hidden by default. Its visibility is driven entirely by shouldShowJumpToLatest(follow).

// main.ts — the affordance and its toggle.
const jumpLatest = doc.createElement("button");
jumpLatest.dataset["action"] = "jump-latest";
jumpLatest.hidden = true;

const applyFollow = (): void => {
  jumpLatest.hidden = !shouldShowJumpToLatest(follow);
};

shouldShowJumpToLatest shows the button exactly when following is off — the user has scrolled up off the bottom of a streaming transcript.

The tap is a scroll decision, not an intent

The delegated click listener on root special-cases jump-latest before intentFrom, because it is a scroll decision, not an engine call — it never reaches the intent router.

// main.ts — root click listener.
const chain = chainOf(target);
if (chain.some((el) => el.dataset["action"] === "jump-latest")) {
  const outcome = jumpToLatest(follow, metricsOf());
  follow = outcome.state;
  if (outcome.action.kind === "scrollTo") transcript.scrollTop = outcome.action.top;
  applyFollow();
  event.preventDefault();
  return;
}
const intent = intentFrom(chain);

How It Works

The subtle part is that our own auto-scroll comes back as a scroll event a frame later. Counting outstanding auto-scrolls is what stops that correction — caught mid-flight at a position that is not yet the bottom — from being read as “the user scrolled up”.

// onScroll — one of ours coming back is consumed, following left alone.
if (state.pendingAutoScrolls > 0) {
  return { sticky: state.sticky, pendingAutoScrolls: state.pendingAutoScrolls - 1 };
}
return { sticky: isAtBottom(metrics, thresholdPx), pendingAutoScrolls: 0 };

Best Practices

Related