TimelineViewport

TimelineViewport is the default scroll container for Timeline. It anchors the conversation while entries change and requests older history when a user reaches the top.

Usage

Replace the viewport only when the structure of the history container must change. A replacement receives the entries, history controls, and content from ActTimeline.

import {
  ActTimeline,
  TimelineViewport,
  type TimelineViewportProps,
} from '@hyperflow/chakra-ui'

function ProjectViewport(props: TimelineViewportProps) {
  return <TimelineViewport {...props} />
}

export function SessionTimeline() {
  return <ActTimeline viewportComponent={ProjectViewport} />
}

Examples

Replace loading feedback for older history

Use historyLoadingComponent to change the indicator shown while the viewport fetches earlier entries.

function HistoryLoading() {
  return <p>Loading earlier messages…</p>
}

function ProjectViewport(props: TimelineViewportProps) {
  return (
    <TimelineViewport
      {...props}
      historyLoadingComponent={HistoryLoading}
    />
  )
}

Guide

Preserve scroll anchoring

entries is the signal used to keep the viewport stable while streamed entries change. Keep it connected to the scroll container rather than deriving a second list.

Use the supplied history controls

history contains whether older entries exist, whether they are loading, and the action to load them. Use that contract for pagination instead of making separate history requests.

Render the supplied children

When used as an ActTimeline replacement, render children in the history region. They contain the current timeline entries and empty state.

Props

Prop	Default	Type
`entries`	—	`readonly TimelineEntry[]` Entries used for scroll anchoring.
`history`	—	`TimelineHistory` Older-history state and pagination action.
`children`	—	`ReactNode` Rendered timeline content.
`historyLoadingComponent`	`TimelineHistoryLoading`	`ComponentType` Feedback displayed while older history loads.

On this page