All components (204)

Prompt input

AI · PromptInput

What it is and when to use it

The box where you write to an assistant: it grows with the text, sends with Enter, accepts files pasted, dragged or picked, and while a response is under way the send button becomes the stop button.

When to use it

As the input of a chat with an assistant, from one line to a long message.
With attachments and a toolbar of your own (the model, shortcuts, voice).
With an assistant that can keep working while you write: busyModes lets you choose what to do with the message (add it to the turn, stop and correct, queue it).

When not to

For a multi-line form field: that is a TextArea.
For a search: that is a SearchField.

Keyboard: Enter sends and Shift+Enter adds a line (with submitOn="mod-enter" it is the other way round and with Ctrl or Cmd). While composing with an IME, Enter does not send. With the field empty, the up arrow brings back the last thing sent (recall). Pasting a file hands it to onFiles instead of pasting it.

While it responds: without busyModes, busy blocks sending and the button becomes "Stop" (if there is an onStop). With busyModes it does send: a row of options appears above the field -real radios, with the browser's arrows and single tab stop- and onSubmit receives the chosen one in its second argument ({ mode }). "Stop" moves next to "Send". busyMode/defaultBusyMode govern it, busyLabel changes the label.

To integrate it into a real chat: inputRef hands over the field so you can focus it from outside; actions adds buttons on the right (voice, variables, more actions); onPasteText lets you decide what happens with a huge pasted text (returning true it is not pasted: it is attached as a file, for example); onInputKeyDown runs before the box's own keys and, if it does preventDefault(), the box does not do its thing; inputProps lets spellCheck, lang, autoFocus, maxLength... through; attachDisabled turns the paperclip off when the file quota is used up.

Accessibility: the field carries the name passed in label (required) and the form is marked busy while a response is under way. The send button is disabled without text, and the stop button has its own name. Dropping files is also announced with text.

Fine-tuning: CSS variables --amset-prompt-input-max-rows (how many lines it grows before scrolling) and --amset-prompt-input-pad.

What it looks like

<PromptInput
  label="Message"
  placeholder="Write to your assistant…"
  onSubmit={(texto) => enviar(texto)}
/>

Props

Import it with import { PromptInput } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What the field is, for whoever cannot see it: "Message". Required: a field without a name cannot be used with a screen reader or voice control.
`onSubmit`required	`(value: string, context: PromptSubmitContext) => void`	Called on send, with the text as it is and, as a second argument, how it is sent (`mode`). Without `value`, the field empties itself; with `value`, emptying it is up to whoever controls it.
`accept`	`string`	Which types the file picker admits: `image/*,.pdf`.
`actions`	`ReactNode`	What goes on the right, just before the send button: voice, variables, a menu of more actions.
`allowEmpty`	`boolean`	Allows sending without text (with only an attachment). Off by default.
`attachDisabled`	`boolean`	The file quota is used up: the paperclip is turned off. Pasted and dropped files are limited by whoever receives `onFiles`.
`attachments`	`ReactNode`	The attachments already added, above the field.
`busy`	`boolean`	A response is under way: nothing is sent, and if there is an `onStop` the button becomes "Stop". With `busyModes` it is sent -in the way chosen- and "Stop" appears next to the send button.
`busyLabel`	`string`	The label of the row of options: "AMSET is working. Your message:". Defaults to a generic one.
`busyMode`	`string`	The way chosen, governed from outside.
`busyModes`	`readonly PromptBusyMode[]`	Ways of sending while a response is under way. With this, `busy` does not block sending: a row of options appears above the field and `onSubmit` receives the chosen one. Without it, nothing is sent while it responds.
`busyModeScope`	`string`	When it changes, the chosen way of sending goes back to the default one: a new turn, for example. It is needed because "Stop and correct" destroys work and must not stay set from one turn to the next.
`className`	`string`	Merged with the library classes; it does not replace them.
`defaultBusyMode`	`string`	The way chosen at the start. Defaults to the first one.
`defaultValue`	`string`	—
`disabled`	`boolean`	—
`history`	`readonly string[]`	What was sent before, oldest to newest: with the field empty, the up arrow walks backwards and the down arrow comes forward again up to what was being typed. If present, it takes precedence over `recall`.
`inputProps`	`PromptInputFieldProps`	Attributes of the field that the box does not govern: `spellCheck`, `lang`, `autoFocus`, `maxLength`...
`inputRef`	`Ref<HTMLTextAreaElement>`	The `<textarea>`, to focus it from outside (after choosing a template, on closing a search).
`onBusyModeChange`	`(mode: string) => void`	—
`onChange`	`(value: string) => void`	—
`onFiles`	`(files: readonly File[]) => void`	Paste or drag files, or pick them with the paperclip. With this the attach button appears.
`onInputKeyDown`	`(event: KeyboardEvent<HTMLTextAreaElement>) => void`	A key before the box's own. If the call does `preventDefault()`, the box does not do its thing (send, recall the last one): it serves for shortcuts of your own, such as Escape to stop or Ctrl+K.
`onPasteText`	`(text: string) => boolean`	Called when TEXT is pasted. If it returns `true`, whoever called has handled it and it is not pasted: it is what a chat does with a huge text, preferring to attach it as a file rather than leave it inside the field.
`onStop`	`() => void`	—
`pastedFileName`	`(file: File, index: number) => string`	The name of a PASTED file. Browsers call every pasted screenshot `image.png`, and two in a row collide in the list and on the server: this gives them their own (`pasted-1.png`). It only affects what is pasted, not what is dropped or picked with the paperclip.
`placeholder`	`string`	—
`recall`	`string`	The last thing sent: with the field empty, the up arrow brings it back.
`submitDisabled`	`boolean`	Prevents sending even with text: an upload in progress, for example.
`submitOn`	`PromptSubmitOn`	`enter` sends with Enter and breaks the line with Shift+Enter; `mod-enter`, the other way round and with Ctrl/Cmd; `auto`, depending on the pointer.
`toolbar`	`ReactNode`	What goes on the left of the bottom bar: the engine, the model, shortcuts.
`value`	`string`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: