Prompt Area

The core component — a controlled, contentEditable input that renders text and immutable chip segments, with triggers, inline markdown, attachments, undo/redo, and an imperative handle.

Install

import { PromptArea } from 'prompt-area'

import { PromptArea } from '@/components/prompt-area'

Basic usage

PromptArea is a controlled component: you own an array of Segment values and pass value / onChange. In practice the usePromptAreaState hook handles that for you.

import { PromptArea } from '@/components/prompt-area'
import { usePromptAreaState } from '@/components/use-prompt-area-state'

const { bind } = usePromptAreaState()

<PromptArea {...bind} placeholder="Type a message…" autoGrow />

Segments

Content is an array of segments rather than a string. A segment is either a TextSegment or a ChipSegment. Chips are immutable, typed, and carry the data behind a mention, command, or tag — so you read structured values instead of parsing markup.

Triggers

A trigger maps a character (@, /, #, or a custom one) to a dropdown or callback. Selections resolve into chips. Use the presets for the common cases:

• mentionTrigger() — @ dropdown for users, agents, or documents
• commandTrigger() — / dropdown with start-of-line detection
• hashtagTrigger() — # tags that auto-resolve on space
• callbackTrigger() — fire a callback (e.g. open a file picker) instead of a dropdown

See Hooks & Helpers for the preset signatures, and PromptArea Props for the full prop list.

Imperative handle

The component exposes a ref handle for programmatic control: focus(), blur(), insertChip(), getPlainText(), and clear(). The state hook re-exposes these as convenient methods.

Companion components

Compose PromptArea with the Action Bar, Status Bar, Compact variant, and Chat Prompt Layout to assemble full chat composers. Each is installed separately — see Installation.