Response versions
Regenerate an answer and flip between versions.
An answer with its earlier versions a click away. The arrows page through every versions entry
(oldest first); a different version fades the old text out, then the new one arrives word by word.
The regenerate button calls onRegenerate so you can add a version and show it, and the copy button
copies the version on screen. While streaming is set the new words fade in as they arrive, paging
waits, and the status beside the buttons shimmers.
Pricing that grows with your team. Start free, upgrade when the work gets serious.
Usage
<!-- include core.css + response-versions.css -->
<div class="dm-rvx">
<div class="dm-bub">Write a headline for the pricing page</div>
<div class="dm-rvx-a">
<p class="dm-msg dm-rvx-t" aria-live="polite"><!-- words --></p>
<div class="dm-rvx-bar">
<div class="dm-rvx-pg">
<button class="dm-ib" aria-label="Previous version"><!-- chev-l --></button>
<span class="dm-rvx-n dm-num">1 / 1</span>
<button class="dm-ib" aria-label="Next version"><!-- chev-r --></button>
</div>
<button class="dm-ib dm-rvx-re" aria-label="Regenerate"><!-- refresh --></button>
<button class="dm-ib" aria-label="Copy"><!-- copy --></button>
<span class="dm-rvx-st dm-muted"></span>
</div>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
prompt | ReactNode | The person's message the answer replies to, shown as a bubble above it. |
versions | string[] | Every version of the answer so far, oldest first. |
version | number | Which version is showing. Leave it out to let the arrows page through them. |
defaultVersion | number | The version shown at first when version is left out. Defaults to 0. |
onVersionChange | (index) => void | Called when the arrows move to another version. |
streaming | boolean | The version showing is still being written. New words fade in as they arrive and paging waits. |
status | string | Quiet text beside the buttons, like "Writing a new version". It shimmers while streaming. |
onRegenerate | () => void | Called by the regenerate button. Add a version and show it to answer it. Leave it out to hide the button. |
onCopy | (text) => void | Called with the text after it is copied to the clipboard. |
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 prompt
bubble, the muted count and status, and the icon buttons all take their colour from the theme tokens;
each new word fades in, the regenerate glyph turns a full circle, and copy flips to a check in the
--dm-ok colour. Reduced motion drops the word fade, the spin and the status shimmer.