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.31 kB
import{c as e,S as i,F as f,s as p,k as v,m,i as u,a as b,d as w,b as z,x as R,t as d,O as M,n as S,e as T}from"./define-CNSKFZCd.js";import{T as U}from"./tooltip-Cft_Rxiw.js";import{c as o}from"./cn-CU7UAWzk.js";import{M as O}from"./markdown-n3Xbj3PR.js";import{B as P}from"./button-DBDZebGr.js";import{B as q,a as A}from"./action-icons-Dtl8Ox5D.js";import{R as D,a as E,b as G}from"./reasoning-DzHWsdAJ.js";import{T as H}from"./tool-TMued3WO.js";import{A as J,a as K,d as L,e as N}from"./attachments-DLJcWCDV.js";import{c as Q}from"./check-fhmRksq_.js";var V=d("<div part=row>"),W=d('<img class="h-full w-full object-cover">'),X=d("<div part=avatar>"),Y=d('<div class="flex h-full w-full items-center justify-center bg-muted text-xs font-medium text-muted-foreground">'),I=d("<div>"),Z=d('<span class="px-1 text-xs">'),_=d('<span><span class="min-w-0 overflow-hidden">');function $(r){const[t,n]=p(r,["children","class"]);return(()=>{var a=V();return v(a,m({get class(){return o("flex items-start gap-3",t.class)}},n),!1,!0),u(a,()=>t.children),a})()}function rr(r){return(()=>{var t=X();return u(t,e(i,{get when(){return r.src},get fallback(){return e(i,{get when(){return r.fallback},get children(){var n=Y();return u(n,()=>r.fallback),n}})},get children(){var n=W();return b(a=>{var l=r.src,c=r.alt;return l!==a.e&&w(n,"src",a.e=l),c!==a.t&&w(n,"alt",a.t=c),a},{e:void 0,t:void 0}),n}})),b(()=>z(t,o("h-8 w-8 shrink-0 overflow-hidden rounded-full",r.class))),t})()}function tr(r){const[t,n]=p(r,["children","markdown","class","part"]),a=R(),l=()=>o("min-w-0 rounded-lg p-2 text-foreground bg-secondary max-w-none break-words whitespace-normal",M(a.proseSize()),t.class);return e(i,{get when(){return t.markdown},get fallback(){return(()=>{var c=I();return v(c,m({get part(){return t.part},get class(){return l()}},n),!1,!0),u(c,()=>t.children),c})()},get children(){return e(O,{get part(){return t.part},get content(){return t.children},get class(){return l()}})}})}function er(r){const[t,n]=p(r,["children","class"]);return(()=>{var a=I();return v(a,m({get class(){return o("flex items-center gap-0.5 mt-0.5",t.class)}},n),!1,!0),u(a,()=>t.children),a})()}function nr(r){return typeof r=="string"?{id:r,label:q[r],Icon:A(r)}:{id:r.id,label:r.label,Icon:A(r.icon)}}function ar(r){return r==="like"||r==="dislike"?r:void 0}function ir(r){return e(er,{part:"actions",get class(){return o("mt-1 flex gap-0",r.reveal==="hover"&&"opacity-0 transition-opacity group-hover:opacity-100",r.class)},get children(){return e(f,{get each(){return r.actions},children:t=>{const n=nr(t),a=()=>typeof t!="string"&&t.tooltip?t.tooltip:n.label,l=ar(t),c=()=>l!==void 0&&r.activeFeedback===l,j=n.id==="copy",k=()=>j&&r.copied===!0,x=()=>e(P,{variant:"ghost",size:"icon-sm",get class(){return o("rounded-full",c()&&"text-primary")},get"data-action"(){return n.id},get"aria-label"(){return S(()=>!!k())()?"Copied":n.label},get"aria-pressed"(){return l!==void 0?c():void 0},onClick:()=>r.onAction(n.id),get children(){return e(i,{get when(){return k()},get fallback(){return e(i,{get when(){return n.Icon},get fallback(){return(()=>{var s=Z();return u(s,()=>n.label),s})()},children:s=>{const g=s();return e(g,{get class(){return o("size-3.5",c()&&"fill-current")}})}})},get children(){return e(Q,{class:"size-3.5 text-emerald-400"})}})}}),y=()=>e(i,{get when(){return n.Icon},get fallback(){return x()},get children(){return e(U,{get content(){return a()},get children(){return x()}})}});return e(i,{when:l!==void 0,get fallback(){return y()},get children(){return(()=>{const s=()=>r.activeFeedback===void 0||r.activeFeedback===l;return(()=>{var g=_(),C=g.firstChild;return u(C,y),b(h=>{var B=s()?void 0:"",F=o("grid transition-[grid-template-columns,opacity] duration-300 ease-out",s()?"grid-cols-[1fr] opacity-100":"grid-cols-[0fr] opacity-0");return B!==h.e&&w(g,"data-feedback-collapsed",h.e=B),F!==h.t&&z(g,h.t=F),h},{e:void 0,t:void 0}),g})()})()}})}})}})}function lr(r){return[e(i,{get when(){return r.beforeBody},get children(){return r.beforeBody}}),e(i,{get when(){return r.reasoning},children:t=>e(D,{class:"mb-2 w-full",get children(){return[e(E,{get children(){return t().label??"Reasoning"}}),e(G,{markdown:!0,get children(){return t().text}})]}})}),e(f,{get each(){return r.tools??[]},children:t=>e(H,{toolPart:t,class:"mb-2 w-full"})}),e(i,{get when(){var t;return(t=r.attachments)==null?void 0:t.length},get children(){return e(J,{variant:"inline",get class(){return r.isUser?"mb-2 justify-end":"mb-2"},get children(){return e(f,{get each(){return r.attachments},children:t=>e(K,{data:t,get children(){return[e(L,{}),e(N,{})]}})})}})}}),e(tr,{part:"bubble content",get markdown(){return r.markdown},get class(){return r.isUser?"bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2":"bg-transparent p-0"},get children(){return r.content}}),e(i,{get when(){var t;return(((t=r.actions)==null?void 0:t.length)??0)>0},get children(){return e(ir,{get actions(){return r.actions},get reveal(){return r.actionsReveal==="hover"?"hover":"always"},get activeFeedback(){return r.activeFeedback},get copied(){return r.copied},onAction:t=>{var n;return(n=r.onAction)==null?void 0:n.call(r,t)}})}}),e(i,{get when(){return r.afterBody},get children(){return r.afterBody}})]}T(["click"]);export{lr as M,$ as a,rr as b};