@kitn.ai/ui/dist/elements/compare.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 W,s as X,r as Y,j as v,g as P,h as H,l as j,c as l,E as Z,i as u,S as f,d as A,I as U,a as k,b as C,u as ee,t as m,n as te,e as re,f as ae,x as ne,C as oe}from"./chunks/define-CNSKFZCd.js";import{c as T}from"./chunks/cn-CU7UAWzk.js";import{B as ie}from"./chunks/button-DBDZebGr.js";import{C as O}from"./chunks/card-YfCyI4fH.js";import{M as q}from"./chunks/message-CgKytiSB.js";import{T as de}from"./chunks/text-shimmer-CEi-tlXr.js";import{c as le}from"./chunks/check-fhmRksq_.js";function se(e){if(!Array.isArray(e))return{candidates:null,error:"This comparison couldn't be displayed."};if(e.length!==2)return{candidates:null,error:`A comparison needs exactly two candidates (got ${e.length}).`};const d=[],s=new Set;for(const r of e){if(!r||typeof r!="object")return{candidates:null,error:"This comparison couldn't be displayed."};const a=r;if(typeof a.id!="string"||a.id.length===0)return{candidates:null,error:"Each candidate needs a non-empty id."};if(s.has(a.id))return{candidates:null,error:`Duplicate candidate id "${a.id}".`};s.add(a.id),d.push({id:a.id,content:typeof a.content=="string"?a.content:"",reasoning:a.reasoning,tools:Array.isArray(a.tools)?a.tools:void 0,attachments:Array.isArray(a.attachments)?a.attachments:void 0,label:typeof a.label=="string"?a.label:void 0,model:typeof a.model=="string"?a.model:void 0,streaming:a.streaming===!0})}return{candidates:[d[0],d[1]]}}function ce(e,d){const s=e.filter(r=>r.id!==d).map(r=>r.id);return{chosenId:d,rejectedIds:s,at:Date.now()}}function ue(e){return e?e.some(d=>d.streaming===!0):!1}var ge=m('<p class="text-sm text-foreground">'),pe=m('<div role=tablist aria-label="Switch response">'),me=m("<div role=radiogroup>"),ve=m("<div>"),fe=m("<button type=button role=tab>"),he=m('<span class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">'),ye=m('<span class="text-xs text-muted-foreground">'),be=m('<div class="flex items-center gap-2">'),xe=m('<div><div class="min-w-0 flex-1">'),ke=m('<div class="flex flex-col gap-2 rounded-lg border border-input bg-accent/40 p-3"><div class="flex items-center gap-2 text-sm font-medium text-accent-foreground"><span>Selected'),we=m('<p class="text-sm text-muted-foreground">Response selected.'),Se=m("<div class=min-w-0>");function Re(e){const[d,s]=P(void 0);H(j(e.data,()=>s(void 0),{defer:!0}));const r=v(()=>e.prop()??d()),a=v(()=>r()!==void 0),c=v(()=>e.prop()===void 0&&d()!==void 0);return{value:r,isResolved:a,isOptimistic:c,setLocal:s}}function Ae(e){var d;const s=W({compareId:"kai-compare",layout:"auto"},e),[r]=X(s,["data","compareId","selection","layout","class","controllerRef","onSelect","onReady","onError"]),a=Y(),c=v(()=>{var t;return se((t=r.data)==null?void 0:t.candidates)}),h=v(()=>c().candidates!==null),p=v(()=>c().error??""),b=v(()=>c().candidates),x=Re({prop:()=>r.selection,data:()=>r.data}),E=v(()=>ue(b())),[I,w]=P(0),[D,z]=P(0);let $;H(j(()=>r.data,()=>{w(0),z(0)})),H(j([h,E],([t,n])=>{var i,o;if(!t){(i=r.onError)==null||i.call(r,p());return}n||(o=r.onReady)==null||o.call(r)}));const B=v(()=>{var t;return(t=x.value())==null?void 0:t.chosenId}),G=v(()=>{var t;const n=B();return n===void 0||(t=b())==null?void 0:t.find(i=>i.id===n)}),M=t=>{var n;if(x.isResolved()||E())return;const i=b();if(!i)return;const o=ce(i,t.id);(n=r.onSelect)==null||n.call(r,o),x.setLocal(o)},F=(t,n)=>{var i;const o=$?.querySelectorAll('[role="radio"]');(i=o?.[t])==null||i.focus(n)};(d=r.controllerRef)==null||d.call(r,{select:t=>{var n;const i=(n=b())==null?void 0:n.find(o=>o.id===t);i&&M(i)},focus:t=>F(I(),t)});const _=t=>{if(x.isResolved())return;const n=b();if(!n)return;const i=o=>{w(o),z(o),F(o)};if(t.key==="ArrowRight"||t.key==="ArrowDown"||t.key==="ArrowLeft"||t.key==="ArrowUp")t.preventDefault(),i(I()===0?1:0);else if(t.key==="Home")t.preventDefault(),i(0);else if(t.key==="End")t.preventDefault(),i(1);else if(t.key===" "||t.key==="Enter"){t.preventDefault();const o=n[I()];o&&M(o)}},J=v(()=>{const t=r.layout;return t==="columns"?"grid grid-cols-2 gap-3":t==="tabs"?"grid grid-cols-1 gap-3":"grid grid-cols-1 gap-3 @[640px]/compare:grid-cols-2"}),K=()=>r.layout==="tabs"||r.layout==="auto",N=()=>r.layout==="auto"?"@[640px]/compare:hidden":"",Q=t=>{const n=r.layout;return n==="columns"||t===D()?"":n==="tabs"?"hidden":"hidden @[640px]/compare:block"},L=`kai-compare-prompt-${a}`,V=()=>{var t;return((t=r.data)==null?void 0:t.prompt)??"Compare two responses"};return l(f,{get when(){return h()},get fallback(){return l(O,{get errorMessage(){return p()||"This comparison couldn't be displayed."}})},get children(){return l(Z,{fallback:()=>{var t;return(t=r.onError)==null||t.call(r,"The comparison failed to render."),l(O,{errorMessage:"The comparison failed to render."})},get children(){var t=ve();return u(t,l(f,{get when(){var n;return(n=r.data)==null?void 0:n.prompt},get children(){var n=ge();return A(n,"id",L),u(n,()=>{var i;return(i=r.data)==null?void 0:i.prompt}),n}}),null),u(t,l(f,{get when(){return!x.isResolved()},get fallback(){return l(Ie,{get candidate(){return G()},get optimistic(){return x.isOptimistic()}})},get children(){return[l(f,{get when(){return K()},get children(){var n=pe();return u(n,l(U,{get each(){return b()??[]},children:(i,o)=>(()=>{var g=fe();return g.$$click=()=>{z(o),w(o)},u(g,()=>i().label??`Response ${i().id}`),k(y=>{var S=D()===o,R=T("rounded-md px-3 py-1 text-xs font-medium transition-colors",D()===o?"bg-muted text-foreground":"text-muted-foreground hover:text-foreground");return S!==y.e&&A(g,"aria-selected",y.e=S),R!==y.t&&C(g,y.t=R),y},{e:void 0,t:void 0}),g})()})),k(()=>C(n,T("flex gap-1",N()))),n}}),(()=>{var n=me();n.$$keydown=_;var i=$;return typeof i=="function"?ee(i,n):$=n,u(n,l(U,{get each(){return b()??[]},children:(o,g)=>l(Ce,{get candidate(){return o()},get tabStop(){return g===I()},get disabled(){return E()},hiddenClass:()=>Q(g),onFocus:()=>w(g),onPick:()=>{w(g),M(o())}})})),k(o=>{var g,y=V(),S=(g=r.data)!=null&&g.prompt?L:void 0,R=J();return y!==o.e&&A(n,"aria-label",o.e=y),S!==o.t&&A(n,"aria-describedby",o.t=S),R!==o.a&&C(n,o.a=R),o},{e:void 0,t:void 0,a:void 0}),n})()]}}),null),k(()=>C(t,T("flex flex-col gap-3",r.layout==="auto"&&"@container/compare",r.class))),t}})}})}function Ce(e){const d=()=>e.candidate.label??e.candidate.model??e.candidate.id;return(()=>{var s=xe(),r=s.firstChild;return u(s,l(f,{get when(){return e.candidate.label||e.candidate.model},get children(){var a=be();return u(a,l(f,{get when(){return e.candidate.label},get children(){var c=he();return u(c,()=>e.candidate.label),c}}),null),u(a,l(f,{get when(){return e.candidate.model},get children(){var c=ye();return u(c,()=>e.candidate.model),c}}),null),a}}),r),u(r,l(f,{get when(){return e.candidate.streaming},get fallback(){return l(q,{get content(){return e.candidate.content},get reasoning(){return e.candidate.reasoning},get tools(){return e.candidate.tools},get attachments(){return e.candidate.attachments},isUser:!1,markdown:!0})},get children(){return l(de,{class:"text-sm",children:"Generating response\u2026"})}})),u(s,l(ie,{type:"button",role:"radio","aria-checked":!1,get"aria-label"(){return`Pick ${d()}`},get"data-candidate-id"(){return e.candidate.id},variant:"outline",size:"sm",class:"mt-auto w-full",get disabled(){return e.disabled},get tabindex(){return e.tabStop?0:-1},get onFocus(){return e.onFocus},onClick:a=>{a.stopPropagation(),e.onPick()},children:"Pick this"}),null),k(()=>{var a;return C(s,T("flex min-w-0 flex-col gap-3 rounded-lg border border-input bg-background/40 p-3",(a=e.hiddenClass)==null?void 0:a.call(e)))}),s})()}function Ie(e){return(()=>{var d=ke(),s=d.firstChild,r=s.firstChild;return r.firstChild,u(s,l(le,{size:16,"aria-hidden":"true"}),r),u(r,(()=>{var a=te(()=>{var c;return!!((c=e.candidate)!=null&&c.label)});return()=>a()?`: ${e.candidate.label}`:""})(),null),u(d,l(f,{get when(){return e.candidate},get fallback(){return we()},children:a=>(()=>{var c=Se();return u(c,l(q,{get content(){return a().content},get reasoning(){return a().reasoning},get tools(){return a().tools},get attachments(){return a().attachments},isUser:!1,markdown:!0})),c})()}),null),k(()=>A(d,"role",e.optimistic?"status":void 0)),d})()}re(["keydown","click"]),ae("kai-compare",{data:void 0,compareId:void 0,selection:void 0,layout:"auto",proseSize:void 0,codeTheme:void 0,codeHighlight:void 0},(e,{element:d,dispatch:s,expose:r})=>{const a=()=>e.compareId??(d.id||"kai-compare"),c=ne();let h;return r({select:p=>h?.select(p),focus:p=>h?.focus(p)}),l(oe,{get proseSize(){return e.proseSize},get codeTheme(){return e.codeTheme},get codeHighlight(){return e.codeHighlight},get portalMount(){return c.portalMount()},get children(){return l(Ae,{get data(){return e.data},get compareId(){return a()},get selection(){return e.selection},get layout(){return e.layout??"auto"},controllerRef:p=>h=p,onSelect:p=>s("kai-compare-select",p),onReady:()=>s("kai-ready",{compareId:a()}),onError:p=>s("kai-error",{compareId:a(),message:p})})}})});