Block

Regenerate variants

Name: ngx-prompt-kit
Author: PianoNic

Mid-conversation 'try a different angle' affordance. Pick a tone via prompt-suggestion chips; the assistant message swaps to that variant.

Tone presets · live message swap

Explain why semantic versioning matters.

SemVer signals breakage: a major bump means you have to read the release notes; minor and patch should be drop-in.

Try a different tone

<pk-message>
  <pk-message-avatar src="" alt="Assistant" fallback="AI" />
  <div class="flex flex-1 flex-col gap-3">
    <pk-message-content [markdown]="true" [content]="current().text" />

    <div class="border-t pt-3">
      <span class="text-xs uppercase">Try a different tone</span>
      <div class="flex flex-wrap gap-2">
        @for (v of variants; track v.id) {
          <pk-prompt-suggestion
            [content]="v.label"
            [variant]="v.id === currentId() ? 'default' : 'outline'"
            (clicked)="currentId.set(v.id)"
          />
        }
      </div>
    </div>
  </div>
</pk-message>

// Component
interface Variant { id: string; label: string; text: string; }

protected readonly variants: Variant[] = [
  { id: 'concise',   label: 'Concise',   text: '...' },
  { id: 'eli5',      label: 'Explain like I am 5', text: '...' },
  { id: 'technical', label: 'Technical', text: '...' },
  { id: 'formal',    label: 'Formal',    text: '...' },
];

protected readonly currentId = signal<string>('concise');
protected readonly current = computed(
  () => this.variants.find(v => v.id === this.currentId()) ?? this.variants[0]
);