Reasoning

ReasoningTrace

Collapsible disclosure for the model's extended-thinking output, with live streaming.

Preview

Installation

pnpm add nyxis-ui

Usage

import { ReasoningTrace } from 'nyxis-ui';
// or, for stricter tree-shaking:
// import { ReasoningTrace } from 'nyxis-ui/reasoning-trace';

<ReasoningTrace
  text={extendedThinking}
  streaming={isThinking}
  durationMs={elapsed}
  summary="3 key reasons + concrete install snippet"
/>;

Why a separate component?

Extended-thinking output is conceptually distinct from the assistant’s response:

It’s verbose — collapsing keeps the conversation surface clean.
It’s typically rendered in an italic, muted style to signal “internal”.
It often arrives before the visible response — the streaming state is independent.

Use this component when the provider returns thinking/reasoning content separately (Anthropic extended thinking, OpenAI o1 reasoning, etc.).

Props

Prop	Type	Default
`text`	`string`	—	Reasoning content streamed so far.
`streaming`	`boolean`	`false`	Adds the trailing cursor + “thinking” badge.
`defaultOpen`	`boolean`	`false`	Render expanded on first paint.
`durationMs`	`number`	—	Time taken to think; shown after completion.
`summary`	`string`	—	One-line summary shown when collapsed.
`label`	`string`	`"Reasoning"`	Header label.