@kitn.ai/ui/dist/elements/chunks/chat-thread-Dz2qbzvI.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{g as A,p as Q,s as B,c as r,u as z,k as M,m as _,i,t as c,v as U,w as G,x as J,h as K,o as N,S as h,q as b,n as W,F as X,a as E,b as q,C as Y}from"./define-CNSKFZCd.js";import{s as Z,n as ee}from"./composer-BZyPU6gD.js";import{c as $}from"./cn-CU7UAWzk.js";import{M as te,a as I,b as re}from"./message-CgKytiSB.js";import{c as ne}from"./message-feedback-Ds3-US0e.js";import{M as le}from"./model-switcher-BMtXGwLU.js";import{B as se}from"./button-DBDZebGr.js";import{c as oe}from"./chevron-down-DcRg1aRU.js";import{C as ae,a as ie,b as ce,c as ue,d as de,e as ge,f as he,g as me}from"./context-Cx6eQA_G.js";import{D as ve}from"./default-input-BZcwyKcP.js";const fe=50;function xe(){const[e,u]=A(!0);let o,s=!0;function x(){if(!o)return;const{scrollTop:g,scrollHeight:w,clientHeight:S}=o,y=w-g-S<fe;u(y),s=y}function k(g="smooth"){o&&(o.scrollTo({top:o.scrollHeight,behavior:g}),s=!0,u(!0))}function m(){s&&requestAnimationFrame(()=>k("instant"))}function T(g){o=g,g.addEventListener("scroll",x,{passive:!0});const w=new MutationObserver(m);w.observe(g,{childList:!0,subtree:!0,characterData:!0}),Q(()=>{g.removeEventListener("scroll",x),w.disconnect()})}return{ref:T,isAtBottom:e,scrollToBottom:k}}var pe=c("<div role=log tabindex=0>"),be=c("<div>"),we=c("<div aria-hidden=true>");const L=U();function Ce(){const e=G(L);if(!e)throw new Error("useChatContainer must be used within ChatContainer");return e}function ke(e){const[u,o]=B(e,["children","class"]),{ref:s,isAtBottom:x,scrollToBottom:k}=xe();return r(L.Provider,{value:{isAtBottom:x,scrollToBottom:k},get children(){var m=pe();return z(s,m),M(m,_({get class(){return $("flex flex-col overflow-y-auto",u.class)}},o),!1,!0),i(m,()=>u.children),m}})}function Te(e){const[u,o]=B(e,["children","class"]);return(()=>{var s=be();return M(s,_({get class(){return $("flex w-full flex-col",u.class)}},o),!1,!0),i(s,()=>u.children),s})()}function ye(e){const[u,o]=B(e,["class"]);return(()=>{var s=we();return M(s,_({get class(){return $("h-px w-full shrink-0 scroll-mt-4",u.class)}},o),!1,!1),s})()}function Se(e){const{isAtBottom:u,scrollToBottom:o}=Ce();return r(se,{get variant(){return e.variant??"outline"},get size(){return e.size??"sm"},"aria-label":"Scroll to bottom",get class(){return $("h-10 w-10 rounded-full transition-all duration-150 ease-out",u()?"pointer-events-none translate-y-4 scale-95 opacity-0":"translate-y-0 scale-100 opacity-100",e.class)},onClick:()=>o(),get children(){return r(oe,{class:"h-5 w-5"})}})}var $e=c('<aside part=sidebar class="flex w-64 shrink-0 flex-col overflow-hidden border-r border-border"><slot name=sidebar>'),Ae=c("<header part=header class=shrink-0><slot name=header>"),Be=c("<slot name=empty>"),Me=c('<div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">'),_e=c('<div class="shrink-0 px-4"><div class="mx-auto flex max-w-3xl items-center gap-2 pb-2"><slot name=composer-actions>'),He=c("<slot name=composer>"),Fe=c('<div part=footer class="shrink-0 px-4 pb-3"><div class="mx-auto max-w-3xl text-center text-xs text-muted-foreground"><slot name=footer>'),Ve=c('<div><div class="flex h-full min-w-0 flex-1 flex-col"><div class="relative flex-1 overflow-hidden"></div><div class="shrink-0 px-4 pb-4"><div class="mx-auto max-w-3xl">'),ze=c('<div class="text-sm font-semibold text-foreground">'),Ee=c("<div class=space-y-1.5>"),qe=c('<header part=header-bar class="flex h-14 shrink-0 items-center justify-between border-b border-border px-5"><div class="flex items-center gap-2"><slot name=header-start></slot></div><div class="flex items-center gap-2"><slot name=header-end>'),Ie=c("<div>");function Le(e){const u=J(),o=()=>e.actionsReveal==="hover"?"hover":"always";let s;const x=ne({emit:n=>{var l;return(l=e.onMessageAction)==null?void 0:l.call(e,n)},target:()=>s}),[k,m]=A(e.value??""),[T,g]=A([]),w=()=>typeof e.value=="string"?e.value:k();K(()=>{const n=e.value;n!=null&&typeof n!="string"&&m(n)});const S=n=>{var l;m(n),(l=e.onValueChange)==null||l.call(e,n)},y=()=>{g([]),e.value===void 0&&m("")},H=()=>{var n;(n=e.onSubmit)==null||n.call(e,{value:Z(ee(w())),attachments:T()}),y()},R=n=>{var l,d;(e.suggestionMode??"submit")==="fill"?(S(n),(l=e.onSuggestionClick)==null||l.call(e,n)):((d=e.onSubmit)==null||d.call(e,{value:n,attachments:T()}),y())},j=()=>!!(e.chatTitle||e.models||e.context||e.headerStart||e.headerEnd),D=()=>e.persistSuggestions||e.messages.length===0?e.suggestions:void 0,O=()=>e.scrollButton!==!1;return N(()=>{var n;(n=e.controllerRef)==null||n.call(e,{focus:l=>{var d;return(d=s?.querySelector('[contenteditable]:not([contenteditable="false"]), textarea'))==null?void 0:d.focus(l)},clear:()=>{var l;m(""),g([]),(l=e.onValueChange)==null||l.call(e,"")},send:()=>H(),scrollToBottom:l=>{const d=s?.querySelector(".overflow-y-auto");d?.scrollTo({top:d.scrollHeight,behavior:l??"smooth"})}})}),r(Y,{get proseSize(){return e.proseSize},get codeTheme(){return e.codeTheme},get codeHighlight(){return e.codeHighlight!==!1},get portalMount(){return u.portalMount()},get children(){var n=Ve(),l=n.firstChild,d=l.firstChild,F=d.nextSibling,P=F.firstChild;return z(t=>s=t,n),i(n,r(h,{get when(){return e.sidebar},get children(){var t=$e(),a=t.firstChild;return a._$owner=b(),t}}),l),i(l,r(h,{get when(){return e.headerFull},get fallback(){return r(h,{get when(){return j()},get children(){var t=qe(),a=t.firstChild,p=a.firstChild,f=a.nextSibling,C=f.firstChild;return p._$owner=b(),i(a,r(h,{get when(){return e.chatTitle},get children(){var v=ze();return i(v,()=>e.chatTitle),v}}),null),i(f,r(h,{get when(){return e.models},get children(){return r(le,{get models(){return e.models},get currentModelId(){var v;return e.currentModel??((v=e.models[0])==null?void 0:v.id)??""},onModelChange:v=>{var V;return(V=e.onModelChange)==null?void 0:V.call(e,v)}})}}),C),i(f,r(h,{get when(){return e.context},get children(){return r(ae,{get usedTokens(){return e.context.usedTokens},get maxTokens(){return e.context.maxTokens},get inputTokens(){return e.context.inputTokens},get outputTokens(){return e.context.outputTokens},get estimatedCost(){return e.context.estimatedCost},get children(){return[r(ie,{}),r(ce,{get children(){return[r(ue,{}),r(de,{get children(){var v=Ee();return i(v,r(ge,{}),null),i(v,r(he,{}),null),v}}),r(me,{})]}})]}})}}),C),C._$owner=b(),t}})},get children(){var t=Ae(),a=t.firstChild;return a._$owner=b(),t}}),d),i(d,r(ke,{class:"h-full px-4 py-3",get children(){return[r(Te,{class:"mx-auto w-full max-w-3xl space-y-4",get children(){return[r(h,{get when(){return W(()=>!!e.empty)()&&e.messages.length===0},get children(){var t=Be();return t._$owner=b(),t}}),r(X,{get each(){return e.messages},children:t=>{const a=r(te,{get content(){return t.content},get reasoning(){return t.reasoning},get tools(){return t.tools},get attachments(){return t.attachments},get isUser(){return t.role==="user"},get markdown(){return t.role==="assistant"},get actions(){return t.actions},get actionsReveal(){return o()},get activeFeedback(){return x.resolveFeedback(t)},get copied(){return x.isCopied(t.id)},onAction:f=>x.handleAction(t,f)}),p=o()==="hover"?"group ":"";return r(h,{get when(){return t.avatar},get fallback(){return r(I,{get class(){return`${p}${t.role==="user"?"flex-col items-end":"flex-col items-start"}`},children:a})},children:f=>r(I,{class:p,get children(){return[r(re,{get src(){return f().src??""},get alt(){return f().alt??""},get fallback(){return f().fallback}}),(()=>{var C=Ie();return i(C,a),E(()=>q(C,`flex min-w-0 flex-1 flex-col ${t.role==="user"?"items-end":"items-start"}`)),C})()]}})})}}),r(ye,{})]}}),r(h,{get when(){return O()},get children(){var t=Me();return i(t,r(Se,{class:"shadow-sm"})),t}})]}})),i(l,r(h,{get when(){return e.composerActions},get children(){var t=_e(),a=t.firstChild,p=a.firstChild;return p._$owner=b(),t}}),F),i(P,r(h,{get when(){return e.composer},get fallback(){return r(ve,{get value(){return w()},get placeholder(){return e.placeholder},get loading(){return e.loading===!0},get suggestions(){return D()},get attachments(){return T()},get search(){return e.search===!0},get voice(){return e.voice===!0},get triggers(){return e.triggers},get kindIcons(){return e.kindIcons},onValueChange:S,onSubmit:H,onSuggestionClick:R,onAttachmentsChange:t=>{var a;g(t),(a=e.onAttachmentsChange)==null||a.call(e,t)},onSearch:()=>{var t;return(t=e.onSearch)==null?void 0:t.call(e)},onVoice:()=>{var t;return(t=e.onVoice)==null?void 0:t.call(e)}})},get children(){var t=He();return t._$owner=b(),t}})),i(l,r(h,{get when(){return e.footer},get children(){var t=Fe(),a=t.firstChild,p=a.firstChild;return p._$owner=b(),t}}),null),E(()=>q(n,`flex h-full bg-background ${e.class??""}`)),n}})}export{Le as C};