Forms

ReplyPanel

Help replying to a viewer's comment about a product.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`comment`Required	`string`
`onCommentChange`Required	`(text: string) => void`
`picker`	`React.ReactNode`
`onDraft`Required	`() => void`
`busy`	`boolean`
`onStop`	`() => void`	While busy, shows Stop beside Draft to cancel the draft.
`draft`Required	`string`
`onDraftChange`Required	`(text: string) => void`
`sources`	`string[]`
`found`	`boolean \| null`
`missing`	`string`
`onSave`	`() => void`
`saved`	`boolean`
`error`	`string \| null`
`blocked`	`string \| null`	Why drafting can't run right now (no AI credits left). Draft is disabled and this shows beside it.
`credits`	`React.ReactNode`	Shown just under Draft: the AI credits (a CreditMeter).
`cost`	`string`	Said on the Draft button: "Draft a reply (1 AI credit)".
`size`	`'M' \| 'L'`
`className`	`string`

Guidelines

Help replying to a viewer's comment about a product. Paste the comment, pick the product, and draft. The draft is Roger's to edit, with a plain line saying what it drew on ("Drafted from the X6 fact sheet and 2 saved answers"). Copy puts it on the clipboard; Save as answer keeps the comment and the reply as a question and answer on the product. Nothing is ever posted from here.

Provide: comment and onCommentChange, onDraft, busy, draft and onDraftChange, and after a draft sources, found and missing. A picker slot for choosing the product (a TagField). Optional onSave and saved, error, size.

Frame it as help with his workflow: "Drafted from your notes", never "AI wrote this".
When the notes don't answer the comment (found: false), a notice says so and what would answer it, and the draft doesn't guess.
The draft button uses the magic wand icon; Copy and Save are secondary. Copy confirms with "Copied" and is announced.
Solid surfaces only; it sits in a panel or a drawer.

Stopping

Pass onStop and, while busy, a Stop button sits beside Draft. Cancel the request there. A draft stopped before the AI starts doesn't use a credit; one stopped part way does, since that work was done.

When drafting can't run (no AI credits left), pass blocked with the reason in words: Draft is disabled and the reason shows beside it. An empty comment says "Paste a comment to draft a reply." the same way.
Put the CreditMeter in credits, so it sits right under Draft, and pass cost ("1 AI credit") so the button says what it uses. Every AI action does the same: the cost on its button, and the credits right under it.