Prompt Input

InstallationCopy Anchor Link

import { ... } from 'nooxit-design-system/components/ai/prompt-input';

NotesCopy Anchor Link

Built on Input Group, so it has the 1px primary focus border of the other text fields.

• Keyboard. Enter sends and Shift+Enter starts a new line. Backspace in an empty field removes the last attachment.
• Attachments. Files come in from the + menu, by pasting, or by dropping them on the input (or anywhere on the page with globalDrop). accept, maxFiles and maxFileSize limit them, and onError reports what was refused. usePromptInputAttachments returns the list; the demo shows it with Attachment.
• Submit. PromptInputSubmit is a primary icon button. Pass it the chat status: it sends when ready, shows a Spinner while waiting for the model, and turns into a stop button while the reply streams, if you pass onStop.
• State outside the input. Wrap the page in PromptInputProvider when controls elsewhere need to read or change the text or the files.

Adapted from AI Elements' Prompt Input.

Source — src/components/ai/prompt-input.tsx