` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: AI chats - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Three prompts ```html

Try asking

``` ### One long prompt wraps ```html

Try asking

``` ### Words of their own · data-suggestion ```html

Try asking

``` ### On their own, as buttons · no composer ```html

Quick filters

``` ### A single line of two ```html

Suggested

``` ## Every state - Rest - Hover - Pressed - Focused - Disabled Hover, pressed and focus are forced with `.is-hover`, `.is-down` and `.is-focus`; checked and disabled are real. ## API | Name | Kind | Values | What it does | | - | - | - | - | | div.tui-suggestions[role="group"][aria-labelledby] | element | named | The group of plates, with a printed label above it. | | [data-for] | attribute | a selector | The composer (a form.tui-composer) or text area the plates fill. Without it the first composer or text area beside the group is used. | | button.tui-key.tui-key--sm.tui-suggestion | element | a real button | One plate. Its words are the words it writes. May be a line or two; it wraps and stays left-aligned. | | [data-suggestion] | attribute | on a plate | The words to write when they are not the plate’s own text, for a plate that shows a short name for a long prompt. | | p.tui-suggestions__said[role="status"] | element | optional | Says what was done (“Wrote “Is Studio A free at three?”. Press Enter to send.”), and says so when it replaced words. | | tui-suggestion | event | bubbles from the group | Fired after a press, with detail { text, target, replaced }. With no box to fill, target is null and the page decides what the press means. | | suggestionText() · suggestionSays() | function | pure | The words a plate writes, and the sentence said after a press. | | fillSuggestion(target, text) | function | needs kit.mjs | Write words into a composer or text area as typing does, and return { filled, replaced }. | ## Markup ```html

Try asking

``` ```js import '/kit/kit.mjs'; document.addEventListener('tui-suggestion', (e) => { console.log(e.detail.text, e.detail.target, e.detail.replaced); // the words, the box that was filled (or null), and whether it held words already }); ``` The demo on the page: ```html

Studio assistant

Try asking

``` ## Usage notes Press a plate: its words are written into the prompt box and the caret is at the end. Type something of your own and press another plate: it replaces your words and says so, and Ctrl+Z (or Cmd+Z) brings yours back. Nothing is sent until you press Enter. ## Accessibility - Each plate is a real button in a list inside a labelled group, so there is one tab stop for each and the label names the group. The words on the plate are its name; the words a long prompt writes are the same unless data-suggestion says otherwise, and then the plate’s short name is what is read. - A press writes the words as typing does, so the composer counts them, enables its send key and keeps the browser’s undo: if the box held words of the person’s own, they are replaced, it is said so, and Ctrl+Z gives them back. Nothing is ever sent by a press. - After a press the focus is in the text area with the caret at the end, so the next key typed edits the prompt. What happened is said once, politely: “Wrote …. Press Enter to send.” - The plates keep the key’s states (hover, pressed, focus ring, disabled), so none of them is told apart by colour. On a phone each is 44px tall and they wrap onto more lines rather than scrolling. ## How it’s built The kit’s key, small, allowed to wrap, in a list that wraps; there is no new drawing at all. The script is one click handler on the document: it finds the box, selects its words, types the new ones in so the undo history keeps what was there, and puts the caret at the end. ## Rules Offer a few things worth asking: small plates under the prompt box that write their words into it, and leave the sending to the person. The full rules are in `suggestion-chips.rules.md` in the brain, which ships with the Kit. ## Related parts - [Composer](https://tactileui.dev/parts/composer): The prompt box. One deep recess holds the text and the keys sit on its floor: attach at one end; at the other a small LCD that counts tokens, amber near the limit and red over it, and the send key, which becomes a stop key while a reply runs. It is a real form with a labelled text area. Enter sends and Shift and Enter make a new line, and the send key is disabled while there is nothing to send. The text grows as you type, up to a height, then scrolls. - [Chip group](https://tactileui.dev/parts/chip-group): Small plates you press on and off, laid in a tray that wraps: the filters over a table, the topics on a form, the sizes on a product. Each chip is a native checkbox, or a radio when only one may be down, drawn as a small cap that sinks below the tray with its lamp lit. A limit may be set on how many go down at once. - [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed. - [Chat](https://tactileui.dev/parts/chat): An AI chat as a teleprinter, with restraint: what you type sits in a recess; the answer prints on a perforated slip with an amber lamp at the print head; code comes up on display glass. Composer with attachments and a send key that becomes Stop.