TranscriptNavigator
components/transcript/Navigator.vue
ChatGPT-style turn rail — one thin tick per turn, packed edge-to-edge (no dead zone between rows). The whole rail tracks the mouse's Y position continuously; each tick's width is a falloff of its distance to the cursor, so the closest turn grows while the rest stay short, and a title/summary flyout follows whichever tick currently has the most influence. Clicking targets that same turn, even off-center.
Move the mouse over the rail — ticks widen by proximity to the cursor, and a title/summary flyout follows whichever one currently has the most influence.
components/transcript/Navigator.vue
Usage
<TranscriptNavigator
:turns = "(required)"
:activeIndex = "-1"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| turns | Array | (required) | TranscriptTurn[] — only title/summary are read here; messages are irrelevant to the rail. |
| activeIndex | Number | -1 | Consumer-selected turn (e.g. the one last scrolled to) — keeps that tick highlighted even when the mouse isn't hovering it. |
Events
| Event | Description |
|---|---|
| select | Fired on click with the index of whichever turn currently has the most cursor-proximity influence. |