Simulation widgetPro

A small simulation the assistant sets up and hands over: a projectile or compound interest with parameters as sliders, play, pause and reset, a sentence that explains the result and the last run kept as a ghost.

Markdown

On this page

ProA throw the assistant set up, played in the thread, then replayed on the Moon with the Earth run as a ghost.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/simulation-widget

Usage

tsx

import { SimulationWidget } from "@/components/ui/chatcn/pro/simulation-widget"

<SimulationWidget
  model="projectile"
  values={toolOutput}
  onValuesChange={setValues}
  setByAssistant={["speed", "angle"]}
  autoPlay
/>

values is what a tool call returns: pass it controlled and the widget replays when the assistant sets new numbers, keeping the previous run as a dashed ghost so the change is a comparison. Parameters in setByAssistant carry a small mark until someone moves them, so people can tell what the model chose from what they chose.

projectile and compound are exported as pure functions, so your tool can compute the same numbers the drawing shows.

Examples

Compound interest

ProMonthly deposits over 25 years, with what you paid in kept apart from what interest added.

Loading, error, disabled and RTL

ProThe assistant still choosing parameters, an invalid run and disabled.

Props

Prop	Type	Notes
`model`	`"projectile" \| "compound-interest"`
`values`, `defaultValues`, `onValuesChange`	`Partial<Values>`	Controlled or not
`setByAssistant`	`(keyof Values)[]`	Marked until moved
`autoPlay`	`boolean`	Play on mount and on new values
`status`	`"ready" \| "loading" \| "error"`	Loading while parameters stream in
`error`	`ReactNode`	What was wrong and how to fix it
`title`	`ReactNode`
`currency`, `locale`	`string`	Default EUR, en-GB
`disabled`	`boolean`

Keyboard

Key	Action
Arrow keys	Step a slider. Page Up and Down, Home and End jump
`Enter`, `Space`	Play, pause or reset on the focused button

Accessibility

Sliders are native ranges with their value in words as aria-valuetext. Gravity is a radio group.
The result sentence is a polite live region, so a change is announced as a sentence, not as numbers per frame. The drawing has a label with the same result.

Motion

Play draws the run along real time, scaled to 1.2 to 3.2 s. Moving a slider jumps to the finished run, so dragging never lags.
Reduced motion: play shows the finished run at once.