@kitn.ai/ui/dist/elements/chain-of-thought.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 C,c as a,F as I,S as y,n as L,i as g,a as z,b as V,s as R,k as q,m as E,t as v,f as F,o as H,p as K}from"./chunks/define-CNSKFZCd.js";import{c as f}from"./chunks/cn-CU7UAWzk.js";import{C as M,a as _,b as B}from"./chunks/collapsible-CWUAShMC.js";import{c as k}from"./chunks/chevron-down-DcRg1aRU.js";import{c as D}from"./chunks/circle-B4fTe9v6.js";var A=v("<div>"),G=v('<span class="relative inline-flex size-4 items-center justify-center"><span>'),J=v('<div class="flex items-center gap-2"><span>'),N=v('<span class="relative inline-flex size-4 items-center justify-center">'),P=v('<div class="grid grid-cols-[min-content_minmax(0,1fr)] gap-x-4"><div class="bg-primary/20 ml-1.75 h-full w-px group-data-[last=true]:hidden"></div><div class="ml-1.75 h-full w-px bg-transparent group-data-[last=false]:hidden"></div><div class="mt-2 space-y-2">'),Q=v('<div class="flex justify-start group-data-[last=true]:hidden"><div class="bg-primary/20 ml-1.75 h-4 w-px">');function T(e){const[n,c]=R(e,["children","class"]);return(()=>{var o=A();return q(o,E({get class(){return f("text-muted-foreground text-sm",n.class)}},c),!1,!0),g(o,()=>n.children),o})()}function U(e){const n=()=>e.swapIconOnHover??!0;return a(_,{get class(){return f("group text-muted-foreground hover:text-foreground flex cursor-pointer items-center justify-start gap-1 text-left text-meta transition-colors",e.class)},get children(){return[(()=>{var c=J(),o=c.firstChild;return g(c,a(y,{get when(){return e.leftIcon},get fallback(){return(()=>{var l=N();return g(l,a(D,{class:"size-2 fill-current"})),l})()},get children(){var l=G(),d=l.firstChild;return g(d,()=>e.leftIcon),g(l,a(y,{get when(){return n()},get children(){return a(k,{class:"absolute size-4 opacity-0 transition-opacity group-hover:opacity-100 group-data-[state=open]:rotate-180"})}}),null),z(()=>V(d,f("transition-opacity",n()&&"group-hover:opacity-0"))),l}}),o),g(o,()=>e.children),c})(),a(y,{get when(){return!e.leftIcon},get children(){return a(k,{class:"size-4 transition-transform group-data-[state=open]:rotate-180"})}})]}})}function W(e){return a(B,{get class(){return f("text-popover-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden",e.class)},get children(){var n=P(),c=n.firstChild,o=c.nextSibling,l=o.nextSibling;return g(l,()=>e.children),n}})}function X(e){return(()=>{var n=A();return g(n,()=>e.children),z(()=>V(n,f("space-y-0",e.class))),n})()}function Y(e){return a(M,{get class(){return f("group",e.class)},get"data-last"(){return e.isLast??!1},get open(){return e.open},get onOpenChange(){return e.onOpenChange},get children(){return[L(()=>e.children),Q()]}})}function O(e){return e==null?new Set:new Set(Array.isArray(e)?e:[e])}function $(e){var n;const[c,o]=C(O(e.defaultValue)),l=()=>e.type??"multiple",d=(t,r)=>t.id??String(r),m=()=>e.value!==void 0,u=()=>m()?O(e.value):c(),s=t=>u().has(t),h=t=>{if(l()==="single"){const r=t.values().next();return r.done?"":r.value}return[...t]},p=t=>{var r;const i=u();i.size===t.size&&[...i].every(b=>t.has(b))||(m()||o(t),(r=e.onValueChange)==null||r.call(e,h(t)))},x=(t,r)=>{if(l()==="single"){p(r?new Set([t]):new Set);return}const i=new Set(u());r?i.add(t):i.delete(t),p(i)},w=t=>{const r=e.steps[t];return r?d(r,t):void 0},S=()=>e.steps.map((t,r)=>d(t,r));return(n=e.controllerRef)==null||n.call(e,{value:()=>h(u()),expand:t=>{if(t===void 0){if(l()==="single"){const i=S();p(i.length?new Set([i[i.length-1]]):new Set)}else p(new Set(S()));return}const r=w(t);r!==void 0&&x(r,!0)},collapse:t=>{if(t===void 0){p(new Set);return}const r=w(t);r!==void 0&&x(r,!1)},toggle:t=>{if(t===void 0)return;const r=w(t);r!==void 0&&x(r,!s(r))}}),a(X,{get class(){return e.class},get children(){return a(I,{get each(){return e.steps},children:(t,r)=>{const i=()=>d(t,r());return a(Y,{get isLast(){return r()===e.steps.length-1},get open(){return s(i())},onOpenChange:b=>x(i(),b),get children(){return[a(U,{get children(){return t.label}}),a(y,{get when(){return t.content},get children(){return a(W,{get children(){return a(T,{get children(){return t.content}})}})}})]}})}})}})}function j(e){var n;return{label:e.getAttribute("label")??"",content:((n=e.textContent)==null?void 0:n.trim())||void 0,id:e.getAttribute("step-id")??void 0}}F("kai-chain-of-thought",{steps:[],type:void 0,value:void 0,defaultValue:void 0},(e,{element:n,dispatch:c,expose:o})=>{const[l,d]=C([]);H(()=>{const s=()=>{const p=[...n.querySelectorAll("kai-step")];d(p.map(j))};s();const h=new MutationObserver(s);h.observe(n,{childList:!0,attributes:!0,subtree:!0}),K(()=>h.disconnect())});const m=()=>[...e.steps,...l()];let u;return o({expand:s=>u?.expand(s),collapse:s=>u?.collapse(s),toggle:s=>u?.toggle(s)}),a($,{get steps(){return m()},get type(){return e.type},get value(){return e.value},get defaultValue(){return e.defaultValue},onValueChange:s=>{c("kai-value-change",{value:s})},controllerRef:s=>u=s})});export{j as parseKaiStepElement};