Thinking Bar

A compact 'still working' indicator — combine the shimmer label with optional click-to-expand or stop affordances.

Examples

Just the shimmer text. No interaction.

Generating answer

<pk-thinking-bar text="Generating answer" />

Add a stop affordance for cancellable streams.

Streaming response

<pk-thinking-bar
  text="Streaming response"
  stopLabel="Stop"
  [showStop]="true"
  (stopped)="onStop()"
/>

Bar itself becomes clickable with a chevron — open a thinking panel or a tool drawer on click.

<pk-thinking-bar
  text="Inspecting 14 functions"
  [clickable]="true"
  [showStop]="true"
  (clicked)="onOpen()"
  (stopped)="onStop()"
/>

Installation

Add the thinking-bar component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:thinking-bar

Prop	Type	Default	Description
text	`string`	'Thinking'	Shimmer label.
stopLabel	`string`	'Answer now'	Stop button label.
showStop	`boolean`	false	Render the stop button.
clickable	`boolean`	false	Render the label as a click target with chevron.
stopped	`output<void>`	—	Fires when the stop button is clicked.
clicked	`output<void>`	—	Fires when the bar is clicked (when clickable).
class	`string`	—	Extra classes for the wrapper.