Chain Of Thought

Vertical reasoning timeline. Each step is independently expandable; the connecting line stops at the last step.

Examples

Three-step reasoning

Default circle markers. Mark the final step with [last]=true so the connecting line ends cleanly.

Parsed 3 paragraphs and 2 code blocks. Detected language: TypeScript.

Visited 14 functions, found one cycle in the auth middleware between refreshSession and verifyToken.

Recommend extracting the token-refresh path into a separate module so the cycle is broken at the import boundary.

<pk-chain-of-thought>
  <pk-chain-of-thought-step>
    <pk-chain-of-thought-trigger>Read the input prompt</pk-chain-of-thought-trigger>
    <pk-chain-of-thought-content>
      <pk-chain-of-thought-item>Parsed 3 paragraphs and 2 code blocks.</pk-chain-of-thought-item>
    </pk-chain-of-thought-content>
  </pk-chain-of-thought-step>

  <!-- ...more steps... -->

  <pk-chain-of-thought-step [last]="true">
    <pk-chain-of-thought-trigger>Compose the answer</pk-chain-of-thought-trigger>
    <pk-chain-of-thought-content>
      <pk-chain-of-thought-item>Recommend extracting the token-refresh path.</pk-chain-of-thought-item>
    </pk-chain-of-thought-content>
  </pk-chain-of-thought-step>
</pk-chain-of-thought>

With per-step icons

Set [leftIcon]=true on the trigger and project a custom icon via the [leftIcon] attribute slot. Hover swaps it for the chevron.

Surveyed 12 prior implementations. Two recurring patterns: explicit step markers and implicit timeline animation.

Hot path: ResizeObserver re-measure on every step toggle. Batched into a single rAF dispatch.

Replaced per-step observers with a single shared one keyed by element. Memory footprint dropped 40%.

<pk-chain-of-thought-step>
  <pk-chain-of-thought-trigger [leftIcon]="true">
    <ng-icon leftIcon hlm size="xs" name="lucideSearch" />
    Research phase: Understanding the problem space
  </pk-chain-of-thought-trigger>
  <pk-chain-of-thought-content>
    <pk-chain-of-thought-item>...</pk-chain-of-thought-item>
  </pk-chain-of-thought-content>
</pk-chain-of-thought-step>

Installation

Add the chain-of-thought component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:chain-of-thought

Component API

PkChainOfThought

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

PkChainOfThoughtStep

Prop	Type	Default	Description
open	`model<boolean>`	—	Two-way bound open state. Leave unbound for uncontrolled.
defaultOpen	`boolean`	false	Initial expanded state when uncontrolled.
last	`boolean`	false	Marks the final step so the connecting line stops here.

PkChainOfThoughtTrigger

Prop	Type	Default	Description
leftIcon	`boolean`	false	Reserve a left-icon slot. Project the icon via the [leftIcon] attribute (e.g. <ng-icon leftIcon hlm name="lucideSearch" />).
swapIconOnHover	`boolean`	true	Swap leftIcon for the chevron on hover.
class	`string`	—	Extra classes for the trigger.

PkChainOfThoughtContent

Prop	Type	Default	Description
class	`string`	—	Extra classes for the collapsing wrapper.

PkChainOfThoughtItem

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