AI Prompt Input
AI
Authoring
Block
Multi-line prompt input with file/image attachments, voice recording toggle, model selector dropdown, and keyboard shortcuts. Designed for AI chat interfaces.
Default
Full-featured with model selector, attachments, and voice input
⌘↵to send
Simple
Clean variant without model selector - ideal for single-model apps
⌘↵to send
Aurora Eyes
Minimal design with animated orb and quick action buttons
Aurora (Active State)
The orb animates more actively when processing
Custom Models
Provide your own model options (default variant)
⌘↵to send
Props
AIPromptInput component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'simple' | 'aurora' | 'default' | Input style: default (with model selector), simple (without), aurora (with animated orb) |
placeholder | string | "Ask anything..." | Placeholder text for the input |
onSubmit | (prompt: string, attachments: Attachment[], model: string) => void | — | Callback when form is submitted via Enter or Send button |
models | Model[] | (Claude & GPT models) | Array of AI models for the dropdown selector (default variant only) |
defaultModel | string | 'claude-3.5' | Initially selected model ID |
orbState | 'idle' | 'active' | 'listening' | 'thinking' | 'idle' | Animation state for the Aurora orb (aurora variant only) |
quickActions | QuickAction[] | (Attach, Search, Study) | Quick action buttons below input (aurora variant only) |
showAttachments | boolean | true | Show attachment buttons (simple variant) |
showVoiceInput | boolean | true | Show voice input button (simple variant) |
Model Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Unique model identifier |
name* | string | — | Display name |
speed* | string | — | Speed description (e.g., "Fast", "Powerful") |
icon* | string | — | Emoji icon for the model |
Attachment Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | number | — | Unique attachment identifier |
type* | 'image' | 'file' | — | Attachment type |
name* | string | — | File name to display |
size* | string | — | File size to display (e.g., "2.4 MB") |
Usage
Import and implementation example
import { AIPromptInput } from '@/blocks/ai-conversation/ai-prompt-input'
// Default variant - full featured with model selector
<AIPromptInput
placeholder="What can I help you with?"
models={[
{ id: 'claude-3.5', name: 'Claude 3.5', speed: 'Fast', icon: '⚡' },
{ id: 'gpt-4o', name: 'GPT-4o', speed: 'Balanced', icon: '🌐' },
]}
defaultModel="claude-3.5"
onSubmit={(prompt, attachments, model) => {
sendToAPI(prompt, attachments, model)
}}
/>
// Simple variant - clean, no model selector
<AIPromptInput
variant="simple"
placeholder="Ask me anything..."
onSubmit={(prompt) => sendToAPI(prompt)}
/>
// Aurora variant - minimal with animated orb
<AIPromptInput
variant="aurora"
placeholder="Ask anything"
orbState="idle" // 'idle' | 'active' | 'listening' | 'thinking'
quickActions={[
{ id: 'attach', label: 'Attach', icon: <Paperclip /> },
{ id: 'search', label: 'Search', icon: <Globe /> },
{ id: 'study', label: 'Study', icon: <BookOpen /> },
]}
onSubmit={(prompt) => {
setOrbState('thinking')
sendToAPI(prompt).then(() => setOrbState('idle'))
}}
/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Three variants: Default (full), Simple (no model selector), Aurora (with animated orb)
- Aurora Eyes orb: Animated orb with blinking eyes and state-based animations
- Quick actions: Customizable action buttons below input (Aurora variant)
- Auto-expanding textarea: Grows with content up to 200px max height
- File attachments: Add files with paperclip button, shown with preview
- Image attachments: Add images with dedicated image button
- Voice recording: Toggle microphone for voice input with visual indicator
- Model selector: Dropdown to choose AI model with icons and speed info
- Character counter: Shows count after 100 characters (limit 4000)
- Keyboard shortcut: Enter to send (Shift+Enter for new line)
- Focus states: Indigo border and shadow when focused
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Native textarea element with auto-resizeButtons have title attributes for tooltipsSend button shows disabled state when emptyKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between attachment buttons, model selector, and send |
| Enter | Submit the prompt (when not using Shift) |
| Shift + Enter | Add new line in textarea |
Notes
- Placeholder text provides guidance for users
- Attachment previews show file name and size
- Recording state shows visible indicator with stop button
- Keyboard shortcut hint shown on desktop
- Consider adding aria-label to icon-only buttons