Proposal card
A suggested change with confidence, alternatives and undo.
A proposal card is a change the agent proposes, posted in the thread. It shows a from value
changing to the chosen option, a confidence meter that fills in a moment after the card appears
and then follows the chosen option, and the other options behind an "other options" fold. Accept,
Not now and Undo move it between open, accepted and dismissed. By default it sits flat in a
chat thread; set bare to false to give it a card of its own.
Usage
<!-- include core.css + proposal-card.css -->
<div class="dm-prx" data-dm="">
<div class="dm-prx-h">
<span class="dm-prx-ic"><!-- wand icon --></span>
<div class="dm-prx-ht"><b>Raise contrast on the secondary button</b><span class="dm-muted">Pricing, frame 2 of 3</span></div>
</div>
<div class="dm-prx-diff">
<div class="dm-prx-sw"><span class="dm-prx-c" style="background:#c9cfd8"></span><span class="dm-num">#C9CFD8</span><span class="dm-tag dm-bad">2.1 : 1</span></div>
<span class="dm-prx-ar"><!-- arrow --></span>
<div class="dm-prx-sw dm-prx-new"><span class="dm-prx-c" style="background:#5b6472"></span><span class="dm-num">#5B6472</span><span class="dm-tag dm-ok">5.9 : 1</span></div>
</div>
<!-- confidence meter, options fold, Accept / Not now -->
</div>Properties
| Name | Type | Description |
|---|---|---|
title | ReactNode | What the agent wants to change. |
subtitle | ReactNode | Where, like "Pricing, frame 2 of 3". |
icon | IconName | The icon in the tile. Defaults to a wand. |
from | ProposalValue | How it is now — a swatch, its label and a tag. |
options | ProposalOption[] | The changes on offer, the agent's pick first. |
value / defaultValue | number | Index of the option shown as the change. Leave value out to let the list pick it. |
onValueChange | (index) => void | Called when another option is chosen. |
open / defaultOpen | boolean | Whether the other options are listed. Leave open out to let the toggle open them. |
onOpenChange | (open) => void | Called when the fold toggles. |
status / defaultStatus | open | accepted | dismissed | Leave status out to let Accept, Not now and Undo move it. |
onStatusChange | (status) => void | Called when the status changes. |
onAccept | (option, index) => void | Called with the chosen option when Accept is pressed. |
onDismiss / onUndo | () => void | Called by Not now and Undo. |
acceptedLabel | string | Shown once accepted, like "Applied to 3 buttons". |
dismissedLabel | string | Shown once dismissed. |
confidenceLabel | string | Label beside the confidence meter. |
bare | boolean | Sits flat in a chat thread (the default). Set false to give it a card of its own. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The diff
chip, confidence meter and tags take their colours from the theme tokens — the current value reads as
bad and the options as ok by default — and the icon tile uses the accent tint, so the card reads
against the dark stage; in Soft the swatches, tile and pills are rounder.