@kitn.ai/ui/dist/elements/agent-card.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{c as r,m as S,s as q,i,a as f,b as d,S as v,d as m,t as b,e as B,f as I}from"./chunks/define-CNSKFZCd.js";import{c as u}from"./chunks/cn-CU7UAWzk.js";import{I as N}from"./chunks/Icon-C2LTALdM.js";import{e as j}from"./chunks/ellipsis-CUiEJ6R1.js";var D=[["path",{d:"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9",key:"1qo2s2"}],["path",{d:"M10.3 21a1.94 1.94 0 0 0 3.4 0",key:"qgo35s"}]],E=l=>r(N,S(l,{name:"Bell",iconNode:D})),H=E,L=b("<span aria-hidden=true>"),P=b("<span>"),W=b('<span class="inline-flex items-center gap-1 rounded-full bg-tool-amber/15 px-2 py-0.5 text-[11px] font-medium text-tool-amber">Needs you'),O=b("<button type=button part=menu aria-label=More>"),R=b('<div><span class="inline-flex shrink-0 items-center gap-1.5"role=status><span class="relative inline-flex"><span aria-hidden=true part=status></span></span></span><button type=button><span class="block truncate text-sm font-medium leading-tight text-foreground"></span></button><span class="flex shrink-0 items-center gap-2">');const M={working:"bg-tool-blue",idle:"bg-muted-foreground",done:"bg-tool-green",error:"bg-tool-red",blocked:"bg-tool-amber"},T={working:"text-tool-blue",idle:"text-muted-foreground",done:"text-tool-green",error:"text-tool-red",blocked:"text-tool-amber"},X={working:"Working",idle:"Idle",done:"Done",error:"Error",blocked:"Blocked"};function _(l){const[t]=q(l,["name","status","needsAttention","active","onActivate","onClick","onMenu","class","leading","subtitle","lastLine"]),o=()=>t.status.tone,z=()=>{var n,a;(n=t.onActivate)==null||n.call(t),(a=t.onClick)==null||a.call(t)};return(()=>{var n=R(),a=n.firstChild,p=a.firstChild,h=p.firstChild,c=a.nextSibling,$=c.firstChild,x=c.nextSibling;return i(p,r(v,{get when(){return t.status.pulse},get children(){var e=L();return f(()=>d(e,u("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden",M[o()]))),e}}),h),i(a,r(v,{get when(){return t.status.label},get children(){var e=P();return i(e,()=>t.status.label),f(()=>d(e,u("text-[11px] font-medium leading-none",T[o()]))),e}}),null),c.$$click=z,i($,()=>t.name),i(x,r(v,{get when(){return t.needsAttention},get children(){var e=W(),s=e.firstChild;return i(e,r(H,{class:"size-3","aria-hidden":"true"}),s),e}}),null),i(x,r(v,{get when(){return t.onMenu},get children(){var e=O();return e.$$click=s=>{var g;s.stopPropagation(),(g=t.onMenu)==null||g.call(t,s)},i(e,r(j,{class:"size-4","aria-hidden":"true"})),f(()=>d(e,u("relative z-10 inline-flex size-7 shrink-0 items-center justify-center rounded-md","text-muted-foreground outline-none transition-colors","hover:bg-surface-sunken hover:text-foreground","focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"))),e}}),null),f(e=>{var s=t.active?"":void 0,g=t.needsAttention?"":void 0,k=u("group relative flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 text-left","transition-[background-color,border-color,box-shadow]",t.active?"border-primary bg-accent":"border-border bg-surface hover:bg-accent",t.needsAttention&&"border-tool-amber/50 ring-2 ring-inset ring-tool-amber/60",t.class),w=t.status.label??X[o()],y=u("relative inline-block size-2 rounded-full",M[o()]),A=t.active?"true":void 0,C=u("min-w-0 flex-1 text-left outline-none","before:absolute before:inset-0 before:rounded-lg before:content-['']","focus-visible:before:ring-2 focus-visible:before:ring-inset focus-visible:before:ring-ring");return s!==e.e&&m(n,"data-active",e.e=s),g!==e.t&&m(n,"data-needs-attention",e.t=g),k!==e.a&&d(n,e.a=k),w!==e.o&&m(a,"aria-label",e.o=w),y!==e.i&&d(h,e.i=y),A!==e.n&&m(c,"aria-current",e.n=A),C!==e.s&&d(c,e.s=C),e},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0,n:void 0,s:void 0}),n})()}B(["click"]),I("kai-agent-card",{name:void 0,active:void 0,needsAttention:void 0,status:void 0},(l,{dispatch:t,flag:o})=>r(_,{get name(){return l.name??""},get active(){return o("active")},get needsAttention(){return o("needsAttention")},get status(){return l.status??{tone:"idle"}},onActivate:()=>t("kai-activate"),onMenu:()=>t("kai-menu")}));