JumpToLatest

Back to the newest message: an arrow down on white, floating over a thread's foot while the newest is scrolled out of sight.

Playground

A secondary icon button made solid white with the floating glass shadow (frost inside the booking card's frost goes grey). It rises in on duration-fast / ease-smooth-out from --distance-base lower and --scale-medium, and sinks back the same way, inert, once the newest is in view. Tap it in the preview to send it away.

import { JumpToLatest } from "@/components/shared/jump-to-latest";

<div className="relative min-h-0 flex-1">
  <div ref={listRef} onScroll={onScroll} className="h-full overflow-y-auto">
    {/* the thread */}
  </div>
  <JumpToLatest
    visible={away}
    label="Latest message"
    onJump={toNewest}
    className="absolute bottom-3 left-1/2 -translate-x-1/2"
  />
</div>

JumpToLatest

Newest out of sight

API reference

Prop	Type	Default	Description
visible	boolean	—	The newest message is out of sight (useVenueChat's away). Hidden, it can't be reached by tap or Tab.
label	string	—	Its accessible name: “Latest message”.
onJump	() => void	—	Scrolls the thread to its newest message.
className	string	—	Where it floats in the thread's frame: absolute, centred over the foot.

Guidelines

In the thread's frame, never its scroll: it stays put while the messages move under it.
Only once the conversation runs. Before the first message there is no newest to go back to.