Reasoning

A collapsible component for showing AI reasoning, explanations, or logic. Auto-expands while a stream is in progress and collapses when it ends. Markdown supported.

Examples

Basic Usage

The most basic implementation of the Reasoning component with auto-close functionality when streaming ends.

<button hlmBtn variant="outline" size="sm"
        [disabled]="streaming()" (click)="generate()">
  {{ streaming() ? 'Generating...' : 'Generate Reasoning' }}
</button>

<pk-reasoning [isStreaming]="streaming()">
  <pk-reasoning-trigger>Show reasoning</pk-reasoning-trigger>
  <pk-reasoning-content
    contentClass="border-l-border ml-2 border-l-2 px-2 pb-1"
    [content]="text()"
  />
</pk-reasoning>

With Markdown

Show rich formatting with markdown support for better structured reasoning content.

<button hlmBtn variant="outline" size="sm"
        [disabled]="streaming()" (click)="generate()">
  {{ streaming() ? 'Thinking...' : 'Generate Reasoning' }}
</button>

<pk-reasoning [isStreaming]="streaming()">
  <pk-reasoning-trigger>Show AI reasoning</pk-reasoning-trigger>
  <pk-reasoning-content
    contentClass="border-l-border ml-2 border-l-2 px-2 pb-1"
    [markdown]="true"
    [content]="text()"
  />
</pk-reasoning>

Installation

Add the reasoning component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:reasoning

Component API

PkReasoning

Prop	Type	Default	Description
open	`model<boolean>`	—	Two-way bound open state. Leave unbound for uncontrolled.
isStreaming	`boolean`	false	Auto-opens while true; auto-closes when it flips back to false.
class	`string`	—	Extra classes for the wrapper.

PkReasoningTrigger

Prop	Type	Default	Description
class	`string`	—	Extra classes for the trigger button.

PkReasoningContent

Prop	Type	Default	Description
content	`string`	—	The body text. Optional — projected ng-content also supported.
markdown	`boolean`	false	Render content as markdown via pk-markdown.
class	`string`	—	Extra classes for the outer collapsing wrapper.
contentClass	`string`	—	Extra classes for the inner content (use this for borders / padding so they collapse with the panel).