Generative UI

Document Agent

A document the agent edits beside you: each suggested change shows the old text struck through and the new text beside it, with Accept and Reject inline.

Group: Generative UI. Exports: DocumentAgent. Halaska addition with no shadcn/ui equivalent.

Usage

import { DocumentAgent } from "./halaska-kit";

DocumentAgent props

• title string (default "Refund policy · runbook"): Document name shown in the header (default: "Refund policy · runbook")
• agentName string (default "Alpha"): Name of the agent proposing the edits (default: "Alpha")
• blocks { id: string, type: "h1" | "h2" | "p" | "li", text: string }[] (default DOCAGENT_BLOCKS): The document as blocks (default: DOCAGENT_BLOCKS)
• edits { id: string, blockId: string, kind: "replace" | "insert" | "delete", text?: string, reason?: string }[] (default DOCAGENT_EDITS): Suggested edits; insert places a new block after blockId (default: DOCAGENT_EDITS)
• autoplay boolean (default true): Edits arrive one by one every `stepMs`; false shows them all at once with no timers (default: true)
• stepMs number (default 1400): Milliseconds between arriving edits (default: 1400)
• acceptAllLabel string (default "Accept all"): Header action label (default: "Accept all")
• onAccept (edit) => void: Fires when one edit is accepted
• onReject (edit) => void: Fires when one edit is rejected
• onAcceptAll () => void: Fires when every pending edit is accepted from the header

Accessibility

• Headings render as h1 and h2 elements, paragraphs as p, and list items as real li inside a ul.
• Accept and Reject are buttons named with the edit's reason, for example Accept edit: Adds the backup approver.
• The header count is a polite live region, so the number of edits to review is announced as they arrive.
• Old and new text are told apart by background tint and a strikethrough, so colour alone does not carry the meaning.

Known gaps

• The document is read only: there is no typing into it.
• Decisions are internal state; there is no controlled value for accepted edits.

Halaska UI · Components · Patterns · Screens · Install