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.68 kB
import{j as s,c as n,S as a,i as o,a as d,b as f,z as P,v as z,w as E,t as u,d as D,n as O}from"./define-CNSKFZCd.js";import{a as R,b as q,c as A}from"./hover-card-BQGdGAQ3.js";import{c as h}from"./cn-CU7UAWzk.js";import{B as G}from"./button-DBDZebGr.js";var H=u('<svg aria-label="Model context usage"height=20 role=img viewBox="0 0 24 24"width=20 style=color:currentcolor><circle cx=12 cy=12 fill=none opacity=0.25 r=10 stroke=currentColor stroke-width=2></circle><circle cx=12 cy=12 fill=none opacity=0.7 r=10 stroke=currentColor stroke-linecap=round stroke-width=2 style=transform:rotate(-90deg);transform-origin:center>'),J=u('<span class="font-medium text-muted-foreground">'),K=u('<div class="flex items-center justify-between gap-3 text-xs"><p></p><p class="font-mono text-muted-foreground"> / '),L=u('<div class=space-y-2><div class="h-1.5 w-full rounded-full bg-muted overflow-hidden"><div>'),b=u("<div>"),Q=u("<span class=text-muted-foreground>Total cost"),F=u("<span>"),V=u("<div><span class=text-muted-foreground>Input"),W=u("<div><span class=text-muted-foreground>Output"),X=u("<div><span class=text-muted-foreground>Reasoning"),Y=u("<div><span class=text-muted-foreground>Cache");const Z=10,U=100,y=.7,C=.9;function _(e,t=y,r=C){return e>r?"danger":e>t?"warn":"ok"}const M=z();function g(){const e=E(M);if(!e)throw new Error("Context components must be used within Context");return e}const j=new Intl.NumberFormat("en-US",{notation:"compact"}),N=new Intl.NumberFormat("en-US",{maximumFractionDigits:1,style:"percent"}),ee=new Intl.NumberFormat("en-US",{currency:"USD",style:"currency"});function te(e){const t=s(()=>({usedTokens:e.usedTokens,maxTokens:e.maxTokens,inputTokens:e.inputTokens,outputTokens:e.outputTokens,reasoningTokens:e.reasoningTokens,cacheTokens:e.cacheTokens,estimatedCost:e.estimatedCost,warnThreshold:e.warnThreshold??y,dangerThreshold:e.dangerThreshold??C}));return n(M.Provider,{get value(){return t()},get children(){return n(R,{openDelay:0,get children(){return e.children}})}})}function re(){const e=g(),t=2*Math.PI*Z,r=s(()=>e.usedTokens/e.maxTokens),l=s(()=>t*(1-r()));return(()=>{var i=H(),T=i.firstChild,x=T.nextSibling;return D(x,"stroke-dasharray",`${t} ${t}`),d(()=>D(x,"stroke-dashoffset",l())),i})()}function ne(e){const t=g(),r=s(()=>t.usedTokens/t.maxTokens),l=s(()=>N.format(r()));return n(q,{get children(){return n(a,{get when(){return!e.children},get fallback(){return e.children},get children(){return n(G,{type:"button",variant:"ghost",get class(){return e.class},get children(){return[(()=>{var i=J();return o(i,l),i})(),n(re,{})]}})}})}})}function se(e){return n(A,{get class(){return h("min-w-60 divide-y divide-border overflow-hidden",e.class)},get children(){return e.children}})}function oe(e){const t=g(),r=s(()=>t.usedTokens/t.maxTokens),l=s(()=>N.format(r())),i=s(()=>j.format(t.usedTokens)),T=s(()=>j.format(t.maxTokens)),x=s(()=>`${Math.min(r()*U,U)}%`),$=s(()=>{const c=r();return c>t.dangerThreshold?"danger":c>t.warnThreshold?"warn":"ok"}),B=s(()=>{const c=$();return c==="danger"?"bg-red-400":c==="warn"?"bg-yellow-400":"bg-primary"});return(()=>{var c=b();return o(c,n(a,{get when(){return!e.children},get fallback(){return e.children},get children(){return[(()=>{var w=K(),p=w.firstChild,k=p.nextSibling,m=k.firstChild;return o(p,l),o(k,i,m),o(k,T,null),w})(),(()=>{var w=L(),p=w.firstChild,k=p.firstChild;return d(m=>{var S=h("h-full rounded-full transition-all",B()),I=x();return S!==m.e&&f(k,m.e=S),I!==m.t&&P(k,"width",m.t=I),m},{e:void 0,t:void 0}),w})()]}})),d(()=>f(c,h("w-full space-y-2 p-3",e.class))),c})()}function ae(e){return(()=>{var t=b();return o(t,()=>e.children),d(()=>f(t,h("w-full p-3",e.class))),t})()}function ue(e){const t=g(),r=s(()=>ee.format(t.estimatedCost??0));return(()=>{var l=b();return o(l,n(a,{get when(){return!e.children},get fallback(){return e.children},get children(){return[Q(),(()=>{var i=F();return o(i,r),i})()]}})),d(()=>f(l,h("flex w-full items-center justify-between gap-3 bg-muted p-3 text-xs",e.class))),l})()}function v(e){return(()=>{var t=F();return o(t,(()=>{var r=O(()=>e.tokens===void 0);return()=>r()?"\u2014":j.format(e.tokens)})()),t})()}function ie(e){const t=g();return n(a,{get when(){return e.children||t.inputTokens},get children(){return n(a,{get when(){return!e.children},get fallback(){return e.children},get children(){var r=V();return r.firstChild,o(r,n(v,{get tokens(){return t.inputTokens}}),null),d(()=>f(r,h("flex items-center justify-between text-xs",e.class))),r}})}})}function le(e){const t=g();return n(a,{get when(){return e.children||t.outputTokens},get children(){return n(a,{get when(){return!e.children},get fallback(){return e.children},get children(){var r=W();return r.firstChild,o(r,n(v,{get tokens(){return t.outputTokens}}),null),d(()=>f(r,h("flex items-center justify-between text-xs",e.class))),r}})}})}function ce(e){const t=g();return n(a,{get when(){return e.children||t.reasoningTokens},get children(){return n(a,{get when(){return!e.children},get fallback(){return e.children},get children(){var r=X();return r.firstChild,o(r,n(v,{get tokens(){return t.reasoningTokens}}),null),d(()=>f(r,h("flex items-center justify-between text-xs",e.class))),r}})}})}function de(e){const t=g();return n(a,{get when(){return e.children||t.cacheTokens},get children(){return n(a,{get when(){return!e.children},get fallback(){return e.children},get children(){var r=Y();return r.firstChild,o(r,n(v,{get tokens(){return t.cacheTokens}}),null),d(()=>f(r,h("flex items-center justify-between text-xs",e.class))),r}})}})}export{te as C,y as D,ne as a,se as b,oe as c,ae as d,ie as e,le as f,ue as g,_ as h,ce as i,de as j,C as k};