Prompt Suggestion

Name: ngx-prompt-kit
Author: PianoNic

Clickable prompt chips. Two modes: pill (no highlight) and inline list (with substring highlight against a query).

Examples

Pill chips

Default style — outline buttons in a row.

<div class="flex flex-wrap gap-2">
  @for (s of suggestions; track s) {
    <pk-prompt-suggestion [content]="s" (clicked)="onPick(s)" />
  }
</div>

Filterable list

Pass a highlight string; the matching substring is emphasized.

<input
  class="..."
  placeholder="Filter..."
  [value]="filter()"
  (input)="filter.set($any($event.target).value)"
/>
@for (s of suggestions; track s) {
  <pk-prompt-suggestion
    [content]="s"
    [highlight]="filter()"
    (clicked)="onPick(s)"
  />
}

Installation

Add the prompt-suggestion component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:prompt-suggestion

It is built on spartan/ui, so add these helm components too: button.

ng g @spartan-ng/cli:ui button

Component API

PkPromptSuggestion

Prop	Type	Default	Description
content	`string`	''	The suggestion text.
highlight	`string`	''	When non-empty, switches to inline list mode and highlights this substring inside content.
variant	`ButtonVariants["variant"]`	—	Override the underlying hlmBtn variant.
size	`ButtonVariants["size"]`	—	Override the underlying hlmBtn size.
clicked	`output<void>`	—	Fires when the chip is clicked.
class	`string`	—	Extra classes for the button.