AI Suggest Mode
betaTrack changes for an agent's edits to text: every change shown in place with its reason, accepted or rejected on its own.
- AI
- 2 files
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-suggest-modenpm packages installed: diff.
import { SuggestMode } from "@/components/ui/ai-suggest-mode";Default
From ARewrite
With An Agent
<SuggestMode>
| Prop | Type | Default |
|---|---|---|
value (required)The text the suggestions are against. It does not change while they are reviewed. | string | — |
authorWho is suggesting: "Claude". | string | "The agent" |
decisionsControlled decisions, by suggestion id. | Decisions | — |
editsThe agent's edits, each placed in the text by what it replaces. | SuggestedEdit[] | — |
heading | string | "Suggested changes" |
notifyAgentTell the surface's agent what was decided. On by default inside a surface. | boolean | — |
onCompleteOnce every suggestion is decided. | (text: string, summary: SuggestModeSummary) => void | — |
onDecisionsChange | (decisions: Decisions) => void | — |
onTextChangeThe original with every accepted suggestion applied, whenever a decision changes. | (text: string) => void | — |
rewriteOr the whole text rewritten, diffed word by word. Ignored when | string | — |
Plus every attribute of <section> except children, onChange.
A named section. In the text, each waiting change is a link whose name says it in words — "Suggestion 2: Replace “teh” with “the”" — because not every screen reader announces del and ins; following it moves to that suggestion's controls. The suggestions are an ordered list, each with its description, the agent's reason and its status in words; Accept, Reject and Undo are described by the suggestion they act on. After a decision focus moves to the next suggestion still waiting, then to a summary once none are, so a keyboard review never drops to the page. A and R decide the focused suggestion (aria-keyshortcuts). The waiting count is a polite status present from first paint. Colour marks insertions and deletions but never carries them alone.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes