Block

Onboarding tour

Name: ngx-prompt-kit
Author: PianoNic

First-run experience for an AI app: hero with task suggestions and a pk-todo-list checklist. Click any task to mark it complete; the list auto-collapses when everything is done. The same component works for AI-driven todo plans — model emits items, toggles them as it works.

Hero + checklist with auto-collapse

Welcome to ngx-prompt-kit

Three quick steps to get you streaming.

<pk-chat-empty
  title="Welcome to ngx-prompt-kit"
  subtitle="Three quick steps to get you streaming."
  [suggestions]="suggestions"
  (suggestionPicked)="onPick($event)"
/>

<pk-todo-list
  title="setup tasks"
  [items]="items()"
  (toggled)="onToggle($event)"
  (allCompleted)="onAllDone()"
/>

@if (allDone()) {
  <button hlmBtn type="button" (click)="reset()">Run again</button>
}

// Component
protected readonly items = signal<PkTodoItem[]>([
  { id: 'auth', label: 'Add your API key' },
  { id: 'pick', label: 'Pick a default model' },
  { id: 'invite', label: 'Invite a teammate', optional: true },
]);

// Toggle handler — works for both clicks and AI-driven updates
protected onToggle(item: PkTodoItem): void {
  this.items.update(list =>
    list.map(it => it.id === item.id ? { ...it, done: !it.done } : it)
  );
}

// Auto-collapses when allDone hits 100% (autoCollapseWhenDone defaults to true).
// (allCompleted) emits once on the rising edge — wire it to a redirect, a
// confetti burst, or in an agent context to "next step" branching.