Reasoning / thinking pane

@if (thinking()) {
  <pk-thinking-bar
    text="Inspecting 14 functions"
    stopLabel="Skip"
    [showStop]="true"
    (stopped)="stop()"
  />
} @else {
  <pk-chain-of-thought>
    <pk-chain-of-thought-step>
      <pk-chain-of-thought-trigger [leftIcon]="true">
        <ng-icon leftIcon hlm size="xs" name="lucideSearch" />
        Read the input prompt
      </pk-chain-of-thought-trigger>
      <pk-chain-of-thought-content>
        <pk-chain-of-thought-item>Parsed 3 paragraphs.</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 [leftIcon]="true">
        <ng-icon leftIcon hlm size="xs" name="lucideTarget" />
        Compose the answer
      </pk-chain-of-thought-trigger>
      <pk-chain-of-thought-content>
        <pk-chain-of-thought-item>Recommend ...</pk-chain-of-thought-item>
      </pk-chain-of-thought-content>
    </pk-chain-of-thought-step>
  </pk-chain-of-thought>

  <pk-reasoning>
    <pk-reasoning-trigger>Show summary</pk-reasoning-trigger>
    <pk-reasoning-content
      contentClass="border-l-border ml-2 border-l-2 px-2 pb-1"
      [markdown]="true"
      [content]="summary"
    />
  </pk-reasoning>
}

// Component
protected readonly thinking = signal(true);
protected run(): void {
  this.thinking.set(true);
  setTimeout(() => this.thinking.set(false), 1800);
}