Skip to the page
Tactile UI

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

On this page
  1. Anatomy
  2. Variants
  3. States
  4. Props and options
  5. Usage notes
  6. Accessibility
  7. Related parts

Seats open in 11 days. Want one email that morning?

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

NameKindDescription
labelattributeWho answers. Names the log (“Conversation with Studio assistant”), the text area and each slip.
placeholderattributeThe composer’s placeholder: an example, never the label.
demoattributeFor specimens and static pages.
[data-suggest]attributeSends its own words as a message.
pre[data-label]elementBecomes a code block on glass, with its label and a copy key.
say(text, files)methodAdd your own message to the thread.
reply()methodStart 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+EnterkeyboardSend · 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.

Glass

Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.

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

Text entry in a recess, the label printed above it, and a hint that says how to fix an error.