@kitn.ai/ui/dist/elements/choice.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{m as ve,s as me,r as fe,j as k,g as U,h as G,l as re,o as he,c as u,E as be,S as b,i as p,d as v,F as ye,a as w,b as L,u as te,t as f,y as ke,n as M,e as xe,f as we}from"./chunks/define-CNSKFZCd.js";import{c as O}from"./chunks/cn-CU7UAWzk.js";import{B as ne}from"./chunks/button-DBDZebGr.js";import{H as Ie}from"./chunks/hover-card-BQGdGAQ3.js";import{C as J}from"./chunks/card-YfCyI4fH.js";import{u as Ae,a as De,D as Ce}from"./chunks/use-card-resolution-M36zVciB.js";import{e as Re}from"./chunks/card-routing-C986KuUA.js";import{x as $e}from"./chunks/x-Ckwicf6g.js";import{c as Se}from"./chunks/check-fhmRksq_.js";var je=f('<p class="text-sm text-foreground">'),Ve=f("<div role=radiogroup>"),Ee=f('<div class="flex flex-col gap-2"><label class=sr-only></label><input type=text class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60">'),Te=f('<div class="flex w-full flex-wrap items-center justify-between gap-2">'),Le=f("<div>"),Me=f('<span class="inline-flex items-center rounded-full bg-[var(--color-primary)] px-1.5 py-0.5 text-[0.625rem] font-medium uppercase leading-none tracking-wide text-[var(--color-primary-foreground,white)]">Recommended'),Oe=f("<img>"),_e=f('<span aria-hidden=true class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-sm font-medium text-muted-foreground">'),ze=f('<img class="max-h-80 max-w-80 rounded-md object-contain">'),Fe=f('<span class="h-2 w-2 rounded-full bg-[var(--color-primary)]">'),qe=f('<span class="text-xs font-normal text-muted-foreground">'),Be=f('<span class="ml-auto shrink-0 text-xs font-normal text-muted-foreground">'),He=f('<div role=radio><span aria-hidden=true></span><span class="flex min-w-0 flex-col gap-0.5"><span class="flex items-center gap-2"><span class=truncate>'),Pe=f("<span>"),Ue=f('<span class="ml-auto text-xs font-normal text-muted-foreground">'),Ge=f('<div class="flex items-center gap-3 rounded-lg border border-input bg-accent px-3 py-2.5 text-sm font-medium text-accent-foreground">'),Je=f("<span>Other: ");const Ke="choice",D="__other__",K="Other\u2026";function Ne(r){if(!Array.isArray(r)||r.length===0)return{options:[],error:"This card couldn't be displayed."};const o=new Set,t=[];for(const s of r){if(!s||typeof s!="object")continue;const i=s;if(typeof i.id!="string"||i.id.length===0||typeof i.label!="string"||i.label.length===0)continue;if(o.has(i.id)){console.warn(`[kai-choice] duplicate option id "${i.id}" ignored`);continue}o.add(i.id);const l=i.media&&typeof i.media=="object"?{image:typeof i.media.image=="string"?i.media.image:void 0,imageAlt:typeof i.media.imageAlt=="string"?i.media.imageAlt:void 0,icon:typeof i.media.icon=="string"?i.media.icon:void 0}:void 0;t.push({id:i.id,label:i.label,description:typeof i.description=="string"?i.description:void 0,media:l,meta:typeof i.meta=="string"?i.meta:void 0,recommended:i.recommended===!0,disabled:i.disabled===!0,payload:i.payload})}return t.length===0?{options:[],error:"This card couldn't be displayed."}:{options:t}}function Qe(r){return r?r===!0?{label:K,placeholder:void 0}:typeof r=="object"?{label:typeof r.label=="string"&&r.label.length>0?r.label:K,placeholder:typeof r.placeholder=="string"?r.placeholder:void 0}:null:null}function oe(r,o,t){const s=r.length;if(s===0)return o;for(let i=1;i<=s;i+=1){const l=((o+t*i)%s+s)%s;if(!r[l].disabled)return l}return o}function ie(r){return r.findIndex(o=>!o.disabled)}function We(r){const o=ve({cardId:"kai-choice"},r),[t]=me(o,["data","cardId","heading","host","hostElement","class","resolution","value","defaultValue","disabled","onValueChange","controllerRef"]),s=Ae(),i=fe(),l=e=>{const n=t.host??s;n?n.emit(e):t.hostElement&&Re(t.hostElement,e)},a=k(()=>{var e;return Ne((e=t.data)==null?void 0:e.options)}),h=k(()=>a().error===void 0),I=k(()=>a().error??""),x=k(()=>a().options),V=k(()=>{var e;return Qe((e=t.data)==null?void 0:e.allowOther)}),C=k(()=>{const e=V();return e?[...x(),{id:D,label:e.label}]:x()}),m=De({prop:()=>t.resolution,data:()=>t.data}),_=k(()=>{const e=m.resolution();return e&&e.kind==="action"?e.action:void 0}),[q,R]=U(0),[ae,N]=U(r.defaultValue),T=k(()=>t.value??ae()),de=e=>{var n;T()!==e&&(N(e),(n=t.onValueChange)==null||n.call(t,e))},[B,Q]=U(""),A=()=>t.disabled===!0;let z,E;const W=k(()=>T()===D);G(re(()=>t.data,()=>{N(t.defaultValue),Q(""),R(Math.max(0,ie(C())))}));const le=k(()=>{var e;const n=m.resolution();return!n||n.kind!=="action"?void 0:n.action===D?{other:!0,text:((e=n.payload)==null?void 0:e.text)??""}:{other:!1,opt:x().find(c=>c.id===n.action),id:n.action}});G(re(h,e=>{l(e?{kind:"ready",cardId:t.cardId}:{kind:"error",cardId:t.cardId,message:I()})})),G(()=>{const e=t.hostElement;if(!e)return;const n=_();n!==void 0?e.setAttribute("data-kai-resolved",n):e.removeAttribute("data-kai-resolved")});const se=e=>e.id===D,H=e=>{m.isResolved()||A()||e.disabled||(de(e.id),se(e)&&queueMicrotask(()=>E?.focus()))},ue=k(()=>{if(m.isResolved()||A())return!1;const e=T();return e===void 0?!1:e===D?B().trim().length>0:!0}),ce=()=>{var e;return((e=t.data)==null?void 0:e.submitLabel)??"Submit"},P=()=>{if(m.isResolved()||A())return;const e=T();if(e===void 0)return;if(e===D){const c=B().trim();if(c.length===0)return;l({kind:"action",cardId:t.cardId,action:D,payload:{text:c}}),m.setLocal({kind:"action",action:D,payload:{text:c}});return}const n=x().find(c=>c.id===e);n&&(l({kind:"action",cardId:t.cardId,action:n.id,...n.payload!==void 0?{payload:n.payload}:{}}),m.setLocal({kind:"action",action:n.id,...n.payload!==void 0?{payload:n.payload}:{}}))},X=()=>{m.isResolved()||(l({kind:"dismiss",cardId:t.cardId}),m.setLocal({kind:"dismissed"}))},Y=()=>l({kind:"reopen",cardId:t.cardId}),F=(e,n)=>{var c;const d=z?.querySelectorAll('[role="radio"]');(c=d?.[e])==null||c.focus(n)};he(()=>{var e;(e=t.controllerRef)==null||e.call(t,{focus:n=>{W()&&E?E.focus(n):F(q(),n)},select:n=>{const c=C(),d=c.findIndex(y=>y.id===n);d!==-1&&(R(d),H(c[d]))},send:()=>P(),dismiss:()=>X(),reopen:()=>Y()})});const pe=e=>{if(m.isResolved()||A())return;const n=C(),c=q();if(e.key==="ArrowDown"||e.key==="ArrowRight"){e.preventDefault();const d=oe(n,c,1);R(d),F(d)}else if(e.key==="ArrowUp"||e.key==="ArrowLeft"){e.preventDefault();const d=oe(n,c,-1);R(d),F(d)}else if(e.key==="Home"){e.preventDefault();const d=Math.max(0,ie(n));R(d),F(d)}else if(e.key===" "||e.key==="Enter"){e.preventDefault();const d=n[c];d&&H(d)}},ge=()=>{var e;return t.heading??((e=t.data)==null?void 0:e.prompt)??"Choose an option"},Z=`kai-choice-prompt-${i}`,ee=`kai-choice-other-${i}`;return u(b,{get when(){return h()},get fallback(){return u(J,{get heading(){return t.heading},get errorMessage(){return I()}})},get children(){return u(be,{fallback:()=>(l({kind:"error",cardId:t.cardId,message:"The card failed to render."}),u(J,{get heading(){return t.heading},errorMessage:"The card failed to render."})),get children(){return u(b,{get when(){return!m.isDeferred()},get fallback(){return u(Ce,{type:Ke,get title(){return t.heading},onReopen:Y})},get children(){return u(J,{get heading(){return t.heading},get children(){var e=Le();return p(e,u(b,{get when(){var n;return(n=t.data)==null?void 0:n.prompt},get children(){var n=je();return v(n,"id",Z),p(n,()=>{var c;return(c=t.data)==null?void 0:c.prompt}),n}}),null),p(e,u(b,{get when(){return!m.isResolved()},get fallback(){return u(rr,{get choice(){return le()},get optimistic(){return m.isOptimistic()}})},get children(){return[(()=>{var n=Ve();n.$$keydown=pe;var c=z;return typeof c=="function"?te(c,n):z=n,p(n,u(ye,{get each(){return C()},children:(d,y)=>{const g=()=>T()===d.id,$=()=>!d.disabled&&!A()&&y()===q()&&!m.isResolved(),S=`kai-choice-desc-${i}-${d.id}`,j=()=>!!d.description;return u(er,{opt:d,get checked(){return g()},get tabStop(){return $()},descId:S,get hasDesc(){return j()},onPick:()=>{R(y()),H(d)},onFocus:()=>R(y())})}})),w(d=>{var y,g=ge(),$=(y=t.data)!=null&&y.prompt?Z:void 0,S=A()?"true":void 0,j=O("divide-y divide-border overflow-hidden rounded-lg border border-input",A()&&"cursor-not-allowed opacity-60");return g!==d.e&&v(n,"aria-label",d.e=g),$!==d.t&&v(n,"aria-describedby",d.t=$),S!==d.a&&v(n,"aria-disabled",d.a=S),j!==d.o&&L(n,d.o=j),d},{e:void 0,t:void 0,a:void 0,o:void 0}),n})(),u(b,{get when(){return W()},get children(){var n=Ee(),c=n.firstChild,d=c.nextSibling;v(c,"for",ee),p(c,()=>{var g;return((g=V())==null?void 0:g.label)??K}),d.$$keydown=g=>{g.key==="Enter"&&(g.preventDefault(),P())},d.$$input=g=>Q(g.currentTarget.value);var y=E;return typeof y=="function"?te(y,d):E=d,v(d,"id",ee),w(g=>{var $,S=A(),j=($=V())==null?void 0:$.placeholder;return S!==g.e&&(d.disabled=g.e=S),j!==g.t&&v(d,"placeholder",g.t=j),g},{e:void 0,t:void 0}),w(()=>d.value=B()),n}}),(()=>{var n=Te();return p(n,u(b,{get when(){var c;return((c=t.data)==null?void 0:c.dismissible)===!0},get children(){return u(ne,{type:"button",variant:"ghost",size:"icon-sm","aria-label":"Dismiss",onClick:X,get children(){return u($e,{size:16,"aria-hidden":"true"})}})}}),null),p(n,u(ne,{type:"button",class:"ml-auto",get disabled(){return!ue()},onClick:P,get children(){return ce()}}),null),n})()]}}),null),w(()=>L(e,O("flex flex-col gap-3",t.class))),e}})}})}})}})}function Xe(){return Me()}function Ye(r){return(()=>{var o=Oe();return w(t=>{var s=r.media.image,i=r.media.imageAlt??"",l=O("shrink-0 rounded-md object-cover",r.class);return s!==t.e&&v(o,"src",t.e=s),i!==t.t&&v(o,"alt",t.t=i),l!==t.a&&L(o,t.a=l),t},{e:void 0,t:void 0,a:void 0}),o})()}function Ze(r){return(()=>{var o=_e();return p(o,()=>r.name.slice(0,2)),o})()}function er(r){return(()=>{var o=He(),t=o.firstChild,s=t.nextSibling,i=s.firstChild,l=i.firstChild;return ke(o,"focus",r.onFocus),o.$$click=()=>!r.opt.disabled&&r.onPick(),p(o,u(b,{get when(){var a;return(a=r.opt.media)==null?void 0:a.image},get children(){return u(Ie,{openDelay:150,class:"p-1 w-auto",placement:"right-start",get trigger(){return u(Ye,{get media(){return r.opt.media},class:"h-9 w-9"})},get children(){var a=ze();return w(h=>{var I=r.opt.media.image,x=r.opt.media.imageAlt??"";return I!==h.e&&v(a,"src",h.e=I),x!==h.t&&v(a,"alt",h.t=x),h},{e:void 0,t:void 0}),a}})}}),t),p(o,u(b,{get when(){var a;return M(()=>{var h;return!((h=r.opt.media)!=null&&h.image)})()&&((a=r.opt.media)==null?void 0:a.icon)},get children(){return u(Ze,{get name(){return r.opt.media.icon}})}}),t),p(t,u(b,{get when(){return r.checked},get children(){return Fe()}})),p(l,()=>r.opt.label),p(i,u(b,{get when(){return r.opt.recommended},get children(){return u(Xe,{})}}),null),p(s,u(b,{get when(){return r.opt.description},get children(){var a=qe();return p(a,()=>r.opt.description),w(()=>v(a,"id",r.descId)),a}}),null),p(o,u(b,{get when(){return r.opt.meta},get children(){var a=Be();return p(a,()=>r.opt.meta),a}}),null),w(a=>{var h=r.checked,I=r.opt.disabled?"true":void 0,x=r.hasDesc?r.descId:void 0,V=r.opt.id,C=r.opt.disabled?-1:r.tabStop?0:-1,m=O("flex items-center gap-3 px-3 py-2.5 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",r.opt.disabled?"cursor-not-allowed opacity-60 text-foreground":"cursor-pointer hover:bg-muted/50",r.checked?"bg-accent font-medium text-accent-foreground":"text-foreground"),_=O("flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center rounded-full border-[1.5px] transition-colors",r.checked?"border-[var(--color-primary)]":"border-input bg-background");return h!==a.e&&v(o,"aria-checked",a.e=h),I!==a.t&&v(o,"aria-disabled",a.t=I),x!==a.a&&v(o,"aria-describedby",a.a=x),V!==a.o&&v(o,"data-option-id",a.o=V),C!==a.i&&v(o,"tabindex",a.i=C),m!==a.n&&L(o,a.n=m),_!==a.s&&L(t,a.s=_),a},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0}),o})()}function rr(r){const o=r.choice;return(()=>{var t=Ge();return p(t,u(Se,{size:16,"aria-hidden":"true"}),null),p(t,u(b,{get when(){return!o.other},get fallback(){return(()=>{var s=Je();return s.firstChild,p(s,(()=>{var i=M(()=>!!o.other);return()=>i()?o.text:""})(),null),s})()},get children(){return[(()=>{var s=Pe();return p(s,(()=>{var i=M(()=>!o.other);return()=>{var l;return i()?((l=o.opt)==null?void 0:l.label)??o.id:""}})()),s})(),u(b,{get when(){var s;return M(()=>!o.other)()&&((s=o.opt)==null?void 0:s.meta)},get children(){var s=Ue();return p(s,(()=>{var i=M(()=>!o.other);return()=>{var l;return i()?(l=o.opt)==null?void 0:l.meta:""}})()),s}})]}}),null),w(()=>v(t,"role",r.optimistic?"status":void 0)),t})()}xe(["keydown","input","click"]),we("kai-choice",{data:void 0,cardId:void 0,heading:void 0,resolution:void 0,value:void 0,defaultValue:void 0,disabled:void 0},(r,{element:o,dispatch:t,flag:s,expose:i})=>{let l;return i({focus:a=>l?.focus(a),select:a=>l?.select(a),send:()=>l?.send(),dismiss:()=>l?.dismiss(),reopen:()=>l?.reopen()}),u(We,{get data(){return r.data},get cardId(){return r.cardId??(o.id||"kai-choice")},get heading(){return r.heading},get resolution(){return r.resolution},get value(){return r.value},get defaultValue(){return r.defaultValue},get disabled(){return s("disabled")},onValueChange:a=>t("kai-value-change",{value:a}),controllerRef:a=>l=a,hostElement:o})});