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

Simple

Clean variant without model selector - ideal for single-model apps

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)

Props

AIPromptInput component API reference

PropTypeDefaultDescription
variant'default' | 'simple' | 'aurora''default'Input style: default (with model selector), simple (without), aurora (with animated orb)
placeholderstring"Ask anything..."Placeholder text for the input
onSubmit(prompt: string, attachments: Attachment[], model: string) => voidCallback when form is submitted via Enter or Send button
modelsModel[](Claude & GPT models)Array of AI models for the dropdown selector (default variant only)
defaultModelstring'claude-3.5'Initially selected model ID
orbState'idle' | 'active' | 'listening' | 'thinking''idle'Animation state for the Aurora orb (aurora variant only)
quickActionsQuickAction[](Attach, Search, Study)Quick action buttons below input (aurora variant only)
showAttachmentsbooleantrueShow attachment buttons (simple variant)
showVoiceInputbooleantrueShow voice input button (simple variant)

Model Type

PropTypeDefaultDescription
id*stringUnique model identifier
name*stringDisplay name
speed*stringSpeed description (e.g., "Fast", "Powerful")
icon*stringEmoji icon for the model

Attachment Type

PropTypeDefaultDescription
id*numberUnique attachment identifier
type*'image' | 'file'Attachment type
name*stringFile name to display
size*stringFile 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 components

This 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 empty

Keyboard Navigation

KeyAction
TabNavigate between attachment buttons, model selector, and send
EnterSubmit the prompt (when not using Shift)
Shift + EnterAdd 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