Feedback Bar

A pill bar prompting the user to rate an assistant response. Thumbs up / thumbs down / dismiss, all spartan ghost icon buttons.

Examples

Default

Plain title plus the three action buttons.

Was this helpful?

<pk-feedback-bar
  title="Was this helpful?"
  (helpful)="onUp()"
  (notHelpful)="onDown()"
  (closed)="onClose()"
/>

With a custom leading icon

Project an icon into the [icon] slot — use any ng-icon.

Tell us how the model did.

<pk-feedback-bar title="Tell us how the model did." ...>
  <ng-icon icon name="lucideMessageSquare" class="text-[length:--spacing(4)]" />
</pk-feedback-bar>

Installation

Add the feedback-bar component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:feedback-bar

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

ng g @spartan-ng/cli:ui button

Component API

PkFeedbackBar

Prop	Type	Default	Description
title	`string`	''	Bar label.
helpful	`output<void>`	—	Fires on thumbs-up click.
notHelpful	`output<void>`	—	Fires on thumbs-down click.
closed	`output<void>`	—	Fires on the X close click.
class	`string`	—	Extra classes for the wrapper.
[icon] slot	`ng-content`	—	Project a leading icon (any element with the icon attribute).