UNPKG

@kitn.ai/ui

Version:

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

2 lines (1 loc) 5.39 kB
import{c as t,m as b,s as B,g as E,i as a,S as l,F as L,n as y,a as p,b as M,t as o,G as g}from"./define-CNSKFZCd.js";import{c as P}from"./cn-CU7UAWzk.js";import{a as $,b as q,C as D}from"./collapsible-CWUAShMC.js";import{B as F}from"./button-DBDZebGr.js";import{c as G}from"./chevron-down-DcRg1aRU.js";import{I as k}from"./Icon-C2LTALdM.js";import{c as J}from"./circle-x-pDtzlghQ.js";import{s as V}from"./settings-Cz1bMJP9.js";var A=[["path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14",key:"g774vq"}],["path",{d:"m9 11 3 3L22 4",key:"1pflzl"}]],H=e=>t(k,b(e,{name:"CircleCheckBig",iconNode:A})),K=H,Q=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]],U=e=>t(k,b(e,{name:"LoaderCircle",iconNode:Q})),W=U,X=o('<span class="px-2 py-1 rounded-full text-xs font-medium">Processing'),Y=o('<span class="px-2 py-1 rounded-full text-xs font-medium">Ready'),Z=o('<span class="px-2 py-1 rounded-full text-xs font-medium">Completed'),_=o('<span class="px-2 py-1 rounded-full text-xs font-medium">Error'),tt=o('<div><h4 class="text-muted-foreground mb-2 text-sm font-medium">Input</h4><div class="rounded bg-surface-strong p-2 font-mono text-sm">'),et=o('<div><h4 class="text-muted-foreground mb-2 text-sm font-medium">Output</h4><div tabindex=0 class="max-h-60 overflow-auto rounded bg-surface-strong p-2 font-mono text-sm"><pre class=whitespace-pre-wrap>'),rt=o('<div><h4 class="mb-2 text-sm font-medium text-red-600 dark:text-red-400">Error</h4><div class="rounded bg-red-500/10 p-2 text-sm">'),nt=o('<div class="text-muted-foreground text-sm">Processing tool call...'),at=o('<div class="text-muted-foreground pt-2 text-xs"><span class=font-mono>Call ID: '),lt=o('<div class="space-y-3 p-3">'),ot=o("<div>"),st=o('<div class="flex items-center gap-2"><span class="font-mono text-sm font-medium">'),it=o("<div class=mb-1><span class=text-muted-foreground>:</span> <span>");function S(e){return e===null?"null":e===void 0?"undefined":typeof e=="string"?e:typeof e=="object"?JSON.stringify(e,null,2):String(e)}function ut(e){return[t(l,{get when(){return e.state==="input-streaming"},get children(){return t(W,{class:"size-4 animate-spin text-blue-500"})}}),t(l,{get when(){return e.state==="input-available"},get children(){return t(V,{class:"size-4 text-orange-500"})}}),t(l,{get when(){return e.state==="output-available"},get children(){return t(K,{class:"size-4 text-green-500"})}}),t(l,{get when(){return e.state==="output-error"},get children(){return t(J,{class:"size-4 text-red-500"})}})]}const dt={"input-streaming":"var(--color-tool-blue)","input-available":"var(--color-tool-amber)","output-available":"var(--color-tool-green)","output-error":"var(--color-tool-red)"},ct={"input-streaming":"hsl(217 91% 60%)","input-available":"hsl(38 92% 50%)","output-available":"hsl(142 71% 45%)","output-error":"hsl(0 84% 60%)"};function f(e){return{color:dt[e],background:`color-mix(in oklab, ${ct[e]} 15%, transparent)`}}function pt(e){return[t(l,{get when(){return e.state==="input-streaming"},get children(){var r=X();return p(u=>g(r,f("input-streaming"),u)),r}}),t(l,{get when(){return e.state==="input-available"},get children(){var r=Y();return p(u=>g(r,f("input-available"),u)),r}}),t(l,{get when(){return e.state==="output-available"},get children(){var r=Z();return p(u=>g(r,f("output-available"),u)),r}}),t(l,{get when(){return e.state==="output-error"},get children(){var r=_();return p(u=>g(r,f("output-error"),u)),r}})]}function mt(e){const[r,u]=B(e,["toolPart","defaultOpen","disabled","controllerRef","class"]),[z,O]=E(),I=()=>{var d;return((d=z())==null?void 0:d.open())??r.defaultOpen??!1},m=()=>r.toolPart.state,h=()=>r.toolPart.input,w=()=>r.toolPart.output;return(()=>{var d=ot();return a(d,t(D,{get defaultOpen(){return r.defaultOpen},get disabled(){return r.disabled},controllerRef:s=>{var n;O(s),(n=r.controllerRef)==null||n.call(r,s)},get children(){return[t($,{as:s=>t(F,b({variant:"ghost",class:"h-auto w-full justify-between rounded-b-none px-3 py-2 font-normal"},s,{get children(){return[(()=>{var n=st(),i=n.firstChild;return a(n,t(ut,{get state(){return m()}}),i),a(i,()=>r.toolPart.type),a(n,t(pt,{get state(){return m()}}),null),n})(),t(G,{get class(){return P("size-4 transition-transform",I()&&"rotate-180")}})]}}))}),t(q,{class:"data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden",get children(){var s=lt();return a(s,t(l,{get when(){return y(()=>!!h())()&&Object.keys(h()).length>0},get children(){var n=tt(),i=n.firstChild,c=i.nextSibling;return a(c,t(L,{get each(){return Object.entries(h())},children:([v,j])=>(()=>{var C=it(),x=C.firstChild,R=x.firstChild,N=x.nextSibling,T=N.nextSibling;return a(x,v,R),a(T,()=>S(j)),C})()})),n}}),null),a(s,t(l,{get when(){return w()},get children(){var n=et(),i=n.firstChild,c=i.nextSibling,v=c.firstChild;return a(v,()=>S(w())),n}}),null),a(s,t(l,{get when(){return y(()=>m()==="output-error")()&&r.toolPart.errorText},get children(){var n=rt(),i=n.firstChild,c=i.nextSibling;return a(c,()=>r.toolPart.errorText),n}}),null),a(s,t(l,{get when(){return m()==="input-streaming"},get children(){return nt()}}),null),a(s,t(l,{get when(){return r.toolPart.toolCallId},get children(){var n=at(),i=n.firstChild;return i.firstChild,a(i,()=>r.toolPart.toolCallId,null),n}}),null),s}})]}})),p(()=>M(d,P("mt-3 overflow-hidden rounded-lg bg-surface",r.class))),d})()}export{mt as T};