@kitn.ai/ui/dist/elements/chunks/conversation-list-C4xTQSpT.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 L,g as y,s as I,j as m,i as c,S as h,a as v,b as p,d as M,t as l,e as N,o as O,u as D,F as k}from"./define-CNSKFZCd.js";import{c as f}from"./cn-CU7UAWzk.js";import{a as R,b as q,C as E}from"./collapsible-CWUAShMC.js";import{B as C}from"./button-DBDZebGr.js";import{B as F}from"./badge-BTNZTODL.js";import{S as P}from"./scroll-area-g5Ze3K6f.js";import{m as U}from"./message-square-MmRkvc-M.js";import{I as G}from"./Icon-C2LTALdM.js";var H=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"m14 9 3 3-3 3",key:"8010ee"}]],J=a=>r(G,L(a,{name:"PanelLeftOpen",iconNode:H})),K=J;function Q(a,e){const[d,o]=y(e);return[()=>a()??d(),t=>o(t)]}var $=l('<span part=trailing class="ml-auto shrink-0 text-xs text-muted-foreground">'),V=l('<div class="flex items-center gap-2.5"><span>'),W=l("<button>"),X=l('<div class="flex items-center gap-2"><div>'),Y=l("<div> messages");function Z(a,e=Date.now()){if(!a)return"";const d=Date.parse(a);if(Number.isNaN(d))return"";const o=Math.max(0,Math.round((e-d)/1e3));if(o<60)return"just now";const t=Math.floor(o/60);if(t<60)return`${t}m ago`;const i=Math.floor(t/60);return i<24?`${i}h ago`:`${Math.floor(i/24)}d ago`}function B(a){const[e]=I(a,["conversation","isActive","onSelect","compact","class"]),d=m(()=>e.conversation.trailing??Z(e.conversation.updatedAt??e.conversation.lastMessageAt));return(()=>{var o=W();return o.$$click=()=>e.onSelect(e.conversation.id),c(o,r(h,{get when(){return e.compact},get fallback(){return[(()=>{var t=X(),i=t.firstChild;return c(i,()=>e.conversation.title),c(t,r(h,{get when(){return d()},get children(){var g=$();return c(g,d),g}}),null),v(()=>p(i,f("min-w-0 flex-1 truncate text-sm",e.isActive?"font-medium text-foreground":"text-foreground/80"))),t})(),(()=>{var t=Y(),i=t.firstChild;return c(t,()=>e.conversation.messageCount,i),v(()=>p(t,f("mt-0.5 truncate text-xs",e.isActive?"text-foreground/70":"text-muted-foreground"))),t})()]},get children(){var t=V(),i=t.firstChild;return c(t,r(U,{get class(){return f("size-3.5 shrink-0",e.isActive?"text-foreground":"text-muted-foreground")}}),i),c(i,()=>e.conversation.title),c(t,r(h,{get when(){return d()},get children(){var g=$();return c(g,d),g}}),null),v(()=>p(i,f("min-w-0 flex-1 truncate text-sm",e.isActive?"font-medium text-foreground":"text-foreground/80"))),t}})),v(t=>{var i=e.conversation.id,g=f("w-full rounded-lg text-left transition-colors",e.compact?"px-2.5 py-1.5":"px-2.5 py-2",e.isActive?"bg-muted":"hover:bg-muted/50",e.class);return i!==t.e&&M(o,"data-conversation-id",t.e=i),g!==t.t&&p(o,t.t=g),t},{e:void 0,t:void 0}),o})()}N(["click"]);var _=l('<div class="px-3 pb-2"><div class="flex items-center gap-2 rounded-md bg-surface-strong px-2.5 py-1.5"><svg width=13 height=13 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=text-muted-foreground><circle cx=11 cy=11 r=8></circle><line x1=21 y1=21 x2=16.65 y2=16.65></line></svg><input type=text placeholder="Search chats..."aria-label="Search chats"class="bg-transparent text-[13px] text-foreground placeholder:text-muted-foreground rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring w-full">'),ee=l('<div class="space-y-0.5 py-1">'),te=l('<div class="shrink-0 border-t border-border">'),re=l("<div>"),ne=l('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><line x1=3 y1=12 x2=21 y2=12></line><line x1=3 y1=6 x2=21 y2=6></line><line x1=3 y1=18 x2=21 y2=18>'),oe=l('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><line x1=12 y1=5 x2=12 y2=19></line><line x1=5 y1=12 x2=19 y2=12>'),ae=l('<div class="flex items-center justify-between p-3 pb-2"><div class="flex items-center gap-2"><span class="text-sm font-semibold text-foreground">Chats'),ie=l('<div class="flex flex-1 flex-col items-center justify-center gap-1 p-6 text-center text-sm text-muted-foreground">No conversations yet'),se=l('<svg width=10 height=10 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><polyline points="6 9 12 15 18 9">'),ce=l("<span>"),le=l('<div class="pl-2 mt-0.5 space-y-0.5">');function ue(a){return r(C,{variant:"ghost",size:"icon-sm","aria-label":"Open sidebar",get class(){return f("rounded-full bg-card/80 shadow-sm backdrop-blur",a.class)},get onClick(){return a.onExpand},get children(){return r(K,{class:"size-4"})}})}function de(a){const[e]=I(a,["groups","conversations","activeId","onSelect","onNewChat","onToggleSidebar","header","footer","empty","compact","onSearchChange","controllerRef","class"]),[d,o]=y(""),t=m(()=>e.conversations.length===0);let i;const g=s=>{var n;o(s),(n=e.onSearchChange)==null||n.call(e,s)};O(()=>{var s;(s=e.controllerRef)==null||s.call(e,{focus:n=>i?.focus(n),clearSearch:()=>g("")})});const z=m(()=>{const s=d().toLowerCase();return s?e.conversations.filter(n=>n.title.toLowerCase().includes(s)):e.conversations}),S=m(()=>{const s=new Map;for(const n of z()){const u=n.groupId;s.has(u)||s.set(u,[]),s.get(u).push(n)}return s}),x=m(()=>S().get(void 0)??[]);return(()=>{var s=re();return c(s,r(h,{get when(){return e.header},get fallback(){return(()=>{var n=ae(),u=n.firstChild,w=u.firstChild;return c(u,r(C,{variant:"ghost",size:"icon-sm","aria-label":"Toggle sidebar",get onClick(){return e.onToggleSidebar},get children(){return ne()}}),w),c(n,r(C,{variant:"ghost",size:"icon-sm","aria-label":"New chat",get onClick(){return e.onNewChat},get children(){return oe()}}),null),n})()},get children(){return e.header}}),null),c(s,r(h,{get when(){return!t()},get children(){var n=_(),u=n.firstChild,w=u.firstChild,b=w.nextSibling;b.$$input=T=>g(T.currentTarget.value);var A=i;return typeof A=="function"?D(A,b):i=b,v(()=>b.value=d()),n}}),null),c(s,r(h,{get when(){return!t()},get fallback(){return r(h,{get when(){return e.empty},get fallback(){return ie()},get children(){return e.empty}})},get children(){return r(P,{class:"flex-1 px-2",get children(){return[r(k,{get each(){return e.groups},children:n=>{const u=m(()=>S().get(n.id)??[]);return r(h,{get when(){return u().length>0},get children(){return r(j,{get name(){return n.name},get count(){return u().length},get conversations(){return u()},get activeId(){return e.activeId},get onSelect(){return e.onSelect},get compact(){return e.compact}})}})}}),r(h,{get when(){return x().length>0},get children(){return r(h,{get when(){return e.compact},get fallback(){return r(j,{name:"Ungrouped",get count(){return x().length},get conversations(){return x()},get activeId(){return e.activeId},get onSelect(){return e.onSelect}})},get children(){var n=ee();return c(n,r(k,{get each(){return x()},children:u=>r(B,{conversation:u,get isActive(){return u.id===e.activeId},get onSelect(){return e.onSelect},compact:!0})})),n}})}})]}})}}),null),c(s,r(h,{get when(){return e.footer},get children(){var n=te();return c(n,()=>e.footer),n}}),null),v(()=>p(s,f("flex flex-col h-full bg-sidebar",e.class))),s})()}function j(a){const[e,d]=y(!0);return r(E,{get open(){return e()},onOpenChange:d,get children(){return[r(R,{class:"flex items-center gap-1.5 w-full px-1.5 py-1 rounded-md text-[13px] text-muted-foreground font-medium hover:bg-muted/30 transition-colors cursor-pointer mt-1.5",get children(){return[(()=>{var o=se();return v(()=>M(o,"class",f("transition-transform",!e()&&"-rotate-90"))),o})(),(()=>{var o=ce();return c(o,()=>a.name),o})(),r(F,{variant:"count",class:"ml-auto text-[11px]",get children(){return a.count}})]}}),r(q,{get children(){var o=le();return c(o,r(k,{get each(){return a.conversations},children:t=>r(B,{conversation:t,get isActive(){return t.id===a.activeId},get onSelect(){return a.onSelect},get compact(){return a.compact}})})),o}})]}})}N(["input"]);export{de as C,ue as a,Q as c};