All blocks
Block
Empty-state onboarding
The 'first message' surface every chat app needs. A hero with suggestion cards, plus a row of pill chips above a working prompt input. Picking a card or chip pre-fills the input.
Onboarding hero with prefill
How can I help today?
Pick a starting point or just start typing.
<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('');
}