@kitn.ai/ui/dist/elements/message.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{f as L,x as O,g as y,o as U,c as a,S as g,n as u,i as j,a as D,b as E,C as G,q as v,t as l,p as I}from"./chunks/define-CNSKFZCd.js";import{r as J,M as K}from"./chunks/slots-DkZ-Cmha.js";import{a as A,M as N,b as P}from"./chunks/message-CgKytiSB.js";import{c as Q}from"./chunks/message-feedback-Ds3-US0e.js";var V=l("<slot name=before-body>"),W=l("<slot name=after-body>"),X=l("<div part=avatar class=shrink-0><slot name=avatar>"),Y=l("<div>");L("kai-message",{message:void 0,role:"assistant",content:void 0,markdown:void 0,proseSize:"sm",codeTheme:"github-dark-dimmed",codeHighlight:!0,actionsReveal:"always",avatarSrc:void 0,avatarFallback:void 0,avatar:void 0},(t,{dispatch:x,flag:m,element:o,expose:S})=>{const $=O(),r=()=>t.message??{id:"message",role:t.role??"assistant",content:t.content??""},s=Q({emit:e=>x("kai-message-action",e)});S({copy:()=>s.handleAction(r(),"copy")});const[F,M]=y([]),[d,C]=y({});U(()=>{const e=()=>{const _=[...o.querySelectorAll("kai-action")];M(_.map(n=>{var w;return{id:n.id||n.getAttribute("action")||"",label:((w=n.textContent)==null?void 0:w.trim())||n.getAttribute("label")||n.id||"",icon:n.getAttribute("icon")??void 0,tooltip:n.getAttribute("tooltip")??void 0}})),C(J(o,K))};e();const c=new MutationObserver(e);c.observe(o,{childList:!0,attributes:!0,subtree:!0}),I(()=>c.disconnect())});const i=()=>r().role==="user",b=()=>r().avatar??(t.avatarSrc||t.avatarFallback?{src:t.avatarSrc,fallback:t.avatarFallback}:void 0),z=()=>t.avatar==="none",h=()=>!!d().avatar,H=()=>!z()&&(h()||!!b()),f=()=>t.actionsReveal==="hover"?"hover":"always",R=()=>o.hasAttribute("markdown")||t.markdown===!0||t.markdown===!1,T=()=>R()?m("markdown"):!i(),q=()=>[...r().actions??[],...F()],k=()=>a(N,{get content(){return r().content},get reasoning(){return r().reasoning},get tools(){return r().tools},get attachments(){return r().attachments},get isUser(){return i()},get markdown(){return T()},get actions(){return q()},get actionsReveal(){return f()},get activeFeedback(){return s.resolveFeedback(r())},get copied(){return s.isCopied(r().id)},onAction:e=>s.handleAction(r(),e),get beforeBody(){return u(()=>!!d()["before-body"])()?(()=>{var e=V();return e._$owner=v(),e})():void 0},get afterBody(){return u(()=>!!d()["after-body"])()?(()=>{var e=W();return e._$owner=v(),e})():void 0}}),p=()=>f()==="hover"?"group ":"",B=()=>a(g,{get when(){return h()},get fallback(){return a(g,{get when(){return b()},children:e=>a(P,{get src(){return e().src??""},get alt(){return e().alt??""},get fallback(){return e().fallback}})})},get children(){var e=X(),c=e.firstChild;return c._$owner=v(),e}});return a(G,{get proseSize(){return t.proseSize},get codeTheme(){return t.codeTheme},get codeHighlight(){return m("codeHighlight")},get portalMount(){return $.portalMount()},get children(){return a(g,{get when(){return H()},get fallback(){return a(A,{get class(){return`${p()}${i()?"flex-col items-end":"flex-col items-start"}`},get children(){return k()}})},get children(){return a(A,{get class(){return p()},get children(){return[u(()=>B()),(()=>{var e=Y();return j(e,k),D(()=>E(e,`flex min-w-0 flex-1 flex-col ${i()?"items-end":"items-start"}`)),e})()]}})}})}})});