Prompt Input

The PromptInput component is a compound component for AI chat interfaces. It includes a textarea with auto-resize, keyboard shortcuts, and optional toolbar for actions.

With Toolbar and Button

Streaming State

Usage

import { PromptInput } from '@harnessio/ui/components'

return (
  <PromptInput.Root onSubmit={handleSubmit}>
    <PromptInput.Textarea
      placeholder="What would you like to know?"
      onChange={(e) => setValue(e.target.value)}
    />
    <PromptInput.Toolbar>
      <PromptInput.Tools>
        <PromptInput.Button prefixIcon="plus" tooltipProps={{ title: 'Add' }} />
      </PromptInput.Tools>
      <PromptInput.Submit />
    </PromptInput.Toolbar>
  </PromptInput.Root>
)

Component Structure

• PromptInput.Root - Form wrapper with submit handling
• PromptInput.Textarea - Auto-resizing textarea with keyboard shortcuts
• PromptInput.Toolbar - Container for actions and submit button
• PromptInput.Tools - Container for tool buttons
• PromptInput.Submit - Submit button with streaming state support
• PromptInput.Button - Icon-only Toggle for toolbar actions (attach, emoji, etc.)

Keyboard Shortcuts

Key	Action
Enter	Submit the form
Shift + Enter	Insert a new line