ChatInput
Text input with file attachments, drag-and-drop, and send/stop controls.
ChatInput is the standard padded input (centered, max-w-3xl). Must be rendered inside a ChatProvider.
Preview
AI can make mistakes. Verify important information.
Import
import { ChatInput, type ChatInputProps } from "@polpo-ai/chat";Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Type a message…" | Placeholder text for the textarea |
hint | string | — | Hint text below the input |
allowAttachments | boolean | true | Whether file attachments are enabled |
className | string | — | Additional className on the outer wrapper |
renderSubmit | (props: { isStreaming: boolean; onStop: () => void }) => ReactNode | — | Custom submit button renderer |
Usage
<ChatProvider agent="my-agent">
<ChatMessages />
<ChatInput placeholder="Ask anything..." hint="Shift+Enter for newline" />
</ChatProvider>Custom submit button
<ChatInput
renderSubmit={({ isStreaming, onStop }) => (
<button onClick={isStreaming ? onStop : undefined}>
{isStreaming ? "Stop" : "Send"}
</button>
)}
/>