Prompt suggestions

A row of tappable prompts to start or steer a conversation

Each suggestion is a clickable chip, so one component owns the pill look. The row scrolls sideways with pure CSS edge fades, or wraps into a block for empty-state hero placements. Tapping a suggestion fires a callback with its stable id, never its display text.

The row

A single line of suggestions. Icons are optional and the label carries the meaning; keep each prompt short enough to read in a glance.

Overflow and fades

When the row overflows, a CSS mask fades the edges out as the hint that there is more to scroll. No scroll listeners, no measurement: the gradient does all the work.

Wrapped

The wrap variant trades scrolling for multiple lines. Use it in an empty conversation, where the suggestions are the main event and everything should be visible at once.

What would you like to do today?

Steering mid-conversation

After an answer, a short row of follow-ups keeps the thread moving without making anyone type. The chips read as options, not as messages, because the list sits outside the transcript.

You2:41 PM
Compare the two routes for the morning commute.
Assistant2:41 PM
The riverside route is two minutes slower but far more reliable in the rain. The highway route wins only on dry days with light traffic.