@devalok/shilp-sutra-karm 0.16.0 → 0.17.0

package/dist/_chunks/chat-panel.js

@@ -1,224 +1,283 @@
 "use client";
-import { jsx as e, jsxs as t, Fragment as $ } from "react/jsx-runtime";
-import * as y from "react";
-import { useRef as M, useEffect as F, useState as D, useCallback as C } from "react";
-import { Sheet as G, SheetContent as V, SheetTitle as _ } from "@devalok/shilp-sutra/ui/sheet";
-import { u as q } from "./use-composed-ref.js";
-import { M as T } from "./vendor.js";
-import { IconRobot as g, IconAlertCircle as J, IconUser as X, IconSquare as Y, IconSend as Q, IconMessagePlus as R, IconMessage as S, IconArchive as W, IconTrash as Z, IconChevronDown as O, IconHistory as ee, IconX as se } from "@tabler/icons-react";
-import { Button as I } from "@devalok/shilp-sutra/ui/button";
-import { cn as L } from "@devalok/shilp-sutra/ui/lib/utils";
-import { DropdownMenu as te, DropdownMenuTrigger as ae, DropdownMenuContent as re, DropdownMenuItem as le } from "@devalok/shilp-sutra/ui";
+import { jsx as e, jsxs as s, Fragment as q } from "react/jsx-runtime";
+import * as k from "react";
+import { useRef as R, useEffect as X, useState as A, useCallback as T } from "react";
+import { Sheet as Y, SheetContent as J, SheetTitle as Q } from "@devalok/shilp-sutra/ui/sheet";
+import { cn as b } from "@devalok/shilp-sutra/ui/lib/utils";
+import { springs as w } from "@devalok/shilp-sutra/ui/lib/motion";
+import { u as W } from "./use-composed-ref.js";
+import { M as P, A as Z, m as N } from "./vendor.js";
+import { IconRobot as C, IconAlertCircle as $, IconUser as O, IconSquare as S, IconSend as ee, IconMessagePlus as L, IconMessage as se, IconArchive as ae, IconTrash as re, IconChevronDown as te, IconHistory as le, IconX as de } from "@tabler/icons-react";
+import { Button as D } from "@devalok/shilp-sutra/ui/button";
+import { formatRelativeTime as ce } from "@devalok/shilp-sutra/ui/lib/date-utils";
+import { DropdownMenu as ie, DropdownMenuTrigger as ne, DropdownMenuContent as oe, DropdownMenuItem as me } from "@devalok/shilp-sutra/ui";
 const H = {
-  p: ({ children: s }) => /* @__PURE__ */ e("p", { className: "mb-ds-03 last:mb-0", children: s }),
+  p: ({ children: a }) => /* @__PURE__ */ e("p", { className: "mb-ds-03 last:mb-0", children: a }),
   code: ({
-    children: s,
-    className: a
-  }) => (a == null ? void 0 : a.includes("language-")) ? /* @__PURE__ */ e("code", { className: a, children: s }) : /* @__PURE__ */ e("code", { className: "rounded bg-field px-ds-02 py-ds-01 text-ds-md", children: s }),
-  pre: ({ children: s }) => /* @__PURE__ */ e("pre", { className: "mb-ds-03 overflow-x-auto rounded-ds-lg bg-field p-ds-04 text-ds-md", children: s }),
-  ul: ({ children: s }) => /* @__PURE__ */ e("ul", { className: "mb-ds-03 list-disc pl-ds-05", children: s }),
-  ol: ({ children: s }) => /* @__PURE__ */ e("ol", { className: "mb-ds-03 list-decimal pl-ds-05", children: s }),
-  li: ({ children: s }) => /* @__PURE__ */ e("li", { className: "mb-ds-02", children: s }),
-  strong: ({ children: s }) => /* @__PURE__ */ e("strong", { className: "font-semibold", children: s }),
-  a: ({
-    href: s,
     children: a,
-    ...d
+    className: t
+  }) => (t == null ? void 0 : t.includes("language-")) ? /* @__PURE__ */ e("code", { className: t, children: a }) : /* @__PURE__ */ e("code", { className: "rounded bg-surface-3 px-ds-02 py-ds-01 text-ds-md", children: a }),
+  pre: ({ children: a }) => /* @__PURE__ */ e("pre", { className: "mb-ds-03 overflow-x-auto rounded-ds-lg bg-surface-3 p-ds-04 text-ds-md", children: a }),
+  ul: ({ children: a }) => /* @__PURE__ */ e("ul", { className: "mb-ds-03 list-disc pl-ds-05", children: a }),
+  ol: ({ children: a }) => /* @__PURE__ */ e("ol", { className: "mb-ds-03 list-decimal pl-ds-05", children: a }),
+  li: ({ children: a }) => /* @__PURE__ */ e("li", { className: "mb-ds-02", children: a }),
+  strong: ({ children: a }) => /* @__PURE__ */ e("strong", { className: "font-semibold", children: a }),
+  a: ({
+    href: a,
+    children: t,
+    ...c
   }) => {
-    const l = s && /^(https?:\/\/|mailto:)/i.test(s) ? s : "#";
+    const d = a && /^(https?:\/\/|mailto:)/i.test(a) ? a : "#";
     return /* @__PURE__ */ e(
       "a",
       {
-        href: l,
+        href: d,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "text-interactive underline hover:text-interactive-hover",
-        ...d,
-        children: a
+        className: "text-accent-11 underline hover:text-accent-12",
+        ...c,
+        children: t
       }
     );
   }
-}, P = y.forwardRef(
-  function({ text: a }, d) {
-    return /* @__PURE__ */ t("div", { ref: d, "aria-live": "polite", children: [
-      /* @__PURE__ */ e(T, { components: H, children: a }),
-      /* @__PURE__ */ e("span", { className: "inline-block h-4 w-2 animate-pulse bg-text-secondary ml-ds-01" })
+}, E = k.forwardRef(
+  function({ text: t, isComplete: c = !1, className: d, ...u }, n) {
+    return /* @__PURE__ */ s("div", { ref: n, className: b(d), ...u, "aria-live": "off", children: [
+      /* @__PURE__ */ e(P, { components: H, children: t }),
+      !c && /* @__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: c ? t : ""
+        }
+      )
     ] });
   }
 );
-P.displayName = "StreamingText";
-const A = y.forwardRef(
+E.displayName = "StreamingText";
+const K = k.forwardRef(
   function({
-    messages: a,
-    isStreaming: d = !1,
-    streamingText: l = "",
-    isLoadingMessages: m = !1,
-    emptyTitle: c = "Karm AI",
-    emptyDescription: x = "Ask me about tasks, projects, attendance, or anything else."
+    messages: t,
+    isStreaming: c = !1,
+    streamingText: d = "",
+    isLoadingMessages: u = !1,
+    emptyTitle: n = "Karm AI",
+    emptyDescription: h = "Ask me about tasks, projects, attendance, or anything else.",
+    className: m,
+    ...f
   }, o) {
-    const h = M(null), i = q(h, o);
-    return F(() => {
-      const r = h.current;
+    const p = R(null), i = W(p, o);
+    return X(() => {
+      const r = p.current;
       r && (r.scrollTop = r.scrollHeight);
-    }, [a, l]), m ? /* @__PURE__ */ e("div", { ref: o, className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ t("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-text-secondary border-t-transparent" }),
-      /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-placeholder", children: "Loading messages..." })
-    ] }) }) : a.length === 0 && !d ? /* @__PURE__ */ e("div", { ref: o, className: "flex flex-1 items-center justify-center p-ds-06", children: /* @__PURE__ */ t("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-field", children: /* @__PURE__ */ e(g, { className: "h-ico-lg w-ico-lg text-text-secondary" }) }),
-      /* @__PURE__ */ e("h3", { className: "text-ds-base text-text-primary", children: c }),
-      /* @__PURE__ */ e("p", { className: "text-ds-sm max-w-[280px] text-text-placeholder", children: x })
-    ] }) }) : /* @__PURE__ */ e("div", { ref: i, className: "no-scrollbar flex-1 overflow-y-auto p-ds-05", children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-05", role: "log", "aria-label": "Chat messages", children: [
-      a.map((r) => r.role === "SYSTEM" ? /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-ds-03 rounded-ds-lg bg-error-surface px-ds-04 py-ds-03", children: [
-        /* @__PURE__ */ e(J, { className: "h-ico-sm w-ico-sm shrink-0 text-text-error" }),
-        /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-error", children: r.content })
-      ] }) }, r.id) : r.role === "USER" ? /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ t("div", { className: "flex max-w-[85%] items-start gap-ds-03", children: [
-        /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-br-ds-sm bg-interactive px-ds-04 py-ds-03 text-text-on-color", children: /* @__PURE__ */ e("p", { className: "text-ds-md whitespace-pre-wrap", children: r.content }) }),
-        /* @__PURE__ */ e("div", { className: "flex h-ds-xs-plus w-ds-xs-plus shrink-0 items-center justify-center rounded-ds-full bg-field", children: /* @__PURE__ */ e(X, { className: "h-ico-sm w-ico-sm text-text-secondary" }) })
-      ] }) }, r.id) : /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ t("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-field", children: /* @__PURE__ */ e(g, { className: "h-ico-sm w-ico-sm text-text-secondary" }) }),
-        /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-bl-ds-sm bg-field px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-md text-text-primary", children: /* @__PURE__ */ e(T, { components: H, children: r.content }) }) })
-      ] }) }, r.id)),
-      d && l && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ t("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-field", children: /* @__PURE__ */ e(g, { className: "h-ico-sm w-ico-sm text-text-secondary" }) }),
-        /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-bl-ds-sm bg-field px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-md text-text-primary", children: /* @__PURE__ */ e(P, { text: l }) }) })
-      ] }) }),
-      d && !l && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ t("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-field", children: /* @__PURE__ */ e(g, { className: "h-ico-sm w-ico-sm text-text-secondary" }) }),
-        /* @__PURE__ */ e("div", { className: "rounded-ds-2xl rounded-bl-ds-sm bg-field px-ds-04 py-ds-03", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-ds-02b py-ds-02", children: [
-          /* @__PURE__ */ e("div", { className: "h-2 w-2 animate-bounce rounded-ds-full bg-text-placeholder [animation-delay:0ms]" }),
-          /* @__PURE__ */ e("div", { className: "h-2 w-2 animate-bounce rounded-ds-full bg-text-placeholder [animation-delay:150ms]" }),
-          /* @__PURE__ */ e("div", { className: "h-2 w-2 animate-bounce rounded-ds-full bg-text-placeholder [animation-delay:300ms]" })
-        ] }) })
-      ] }) })
-    ] }) });
+    }, [t, d]), u ? /* @__PURE__ */ e("div", { ref: o, className: b("flex flex-1 items-center justify-center", m), ...f, 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..." })
+    ] }) }) : t.length === 0 && !c ? /* @__PURE__ */ e("div", { ref: o, className: b("flex flex-1 items-center justify-center p-ds-06", m), ...f, 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-3", 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: n }),
+      /* @__PURE__ */ e("p", { className: "text-ds-sm max-w-[280px] text-surface-fg-subtle", children: h })
+    ] }) }) : /* @__PURE__ */ e("div", { ref: i, className: b("no-scrollbar flex-1 overflow-y-auto p-ds-05", m), ...f, children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-05", role: "log", "aria-label": "Chat messages", children: /* @__PURE__ */ s(Z, { initial: !1, children: [
+      t.map((r) => r.role === "SYSTEM" ? /* @__PURE__ */ e(
+        N.div,
+        {
+          initial: { opacity: 0, y: 10 },
+          animate: { opacity: 1, y: 0 },
+          transition: w.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("p", { className: "text-ds-sm text-error-11", children: r.content })
+          ] })
+        },
+        r.id
+      ) : r.role === "USER" ? /* @__PURE__ */ e(
+        N.div,
+        {
+          initial: { opacity: 0, y: 10 },
+          animate: { opacity: 1, y: 0 },
+          transition: w.snappy,
+          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: r.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-3", children: /* @__PURE__ */ e(O, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }) })
+          ] })
+        },
+        r.id
+      ) : /* @__PURE__ */ e(
+        N.div,
+        {
+          initial: { opacity: 0, y: 10 },
+          animate: { opacity: 1, y: 0 },
+          transition: w.snappy,
+          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-3", 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-3 px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg", children: /* @__PURE__ */ e(P, { components: H, children: r.content }) }) })
+          ] })
+        },
+        r.id
+      )),
+      c && d && /* @__PURE__ */ e(
+        N.div,
+        {
+          initial: { opacity: 0, y: 10 },
+          animate: { opacity: 1, y: 0 },
+          transition: w.snappy,
+          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-3", 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-3 px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg", children: /* @__PURE__ */ e(E, { text: d }) }) })
+          ] })
+        },
+        "streaming-text"
+      ),
+      c && !d && /* @__PURE__ */ e(
+        N.div,
+        {
+          initial: { opacity: 0, y: 10 },
+          animate: { opacity: 1, y: 0 },
+          transition: w.snappy,
+          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-3", 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-3 px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-02b py-ds-02", children: [0, 1, 2].map((r) => /* @__PURE__ */ e(
+              N.span,
+              {
+                className: "h-2 w-2 rounded-ds-full bg-surface-fg-subtle",
+                animate: { y: [0, -4, 0] },
+                transition: { duration: 0.6, repeat: 1 / 0, delay: r * 0.15 }
+              },
+              r
+            )) }) })
+          ] })
+        },
+        "streaming-dots"
+      )
+    ] }) }) });
   }
 );
-A.displayName = "MessageList";
-const E = y.forwardRef(
+K.displayName = "MessageList";
+const U = k.forwardRef(
   function({
-    onSubmit: a,
-    onCancel: d,
-    isStreaming: l = !1,
-    placeholder: m = "Ask Karm AI...",
-    disclaimer: c = "AI responses may be inaccurate. Verify important information."
-  }, x) {
-    const [o, h] = D(""), i = M(null), r = C(() => {
-      const n = i.current;
-      n && (n.style.height = "auto", n.style.height = Math.min(n.scrollHeight, 160) + "px");
-    }, []), b = C(() => {
-      const n = o.trim();
-      !n || l || (h(""), i.current && (i.current.style.height = "auto"), a(n));
-    }, [o, l, a]), v = C(
-      (n) => {
-        n.key === "Enter" && !n.shiftKey && (n.preventDefault(), b());
+    onSubmit: t,
+    onCancel: c,
+    isStreaming: d = !1,
+    placeholder: u = "Ask Karm AI...",
+    disclaimer: n = "AI responses may be inaccurate. Verify important information.",
+    className: h,
+    ...m
+  }, f) {
+    const [o, p] = A(""), i = R(null), r = T(() => {
+      const l = i.current;
+      l && (l.style.height = "auto", l.style.height = Math.min(l.scrollHeight, 160) + "px");
+    }, []), y = T(() => {
+      const l = o.trim();
+      !l || d || (p(""), i.current && (i.current.style.height = "auto"), t(l));
+    }, [o, d, t]), v = T(
+      (l) => {
+        l.key === "Enter" && !l.shiftKey && (l.preventDefault(), y());
       },
-      [b]
+      [y]
     );
-    return /* @__PURE__ */ t("div", { ref: x, className: "border-t border-border bg-layer-01 p-ds-04", children: [
-      /* @__PURE__ */ t("div", { className: "flex items-end gap-ds-03 rounded-ds-xl border border-border bg-field px-ds-04 py-ds-03", children: [
+    return /* @__PURE__ */ s("div", { ref: f, className: b("border-t border-surface-border-strong bg-surface-1 p-ds-04", h), ...m, children: [
+      /* @__PURE__ */ s("div", { className: "flex items-end gap-ds-03 rounded-ds-xl border border-surface-border-strong bg-surface-3 px-ds-04 py-ds-03", children: [
         /* @__PURE__ */ e(
           "textarea",
           {
             ref: i,
             value: o,
-            onChange: (n) => {
-              h(n.target.value), r();
+            onChange: (l) => {
+              p(l.target.value), r();
             },
             onKeyDown: v,
-            placeholder: m,
+            placeholder: u,
             "aria-label": "Type a message",
-            disabled: l,
+            disabled: d,
             rows: 1,
-            className: "text-ds-md no-scrollbar max-h-[160px] min-h-ds-xs flex-1 resize-none bg-transparent text-text-primary placeholder:text-text-placeholder focus:outline-none disabled:opacity-[0.38]"
+            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"
           }
         ),
-        l ? /* @__PURE__ */ e(I, { variant: "solid", color: "error", size: "icon-sm", className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-lg", onClick: d, "aria-label": "Stop generating", children: /* @__PURE__ */ e(Y, { className: "h-ico-sm w-ico-sm" }) }) : /* @__PURE__ */ e(I, { size: "icon-sm", className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-lg", onClick: b, disabled: !o.trim(), "aria-label": "Send message", children: /* @__PURE__ */ e(Q, { className: "h-ico-sm w-ico-sm" }) })
+        d ? /* @__PURE__ */ e(D, { variant: "solid", color: "error", size: "icon-sm", className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-lg", onClick: c, "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: !o.trim(), "aria-label": "Send message", children: /* @__PURE__ */ e(ee, { className: "h-ico-sm w-ico-sm" }) })
       ] }),
-      c && /* @__PURE__ */ e("p", { className: "text-ds-sm mt-ds-02b text-center text-text-placeholder", children: c })
+      n && /* @__PURE__ */ e("p", { className: "text-ds-sm mt-ds-02b text-center text-surface-fg-subtle", children: n })
     ] });
   }
 );
-E.displayName = "ChatInput";
-function de(s) {
-  const a = new Date(s), l = (/* @__PURE__ */ new Date()).getTime() - a.getTime(), m = Math.floor(l / 6e4);
-  if (m < 1) return "Just now";
-  if (m < 60) return `${m}m ago`;
-  const c = Math.floor(m / 60);
-  if (c < 24) return `${c}h ago`;
-  const x = Math.floor(c / 24);
-  return x < 7 ? `${x}d ago` : a.toLocaleDateString("en-IN", {
-    day: "numeric",
-    month: "short"
-  });
-}
-const K = y.forwardRef(
+U.displayName = "ChatInput";
+const z = k.forwardRef(
   function({
-    conversations: a,
-    activeConversationId: d,
-    isLoading: l = !1,
-    onSelect: m,
-    onNewChat: c,
-    onArchive: x,
-    onDelete: o
-  }, h) {
-    return /* @__PURE__ */ t("div", { ref: h, className: "flex flex-1 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ t("div", { className: "flex items-center justify-between border-b border-border px-ds-05 py-ds-04", children: [
-        /* @__PURE__ */ e("h3", { className: "text-ds-md font-semibold text-text-primary", children: "Conversations" }),
-        /* @__PURE__ */ t(
+    conversations: t,
+    activeConversationId: c,
+    isLoading: d = !1,
+    onSelect: u,
+    onNewChat: n,
+    onArchive: h,
+    onDelete: m,
+    className: f,
+    ...o
+  }, p) {
+    return /* @__PURE__ */ s("div", { ref: p, className: b("flex flex-1 flex-col overflow-hidden", f), ...o, 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,
-            className: "flex items-center gap-ds-02b rounded-ds-lg px-ds-03 py-ds-02b text-text-secondary transition-colors hover:bg-layer-02",
+            onClick: n,
+            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-2",
             children: [
-              /* @__PURE__ */ e(R, { className: "h-ico-sm w-ico-sm" }),
+              /* @__PURE__ */ e(L, { 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: l ? /* @__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-text-secondary border-t-transparent" }) }) : a.length === 0 ? /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center gap-ds-03 py-12", children: [
-        /* @__PURE__ */ e(S, { className: "h-ds-sm w-ds-sm text-text-placeholder" }),
-        /* @__PURE__ */ e("p", { className: "text-ds-md text-text-placeholder", children: "No conversations yet" })
-      ] }) : /* @__PURE__ */ e("div", { className: "flex flex-col", children: a.map((i) => /* @__PURE__ */ t(
+      /* @__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" }) }) : t.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("p", { className: "text-ds-md text-surface-fg-subtle", children: "No conversations yet" })
+      ] }) : /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map((i) => /* @__PURE__ */ s(
         "div",
         {
-          className: L(
-            "group flex items-center gap-ds-04 border-b border-border-subtle px-ds-05 py-ds-04 transition-colors hover:bg-layer-02",
-            d === i.id && "bg-layer-02"
+          className: b(
+            "group flex items-center gap-ds-04 border-b border-surface-border px-ds-05 py-ds-04 transition-colors hover:bg-surface-2",
+            c === i.id && "bg-surface-2"
           ),
           children: [
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ s(
               "button",
               {
-                onClick: () => m(i.id),
+                onClick: () => u(i.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-text-primary", children: i.title || "Untitled conversation" }),
-                  /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-placeholder", children: de(i.updatedAt) })
+                  /* @__PURE__ */ e("p", { className: "text-ds-md truncate text-surface-fg", children: i.title || "Untitled conversation" }),
+                  /* @__PURE__ */ e("p", { className: "text-ds-sm text-surface-fg-subtle", children: ce(i.updatedAt) })
                 ]
               }
             ),
-            /* @__PURE__ */ t("div", { className: "flex shrink-0 items-center gap-ds-02 opacity-0 transition-opacity group-hover:opacity-100", children: [
-              x && /* @__PURE__ */ e(
+            /* @__PURE__ */ s("div", { className: "flex shrink-0 items-center gap-ds-02 opacity-0 transition-opacity group-hover:opacity-100", children: [
+              h && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: (r) => {
-                    r.stopPropagation(), x(i.id);
+                    r.stopPropagation(), h(i.id);
                   },
-                  className: "flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-text-placeholder transition-colors hover:bg-field hover:text-text-secondary",
+                  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-3 hover:text-surface-fg-muted",
                   "aria-label": "Archive conversation",
-                  children: /* @__PURE__ */ e(W, { className: "h-ico-sm w-ico-sm" })
+                  children: /* @__PURE__ */ e(ae, { className: "h-ico-sm w-ico-sm" })
                 }
               ),
-              o && /* @__PURE__ */ e(
+              m && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: (r) => {
-                    r.stopPropagation(), o(i.id);
+                    r.stopPropagation(), m(i.id);
                   },
-                  className: "flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-text-placeholder transition-colors hover:bg-error-surface hover:text-text-error",
+                  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(Z, { className: "h-ico-sm w-ico-sm" })
+                  children: /* @__PURE__ */ e(re, { className: "h-ico-sm w-ico-sm" })
                 }
               )
             ] })
@@ -229,8 +288,8 @@ const K = y.forwardRef(
     ] });
   }
 );
-K.displayName = "ConversationList";
-const ie = [
+z.displayName = "ConversationList";
+const fe = [
   { id: "devadoot", name: "Devadoot", desc: "General Assistant" },
   { id: "prahari", name: "Prahari", desc: "Attendance & Time" },
   { id: "sutradhar", name: "Sutradhar", desc: "Tasks & Projects" },
@@ -238,126 +297,129 @@ const ie = [
   { id: "vidwan", name: "Vidwan", desc: "Knowledge Expert" },
   { id: "sanchalak", name: "Sanchalak", desc: "Manager Advisor" },
   { id: "dwar-palak", name: "Dwar-Palak", desc: "Access Control" }
-], ne = y.forwardRef(
+], ue = k.forwardRef(
   function({
-    isOpen: a,
-    onOpenChange: d,
-    messages: l,
-    conversations: m,
-    agents: c = ie,
-    selectedAgentId: x = "devadoot",
-    activeConversationId: o,
-    isStreaming: h = !1,
-    streamingText: i = "",
-    isLoadingMessages: r = !1,
-    isLoadingConversations: b = !1,
-    onSendMessage: v,
-    onCancelStream: n,
-    onSelectAgent: w,
-    onStartNewChat: p,
-    onSelectConversation: k,
-    onArchiveConversation: U,
-    onDeleteConversation: z
-  }, B) {
-    const [j, N] = D(!1), u = c.find((f) => f.id === x) ?? c[0];
-    return /* @__PURE__ */ e(G, { open: a, onOpenChange: d, children: /* @__PURE__ */ t(
-      V,
+    isOpen: t,
+    onOpenChange: c,
+    messages: d,
+    conversations: u,
+    agents: n = fe,
+    selectedAgentId: h = "devadoot",
+    activeConversationId: m,
+    isStreaming: f = !1,
+    streamingText: o = "",
+    isLoadingMessages: p = !1,
+    isLoadingConversations: i = !1,
+    onSendMessage: r,
+    onCancelStream: y,
+    onSelectAgent: v,
+    onStartNewChat: l,
+    onSelectConversation: I,
+    onArchiveConversation: B,
+    onDeleteConversation: F,
+    className: G,
+    ...V
+  }, _) {
+    const [M, j] = A(!1), g = n.find((x) => x.id === h) ?? n[0];
+    return /* @__PURE__ */ e(Y, { open: t, onOpenChange: c, children: /* @__PURE__ */ s(
+      J,
       {
-        ref: B,
+        ref: _,
         side: "right",
-        className: "flex w-full flex-col gap-0 border-l border-border bg-layer-01 p-0 sm:max-w-[480px] [&>button]:hidden",
+        className: b("flex w-full flex-col gap-0 border-l border-surface-border-strong bg-surface-1 p-0 sm:max-w-[480px] [&>button]:hidden", G),
+        ...V,
         children: [
-          /* @__PURE__ */ e(_, { className: "sr-only", children: "AI Chat" }),
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-ds-03 border-b border-border px-ds-05 py-ds-04", children: [
-            /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ t(te, { children: [
-              /* @__PURE__ */ e(ae, { asChild: !0, children: /* @__PURE__ */ t(
+          /* @__PURE__ */ e(Q, { 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(ie, { children: [
+              /* @__PURE__ */ e(ne, { 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-layer-02",
+                  className: "flex items-center gap-ds-02b rounded-ds-lg px-ds-03 py-ds-02b transition-colors hover:bg-surface-2",
                   children: [
-                    /* @__PURE__ */ e("span", { className: "text-ds-base text-text-primary", children: u == null ? void 0 : u.name }),
-                    /* @__PURE__ */ e("span", { className: "text-ds-sm text-text-placeholder", children: u == null ? void 0 : u.desc }),
-                    /* @__PURE__ */ e(O, { className: "h-ico-sm w-ico-sm text-text-placeholder" })
+                    /* @__PURE__ */ e("span", { className: "text-ds-base text-surface-fg", children: g == null ? void 0 : g.name }),
+                    /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: g == null ? void 0 : g.desc }),
+                    /* @__PURE__ */ e(te, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e(re, { align: "start", className: "w-64", children: c.map((f) => /* @__PURE__ */ e(
-                le,
+              /* @__PURE__ */ e(oe, { align: "start", className: "w-64", children: n.map((x) => /* @__PURE__ */ e(
+                me,
                 {
-                  onClick: () => w == null ? void 0 : w(f.id),
-                  className: x === f.id ? "bg-layer-02" : "",
-                  children: /* @__PURE__ */ t("div", { className: "flex flex-col", children: [
-                    /* @__PURE__ */ e("span", { className: "text-ds-md text-text-primary", children: f.name }),
-                    /* @__PURE__ */ e("span", { className: "text-ds-sm text-text-placeholder", children: f.desc })
+                  onClick: () => v == null ? void 0 : v(x.id),
+                  className: h === x.id ? "bg-surface-2" : "",
+                  children: /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg", children: x.name }),
+                    /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: x.desc })
                   ] })
                 },
-                f.id
+                x.id
               )) })
             ] }) }),
             /* @__PURE__ */ e(
               "button",
               {
                 onClick: () => {
-                  p == null || p(), N(!1);
+                  l == null || l(), j(!1);
                 },
-                className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-lg text-text-secondary transition-colors hover:bg-layer-02",
+                className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-lg text-surface-fg-muted transition-colors hover:bg-surface-2",
                 "aria-label": "New chat",
-                children: /* @__PURE__ */ e(R, { className: "h-ico-sm w-ico-sm" })
+                children: /* @__PURE__ */ e(L, { className: "h-ico-sm w-ico-sm" })
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => N(!j),
-                className: L(
-                  "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-lg transition-colors hover:bg-layer-02",
-                  j ? "bg-layer-02 text-text-primary" : "text-text-secondary"
+                onClick: () => j(!M),
+                className: b(
+                  "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-lg transition-colors hover:bg-surface-2",
+                  M ? "bg-surface-2 text-surface-fg" : "text-surface-fg-muted"
                 ),
                 "aria-label": "Conversation history",
-                children: /* @__PURE__ */ e(ee, { className: "h-ico-sm w-ico-sm" })
+                children: /* @__PURE__ */ e(le, { className: "h-ico-sm w-ico-sm" })
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => d(!1),
-                className: "flex h-ds-sm w-ds-sm items-center justify-center rounded-ds-lg text-text-secondary transition-colors hover:bg-layer-02",
+                onClick: () => c(!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-2",
                 "aria-label": "Close chat",
-                children: /* @__PURE__ */ e(se, { className: "h-ico-sm w-ico-sm" })
+                children: /* @__PURE__ */ e(de, { className: "h-ico-sm w-ico-sm" })
               }
             )
           ] }),
-          j ? /* @__PURE__ */ e(
-            K,
+          M ? /* @__PURE__ */ e(
+            z,
             {
-              conversations: m,
-              activeConversationId: o,
-              isLoading: b,
-              onSelect: (f) => {
-                k == null || k(f), N(!1);
+              conversations: u,
+              activeConversationId: m,
+              isLoading: i,
+              onSelect: (x) => {
+                I == null || I(x), j(!1);
               },
               onNewChat: () => {
-                p == null || p(), N(!1);
+                l == null || l(), j(!1);
               },
-              onArchive: U,
-              onDelete: z
+              onArchive: B,
+              onDelete: F
             }
-          ) : /* @__PURE__ */ t($, { children: [
+          ) : /* @__PURE__ */ s(q, { children: [
             /* @__PURE__ */ e(
-              A,
+              K,
               {
-                messages: l,
-                isStreaming: h,
-                streamingText: i,
-                isLoadingMessages: r
+                messages: d,
+                isStreaming: f,
+                streamingText: o,
+                isLoadingMessages: p
               }
             ),
             /* @__PURE__ */ e(
-              E,
+              U,
               {
-                onSubmit: v,
-                onCancel: n,
-                isStreaming: h
+                onSubmit: r,
+                onCancel: y,
+                isStreaming: f
               }
             )
           ] })
@@ -366,11 +428,11 @@ const ie = [
     ) });
   }
 );
-ne.displayName = "ChatPanel";
+ue.displayName = "ChatPanel";
 export {
-  E as C,
-  A as M,
-  P as S,
-  ne as a,
-  K as b
+  U as C,
+  K as M,
+  E as S,
+  ue as a,
+  z as b
 };