Prompt suggestions

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

The default row sits at the body-paragraph scale, so a suggestion reads at the same weight as the message it will become. Compact drops a step for rows that sit alongside a live conversation, where the suggestions are a side offer rather than the main event.

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.

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.

One suggestion per line. In a narrow column a wrapped row breaks wherever the labels happen to run out of room, and the ragged edge reads as an accident rather than a list. The pills still hug their labels: stretching them to a shared width would make a set of prompts look like a set of buttons.

An even row of quiet blocks, each an icon over its label and a line saying what it leads to. Tiles answer the pointer in place: the fill firms up and the border darkens. The row folds to fewer columns as it narrows.

Each suggestion under a tinted cover that holds its icon, with the label over the question it asks. The covers take the pixel inks in turn, so a row is told apart by colour as well as by title, and a card lifts on hover the way a navigation tile does.

While the suggestions are being generated, placeholder pills hold their place: the chip's real shell, with a shimmer bar where the label is still being written. The shell keeps the row's exact height, so nothing shifts when the chips land. Screen readers hear a busy list, not a set of empty items.

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.

A row that stays on screen after use can keep the choice in view. Pass the chip that was taken as the value and the row becomes a record: that chip outlined in the strongest ink, the rest faded behind a dotted line, none of them tappable. It is the same treatment an answered question card gets, without the mark.