TimelineEntryView

TimelineEntryView receives one semantic timeline entry and selects the correct visual renderer for messages, reasoning, tools, errors, tasks, and session changes.

Usage

Replace the dispatcher through entryComponent when the presentation of one or more semantic entry kinds must change.

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

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

export function SessionTimeline() {
  return <ActTimeline entryComponent={ProjectEntry} />
}

Examples

Replace user messages

Pass one replacement to the default dispatcher to retain the mapping for every other entry kind.

import {
  TimelineEntryView,
  type UserMessageProps,
} from '@hyperflow/chakra-ui'

function ProjectUserMessage({ item }: UserMessageProps) {
  return <article>Custom user message</article>
}

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

Guide

Preserve semantic entry mapping

Use the supplied entry to choose a visual treatment. It carries the data for a specific kind of timeline event; avoid treating all entries as ordinary messages.

Replace one renderer at a time

The *Component props target individual entry kinds. Start with the specific renderer that needs a different visual treatment and leave the default mapping in place for the rest.

Keep live entries connected

Thinking, streaming-message, and work-duration entries are updated by the timeline contract. Forward their props to preserve live response feedback.

Props

Prop	Default	Type
`entry`	—	`TimelineEntry` The semantic entry to render.
`userMessageComponent`	`UserMessage`	`ComponentType<UserMessageProps>` Renders user messages.
`assistantMessageComponent`	`AssistantMessage`	`ComponentType<AssistantMessageProps>` Renders assistant messages.
`compactionComponent`	`CompactionItem`	`ComponentType<CompactionItemProps>` Renders context-compaction markers.
`sessionChangeComponent`	`SessionChangeItem`	`ComponentType<SessionChangeItemProps>` Renders agent and model change markers.
`toolGroupComponent`	`ToolGroupItem`	`ComponentType<ToolGroupItemProps>` Renders grouped tool activity.
`thinkingComponent`	`TimelineThinking`	`ComponentType<TimelineThinkingProps>` Renders live reasoning.
`streamingMessageComponent`	`TimelineStreamingMessage`	`ComponentType<TimelineStreamingMessageProps>` Renders streamed assistant text.
`workDurationComponent`	`TimelineWorkDuration`	`ComponentType<TimelineWorkDurationProps>` Renders active-work duration.
`sessionErrorComponent`	`TimelineSessionError`	`ComponentType<TimelineSessionErrorProps>` Renders session errors.
`actErrorComponent`	`TimelineActError`	`ComponentType<TimelineActErrorProps> \| null` Renders or hides act errors.
`actNoteComponent`	`TimelineActNote`	`ComponentType<TimelineActNoteProps>` Renders act notes.
`backgroundTaskComponent`	`BackgroundTaskGroup`	`ComponentType<BackgroundTaskGroupProps>` Renders grouped background tasks.
`backgroundTaskCompletionComponent`	`BackgroundTaskCompletion`	`ComponentType<BackgroundTaskCompletionProps>` Renders completed background-task entries.

For the complete TimelineEntryViewProps type, see the @hyperflow/chakra-ui reference.

On this page