@devalok/shilp-sutra-karm 0.21.1 → 0.23.0

package/dist/_chunks/chat-panel.js

@@ -1,60 +1,60 @@
 "use client";
-import { jsxs as s, jsx as e, Fragment as X } from "react/jsx-runtime";
+import { jsxs as s, jsx as e, Fragment as Y } from "react/jsx-runtime";
 import * as w from "react";
-import { useRef as R, useEffect as Y, useState as P, useCallback as T } from "react";
-import { Sheet as _, SheetContent as J, SheetTitle as Q } from "@devalok/shilp-sutra/ui/sheet";
-import { AnimatePresence as W, motion as g } from "framer-motion";
-import { cn as x } from "@devalok/shilp-sutra/ui/lib/utils";
+import { useRef as P, useEffect as _, useState as L, useCallback as T } from "react";
+import { Sheet as J, SheetContent as Q, SheetTitle as W } from "@devalok/shilp-sutra/ui/sheet";
+import { AnimatePresence as Z, motion as g } from "framer-motion";
+import { cn as f } from "@devalok/shilp-sutra/ui/lib/utils";
 import { springs as v } from "@devalok/shilp-sutra/ui/lib/motion";
-import { u as Z } from "./use-composed-ref.js";
-import { m as A } from "./markdown-components.js";
-import { M as L } from "./vendor-markdown.js";
-import { IconRobot as C, IconAlertCircle as $, IconUser as O, IconSquare as S, IconSend as ee, IconMessagePlus as E, IconMessage as se, IconArchive as ae, IconTrash as re, IconChevronDown as te, IconHistory as ie, IconX as de } from "@tabler/icons-react";
-import { Button as D } from "@devalok/shilp-sutra/ui/button";
-import { formatRelativeTime as le } from "@devalok/shilp-sutra/ui/lib/date-utils";
-import { DropdownMenu as ce, DropdownMenuTrigger as ne, DropdownMenuContent as oe, DropdownMenuItem as me } from "@devalok/shilp-sutra/ui";
-const H = w.forwardRef(
-  function({ text: d, isComplete: l = !1, className: i, ...f }, c) {
-    return /* @__PURE__ */ s("div", { ref: c, className: x(i), ...f, "aria-live": "off", children: [
-      /* @__PURE__ */ e(L, { components: A, children: d }),
-      !l && /* @__PURE__ */ e("span", { className: "inline-block h-4 w-2 animate-pulse bg-surface-fg-muted ml-ds-01" }),
+import { u as $ } from "./use-composed-ref.js";
+import { m as E } from "./markdown-components.js";
+import { M as H } from "./vendor-markdown.js";
+import { IconRobot as C, IconAlertCircle as O, IconUser as S, IconSquare as ee, IconSend as se, IconMessagePlus as K, IconMessage as ae, IconArchive as re, IconTrash as te, IconChevronDown as ie, IconHistory as le, IconX as de } from "@tabler/icons-react";
+import { Button as R } from "@devalok/shilp-sutra/ui/button";
+import { formatRelativeTime as ce } from "@devalok/shilp-sutra/ui/lib/date-utils";
+import { DropdownMenu as ne, DropdownMenuTrigger as oe, DropdownMenuContent as me, DropdownMenuItem as fe } from "@devalok/shilp-sutra/ui";
+const A = w.forwardRef(
+  function({ text: c, isComplete: n = !1, className: d, ...x }, o) {
+    return /* @__PURE__ */ s("div", { ref: o, className: f(d), ...x, "aria-live": "off", children: [
+      /* @__PURE__ */ e(H, { components: E, children: c }),
+      !n && /* @__PURE__ */ e("span", { className: "inline-block h-4 w-2 animate-pulse bg-surface-fg-muted ml-ds-01" }),
       /* @__PURE__ */ e(
         "span",
         {
           className: "sr-only",
           "aria-live": "polite",
           "aria-atomic": "true",
-          children: l ? d : ""
+          children: n ? c : ""
         }
       )
     ] });
   }
 );
-H.displayName = "StreamingText";
-const K = w.forwardRef(
+A.displayName = "StreamingText";
+const U = w.forwardRef(
   function({
-    messages: d,
-    isStreaming: l = !1,
-    streamingText: i = "",
-    isLoadingMessages: f = !1,
-    emptyTitle: c = "Karm AI",
-    emptyDescription: u = "Ask me about tasks, projects, attendance, or anything else.",
-    className: o,
-    ...m
-  }, n) {
-    const h = R(null), t = Z(h, n);
-    return Y(() => {
-      const a = h.current;
+    messages: c,
+    isStreaming: n = !1,
+    streamingText: d = "",
+    isLoadingMessages: x = !1,
+    emptyTitle: o = "Karm AI",
+    emptyDescription: p = "Ask me about tasks, projects, attendance, or anything else.",
+    className: u,
+    ...h
+  }, m) {
+    const b = P(null), l = $(b, m);
+    return _(() => {
+      const a = b.current;
       a && (a.scrollTop = a.scrollHeight);
-    }, [d, i]), f ? /* @__PURE__ */ e("div", { ref: n, className: x("flex flex-1 items-center justify-center", o), ...m, children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-ds-03", children: [
+    }, [c, d]), x ? /* @__PURE__ */ e("div", { ref: m, className: f("flex flex-1 items-center justify-center", u), ...h, children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-ds-03", children: [
       /* @__PURE__ */ e("div", { className: "h-ds-xs w-ds-xs animate-spin rounded-ds-full border-2 border-surface-border border-t-transparent" }),
       /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle", children: "Loading messages..." })
-    ] }) }) : d.length === 0 && !l ? /* @__PURE__ */ e("div", { ref: n, className: x("flex flex-1 items-center justify-center p-ds-06", o), ...m, children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-ds-04 text-center", children: [
+    ] }) }) : c.length === 0 && !n ? /* @__PURE__ */ e("div", { ref: m, className: f("flex flex-1 items-center justify-center p-ds-06", u), ...h, children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-ds-04 text-center", children: [
       /* @__PURE__ */ e("div", { className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e(C, { className: "h-ico-lg w-ico-lg text-surface-fg-muted" }) }),
-      /* @__PURE__ */ e("h3", { className: "text-ds-base text-surface-fg", children: c }),
-      /* @__PURE__ */ e("p", { className: "text-ds-sm max-w-[280px] text-surface-fg-subtle", children: u })
-    ] }) }) : /* @__PURE__ */ e("div", { ref: t, className: x("no-scrollbar flex-1 overflow-y-auto p-ds-05", o), ...m, children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-05", role: "log", "aria-label": "Chat messages", children: /* @__PURE__ */ s(W, { initial: !1, children: [
-      d.map((a) => a.role === "SYSTEM" ? /* @__PURE__ */ e(
+      /* @__PURE__ */ e("h3", { className: "text-ds-base text-surface-fg", children: o }),
+      /* @__PURE__ */ e("p", { className: "text-ds-sm max-w-[280px] text-surface-fg-subtle", children: p })
+    ] }) }) : /* @__PURE__ */ e("div", { ref: l, className: f("no-scrollbar flex-1 overflow-y-auto p-ds-05", u), ...h, children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-05", role: "log", "aria-label": "Chat messages", children: /* @__PURE__ */ s(Z, { initial: !1, children: [
+      c.map((a) => a.role === "SYSTEM" ? /* @__PURE__ */ e(
         g.div,
         {
           initial: { opacity: 0, y: 10 },
@@ -62,7 +62,7 @@ const K = w.forwardRef(
           transition: v.snappy,
           className: "flex justify-center",
           children: /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03 rounded-ds-lg bg-error-3 px-ds-04 py-ds-03", children: [
-            /* @__PURE__ */ e($, { className: "h-ico-sm w-ico-sm shrink-0 text-error-11" }),
+            /* @__PURE__ */ e(O, { className: "h-ico-sm w-ico-sm shrink-0 text-error-11" }),
             /* @__PURE__ */ e("p", { className: "text-ds-sm text-error-11", children: a.content })
           ] })
         },
@@ -76,7 +76,7 @@ const K = w.forwardRef(
           className: "flex justify-end",
           children: /* @__PURE__ */ s("div", { className: "flex max-w-[85%] items-start gap-ds-03", children: [
             /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-br-ds-sm bg-accent-9 px-ds-04 py-ds-03 text-accent-fg", children: /* @__PURE__ */ e("p", { className: "text-ds-md whitespace-pre-wrap", children: a.content }) }),
-            /* @__PURE__ */ e("div", { className: "flex h-ds-xs-plus w-ds-xs-plus shrink-0 items-center justify-center rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e(O, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }) })
+            /* @__PURE__ */ e("div", { className: "flex h-ds-xs-plus w-ds-xs-plus shrink-0 items-center justify-center rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e(S, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }) })
           ] })
         },
         a.id
@@ -89,12 +89,12 @@ const K = w.forwardRef(
           className: "flex justify-start",
           children: /* @__PURE__ */ s("div", { className: "flex max-w-[85%] items-start gap-ds-03", children: [
             /* @__PURE__ */ e("div", { className: "flex h-ds-xs-plus w-ds-xs-plus shrink-0 items-center justify-center rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e(C, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }) }),
-            /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-bl-ds-sm bg-surface-raised-hover px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg", children: /* @__PURE__ */ e(L, { components: A, children: a.content }) }) })
+            /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-bl-ds-sm bg-surface-raised-hover px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg", children: /* @__PURE__ */ e(H, { components: E, children: a.content }) }) })
           ] })
         },
         a.id
       )),
-      l && i && /* @__PURE__ */ e(
+      n && d && /* @__PURE__ */ e(
         g.div,
         {
           initial: { opacity: 0, y: 10 },
@@ -103,12 +103,12 @@ const K = w.forwardRef(
           className: "flex justify-start",
           children: /* @__PURE__ */ s("div", { className: "flex max-w-[85%] items-start gap-ds-03", children: [
             /* @__PURE__ */ e("div", { className: "flex h-ds-xs-plus w-ds-xs-plus shrink-0 items-center justify-center rounded-ds-full bg-surface-raised-hover", children: /* @__PURE__ */ e(C, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }) }),
-            /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-bl-ds-sm bg-surface-raised-hover px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg", children: /* @__PURE__ */ e(H, { text: i }) }) })
+            /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-bl-ds-sm bg-surface-raised-hover px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg", children: /* @__PURE__ */ e(A, { text: d }) }) })
           ] })
         },
         "streaming-text"
       ),
-      l && !i && /* @__PURE__ */ e(
+      n && !d && /* @__PURE__ */ e(
         g.div,
         {
           initial: { opacity: 0, y: 10 },
@@ -133,136 +133,136 @@ const K = w.forwardRef(
     ] }) }) });
   }
 );
-K.displayName = "MessageList";
-const U = w.forwardRef(
+U.displayName = "MessageList";
+const z = w.forwardRef(
   function({
-    onSubmit: d,
-    onCancel: l,
-    isStreaming: i = !1,
-    placeholder: f = "Ask Karm AI...",
-    disclaimer: c = "AI responses may be inaccurate. Verify important information.",
-    className: u,
-    ...o
-  }, m) {
-    const [n, h] = P(""), t = R(null), a = T(() => {
-      const r = t.current;
+    onSubmit: c,
+    onCancel: n,
+    isStreaming: d = !1,
+    placeholder: x = "Ask Karm AI...",
+    disclaimer: o = "AI responses may be inaccurate. Verify important information.",
+    className: p,
+    ...u
+  }, h) {
+    const [m, b] = L(""), l = P(null), a = T(() => {
+      const r = l.current;
       r && (r.style.height = "auto", r.style.height = Math.min(r.scrollHeight, 160) + "px");
-    }, []), y = T(() => {
-      const r = n.trim();
-      !r || i || (h(""), t.current && (t.current.style.height = "auto"), d(r));
-    }, [n, i, d]), N = T(
+    }, []), N = T(() => {
+      const r = m.trim();
+      !r || d || (b(""), l.current && (l.current.style.height = "auto"), c(r));
+    }, [m, d, c]), y = T(
       (r) => {
-        r.key === "Enter" && !r.shiftKey && (r.preventDefault(), y());
+        r.key === "Enter" && !r.shiftKey && (r.preventDefault(), N());
       },
-      [y]
+      [N]
     );
-    return /* @__PURE__ */ s("div", { ref: m, className: x("border-t border-surface-border-strong bg-surface-raised p-ds-04", u), ...o, children: [
+    return /* @__PURE__ */ s("div", { ref: h, className: f("border-t border-surface-border-strong bg-surface-raised p-ds-04", p), ...u, children: [
       /* @__PURE__ */ s("div", { className: "flex items-end gap-ds-03 rounded-ds-xl border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03", children: [
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: t,
-            value: n,
+            ref: l,
+            value: m,
             onChange: (r) => {
-              h(r.target.value), a();
+              b(r.target.value), a();
             },
-            onKeyDown: N,
-            placeholder: f,
+            onKeyDown: y,
+            placeholder: x,
             "aria-label": "Type a message",
-            disabled: i,
+            disabled: d,
             rows: 1,
             className: "text-ds-md no-scrollbar max-h-[160px] min-h-ds-xs flex-1 resize-none bg-transparent text-surface-fg placeholder:text-surface-fg-subtle focus:outline-none disabled:opacity-action-disabled"
           }
         ),
-        i ? /* @__PURE__ */ e(D, { variant: "solid", color: "error", size: "icon-sm", className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-lg", onClick: l, "aria-label": "Stop generating", children: /* @__PURE__ */ e(S, { className: "h-ico-sm w-ico-sm" }) }) : /* @__PURE__ */ e(D, { size: "icon-sm", className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-lg", onClick: y, disabled: !n.trim(), "aria-label": "Send message", children: /* @__PURE__ */ e(ee, { className: "h-ico-sm w-ico-sm" }) })
+        d ? /* @__PURE__ */ e(R, { variant: "solid", color: "error", size: "icon-sm", className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-lg", onClick: n, "aria-label": "Stop generating", children: /* @__PURE__ */ e(ee, { className: "h-ico-sm w-ico-sm" }) }) : /* @__PURE__ */ e(R, { size: "icon-sm", className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-lg", onClick: N, disabled: !m.trim(), "aria-label": "Send message", children: /* @__PURE__ */ e(se, { className: "h-ico-sm w-ico-sm" }) })
       ] }),
-      c && /* @__PURE__ */ e("p", { className: "text-ds-sm mt-ds-02b text-center text-surface-fg-subtle", children: c })
+      o && /* @__PURE__ */ e("p", { className: "text-ds-sm mt-ds-02b text-center text-surface-fg-subtle", children: o })
     ] });
   }
 );
-U.displayName = "ChatInput";
-const z = w.forwardRef(
+z.displayName = "ChatInput";
+const F = w.forwardRef(
   function({
-    conversations: d,
-    activeConversationId: l,
-    isLoading: i = !1,
-    onSelect: f,
-    onNewChat: c,
-    onArchive: u,
-    onDelete: o,
-    className: m,
-    ...n
-  }, h) {
-    return /* @__PURE__ */ s("div", { ref: h, className: x("flex flex-1 flex-col overflow-hidden", m), ...n, children: [
+    conversations: c,
+    activeConversationId: n,
+    isLoading: d = !1,
+    onSelect: x,
+    onNewChat: o,
+    onArchive: p,
+    onDelete: u,
+    className: h,
+    ...m
+  }, b) {
+    return /* @__PURE__ */ s("div", { ref: b, className: f("flex flex-1 flex-col overflow-hidden", h), ...m, children: [
       /* @__PURE__ */ s("div", { className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
         /* @__PURE__ */ e("h3", { className: "text-ds-md font-semibold text-surface-fg", children: "Conversations" }),
         /* @__PURE__ */ s(
           "button",
           {
-            onClick: c,
+            onClick: o,
             className: "flex items-center gap-ds-02b rounded-ds-lg px-ds-03 py-ds-02b text-surface-fg-muted transition-colors hover:bg-surface-raised-hover",
             children: [
-              /* @__PURE__ */ e(E, { className: "h-ico-sm w-ico-sm" }),
+              /* @__PURE__ */ e(K, { className: "h-ico-sm w-ico-sm" }),
               /* @__PURE__ */ e("span", { className: "text-ds-sm", children: "New Chat" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "no-scrollbar flex-1 overflow-y-auto", children: i ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ e("div", { className: "h-ico-md w-ico-md animate-spin rounded-ds-full border-2 border-surface-border border-t-transparent" }) }) : d.length === 0 ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center gap-ds-03 py-12", children: [
-        /* @__PURE__ */ e(se, { className: "h-ds-sm w-ds-sm text-surface-fg-subtle" }),
+      /* @__PURE__ */ e("div", { className: "no-scrollbar flex-1 overflow-y-auto", children: d ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ e("div", { className: "h-ico-md w-ico-md animate-spin rounded-ds-full border-2 border-surface-border border-t-transparent" }) }) : c.length === 0 ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center gap-ds-03 py-12", children: [
+        /* @__PURE__ */ e(ae, { className: "h-ds-sm w-ds-sm text-surface-fg-subtle" }),
         /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg-subtle", children: "No conversations yet" })
-      ] }) : /* @__PURE__ */ e("div", { className: "flex flex-col", children: d.map((t) => /* @__PURE__ */ s(
+      ] }) : /* @__PURE__ */ e("div", { className: "flex flex-col", children: c.map((l) => /* @__PURE__ */ s(
         "div",
         {
-          className: x(
+          className: f(
             "group flex items-center gap-ds-04 border-b border-surface-border px-ds-05 py-ds-04 transition-colors hover:bg-surface-raised-hover",
-            l === t.id && "bg-surface-raised-hover"
+            n === l.id && "bg-surface-raised-hover"
           ),
           children: [
             /* @__PURE__ */ s(
               "button",
               {
-                onClick: () => f(t.id),
+                onClick: () => x(l.id),
                 className: "flex min-w-0 flex-1 flex-col gap-ds-01 text-left",
                 children: [
-                  /* @__PURE__ */ e("p", { className: "text-ds-md truncate text-surface-fg", children: t.title || "Untitled conversation" }),
-                  /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle", children: le(t.updatedAt) })
+                  /* @__PURE__ */ e("p", { className: "text-ds-md truncate text-surface-fg", children: l.title || "Untitled conversation" }),
+                  /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle", children: ce(l.updatedAt) })
                 ]
               }
             ),
             /* @__PURE__ */ s("div", { className: "flex shrink-0 items-center gap-ds-02 opacity-0 transition-opacity duration-fast-01 group-hover:opacity-100", children: [
-              u && /* @__PURE__ */ e(
+              p && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: (a) => {
-                    a.stopPropagation(), u(t.id);
+                    a.stopPropagation(), p(l.id);
                   },
                   className: "flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg-muted",
                   "aria-label": "Archive conversation",
-                  children: /* @__PURE__ */ e(ae, { className: "h-ico-sm w-ico-sm" })
+                  children: /* @__PURE__ */ e(re, { className: "h-ico-sm w-ico-sm" })
                 }
               ),
-              o && /* @__PURE__ */ e(
+              u && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: (a) => {
-                    a.stopPropagation(), o(t.id);
+                    a.stopPropagation(), u(l.id);
                   },
                   className: "flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-surface-fg-subtle transition-colors hover:bg-error-3 hover:text-error-11",
                   "aria-label": "Delete conversation",
-                  children: /* @__PURE__ */ e(re, { className: "h-ico-sm w-ico-sm" })
+                  children: /* @__PURE__ */ e(te, { className: "h-ico-sm w-ico-sm" })
                 }
               )
             ] })
           ]
         },
-        t.id
+        l.id
       )) }) })
     ] });
   }
 );
-z.displayName = "ConversationList";
-const fe = [
+F.displayName = "ConversationList";
+const ue = [
   { id: "devadoot", name: "Devadoot", desc: "General Assistant" },
   { id: "prahari", name: "Prahari", desc: "Attendance & Time" },
   { id: "sutradhar", name: "Sutradhar", desc: "Tasks & Projects" },
@@ -270,63 +270,104 @@ const fe = [
   { id: "vidwan", name: "Vidwan", desc: "Knowledge Expert" },
   { id: "sanchalak", name: "Sanchalak", desc: "Manager Advisor" },
   { id: "dwar-palak", name: "Dwar-Palak", desc: "Access Control" }
-], ue = w.forwardRef(
+], he = w.forwardRef(
   function({
-    isOpen: d,
-    onOpenChange: l,
-    messages: i,
-    conversations: f,
-    agents: c = fe,
-    selectedAgentId: u = "devadoot",
-    activeConversationId: o,
-    isStreaming: m = !1,
-    streamingText: n = "",
-    isLoadingMessages: h = !1,
-    isLoadingConversations: t = !1,
+    isOpen: c,
+    onOpenChange: n,
+    messages: d,
+    conversations: x,
+    agents: o = ue,
+    selectedAgentId: p = "devadoot",
+    activeConversationId: u,
+    isStreaming: h = !1,
+    streamingText: m = "",
+    isLoadingMessages: b = !1,
+    isLoadingConversations: l = !1,
     onSendMessage: a,
-    onCancelStream: y,
-    onSelectAgent: N,
+    onCancelStream: N,
+    onSelectAgent: y,
     onStartNewChat: r,
     onSelectConversation: I,
-    onArchiveConversation: F,
-    onDeleteConversation: G,
-    className: V,
-    ...q
-  }, B) {
-    const [M, j] = P(!1), b = c.find((p) => p.id === u) ?? c[0];
-    return /* @__PURE__ */ e(_, { open: d, onOpenChange: l, children: /* @__PURE__ */ s(
-      J,
+    onArchiveConversation: G,
+    onDeleteConversation: V,
+    className: q,
+    ...B
+  }, X) {
+    const [M, j] = L(!1), t = o.find((i) => i.id === p) ?? o[0];
+    return /* @__PURE__ */ e(J, { open: c, onOpenChange: n, children: /* @__PURE__ */ s(
+      Q,
       {
-        ref: B,
+        ref: X,
         side: "right",
-        className: x("flex w-full flex-col gap-0 border-l border-surface-border-strong bg-surface-raised p-0 sm:max-w-[480px] [&>button]:hidden", V),
-        ...q,
+        className: f("flex w-full flex-col gap-0 border-l border-surface-border-strong bg-surface-raised p-0 sm:max-w-[480px] [&>button]:hidden", q),
+        ...B,
         children: [
-          /* @__PURE__ */ e(Q, { className: "sr-only", children: "AI Chat" }),
+          /* @__PURE__ */ e(W, { className: "sr-only", children: "AI Chat" }),
           /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03 border-b border-surface-border-strong px-ds-05 py-ds-04", children: [
-            /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ s(ce, { children: [
-              /* @__PURE__ */ e(ne, { asChild: !0, children: /* @__PURE__ */ s(
+            /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ s(ne, { children: [
+              /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ s(
                 "button",
                 {
                   className: "flex items-center gap-ds-02b rounded-ds-lg px-ds-03 py-ds-02b transition-colors hover:bg-surface-raised-hover",
                   children: [
-                    /* @__PURE__ */ e("span", { className: "text-ds-base text-surface-fg", children: b == null ? void 0 : b.name }),
-                    /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: b == null ? void 0 : b.desc }),
-                    /* @__PURE__ */ e(te, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle" })
+                    t != null && t.icon ? /* @__PURE__ */ e("span", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center", children: t.icon }) : /* @__PURE__ */ e("span", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent-3 text-ds-xs font-semibold text-accent-11", children: t == null ? void 0 : t.name.charAt(0) }),
+                    (t == null ? void 0 : t.status) && /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: f(
+                          "h-2 w-2 flex-shrink-0 rounded-full",
+                          t.status === "online" && "bg-success-9",
+                          t.status === "busy" && "bg-warning-9",
+                          t.status === "offline" && "bg-surface-fg-subtle"
+                        ),
+                        "aria-label": t.status
+                      }
+                    ),
+                    /* @__PURE__ */ e("span", { className: "text-ds-base text-surface-fg", children: t == null ? void 0 : t.name }),
+                    /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: t == null ? void 0 : t.desc }),
+                    /* @__PURE__ */ e(ie, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e(oe, { align: "start", className: "w-64", children: c.map((p) => /* @__PURE__ */ e(
-                me,
+              /* @__PURE__ */ e(me, { align: "start", className: "w-72", children: o.map((i) => /* @__PURE__ */ e(
+                fe,
                 {
-                  onClick: () => N == null ? void 0 : N(p.id),
-                  className: u === p.id ? "bg-surface-raised-hover" : "",
-                  children: /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
-                    /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg", children: p.name }),
-                    /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: p.desc })
+                  onClick: () => y == null ? void 0 : y(i.id),
+                  className: f(
+                    "items-start",
+                    p === i.id && "bg-surface-raised-hover"
+                  ),
+                  children: /* @__PURE__ */ s("div", { className: "flex gap-ds-02b", children: [
+                    i.icon ? /* @__PURE__ */ e("span", { className: "mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center", children: i.icon }) : /* @__PURE__ */ e("span", { className: "mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-accent-3 text-ds-xs font-semibold text-accent-11", children: i.name.charAt(0) }),
+                    /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-01", children: [
+                      /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-02", children: [
+                        /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg", children: i.name }),
+                        i.status && /* @__PURE__ */ e(
+                          "span",
+                          {
+                            className: f(
+                              "h-2 w-2 flex-shrink-0 rounded-full",
+                              i.status === "online" && "bg-success-9",
+                              i.status === "busy" && "bg-warning-9",
+                              i.status === "offline" && "bg-surface-fg-subtle"
+                            ),
+                            "aria-label": i.status
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: i.desc }),
+                      i.capabilities && i.capabilities.length > 0 && /* @__PURE__ */ e("div", { className: "mt-ds-01 flex flex-wrap gap-ds-01", children: i.capabilities.map((D) => /* @__PURE__ */ e(
+                        "span",
+                        {
+                          className: "inline-block rounded-ds-md bg-surface-raised-hover px-ds-02 py-px text-ds-xs text-surface-fg-subtle",
+                          children: D
+                        },
+                        D
+                      )) })
+                    ] })
                   ] })
                 },
-                p.id
+                i.id
               )) })
             ] }) }),
             /* @__PURE__ */ e(
@@ -337,25 +378,25 @@ const fe = [
                 },
                 className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-lg text-surface-fg-muted transition-colors hover:bg-surface-raised-hover",
                 "aria-label": "New chat",
-                children: /* @__PURE__ */ e(E, { className: "h-ico-sm w-ico-sm" })
+                children: /* @__PURE__ */ e(K, { className: "h-ico-sm w-ico-sm" })
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
                 onClick: () => j(!M),
-                className: x(
+                className: f(
                   "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-lg transition-colors hover:bg-surface-raised-hover",
                   M ? "bg-surface-raised-hover text-surface-fg" : "text-surface-fg-muted"
                 ),
                 "aria-label": "Conversation history",
-                children: /* @__PURE__ */ e(ie, { className: "h-ico-sm w-ico-sm" })
+                children: /* @__PURE__ */ e(le, { className: "h-ico-sm w-ico-sm" })
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => l(!1),
+                onClick: () => n(!1),
                 className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-lg text-surface-fg-muted transition-colors hover:bg-surface-raised-hover",
                 "aria-label": "Close chat",
                 children: /* @__PURE__ */ e(de, { className: "h-ico-sm w-ico-sm" })
@@ -363,36 +404,36 @@ const fe = [
             )
           ] }),
           M ? /* @__PURE__ */ e(
-            z,
+            F,
             {
-              conversations: f,
-              activeConversationId: o,
-              isLoading: t,
-              onSelect: (p) => {
-                I == null || I(p), j(!1);
+              conversations: x,
+              activeConversationId: u,
+              isLoading: l,
+              onSelect: (i) => {
+                I == null || I(i), j(!1);
               },
               onNewChat: () => {
                 r == null || r(), j(!1);
               },
-              onArchive: F,
-              onDelete: G
+              onArchive: G,
+              onDelete: V
             }
-          ) : /* @__PURE__ */ s(X, { children: [
+          ) : /* @__PURE__ */ s(Y, { children: [
             /* @__PURE__ */ e(
-              K,
+              U,
               {
-                messages: i,
-                isStreaming: m,
-                streamingText: n,
-                isLoadingMessages: h
+                messages: d,
+                isStreaming: h,
+                streamingText: m,
+                isLoadingMessages: b
               }
             ),
             /* @__PURE__ */ e(
-              U,
+              z,
               {
                 onSubmit: a,
-                onCancel: y,
-                isStreaming: m
+                onCancel: N,
+                isStreaming: h
               }
             )
           ] })
@@ -401,11 +442,11 @@ const fe = [
     ) });
   }
 );
-ue.displayName = "ChatPanel";
+he.displayName = "ChatPanel";
 export {
-  U as C,
-  K as M,
-  H as S,
-  ue as a,
-  z as b
+  z as C,
+  U as M,
+  A as S,
+  he as a,
+  F as b
 };