Live timeline parts

The live timeline parts render transient activity while a response is in progress: TimelineStreamingMessage, TimelineThinking, and TimelineWorkDuration.

Usage

These components are selected by TimelineEntryView. Replace an individual live renderer through a custom entry view when its visual treatment needs to change.

import {
  TimelineEntryView,
  TimelineThinking,
  type TimelineEntryViewProps,
  type TimelineThinkingProps,
} from '@hyperflow/chakra-ui'

function ProjectThinking(props: TimelineThinkingProps) {
  return <TimelineThinking {...props} />
}

function ProjectEntry(props: TimelineEntryViewProps) {
  return <TimelineEntryView {...props} thinkingComponent={ProjectThinking} />
}

Examples

Change work-duration visibility

The work-duration renderer receives the start time and a visibility flag from the timeline contract.

import {
  TimelineWorkDuration,
  type TimelineWorkDurationProps,
} from '@hyperflow/chakra-ui'

function ProjectWorkDuration(props: TimelineWorkDurationProps) {
  return <TimelineWorkDuration {...props} hidden={false} />
}

Guide

Render supplied live state

Streaming text, reasoning, and duration are updated by the timeline contract. Use their props directly rather than opening another streaming subscription.

Handle empty content gracefully

The default thinking and streaming-message components render nothing until content is available. Follow the same pattern to avoid empty activity rows.

Respect reduced motion

When adding an activity animation, honor prefers-reduced-motion as the default work-duration indicator does.

Props

TimelineThinking

Prop	Default	Type
`text`	—	`string` Current reasoning text.
`streaming`	—	`boolean` Whether reasoning is still streaming.

TimelineStreamingMessage

Prop	Default	Type
`content`	—	`string` Current streamed assistant content.

TimelineWorkDuration

Prop	Default	Type
`startedAt`	—	`string` Timestamp for the active work.
`hidden`	`false`	`boolean` Whether to hide the duration indicator.

On this page