KQ-813 · HISTORY/SCRUB
History Scrub
A scrubber that walks a conversation one message at a time. The pane shows the current message and a window before it; moving the thumb cross-fades messages in and out on a fast opacity tween while the ones that stay glide to their new rows with a layout move on glide, and the pane's measured height follows on glide. The track carries a mark per message, taller where the date changes; the thumb glides to its stop on snap with a date tab riding on it. Pressing the track jumps to the nearest message, a drag scrubs message by message, and as a slider Left and Right step, PageUp and PageDown step five, Home and End jump to the ends.
- Fernworks Model 3 · Tue 3 MarYes. It is queued for Thursday, net 30 from the ship date.
- You · Thu 5 MarDid the invoice go out?
- Fernworks Model 3 · Thu 5 MarIt went out at 09:10 to the yard office. Payment is due 4 Apr through Waylight Pay.
Msg 8 / 8 · Thu 5 Mar · Fernworks Model 3
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/history-scrub
Props
- messages
- HistoryMessage[]
- default —
- The conversation oldest first: id, role of user or assistant, text, and a preformatted date label the host supplies.
- value / defaultValue
- number
- default messages.length - 1
- Controlled or initial index of the current message.
- onValueChange
- (index: number) => void
- default —
- Fires from a press, a drag step or a key that moved the current message.
- window
- number
- default 2
- Messages shown above the current one.
- assistantName
- string
- default "Assistant"
- Name printed on assistant rows and spoken in the value text; invented names only.
- label
- string
- default —
- Names the slider and the instrument for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | HistoryMessage[] | — | The conversation oldest first: id, role of user or assistant, text, and a preformatted date label the host supplies. |
| value / defaultValue | number | messages.length - 1 | Controlled or initial index of the current message. |
| onValueChange | (index: number) => void | — | Fires from a press, a drag step or a key that moved the current message. |
| window | number | 2 | Messages shown above the current one. |
| assistantName | string | "Assistant" | Name printed on assistant rows and spoken in the value text; invented names only. |
| label | string | — | Names the slider and the instrument for assistive technology. |