Feedback Bar

kai-feedback-bar

An inline thumbs up/down banner that owns its own flow — asks, optionally collects a category and comment on a thumbs-down vote, then confirms with a thank-you — all in place, no modal.

• Shadow DOM
• 3 events
• Optional detail form
• Category chips
• Customisable copy

Preview

When to use

Place <kai-feedback-bar> at the end of an assistant response, a completed task, or an article. Add collect-detail when you want an optional reason on a thumbs-down vote — the element handles the multi-step flow itself, so you only listen for kai-feedback-detail.

Usage

Drop <kai-feedback-bar> after any response. The element transitions to a thank-you on vote; the × button fires kai-close and you control when the element leaves the DOM.

• Copy — override any label via attributes: bar-title, detail-title, detail-placeholder, submit-label, thanks-message.
• Detail form — add collect-detail to open a follow-up form on a thumbs-down vote. Set categories in JavaScript (it’s an array) to render selectable chips.

Examples

Default

Code

Custom Title

Override the question with bar-title when “Was this helpful?” doesn’t fit the context.

Code

Collect Detail

Add collect-detail for an optional follow-up form on a thumbs-down vote. Listen for kai-feedback-detail to receive { value, category?, comment? }.

Code

Collect Detail with Categories

Set the categories property alongside collect-detail to render selectable chips — fast tagging without typing.

Code

Customising Copy

Every label is overridable — override only what you need; the rest fall back to defaults.

Code

Props

Property	Type	Default	Notes
barTitle	string	'Was this helpful?'	The banner label (e.g. "Was this helpful?"). Attribute: `bar-title` (`title` is avoided — it's a global HTML attribute).
collectDetail	boolean	—	When set, a not-helpful vote opens an optional detail form before the thank-you confirmation. Attribute: `collect-detail`.
categories	string[]	—	Optional category chips for the detail form. Set as a JS property (array).
detailTitle	string	—	Heading for the detail form. Attribute: `detail-title`.
detailPlaceholder	string	—	Placeholder for the detail comment box. Attribute: `detail-placeholder`.
submitLabel	string	—	Submit button label in the detail form. Attribute: `submit-label`.
thanksMessage	string	—	Confirmation copy shown after a vote/submit. Attribute: `thanks-message`.

Events

Event	Detail	Notes
kai-close	—	The user dismissed the banner.
kai-feedback	{ … }	The user rated the response. `value` is `'helpful'` or `'not-helpful'`.
kai-feedback-detail	{ … }	The user submitted the optional detail form (`collect-detail`).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

FeedbackBar

---

Need a hand? Report a bug Ask for help