Chat Navigation Rail — Cinder component documentation

Overview

Navigate directly between user-authored turns in a long Chat transcript with keyboard controls or continuous pointer scrubbing.

Usage

<script lang="ts">
  import ChatNavigationRail from '@lostgradient/chat/navigation-rail';
</script>

<ChatNavigationRail {messages} {viewport} scrollToMessage={chat.scrollToMessage} />

Live preview

You

Summarize the launch plan.

Assistant

The launch has three phases.

You

What is the riskiest phase?

Assistant

The staged rollout needs the closest watch.

When to use

Use when

A long transcript needs direct navigation between user turns.

Avoid when

The transcript is short enough to scan without an auxiliary navigation surface.

Examples

Transcript navigation rail

Scrub or tab between user-authored turns in a longer conversation.

Props

Props for chat-navigation-rail
Name	Type	Default	Description
`messages` required	`ReadonlyArray<Message>`
`viewport`	`HTMLElement \| null`	`null`
`onNavigate`	`(index: number, message: Message) => void`		Scroll a message index; callers should delegate to ChatVirtualizer when present.
`scrollToIndex`	`(index: number) => void`		Optional virtualizer bridge; implementations should use center alignment.
`scrollToMessage`	`(messageId: string) => void`		Message-aware Chat bridge; resolves virtualized and grouped rows before centering.
`label`	`text`	`'User messages'`
`preview`	`(message: Message) => string`