Price watchPro
Watch a price from the thread: its history, how often your alert would have fired, and Buy when it drops.
On this page
Installation
Usage
import { PriceWatch } from "@/components/ui/chatcn/pro/price-watch"
<PriceWatch
title="Halcyon H2 wireless headphones"
merchant="Lowtide Audio"
history={points}
defaultTarget={195}
onWatch={(target) => alerts.create("halcyon-h2", target)}
onBuy={() => store.buy("halcyon-h2")}
/>The history draws as steps, because a price holds until it changes. Every stretch at or under the alert price is redrawn in green, and the line under the stepper says how often that alert would have fired and when it last did, so a target that never hits is obvious before it is set (it turns amber and says so). Lowest seen jumps the alert to the lowest price in the history. Scrub the chart with a pointer or the arrow keys to read any day. Once the price is at or under the alert, the card says by how much and Buy takes over. The header compares today with the median of the history.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
title, merchant, image | string | Identity |
history | { date, price }[] | Oldest first; dates as ISO strings or Date |
price | number | Current price. Defaults to the last point |
currency, locale | string | Prices format with Intl, tabular figures. Default USD, en-US |
target, defaultTarget, onTargetChange | number | The alert price |
step | number | Stepper increment. Defaults to a round step for the price |
watching, defaultWatching | boolean | Controlled watching state |
onWatch, onStop, onBuy | (target) => unknown | Promise<unknown> | Reject with an Error to show its message |
loading, error, onRetry, disabled | States | |
labels | Partial<PriceWatchLabels> | Every string, for translation |
Keyboard
| Key | Action |
|---|---|
| Tab | The chart, Lowest seen, the stepper, then Watch or Buy |
| Left and Right | Scrub the chart one day |
| Page Up and Page Down | Scrub a week |
| Home and End | First and last day |
Accessibility
- The card is a section named by the product title.
- The chart is a slider whose value text reads the date and the price.
- The stepper value is a polite live region; the watch and alert lines are status messages.
- Green is never the only signal: the alert line, the hit count and the at price sentence say it in words.
Motion
The scrub line fades in 150 ms. The at price line and errors fade up 4 px in 180 ms. Reduced motion keeps the fades only.