Lumeo

ReasoningDisplay

Collapsible chain-of-thought block for AI reasoning traces.

When to Use

Display reasoning traces from chain-of-thought models (e.g. Claude's extended thinking mode).
Show an intermediate thinking step collapsed by default to avoid cluttering the chat UI.
Use IsStreaming to animate while tokens are arriving, then set it to false when the trace is complete.

Basic

Reasoning

First, I need to consider the user's question carefully. The problem involves finding the optimal path through a weighted graph. I should apply Dijkstra's algorithm here, starting from the source node. Let me trace through the steps: initialize distances to infinity, process nodes by priority queue... After analyzing all edges, the shortest path from A to D is A → B → C → D with total weight 7.

With Duration

Reasoned for 4.2s

First, I need to consider the user's question carefully. The problem involves finding the optimal path through a weighted graph. I should apply Dijkstra's algorithm here, starting from the source node. Let me trace through the steps: initialize distances to infinity, process nodes by priority queue... After analyzing all edges, the shortest path from A to D is A → B → C → D with total weight 7.

Streaming State

Reasoning

Analyzing the request...

Open by Default

Chain of thought

First, I need to consider the user's question carefully. The problem involves finding the optimal path through a weighted graph. I should apply Dijkstra's algorithm here, starting from the source node. Let me trace through the steps: initialize distances to infinity, process nodes by priority queue... After analyzing all edges, the shortest path from A to D is A → B → C → D with total weight 7.

API Reference

ReasoningDisplay

Property	Type	Default	Description
Text	string?	null	The reasoning trace text to display inside the collapsible body.
IsStreaming	bool	false	When true, shows a pulsing dot in the summary and animates the body text.
Summary	string?	null	Custom label for the summary row. Defaults to "Thinking…" while streaming, "Reasoning" otherwise, or "Reasoned for Xs" when `DurationMs` is set.
DurationMs	long?	null	Optional thinking duration in milliseconds. When set, renders "Reasoned for Xs" in the summary.
DefaultOpen	bool	false	If true, the reasoning block is expanded on initial render.
Class	string?	null	Additional CSS classes merged onto the root element.

StreamingText — Token-by-token streaming text renderer for AI responses.
ToolCallCard — AI tool-invocation card showing call and result.
AgentMessageList — Chat message stream for AI agents with role-based styling.