Scrollable message list component with auto-scroll and handoff display.

Renders a chronological list of agent messages using Radix ScrollArea for cross-browser custom scrollbars. Automatically scrolls to the bottom when new messages arrive or during streaming.

Supports interspersed HandoffIndicator components between messages to visualize agent transitions. Handoffs are positioned based on their timestamp relative to message timestamps.

The component tracks which handoffs have been rendered to prevent duplicates, showing each handoff before the first message from the target agent that occurs after the handoff timestamp.

Related components: MessageBubble, HandoffIndicator

Example

<MessageList
  messages={messages}
  isStreaming={isStreaming}
  handoffs={handoffHistory}
  showHandoffs
  handoffVariant="card"
  autoScroll
/>

function MessageList(props: MessageListProps): React.ReactElement

Parameters

props