Prompt Input
A chat and agent composer with an auto-growing text box, attachment chips, tool toggles, a model menu and a lit send key that turns into a stop key while streaming.
Preview
- q3-churn-cohorts.csv184 KB
- retention-memo.pdf2.4 MB
Enter to send ShiftEnter for a new line
Streaming
Disabled
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | "" | Controlled or initial text; onValueChange reports edits. |
| onSubmit | (submit: PromptInputSubmit) => void | — | Enter or the send key: { text, attachments, model, tools }. Uncontrolled text clears. |
| streaming | boolean | false | The send key becomes a stop key; Escape in the text box calls onStop. |
| onStop | () => void | — | Called by the stop key and Escape while streaming. |
| loading | boolean | false | Waiting for the first token: spinner in the key, aria-busy. |
| disabled | boolean | false | Disables the text box and every control. |
| placeholder / label | string | "Ask anything" / "Message" | Placeholder and the text box's accessible name. |
| maxLength | number | — | Shows a count from 80%, warns at 95% and blocks sending past it. |
| maxHeight | number | 240 | Tallest the text box grows (px) before it scrolls. |
| attachments | PromptInputAttachment[] | [] | Chips: { id, name, size?, kind?: image | document | code | data, status?: ready | uploading | error }. |
| onRemoveAttachment | (id: string) => void | — | Shows a remove button on each chip. |
| onAddFiles | (files: File[]) => void | — | Enables the attach button, dropping files on the card and pasting files. |
| models / model / defaultModel | PromptInputModel[] / string | first model | Model menu: { id, name, description?, glyph?: orbit | prism | facet | bloom | ReactNode }; onModelChange reports picks. |
| tools / activeTools / defaultActiveTools | PromptInputTool[] / string[] | [] | Toggle buttons { id, label, icon? }; onActiveToolsChange reports the active ids. |
| hint | ReactNode | — | A line under the composer, linked to the text box as its description. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.