@kitn.ai/ui/dist/elements/chat-workspace.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 I,g as R,o as C,c as t,i as d,q as f,S as u,a as H,b as $,u as O,t as c,p as S}from"./chunks/define-CNSKFZCd.js";import{c as y,C as V,a as _}from"./chunks/conversation-list-C4xTQSpT.js";import{r as q,W as A}from"./chunks/slots-DkZ-Cmha.js";import{C as E}from"./chunks/chat-thread-Dz2qbzvI.js";import{R as L,a as M,b as N}from"./chunks/resizable-Bq_eHxUm.js";var j=c('<div class="shrink-0 border-b border-border"><slot name=main-header>'),D=c("<slot name=main>"),F=c('<div class="flex h-full flex-col overflow-hidden"><div class="min-h-0 flex-1">'),G=c("<div><slot name=sidebar-header>"),J=c('<div class="min-h-0 flex-1">'),K=c("<div class=shrink-0><slot name=sidebar-footer>"),P=c('<div part=sidebar class="flex h-full flex-col overflow-hidden bg-surface">'),Q=c('<div class="h-full w-full overflow-hidden bg-background">'),U=c('<div class="flex h-full"><div class="flex w-11 shrink-0 flex-col items-center border-r border-border bg-surface pt-2.5"></div><div class="min-w-0 flex-1">');I("kai-workspace",{groups:[],conversations:[],activeId:void 0,messages:[],value:void 0,placeholder:"Send a message...",loading:!1,suggestions:void 0,suggestionMode:"submit",proseSize:"sm",codeTheme:"github-dark-dimmed",codeHighlight:!0,chatTitle:void 0,models:void 0,currentModel:void 0,context:void 0,scrollButton:!0,search:!1,voice:!1,triggers:void 0,kindIcons:void 0,sidebarWidth:26,sidebarMinWidth:240,sidebarMaxWidth:420,sidebarCollapsed:void 0,defaultSidebarCollapsed:void 0,collapseBelow:void 0,compact:void 0,noConversations:void 0},(r,{dispatch:i,flag:g,expose:T,element:w})=>{const[v,z]=R({});C(()=>{const e=()=>z(q(w,A));e();const s=new MutationObserver(e);s.observe(w,{childList:!0}),S(()=>s.disconnect())});const[b,W]=y(()=>r.sidebarCollapsed,g("defaultSidebarCollapsed")),h=e=>{W(e),i("kai-sidebar-toggle",{collapsed:e})},p=()=>h(!b());let m,k=!1;C(()=>{if(typeof ResizeObserver>"u")return;const e=new ResizeObserver(s=>{var o;const n=r.collapseBelow;if(n==null||r.sidebarCollapsed!==void 0)return;const a=(((o=s[0])==null?void 0:o.contentRect.width)??m.clientWidth)<n;a&&!b()?(k=!0,h(!0)):!a&&b()&&k&&(k=!1,h(!1))});e.observe(m),S(()=>e.disconnect())});let l;T({toggleSidebar:()=>p(),collapseSidebar:()=>h(!0),expandSidebar:()=>h(!1),focus:e=>l?.focus(e),clear:()=>l?.clear(),send:()=>l?.send(),scrollToBottom:e=>l?.scrollToBottom(e)});const B=t(E,{get messages(){return r.messages},get value(){return r.value},get placeholder(){return r.placeholder},get loading(){return g("loading")},get suggestions(){return r.suggestions},get suggestionMode(){return r.suggestionMode},get proseSize(){return r.proseSize},get codeTheme(){return r.codeTheme},get codeHighlight(){return g("codeHighlight")},get chatTitle(){return r.chatTitle},get models(){return r.models},get currentModel(){return r.currentModel},get context(){return r.context},get scrollButton(){return r.scrollButton!==!1},get search(){return g("search")},get voice(){return g("voice")},get triggers(){return r.triggers},get kindIcons(){return r.kindIcons},onValueChange:e=>i("kai-value-change",{value:e}),onSubmit:e=>i("kai-submit",e),onSuggestionClick:e=>i("kai-suggestion-click",{value:e}),onModelChange:e=>i("kai-model-change",{modelId:e}),onMessageAction:e=>i("kai-message-action",e),onSearch:()=>i("kai-search",{}),onVoice:()=>i("kai-voice",{}),controllerRef:e=>l=e}),x=(()=>{var e=F(),s=e.firstChild;return d(e,t(u,{get when(){return v()["main-header"]},get children(){var o=j(),n=o.firstChild;return n._$owner=f(),o}}),s),d(s,t(u,{get when(){return v().main},fallback:B,get children(){var o=D();return o._$owner=f(),o}})),e})();return(()=>{var e=Q(),s=m;return typeof s=="function"?O(s,e):m=e,d(e,t(u,{get when(){return!b()},get fallback(){return(()=>{var o=U(),n=o.firstChild,a=n.nextSibling;return d(n,t(_,{onExpand:p,class:"bg-transparent shadow-none backdrop-blur-none"})),d(a,x),o})()},get children(){return t(L,{orientation:"horizontal",get children(){return[t(M,{get defaultSize(){return r.sidebarWidth},get"data-min-size"(){return String(r.sidebarMinWidth)},get"data-max-size"(){return String(r.sidebarMaxWidth)},get children(){var o=P();return d(o,t(u,{get when(){return v()["sidebar-header"]},get children(){var n=G(),a=n.firstChild;return a._$owner=f(),H(()=>$(n,g("noConversations")?"min-h-0 flex-1":"shrink-0")),n}}),null),d(o,t(u,{get when(){return!g("noConversations")},get children(){var n=J();return d(n,t(V,{class:"bg-transparent",get groups(){return r.groups},get conversations(){return r.conversations},get activeId(){return r.activeId},get compact(){return g("compact")},onSelect:a=>i("kai-conversation-select",{id:a}),onNewChat:()=>i("kai-new-chat",{}),onToggleSidebar:p})),n}}),null),d(o,t(u,{get when(){return v()["sidebar-footer"]},get children(){var n=K(),a=n.firstChild;return a._$owner=f(),n}}),null),o}}),t(N,{withHandle:!0}),t(M,{children:x})]}})}})),e})()});