Reasoning Block

A model's intermediate reasoning, folded away by default — it is supporting evidence, not the answer, and a panel that opens itself pushes the answer below the fold.

src/components/ui/reasoning-block.tsx

About

From the component's own source, where it was written.

A model's intermediate reasoning, folded away by default.

Collapsed by default on purpose: reasoning is supporting evidence, not the answer, and a panel that opens itself pushes the thing the reader asked for below the fold.

While streaming it opens itself and shows a spinner, because during that time it is the only thing happening — then collapses once the answer starts. That transition is the whole interaction, so streaming is a prop rather than something inferred from children changing.

Install

npx astralyx-ui add reasoning-block

Usage

import { ReasoningBlock } from '@/components/ui/reasoning-block'

<ReasoningBlock duration={4.2}>
  The question asks about v4 specifically…
</ReasoningBlock>

Composer

Change the props and the source below follows.

Props
tsx
<ReasoningBlock streaming={false} duration={4.2}>
  …
</ReasoningBlock>

Examples

Finished and thinking

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

ReasoningBlock

A model's intermediate reasoning, folded away by default.

Extends ComponentProps<'div'>.

PropTypeDefaultDescription
streamingbooleanfalseOpens itself and shows a spinner while thinking is the only thing happening. A prop rather than something inferred from children, since that transition is the whole interaction.
durationnumber—Seconds spent thinking, shown once finished.
defaultOpenboolean—Defaults to whatever streaming is.
labelReactNode'Reasoning'Header text once finished.