Chat thread

Storybook

The conversation column that owns the scrolling

Turns stack inside a scrollable column with consistent gutters, a fade at either end, and a scrollbar that only appears while scrolling is happening. When a new turn is appended it floats to the top of the viewport, pushing the conversation upward and leaving the response room to stream in below.

Send anchoring

Sending appends a turn and scrolls it to the top. A trailing spacer grows so even a short newest exchange can reach the top, and reduced motion makes the glide instant.

What does the design system cover?
Foundations first: colour, type, spacing, and motion. The component library builds on those tokens, so every surface stays consistent.

Edge fades

A pure CSS mask fades the first and last lines as they scroll out, hinting there is more in either direction. No scroll listeners are involved.

What does the design system cover?
Foundations first: colour, type, spacing, and motion. The component library builds on those tokens, so every surface stays consistent.
How does dark mode work?
Every semantic token carries a light and a dark value, so components never branch on the theme themselves.
And the chat pieces?
The ai category holds the conversation primitives. Messages, the composer, live status, and reasoning all compose into a full chat surface.
Which parts are new here?
This thread is the newest piece. It owns the scrolling, the edge fades, and the way a sent message floats to the top.

A quiet scrollbar

The content gutters live on an inner wrapper, so the thin scrollbar rides the far edge of the component instead of sitting inside the conversation. It stays invisible until the thread is actually scrolling, then fades back out.