Chat Minimap
A compact conversation navigator that previews turns, tracks reading position, and jumps between message anchors.
Customize
Chat Minimap gives long AI conversations the navigation layer chat apps usually lack: a compact rail that previews each turn, magnifies under the pointer, tracks your reading position, and jumps to any message on click. It is a React component built with shadcn/ui and Tailwind CSS, wired to scroll anchors through the companion Message Scroller.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | readonly ChatMinimapItem[] | — | Supplies the marker entries in conversation order. |
side | "left" | "right" | "left" | Places the minimap beside the conversation and flips the hover previews. Inherited from ChatMinimapContainer when unset. |
magnification | number | 3 | Sets the maximum marker magnification as a multiple of itemSize. |
lensRange | number | 3 | Sets how many neighboring markers the wave affects. |
itemSize | number | 12 | Sets the base marker length and interactive row height in pixels. |
gap | number | 0 | Sets the space between marker rows in pixels. |
pillWidth | number | 2 | Sets the marker thickness in pixels. |
transitionDuration | number | 200 | Sets the marker transition duration in milliseconds. |
easing | React.CSSProperties["transitionTimingFunction"] | "ease-out" | Sets the CSS transition timing function. |
Each ChatMinimapItem contains id, title, and description. ChatMinimap
also accepts native nav props.
Layout
Wrap ChatMinimap and Message Scroller in ChatMinimapContainer to place the
minimap. The container accepts side ("left" | "right", default "left")
plus native div props, and provides side to the minimap inside it. The
minimap floats over the transcript edge in a rail the content padding
reserves, so the viewport scrollbar keeps its usual place at the right edge —
with the minimap on the right, the order is messages, minimap, scrollbar.
Behavior
- Each marker previews a turn title and description in an official Hover Card.
- Hovering or focusing a marker expands nearby bars into a wave.
- The active marker follows
currentAnchorIdfrom Message Scroller. - Marker jumps use smooth scrolling by default and switch to
"instant"when the system requests reduced motion. - Chat Minimap does not own messages, layout, AI state, or scrolling behavior.
Credits
Chat Minimap integrates with shadcn's official Message Scroller API. Its marker magnification is adapted from Mantine Lens Select, licensed under MIT.