Prompt autocompletePro

The composer with ghost completions after the caret. Tab takes the suggestion, one keystroke takes the next word, and accepted words ink in where they land.

Markdown

On this page

ProA bookshop chain's sales assistant suggests the rest of the question. Two words taken one at a time, then Tab for the rest.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/prompt-autocomplete

Usage

tsx

import { PromptAutocomplete } from "@/components/ui/chatcn/pro/prompt-autocomplete"

<PromptAutocomplete
  onComplete={(text, { signal }) => suggest(text, { signal })}
  onSubmit={({ text }) => send(text)}
/>

onComplete gets the text before the caret and returns what comes next: one string, or a few to cycle. It is asked after a 160 ms pause, aborted through signal as soon as the text changes, and answers are kept in a small cache, so deleting and retyping costs nothing. Typing the next letters of a suggestion keeps the rest in place without a new request. Ghost text only shows with the caret at the end, never during IME composition or while a reply streams. A failed request is silent: the composer simply works without suggestions. Unlike the free InlineSuggestion, it is the full composer with Send, attachments and tools, it fetches for you, and it accepts word by word.

Examples

States

ProThree suggestions to cycle, empty, nothing to suggest, a long draft, a reply streaming, and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string`	The draft, controlled or not
`onSubmit`	`({ text }) => void`	Enter or Send. Never while empty, disabled or busy
`status`, `onStop`	`"idle" \| "submitting" \| "streaming"`, `() => void`	Send becomes Stop in the same footprint
`disabled`	`boolean`
`onComplete`	`(text, { signal }) => string \| string[] \| Promise`	What comes after the text
`debounce`	`number`	Ms of quiet before asking. Default 160
`minLength`	`number`	Ask only from this many characters. Default 3
`onAccept`	`(text, how: "all" \| "word") => void`	For analytics
`tools`, `actions`, `attachments`	`ReactNode`	Toolbar start, before Send, above the text
`labels`	`Partial<PromptAutocompleteLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	Take the whole suggestion
Cmd Right or Ctrl Right	Take the next word
Alt ] and Alt [	Next or previous suggestion
Escape	Hide the suggestion for this text. A second Escape stops a reply
Enter	Send what you typed. The ghost is never sent

Accessibility

A polite live region reads a suggestion once when it arrives, with how to take it, not on every letter typed through it.
The textarea keeps native caret, selection, spellcheck and undo: accepted text goes in as typing, so Cmd Z takes it back.
The key hints under the composer hide on touch screens, where Tab does not exist.

Motion

Accepted words ink in from the ghost gray to text color in 260 ms on the kit's ease out, the only motion, so you see exactly what you took. Suggestions appear and change without animation because they follow every keystroke. Reduced motion: accepted words simply appear in text color.