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.

<!-- spartan empty state with a card per task -->
<hlm-empty>
  <hlm-empty-header>
    <h2 hlmEmptyTitle>Welcome to ngx-prompt-kit</h2>
    <p hlmEmptyDescription>Three quick steps to get you streaming.</p>
  </hlm-empty-header>
  <hlm-empty-content class="flex-row flex-wrap justify-center gap-3">
    @for (s of suggestions; track s.label) {
      <button type="button" (click)="onPick(s)" class="text-left">
        <div hlmCard class="hover:bg-accent h-full">
          <div hlmCardContent class="flex flex-col gap-2">
            <ng-icon [name]="s.icon" />
            <span class="text-sm font-medium">{{ s.label }}</span>
          </div>
        </div>
      </button>
    }
  </hlm-empty-content>
</hlm-empty>

<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.