Prompt Input

AI prompt composer with actions, file attachments, and submit controls.

PromptInput is the chat composer: auto-growing textarea, attachment chips, action menu, tool buttons, model select, and a submit control that tracks ready, submitted, streaming, and error. Pair it with Conversation above the fold.

<PromptInput multiple onSubmit={handleSubmit}>
  <PromptInputHeader>
    <PromptInputAttachments>
      {(file) => <PromptInputAttachment key={file.id} data={file} />}
    </PromptInputAttachments>
  </PromptInputHeader>
  <PromptInputBody>
    <PromptInputTextarea />
  </PromptInputBody>
  <PromptInputFooter>
    <PromptInputTools>
      <PromptInputActionMenu>
        <PromptInputActionMenuTrigger />
        <PromptInputActionMenuContent>
          <PromptInputActionAddAttachments />
          <PromptInputActionAddScreenshot />
        </PromptInputActionMenuContent>
      </PromptInputActionMenu>
    </PromptInputTools>
    <PromptInputSubmit />
  </PromptInputFooter>
</PromptInput>

Installation

pnpm dlx cubix@latest add prompt-input --base radix

Usage

Import

import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/cubix/prompt-input"

Example

<PromptInput onSubmit={handleSubmit}>
  <PromptInputBody>
    <PromptInputTextarea />
  </PromptInputBody>
  <PromptInputFooter>
    <PromptInputTools />
    <PromptInputSubmit />
  </PromptInputFooter>
</PromptInput>

Note: Enter submits, Shift+Enter inserts a newline. Paste or drop files onto the form. Backspace on an empty field removes the last attachment.

Composition

PromptInput
├── PromptInputHeader
│   └── PromptInputAttachments → PromptInputAttachment
├── PromptInputBody
│   └── PromptInputTextarea
└── PromptInputFooter
    ├── PromptInputTools
    │   ├── PromptInputActionMenu
    │   ├── PromptInputButton
    │   └── PromptInputSelect
    └── PromptInputSubmit

Features

Input Group shell with header attachments and footer tools
Submit statuses: ready, submitted, streaming (stop), error
File attach, paste, drop, screenshot, and accept / size limits
Optional PromptInputProvider for lifted text and files

Empty

Disable submit until there is text or at least one attachment.

<PromptInputSubmit disabled />

Typing

Use PromptInputProvider when text should live outside the form.

<PromptInputProvider initialInput="Summarize the deploy checklist.">
  <PromptInput onSubmit={handleSubmit}>
    ...
  </PromptInput>
</PromptInputProvider>

Attachments

Header chips render via Attachment. Remove from the chip or with Backspace when the field is empty.

Drop, paste, or attach files. Backspace on an empty field removes the last attachment.

<PromptInput accept="image/*,.pdf" multiple maxFiles={4} onSubmit={...}>
  <PromptInputHeader>
    <PromptInputAttachments>
      {(file) => <PromptInputAttachment key={file.id} data={file} />}
    </PromptInputAttachments>
  </PromptInputHeader>
  ...
</PromptInput>

Submit status

Drive the button from your chat transport. Streaming with onStop turns the control into a stop action.

Idle

<PromptInputSubmit status={status} onStop={stop} />
{/* ready | submitted | streaming | error */}

Submitted

<PromptInputSubmit status="submitted" />

Streaming

<PromptInputSubmit status="streaming" onStop={stop} />

Error

<PromptInputSubmit status="error" />

Tools

Footer tools hold the action menu, toggles, and a compact model select. A dedicated Model Selector component can replace the select later.

<PromptInputTools>
  <PromptInputActionMenu>...</PromptInputActionMenu>
  <PromptInputButton tooltip="Web search">
    <GlobeIcon /> Search
  </PromptInputButton>
  <PromptInputSelect value={model} onValueChange={setModel}>
    <PromptInputSelectTrigger size="sm">
      <PromptInputSelectValue />
    </PromptInputSelectTrigger>
    <PromptInputSelectContent>...</PromptInputSelectContent>
  </PromptInputSelect>
</PromptInputTools>

Disabled

<PromptInputTextarea disabled />

Validation

Accepts images only, max 2 files, 200KB each.

<PromptInput
  accept="image/*"
  maxFiles={2}
  maxFileSize={200_000}
  onError={(error) => setError(error.message)}
  onSubmit={handleSubmit}
/>

Provider

<PromptInputProvider initialInput="Lifted text">
  <PromptInput onSubmit={handleSubmit}>...</PromptInput>
</PromptInputProvider>

With conversation

Typical chat layout: transcript above, composer below, status tied to the active turn.

You: Outline a safe cutover plan.

Assistant: Start with changelog, smoke tests, then migrations.

<PromptInput onSubmit={send}>
  ...
  <PromptInputSubmit status={status} onStop={stop} />
</PromptInput>

API Reference

PromptInput

Prop	Type	Default	Description
onSubmit	(message: PromptInputMessage, event) => void \| Promise<void>	-	Called with text and files when the form submits. Clears on success; keeps input on throw.
accept	string	-	File accept filter for the hidden input, e.g. "image/*" or ".pdf,.txt".
multiple	boolean	false	Allow selecting more than one file at a time.
maxFiles	number	-	Maximum attachment count. Extra files are rejected via onError.
maxFileSize	number	-	Maximum file size in bytes. Oversized files call onError.
globalDrop	boolean	false	When true, document-level drops add files (opt-in).
onError	(error: PromptInputError) => void	-	Validation callback for accept, max_files, and max_file_size failures.
className	string	-	Additional classes for the form root.

PromptInputProvider

Prop	Type	Default	Description
initialInput	string	""	Initial text lifted outside the form.
children	React.ReactNode	-	Composer and any controls that need shared text or files.

PromptInputTextarea

Prop	Type	Default	Description
placeholder	string	"What would you like to know?"	Placeholder for the message field.
disabled	boolean	-	Disable typing while the model is busy or the form is locked.

PromptInputSubmit

Prop	Type	Default	Description
status	"ready" \| "submitted" \| "streaming" \| "error"	"ready"	Submit icon state. submitted shows a spinner; streaming shows stop when onStop is set.
onStop	() => void	-	When status is submitted or streaming, click becomes stop instead of submit.
disabled	boolean	-	Disable the control. Empty composers usually disable submit.