Branch Nav

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

Sibling-message version navigation. Renders a 1-indexed counter flanked by prev/next arrows. The component does not own the branch state — consumer manages which branch is current and listens for (changed).

Examples

Compact

Set [compact]='true' for the '1 / 3' format. Arrows disable at edges; Left/Right keys navigate when the component has focus.

2 / 5

Current branch: 2

<pk-branch-nav
  [current]="current()"
  [total]="5"
  compact
  (changed)="current.set($event)"
/>

Verbose, below an assistant message

Default verbose format reads naturally as a caption. Wire (changed) to swap which sibling content shows in the bubble above.

Tailwind v4 introduced a CSS-first configuration model — most theme customisation now lives in your stylesheet via the @theme directive.

Branch 1 of 3

<pk-message>
  <pk-message-avatar src="" alt="Assistant" fallback="AI" />
  <pk-message-content [content]="branchContent()" />
</pk-message>
<pk-branch-nav
  class="ml-11"
  [current]="current()"
  [total]="branches.length"
  (changed)="current.set($event)"
/>

Single branch — renders nothing

When [total]='1' the component renders nothing — there's no point in branch nav for a single sibling. The 'no value to render' surface area below shows the example container's natural padding.

(component intentionally renders nothing)

<pk-branch-nav [current]="1" [total]="1" />
<!-- renders nothing -->

Installation

Add the branch-nav component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:branch-nav

Component API

PkBranchNav

Prop	Type	Default	Description
current	`number`	—	1-indexed current branch (required).
total	`number`	—	Total branch count. Component renders nothing when total ≤ 1.
compact	`boolean`	false	Renders "1 / 3" instead of "Branch 1 of 3".
class	`string`	—	Extra classes for the host.

Outputs

Prop	Type	Default	Description
changed	`(next: number) => void`	—	Fires when the user navigates. 1-indexed. Consumer updates current to reflect.