Chat Empty

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

Landing state for a chat surface — centered hero with optional subtitle and a responsive grid of suggestion cards.

Examples

With suggestions

Pass a suggestions array to render a 1/2/4-column responsive grid below the hero. (suggestionPicked) emits the picked entry; wire prompt into your input.

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)="onPick($event)"
/>

Hero only

Omit suggestions for a minimal landing — useful when prompts are surfaced elsewhere (e.g. via prompt-suggestion chips above the input).

Welcome back.

What are we shipping today?

<pk-chat-empty
  title="Welcome back."
  subtitle="What are we shipping today?"
/>

Installation

Add the chat-empty component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:chat-empty

Component API

PkChatEmpty

Prop	Type	Default	Description
title	`string`	"How can I help today?"	The hero heading.
subtitle	`string \| undefined`	—	Optional muted line beneath the heading.
suggestions	`readonly ChatEmptySuggestion[]`	[]	Suggestion cards. Empty array renders just the hero. Each entry: { label, icon?, prompt }.
class	`string`	—	Extra classes for the host.

Outputs

Prop	Type	Default	Description
suggestionPicked	`(s: ChatEmptySuggestion) => void`	—	Fires when a suggestion card is clicked. Use s.prompt to prefill the input.