# 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.

Kit part · With the Kit · https://tactileui.dev/parts/chat

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

A custom element that builds a scrolling log and a composer around your markup. The printer appends text nodes as they come, keeping the amber lamp as the last thing on the line.

## Variants

- Empty · suggestions to start
- A slip printing
- Code on glass

## States

- Rest
- Focus
- Printing
- Disabled

## Props and options

| Name | Kind | Description |
| - | - | - |
| label | attribute | Who answers. Names the log (“Conversation with Studio assistant”), the text area and each slip. |
| placeholder | attribute | The composer’s placeholder: an example, never the label. |
| demo | attribute | For specimens and static pages. |
| [data-suggest] | attribute | Sends its own words as a message. |
| pre[data-label] | element | Becomes a code block on glass, with its label and a copy key. |
| say(text, files) | method | Add your own message to the thread. |
| reply() | method | Start a slip. write(text) prints (a blank line starts a paragraph), code(text, label) adds a block, end() stamps it, stop() ends it early. |
| Enter · Shift+Enter | keyboard | Send · a new line. |

## Usage notes

Type a question and press Enter, or pick a suggestion in the empty chat below. The send key turns into Stop while it prints.

## Accessibility

- The send key names what it will do (“Send” or “Stop the reply”) and is disabled while there is nothing to send.
- Attached files are listed as tags, each with a remove key that names the file.
- Printing is shown by words (“printing”) beside the amber lamp; the lamp stops blinking under reduced motion.

## Related parts

- [Glass](https://tactileui.dev/parts/glass): Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.