@kitn.ai/ui/dist/elements/feedback-bar.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{g as v,i as t,c as r,M as x,S,F as B,a as T,d as W,b as $,B as H,t as g,e as I,f as N}from"./chunks/define-CNSKFZCd.js";import{c as j}from"./chunks/cn-CU7UAWzk.js";import{B as z}from"./chunks/button-DBDZebGr.js";import{T as q}from"./chunks/textarea-CboigarR.js";import{t as A,a as E}from"./chunks/thumbs-up-BR33KLfA.js";import{c as G}from"./chunks/check-fhmRksq_.js";import{x as D}from"./chunks/x-Ckwicf6g.js";var J=g('<div class="flex w-full items-center justify-between"><div class="flex flex-1 items-center justify-start gap-4 py-3 pl-4"><span class="text-foreground font-medium"></span></div><div class="flex items-center justify-center gap-0.5 px-3 py-0"><button type=button class="text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors"aria-label=Helpful></button><button type=button class="text-muted-foreground hover:text-foreground flex size-8 items-center justify-center rounded-md transition-colors"aria-label="Not helpful"></button></div><div class="border-border flex items-center justify-center border-l"><button type=button class="text-muted-foreground hover:text-foreground flex items-center justify-center rounded-md p-3"aria-label=Close>'),K=g('<div class="flex flex-wrap gap-1.5">'),O=g('<div class="flex w-[min(22rem,80vw)] flex-col gap-2.5 p-3"><div class="flex items-center justify-between"><span class="text-foreground font-medium"></span><button type=button aria-label=Skip class="text-muted-foreground hover:text-foreground"></button></div><div class="flex justify-end gap-2">'),Q=g('<div class="flex items-center gap-2 px-4 py-3"role=status><span class="text-foreground font-medium">'),R=g("<div>"),U=g("<button type=button>");function V(e){const[u,f]=v("ask"),[b,M]=v(),[p,L]=v(),[k,P]=v(""),y=i=>{var l;M(i),(l=e.onFeedback)==null||l.call(e,i),f(i==="not-helpful"&&e.collectDetail?"detail":"thanks")},F=()=>{var i;(i=e.onSubmitDetail)==null||i.call(e,{value:b(),category:p(),comment:k()||void 0}),f("thanks")};return(()=>{var i=R();return t(i,r(H,{get children(){return[r(x,{get when(){return u()==="ask"},get children(){var l=J(),n=l.firstChild,m=n.firstChild,h=n.nextSibling,s=h.firstChild,a=s.nextSibling,c=h.nextSibling,o=c.firstChild;return t(n,r(S,{get when(){return e.icon},get children(){return e.icon}}),m),t(m,()=>e.title),s.$$click=()=>y("helpful"),t(s,r(A,{class:"size-4"})),a.$$click=()=>y("not-helpful"),t(a,r(E,{class:"size-4"})),o.$$click=()=>{var d;return(d=e.onClose)==null?void 0:d.call(e)},t(o,r(D,{class:"size-5"})),l}}),r(x,{get when(){return u()==="detail"},get children(){var l=O(),n=l.firstChild,m=n.firstChild,h=m.nextSibling,s=n.nextSibling;return t(m,()=>e.detailTitle??"What went wrong?"),h.$$click=()=>f("thanks"),t(h,r(D,{class:"size-4"})),t(l,r(S,{get when(){var a;return(a=e.categories)==null?void 0:a.length},get children(){var a=K();return t(a,r(B,{get each(){return e.categories},children:c=>(()=>{var o=U();return o.$$click=()=>L(p()===c?void 0:c),t(o,c),T(d=>{var w=p()===c,C=j("rounded-full border px-2.5 py-1 text-xs transition-colors",p()===c?"border-primary bg-primary text-primary-foreground":"border-border text-muted-foreground hover:text-foreground");return w!==d.e&&W(o,"aria-pressed",d.e=w),C!==d.t&&$(o,d.t=C),d},{e:void 0,t:void 0}),o})()})),a}}),s),t(l,r(q,{get value(){return k()},onInput:a=>P(a.currentTarget.value),get placeholder(){return e.detailPlaceholder??"Tell us more (optional)"},class:"border-border min-h-[3rem] rounded-md border px-2 py-1.5"}),s),t(s,r(z,{variant:"ghost",size:"sm",onClick:()=>f("thanks"),children:"Skip"}),null),t(s,r(z,{variant:"default",size:"sm",onClick:F,get children(){return e.submitLabel??"Submit"}}),null),l}}),r(x,{get when(){return u()==="thanks"},get children(){var l=Q(),n=l.firstChild;return t(l,r(G,{class:"size-4 text-emerald-500"}),n),t(n,()=>e.thanksMessage??"Thanks for your feedback"),l}})]}})),T(()=>$(i,j("bg-background border-border inline-flex rounded-[12px] border text-sm",e.class))),i})()}I(["click"]),N("kai-feedback-bar",{barTitle:"Was this helpful?",collectDetail:void 0,categories:void 0,detailTitle:void 0,detailPlaceholder:void 0,submitLabel:void 0,thanksMessage:void 0},(e,{dispatch:u,flag:f})=>r(V,{get title(){return e.barTitle},get collectDetail(){return f("collectDetail")},get categories(){return e.categories},get detailTitle(){return e.detailTitle},get detailPlaceholder(){return e.detailPlaceholder},get submitLabel(){return e.submitLabel},get thanksMessage(){return e.thanksMessage},onFeedback:b=>u("kai-feedback",{value:b}),onSubmitDetail:b=>u("kai-feedback-detail",b),onClose:()=>u("kai-close")}));