Empty-state onboarding

<pk-chat-empty
  subtitle="Pick a starting point or just start typing."
  [suggestions]="suggestions"
  (suggestionPicked)="prefill($event.prompt)"
/>

<div class="flex flex-wrap justify-center gap-2">
  @for (q of quickPrompts; track q) {
    <pk-prompt-suggestion [content]="q" (clicked)="prefill(q)" />
  }
</div>

<pk-prompt-input [(value)]="value" (submitted)="onSubmit()">
  <pk-prompt-input-textarea placeholder="Ask anything..." />
  <pk-prompt-input-actions class="mt-2 justify-end">
    <pk-prompt-input-action tooltip="Send">
      <button hlmBtn size="icon-sm" class="rounded-full" (click)="onSubmit()">
        <ng-icon hlm size="xs" name="lucideArrowUp" />
      </button>
    </pk-prompt-input-action>
  </pk-prompt-input-actions>
</pk-prompt-input>

// In the component
protected readonly value = signal('');
protected readonly suggestions: ChatEmptySuggestion[] = [
  { label: 'Draft release notes...', icon: 'lucideFileText', prompt: '...' },
  // ...
];
protected readonly quickPrompts = ['Summarise', 'Translate', 'Shorter'];
protected prefill(p: string) { this.value.set(p); }
protected onSubmit() {
  const v = this.value().trim();
  if (!v) return;
  this.value.set('');
}