Collapsible display for agent reasoning and thinking content.

Uses Radix UI Collapsible for accessible expand/collapse behavior with keyboard support and ARIA attributes. Shows agent internal reasoning as a toggleable section.

Automatically expands during streaming to provide real-time visibility into agent thought process, then collapses by default once streaming completes. The header displays an estimated thinking duration based on content length (1 second per 100 characters).

Visual feedback includes a rotating arrow indicator and an animated spinner during streaming, plus a blinking cursor at the end of streaming content.

Example

<ReasoningDisplay
  content="Analyzing the user's request..."
  isStreaming={true}
  defaultCollapsed={false}
/>

function ReasoningDisplay(props: ReasoningDisplayProps): React.ReactElement

Parameters

props