All blocks Inspecting 14 functions
Block
Reasoning / thinking pane
Claude/o1-style 'show your work' surface. While streaming, a thinking bar pulses; once done, it collapses and a chain-of-thought timeline + a markdown summary take over.
Thinking bar → chain-of-thought → summary
@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);
}