Feedback Bar

kai-feedback-bar

Asks for a reaction in place, then thanks the reader, with no modal in the way.

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

Preview

When to use

At the end of an assistant response, a completed task, or an article. Add collect-detail for an optional reason on a thumbs-down; the element runs the flow, and you listen for kai-feedback-detail.

Usage

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

• Copy: override any label with attributes: bar-title, detail-title, detail-placeholder, submit-label, thanks-message.
• Detail form: collect-detail opens 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

Code

Collect Detail

Code

Collect Detail with Categories

Code

Customising Copy

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
barTitle	string	'Was this helpful?'	The banner label (e.g. "Was this helpful?"). Attribute: `bar-title` (`title` is avoided because it is 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