## Overview [#overview]
`PromptInput` is a visual form shell for composing chat prompts. It captures prompt text and optional file parts on submit, while the consumer owns sending, cancellation, upload, persistence, and chat state.
`PromptInput` owns one transient draft for its children. The text editor, attachments, submit button, speech button, and prompt-specific actions coordinate through internal composer state, so consumers do not need to install a prompt-level provider. `PromptInputSubmit` derives its enabled state from that draft. Omit `status` or pass `null` when idle; pass `status="processing"` or `status="streaming"` to show a disabled spinner while the runtime is busy.
## Usage [#usage]
```tsx
import {
Attachment,
AttachmentInfo,
AttachmentPreview,
AttachmentRemove,
Attachments,
Conversation,
ConversationContent,
ConversationScrollButton,
Message,
MessageContent,
MessageResponse,
PromptInput,
PromptInputActionAddAttachments,
PromptInputActionMenu,
PromptInputActionMenuContent,
PromptInputActionMenuTrigger,
PromptInputFooter,
PromptInputSpeechButton,
PromptInputSubmit,
PromptInputTextEditor,
PromptInputTools,
Shimmer,
type UIMessage,
usePromptInputAttachments,
} from "@tilt-legal/cubitt-components/chat-elements";
```
## Examples [#examples]
### Default [#default]
Omit `status` or pass `null` when idle. Pass `status="processing"` or `status="streaming"` to show a disabled spinner in the submit button.
```tsx
const isTextPart = (part: unknown): part is { text: string; type: "text" } =>
typeof part === "object" &&
part !== null &&
"type" in part &&
part.type === "text" &&
"text" in part &&
typeof part.text === "string";
const getMessageText = (message: UIMessage) =>
message.parts.filter(isTextPart).map((part) => part.text).join("");
function DefaultPromptInput() {
const [status, setStatus] = useState<
"processing" | "streaming" | null
>(null);
const [messages, setMessages] = useState([]);
return (
<>
{messages.length > 0 || status !== null ? (
{messages.map((message) => (
{message.role === "assistant" ? (
{getMessageText(message)}
) : (
getMessageText(message)
)}
))}
{status !== null ? (
Thinking through the matter context...
) : null}
) : null}
{
sendMessage({ text, files });
setMessages((current) => [
...current,
{
id: crypto.randomUUID(),
parts: [{ text, type: "text" }],
role: "user",
},
]);
setStatus("processing");
window.setTimeout(() => setStatus("streaming"), 350);
window.setTimeout(() => setStatus(null), 1800);
}}
>
);
}
;
```
### Speech Input [#speech-input]
`PromptInputSpeechButton` writes final and interim speech into `PromptInputTextEditor`. Use standalone [Speech Input](/components/chat-elements/speech-input) when dictation is needed outside a prompt composer.
```tsx
function SpeechPromptInput() {
return (
transcribe(blob)}
/>
);
}
;
```
### Attachments [#attachments]
```tsx
function PromptInputAttachmentsDisplay() {
const attachments = usePromptInputAttachments();
if (!attachments.files.length) {
return null;
}
return (
{attachments.files.map((attachment) => (
attachments.remove(attachment.id)}
>
))}
);
}
function AttachmentsPromptInput() {
return (
);
}
;
```