Inline suggestion

Ghost text completion after the caret in a plain textarea. Tab accepts, Esc dismisses.

Markdown

On this page

Completion after the caret in a plain textarea. Tab accepts, Esc dismisses.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/inline-suggestion.json

Usage

tsx

import { InlineSuggestion } from "@/components/ui/chatcn/inline-suggestion"

<InlineSuggestion
  value={value}
  onValueChange={setValue}
  suggestion={completion}
  aria-label="Notes"
/>

Pass the completion for the current text. When the user types the next characters of it, the rest stays visible until you send a new one, so a debounced request never flickers. The ghost renders in a mirror behind a transparent textarea with identical metrics, which also makes the field grow with its content.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`		Controlled or uncontrolled
`suggestion`	`string`	Shown when the caret is at the end
`onAccept`	`(accepted) => void`	After Tab
`onDismiss`	`() => void`	After Esc
`hint`	`boolean`	Tab hint after the ghost. Default `true`
`containerClassName`	`string`	Cap the height here; the wrapper scrolls

Keyboard

Key	Action
`Tab`	Accept. Inserted like typing, so `Cmd+Z` undoes it
`Esc`	Dismiss until the text or suggestion changes
`Tab` without a suggestion	Moves focus as usual

Accessibility

The ghost is hidden from assistive tech; a polite live region reads the suggestion and how to accept it.
The ghost hides during IME composition and whenever the caret is not at the end.

Motion

None. Ghost text appears and updates instantly, because it follows typing.