` - 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 ### Yours · sent ```html

YouSent14:02

Is Studio A free from 15:00 today?

``` ### Yours · sending, the lamp blinking ```html

YouSending14:02

Is Studio A free from 15:00 today?

``` ### Yours · not sent, with Retry ```html

YouNot sent14:02

Is Studio A free from 15:00 today?

``` ### The assistant’s · a torn slip ```html

Studio assistant14:02

Studio A is free from 15:00 to 18:00 today. Room 2 is held for Tom until 16:30.

``` ### Someone else’s · a plate ```html

Tom Hale14:02

I can take Room 2 after 16:30 if that helps.

``` ### Several paragraphs ```html

Studio assistant14:02

Studio A is free from 15:00 to 18:00.

Room 2 is held for Tom until 16:30, then free. I have not booked anything.

``` ### No delivery to speak of · no data-state ```html

You14:02

Is Studio A free from 15:00 today?

You Not sent 14:02

Is Studio A free from 15:00 today?

``` ```js import { setMessageState } from '/kit/kit.mjs'; setMessageState(message, 'sending'); // the lamp follows data-state; the words change with it document.addEventListener('tui-message-retry', async (e) => { try { await resend(e.detail.message); setMessageState(e.detail.message, 'sent'); } catch { setMessageState(e.detail.message, 'failed'); } }); ``` The demo on the page: ```html

Thread · Studio A

YouSent14:02

Is Studio A free from 15:00 today?

Studio assistant14:03

Studio A is free from 15:00 to 18:00 today. Room 2 is held for Tom until 16:30.

Tom Hale14:05

I can take Room 2 after 16:30 if that helps.

``` ## Usage notes Press Send it: the message goes to sending, with its amber lamp blinking, then to sent. Press Make it fail and then Retry: the key goes back to sending and the focus stays on the message. The words and the lamp always agree; the lamp is never the news. ## Accessibility - The message is an `

` named by its sender. The sender, the time, the state and the text are all real text, read in that order; the time is a `` with a datetime. - The state is a polite `role="status"` region, so changing its words says them aloud without moving focus. The lamp is hidden from a screen reader and always sits beside the word that says the same. - A failure is also bold and says “Not sent”, so it is never a red lamp alone, and Retry appears as a real key in the reading order straight after the text. The words on the paper are in the paper’s own ink, above 6:1. - When Retry is pressed with the keyboard, the key goes away, so the focus is moved to the message, which takes a visible 2px ring. The blink stops under reduced motion and the lamp stays lit. - The key is 44px tall on a phone and the plate never scrolls sideways: long words break inside it. ## How it’s built The recess is the one the chat uses for what you type, and the slip is the chat’s: a paper layer cut by a mask with small bites along the top and teeth at the foot, lifted by a shadow filter that follows the torn edge. It is made lighter here, with the perforation as two rows of gradients and no fibres, so a page can hold many. In the flat finishes the paper’s edge is drawn as a line, as the chat’s is. ## Rules A single message with its sender, its time and what became of it, in the same hand as the chat: recessed for you, a torn slip for the assistant, a plate for anyone else. The full rules are in `message.rules.md` in the brain, which ships with the Kit. ## Related parts - [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. - [Sync status](https://tactileui.dev/parts/sync-status): A small legend that says whether your work is safe: Saving, Saved or Offline, with a lamp that matches (amber and blinking while it saves, green when it has, red when it cannot). The words are the state and the lamp only agrees with them. It is a polite status region, so changing its words is what a screen reader hears. - [Avatar](https://tactileui.dev/parts/avatar): A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.