Form fill reviewPro
Every field the agent filled, with its source and an edit, before submit.
On this page
ProAn expense the agent filled: open a source, edit a value, check the guesses.
Installation
Usage
import { FormFillReview } from "@/components/ui/chatcn/pro/form-fill-review"
<FormFillReview fields={fields} url={formUrl} onSubmit={submit} onCancel={cancel} />Open a source to see the exact passage the value came from, with the extracted part marked. Low confidence values carry the agent's doubt in its words and must be checked or edited before submit. Edits show the old value struck through; secrets stay masked and read only.
Examples
States
ProFilling, rejected by the site, and submitted.
Props
| Prop | Type | Notes |
|---|---|---|
fields | FilledField[] | { id, label, value, group?, source?, confidence?, note?, mono?, secret?, status?, error? } |
source | { kind, label, quote?, highlight? } | Kinds: profile, document, email, page, memory, inferred |
status | "filling" | "review" | "submitting" | "submitted" | "error" | |
requireReview | boolean | Block submit on unchecked low confidence. Default true |
onValueChange, onSubmit, onCancel | onSubmit gets every value with edits applied | |
url, error, submittedNote, submitLabel | Context and copy |
Keyboard
| Key | Action |
|---|---|
Enter | Edit a value; save the edit |
Escape | Cancel the edit |
Accessibility
- Confidence is three bars with a text label, never color alone.
- Edits are IME safe: Enter during composition does not save.
Motion
- Only color and background transitions, 150 ms. The filling caret blinks and stops under reduced motion.