Reasoning Selector

ngx-prompt-kit original — not part of ibelick/prompt-kit

A composer-toolbar picker for how long the model reasons before answering. The trigger shows a strength glyph and the level's name; the menu, a spartan dropdown menu of radio items, lists each level with a one-line description, and its footer rates the highlighted level's speed and credits as it follows the pointer and the arrow keys.

Examples

In a composer

Placed in the composer's end slot, left of the model button. Arrow keys move through the levels, Enter picks one, Escape closes the menu and returns focus to the trigger.

value: medium

<pk-composer placeholder="Ask anything" [attachable]="true">
  <pk-reasoning-selector pkComposerEnd [(value)]="level" />
  <pk-model-selector pkComposerEnd ... />
</pk-composer>

// level = signal<string | null>('medium');  // null = Auto
// Defaults: Auto (null), Off 'none', Light 'low', Balanced 'medium', Deep 'high', Maximum 'max'

Your own levels

Pass levels with your provider's values. Leave out an entry with value null to drop Auto, and leave out speed and credits to drop the footer.

value: low

type Effort = 'minimal' | 'low' | 'high';

const LEVELS: ReasoningLevelOption<Effort>[] = [
  { value: 'minimal', label: 'Quick', description: 'Barely thinks', strength: 1, speed: 5, credits: 1 },
  { value: 'low', label: 'Standard', description: 'The usual', strength: 2, speed: 3, credits: 3 },
  { value: 'high', label: 'Thorough', description: 'Takes its time', strength: 4, speed: 1, credits: 5 },
];

<pk-reasoning-selector [levels]="levels" [(value)]="effort" />

Glyphs

pk-reasoning-glyph on its own, for showing a level elsewhere (a message header, a settings row). Give it a label when no text next to it names the level.

<pk-reasoning-glyph strength="auto" label="Auto" />
<pk-reasoning-glyph [strength]="2" label="Strength 2 of 4" />

Disabled

<pk-reasoning-selector [disabled]="true" value="medium" />

Installation

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

ng generate ngx-prompt-kit:reasoning-selector

It is built on spartan/ui, so add these helm components too: button, dropdown-menu.

ng g @spartan-ng/cli:ui button dropdown-menu

Component API

PkReasoningSelector

Prop	Type	Default	Description
levels	`ReasoningLevelOption<T>[]`	DEFAULT_REASONING_LEVELS	The rows, in order. An entry with strength "auto" is followed by a divider. { value: T \| null, label, description?, strength: 0-4 \| "auto", speed?: 1-5, credits?: 1-5 }.
value	`model<T \| null>`	null	The picked level, two-way with [(value)]. null is the auto entry. A value no level has shows the auto entry (or the first).
valueChange	`output<T \| null>`	—	Fires when a level is picked.
disabled	`boolean`	false	Disables the trigger.
label	`string`	'Reasoning'	The menu heading and accessible name; the trigger is named "<label>: <level>".
side	`'top' \| 'bottom' \| 'left' \| 'right'`	'top'	Where the menu opens; it flips when there is no room.
align	`'start' \| 'center' \| 'end'`	'start'	How the menu lines up with the trigger.
class	`string`	—	Extra classes for the host.

PkReasoningGlyph

Prop	Type	Default	Description
strength	`0 \| 1 \| 2 \| 3 \| 4 \| "auto"`	—	Filled bars, or a sparkle for auto.
label	`string`	''	Accessible name (role="img"). Empty leaves the glyph decorative.