chordia-ui 4.0.6 → 4.0.7

package/dist/MessageThread.es.js

@@ -1,174 +1,48 @@
-import { jsxs as a, jsx as e, Fragment as oe } from "react/jsx-runtime";
-import { useState as u, useRef as te, useEffect as O, useMemo as xe } from "react";
-import { Send as me, PanelLeftClose as Ce, Search as Me, Pin as ue, MessageSquare as Te, Check as ze, X as Ie, MoreVertical as Ee, ChevronLeft as Fe, ChevronRight as De, Clock as fe, Hash as be, AtSign as Re, Paperclip as Be } from "lucide-react";
-import { C as he } from "./ChatMessage.es.js";
-const ye = "#2e3236", Le = "#e3e1d7", We = "#2e3236";
-function Pe({ size: d = 32 }) {
-  const p = Math.round(d * 0.75);
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      style: {
-        width: d,
-        height: d,
-        borderRadius: "9999px",
-        background: ye,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ a(
-        "svg",
-        {
-          width: p,
-          height: p,
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          style: { display: "block" },
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ e(
-              "path",
-              {
-                d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
-                fill: ye
-              }
-            ),
-            /* @__PURE__ */ e(
-              "path",
-              {
-                d: "M12.0281 1.54883C15.1413 1.54883 17.9364 2.90958 19.8514 5.06845C21.4881 6.9137 22.4824 9.34236 22.4824 12.0032C22.4824 15.0939 21.1413 17.8711 19.0094 19.7849C17.1586 21.4463 14.7113 22.4575 12.0281 22.4575C9.34478 22.4575 6.74638 21.3828 4.8764 19.6286C2.84343 17.7216 1.57373 15.0107 1.57373 12.0032C1.57373 9.28897 2.60792 6.81646 4.30366 4.95829C6.21523 2.86349 8.9682 1.54883 12.0281 1.54883Z",
-                stroke: "#E8D4A3",
-                strokeWidth: "1.6",
-                strokeMiterlimit: "10"
-              }
-            ),
-            /* @__PURE__ */ e(
-              "path",
-              {
-                d: "M12.0281 4.27832C14.237 4.27832 16.2239 5.21303 17.6307 6.69799C18.9409 8.08066 19.7525 9.94558 19.7525 12.0027C19.7525 14.2369 18.8032 16.2491 17.2862 17.6582C15.9086 18.9419 14.06 19.7271 12.0281 19.7271C9.99626 19.7271 8.46689 18.4265 7.08366 17.1225C5.58971 15.714 4.30371 14.2184 4.30371 12.0027C4.30371 10.0097 5.05856 8.19307 6.2979 6.82333C7.71148 5.26024 9.75514 4.27832 12.0281 4.27832Z",
-                stroke: "#9BDB9C",
-                strokeWidth: "1.2",
-                strokeMiterlimit: "10"
-              }
-            ),
-            /* @__PURE__ */ e(
-              "path",
-              {
-                d: "M12.0282 7.00837C13.3327 7.00837 14.5209 7.50861 15.4101 8.32753C16.4016 9.24032 17.0226 10.5488 17.0226 12.0028C17.0226 13.3805 16.4651 14.6282 15.563 15.5315C14.6592 16.4369 13.4091 16.9973 12.0282 16.9973C10.6472 16.9973 10.1869 15.4702 9.29093 14.6164C8.33599 13.7065 7.03369 13.426 7.03369 12.0023C7.03369 10.7303 7.50919 9.56969 8.29158 8.68781C9.20662 7.65699 10.5415 7.00781 12.0282 7.00781V7.00837Z",
-                stroke: "#4DE294",
-                strokeWidth: "0.8",
-                strokeMiterlimit: "10"
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-function Ae({
-  phase: d = "thinking",
-  label: p,
-  // eslint-disable-next-line no-unused-vars
-  toolSteps: k = [],
-  // eslint-disable-next-line no-unused-vars
-  elapsedMs: S,
-  compact: c = !1
-}) {
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        animation: "cuiThinkingPulse 1.6s ease-in-out infinite"
-      },
-      children: [
-        /* @__PURE__ */ e("style", { children: `
-        @keyframes cuiThinkingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
-      ` }),
-        /* @__PURE__ */ e(Pe, { size: c ? 28 : 32 }),
-        /* @__PURE__ */ e(
-          "div",
-          {
-            style: {
-              display: "inline-flex",
-              alignItems: "center",
-              background: Le,
-              padding: c ? "8px 12px" : "12px 16px",
-              borderRadius: "20px",
-              maxWidth: "100%",
-              minWidth: 0
-            },
-            children: /* @__PURE__ */ e(
-              "p",
-              {
-                style: {
-                  margin: 0,
-                  fontSize: "14px",
-                  fontWeight: 400,
-                  lineHeight: "normal",
-                  color: We,
-                  fontFamily: "inherit",
-                  // Grow / shrink (and wrap) with the message text.
-                  overflowWrap: "anywhere",
-                  wordBreak: "break-word"
-                },
-                children: p || (d === "responding" || d === "generating" ? "Compass is generating response..." : "Thinking...")
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-const He = { error: (...d) => console.warn("toast.error:", ...d) };
-function qe({
-  initialMessages: d = [],
-  onSendMessage: p,
+import { jsxs as l, jsx as e, Fragment as ie } from "react/jsx-runtime";
+import { useState as d, useRef as te, useEffect as j, useMemo as xe } from "react";
+import { Send as he, PanelLeftClose as we, Search as Ce, Pin as ue, MessageSquare as Te, Check as Me, X as ze, MoreVertical as Ie, ChevronLeft as Fe, ChevronRight as Ee, Clock as fe, Hash as be, AtSign as De, Paperclip as Re } from "lucide-react";
+import { C as ye, T as Le } from "./ThinkingIndicator.es.js";
+const Be = { error: (...h) => console.warn("toast.error:", ...h) };
+function Ye({
+  initialMessages: h = [],
+  onSendMessage: b,
   onStreamMessage: k,
   // NEW: streaming version of onSendMessage
   onMessagesChange: S,
   // NEW: callback when messages array changes
   onCodeBlockClick: c,
   // callback when "Canvas" button clicked on a code block: ({ code, language }) => void
-  placeholder: I = "Ask a question about this interaction...",
-  title: P = "Chat with Chordia"
+  placeholder: B = "Ask a question about this interaction...",
+  title: O = "Chat with Chordia"
 }) {
-  const [M, A] = u(d || []), [h, ne] = u(""), [K, E] = u(!1), [m, g] = u(!1), [y, H] = u(null), [F, V] = u("thinking"), [_, n] = u(null), [v, D] = u(0), b = te(null), R = te(null), N = te(null), Q = te(null), j = te(null), [$, Y] = u(!1), [re, q] = u(0);
-  O(() => {
-    var l;
-    (l = b.current) == null || l.scrollIntoView({ behavior: "smooth" });
-  }, [M, K]), O(() => {
-    R.current && (R.current.style.height = "auto", R.current.style.height = `${Math.min(
-      R.current.scrollHeight,
+  const [T, P] = d(h || []), [f, ne] = d(""), [U, I] = d(!1), [m, p] = d(!1), [y, A] = d(null), [F, V] = d("thinking"), [_, n] = d(null), [v, E] = d(0), x = te(null), D = te(null), N = te(null), G = te(null), H = te(null), [$, Y] = d(!1), [re, q] = d(0);
+  j(() => {
+    var a;
+    (a = x.current) == null || a.scrollIntoView({ behavior: "smooth" });
+  }, [T, U]), j(() => {
+    D.current && (D.current.style.height = "auto", D.current.style.height = `${Math.min(
+      D.current.scrollHeight,
       120
     )}px`);
-  }, [h]), O(() => {
+  }, [f]), j(() => {
     if (S) {
-      const l = [...M];
-      y && l.push(y), S(l);
+      const a = [...T];
+      y && a.push(y), S(a);
     }
-  }, [M, y, S]), O(() => {
-    let l;
-    return K && _ && (l = setInterval(() => {
-      if (D(Date.now() - _), j.current) {
-        const s = (Date.now() - j.current) / 1e3;
+  }, [T, y, S]), j(() => {
+    let a;
+    return U && _ && (a = setInterval(() => {
+      if (E(Date.now() - _), H.current) {
+        const s = (Date.now() - H.current) / 1e3;
         s >= 3 ? (Y(!0), q(Math.floor(s))) : Y(!1);
       }
-    }, 500)), () => l && clearInterval(l);
-  }, [K, _]);
-  const X = () => {
-    E(!1), g(!1), H(null), Q.current = null, V("thinking"), Y(!1), q(0), j.current = null, n(null), D(0), N.current && (N.current.abort(), N.current = null);
-  }, ae = (l) => {
-    if (l.startsWith("data: ")) {
-      const s = l.slice(6);
+    }, 500)), () => a && clearInterval(a);
+  }, [U, _]);
+  const Z = () => {
+    I(!1), p(!1), A(null), G.current = null, V("thinking"), Y(!1), q(0), H.current = null, n(null), E(0), N.current && (N.current.abort(), N.current = null);
+  }, ae = (a) => {
+    if (a.startsWith("data: ")) {
+      const s = a.slice(6);
       if (s === "[DONE]")
         return { type: "done" };
       try {
@@ -178,18 +52,18 @@ function qe({
       }
     }
     return null;
-  }, de = (l) => {
-    var T, x;
-    if (!((x = (T = l.choices) == null ? void 0 : T[0]) != null && x.delta))
+  }, de = (a) => {
+    var M, u;
+    if (!((u = (M = a.choices) == null ? void 0 : M[0]) != null && u.delta))
       return;
-    j.current = Date.now(), Y(!1);
-    const s = l.choices[0].delta;
+    H.current = Date.now(), Y(!1);
+    const s = a.choices[0].delta;
     if (s.tool_calls || s.tool_results) {
       V("tool");
       return;
     }
-    s.content !== void 0 && (V("responding"), H((w) => {
-      const U = w || {
+    s.content !== void 0 && (V("responding"), A((w) => {
+      const K = w || {
         id: Date.now().toString(),
         role: "assistant",
         content: "",
@@ -198,31 +72,31 @@ function qe({
           minute: "2-digit"
         }),
         isStreaming: !0
-      }, Z = {
-        ...U,
-        content: (U.content || "") + (s.content || "")
+      }, J = {
+        ...K,
+        content: (K.content || "") + (s.content || "")
       };
-      return Q.current = Z, Z;
+      return G.current = J, J;
     }));
-  }, ee = async (l) => {
-    const s = l.getReader(), T = new TextDecoder();
-    let x = "";
+  }, ee = async (a) => {
+    const s = a.getReader(), M = new TextDecoder();
+    let u = "";
     try {
       for (; ; ) {
-        const { done: w, value: U } = await s.read();
+        const { done: w, value: K } = await s.read();
         if (w)
           break;
-        x += T.decode(U, { stream: !0 });
-        const Z = x.split(`
+        u += M.decode(K, { stream: !0 });
+        const J = u.split(`
 `);
-        x = Z.pop() || "";
-        for (const ce of Z)
+        u = J.pop() || "";
+        for (const ce of J)
           if (ce.trim()) {
-            const ie = ae(ce);
-            if (ie) {
-              if (ie.type === "done")
+            const oe = ae(ce);
+            if (oe) {
+              if (oe.type === "done")
                 return;
-              ie.type === "data" && de(ie.data);
+              oe.type === "data" && de(oe.data);
             }
           }
       }
@@ -230,24 +104,24 @@ function qe({
       s.releaseLock();
     }
   }, le = async () => {
-    if (!h.trim() || m)
+    if (!f.trim() || m)
       return;
-    const l = h.trim(), s = {
+    const a = f.trim(), s = {
       id: Date.now().toString(),
       role: "user",
-      content: l,
+      content: a,
       timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(void 0, {
         hour: "2-digit",
         minute: "2-digit"
       })
-    }, T = [...M, s];
-    A(T), ne(""), E(!0), g(!0), V("thinking"), n(Date.now()), j.current = Date.now(), N.current = new AbortController();
+    }, M = [...T, s];
+    P(M), ne(""), I(!0), p(!0), V("thinking"), n(Date.now()), H.current = Date.now(), N.current = new AbortController();
     try {
-      let x;
+      let u;
       if (k)
-        x = await k(l, T);
-      else if (p)
-        x = await p(l, T);
+        u = await k(a, M);
+      else if (b)
+        u = await b(a, M);
       else {
         setTimeout(() => {
           const w = {
@@ -259,31 +133,31 @@ function qe({
               minute: "2-digit"
             })
           };
-          A((U) => [...U, w]), X();
+          P((K) => [...K, w]), Z();
         }, 1e3);
         return;
       }
-      if (x instanceof ReadableStream)
-        await ee(x);
-      else if (x instanceof Response && x.body)
-        await ee(x.body);
-      else if (x && typeof x.then == "function") {
-        const w = await x;
+      if (u instanceof ReadableStream)
+        await ee(u);
+      else if (u instanceof Response && u.body)
+        await ee(u.body);
+      else if (u && typeof u.then == "function") {
+        const w = await u;
         w instanceof ReadableStream ? await ee(w) : w instanceof Response && w.body && await ee(w.body);
       }
-      Q.current && A((w) => [...w, {
-        ...Q.current,
+      G.current && P((w) => [...w, {
+        ...G.current,
         isStreaming: !1
       }]);
-    } catch (x) {
-      x.name !== "AbortError" && (He.error("Failed to send message"), console.error("Stream error:", x));
+    } catch (u) {
+      u.name !== "AbortError" && (Be.error("Failed to send message"), console.error("Stream error:", u));
     } finally {
-      X();
+      Z();
     }
-  }, B = (l) => {
-    l.key === "Enter" && !l.shiftKey && (l.preventDefault(), le());
+  }, R = (a) => {
+    a.key === "Enter" && !a.shiftKey && (a.preventDefault(), le());
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -296,7 +170,7 @@ function qe({
         overflow: "hidden"
       },
       children: [
-        P ? /* @__PURE__ */ a(
+        O ? /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -314,7 +188,7 @@ function qe({
                     letterSpacing: "-0.01em",
                     color: "var(--text-strong, rgba(30,33,37,0.92))"
                   },
-                  children: P
+                  children: O
                 }
               ),
               /* @__PURE__ */ e(
@@ -342,7 +216,7 @@ function qe({
               display: "flex",
               flexDirection: "column"
             },
-            children: M.length === 0 ? /* @__PURE__ */ e(
+            children: T.length === 0 ? /* @__PURE__ */ e(
               "div",
               {
                 style: {
@@ -357,22 +231,22 @@ function qe({
                 },
                 children: "No messages yet. Start a conversation by asking a question below."
               }
-            ) : /* @__PURE__ */ a(oe, { children: [
-              M.map((l) => /* @__PURE__ */ e(
-                he,
+            ) : /* @__PURE__ */ l(ie, { children: [
+              T.map((a) => /* @__PURE__ */ e(
+                ye,
                 {
-                  role: l.role,
-                  content: l.content,
-                  html: l.html,
-                  timestamp: l.timestamp,
-                  toolBadges: l.toolBadges,
-                  isStreaming: l.isStreaming,
+                  role: a.role,
+                  content: a.content,
+                  html: a.html,
+                  timestamp: a.timestamp,
+                  toolBadges: a.toolBadges,
+                  isStreaming: a.isStreaming,
                   onCodeBlockClick: c
                 },
-                l.id
+                a.id
               )),
               y && /* @__PURE__ */ e(
-                he,
+                ye,
                 {
                   role: y.role,
                   content: y.content,
@@ -382,19 +256,19 @@ function qe({
                 },
                 y.id
               ),
-              K && (!y || $) && /* @__PURE__ */ e("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ e(
-                Ae,
+              U && (!y || $) && /* @__PURE__ */ e("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ e(
+                Le,
                 {
                   phase: $ ? "tool" : F,
                   elapsedMs: v,
                   label: $ && re >= 30 ? "Compacting conversation — trimming context to stay sharp..." : $ && re >= 10 ? "Running background tasks..." : $ ? "Still working..." : void 0
                 }
               ) }),
-              /* @__PURE__ */ e("div", { ref: b })
+              /* @__PURE__ */ e("div", { ref: x })
             ] })
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -403,7 +277,7 @@ function qe({
               background: "var(--paper-elevated, rgba(255,255,255,0.82))"
             },
             children: [
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ l(
                 "div",
                 {
                   style: {
@@ -415,11 +289,11 @@ function qe({
                     /* @__PURE__ */ e(
                       "textarea",
                       {
-                        ref: R,
-                        value: h,
-                        onChange: (l) => ne(l.target.value),
-                        onKeyDown: B,
-                        placeholder: I,
+                        ref: D,
+                        value: f,
+                        onChange: (a) => ne(a.target.value),
+                        onKeyDown: R,
+                        placeholder: B,
                         rows: 1,
                         disabled: m,
                         style: {
@@ -440,11 +314,11 @@ function qe({
                           opacity: m ? 0.6 : 1,
                           cursor: m ? "not-allowed" : "text"
                         },
-                        onFocus: (l) => {
-                          m || (l.target.style.borderColor = "rgba(94, 136, 176, 0.35)");
+                        onFocus: (a) => {
+                          m || (a.target.style.borderColor = "rgba(94, 136, 176, 0.35)");
                         },
-                        onBlur: (l) => {
-                          l.target.style.borderColor = "rgba(52, 58, 64, 0.18)";
+                        onBlur: (a) => {
+                          a.target.style.borderColor = "rgba(52, 58, 64, 0.18)";
                         }
                       }
                     ),
@@ -452,14 +326,14 @@ function qe({
                       "button",
                       {
                         onClick: le,
-                        disabled: !h.trim() || m,
+                        disabled: !f.trim() || m,
                         style: {
                           padding: "10px 16px",
-                          background: h.trim() && !m ? "var(--Base-Strong, #0B0B0B)" : "#ECEEF2",
-                          color: h.trim() && !m ? "white" : "var(--text-base)",
+                          background: f.trim() && !m ? "var(--Base-Strong, #0B0B0B)" : "#ECEEF2",
+                          color: f.trim() && !m ? "white" : "var(--text-base)",
                           border: "none",
                           borderRadius: "var(--radius-md, 8px)",
-                          cursor: h.trim() && !m ? "pointer" : "not-allowed",
+                          cursor: f.trim() && !m ? "pointer" : "not-allowed",
                           display: "flex",
                           alignItems: "center",
                           gap: "6px",
@@ -468,7 +342,7 @@ function qe({
                           transition: "all 0.15s ease",
                           height: "42px"
                         },
-                        children: m ? /* @__PURE__ */ a(oe, { children: [
+                        children: m ? /* @__PURE__ */ l(ie, { children: [
                           /* @__PURE__ */ e("style", { children: `
                     @keyframes buttonSpin {
                       from { transform: rotate(0deg); }
@@ -489,8 +363,8 @@ function qe({
                             }
                           ),
                           "Sending..."
-                        ] }) : /* @__PURE__ */ a(oe, { children: [
-                          /* @__PURE__ */ e(me, { size: 16 }),
+                        ] }) : /* @__PURE__ */ l(ie, { children: [
+                          /* @__PURE__ */ e(he, { size: 16 }),
                           "Send"
                         ] })
                       }
@@ -516,7 +390,7 @@ function qe({
     }
   );
 }
-const i = {
+const o = {
   title: "#2e3236",
   // grey/strong
   muted: "#808183",
@@ -537,19 +411,19 @@ const i = {
   searchTrack: "#d8d8d8"
   // neutral/150
 };
-function je(d) {
-  const p = d ? new Date(d) : null;
-  if (!p || Number.isNaN(p.getTime()))
+function We(h) {
+  const b = h ? new Date(h) : null;
+  if (!b || Number.isNaN(b.getTime()))
     return "Older";
   const k = /* @__PURE__ */ new Date(), S = new Date(k.getFullYear(), k.getMonth(), k.getDate()), c = new Date(S);
-  return c.setDate(S.getDate() - 1), p >= S ? "Today" : p >= c ? "Yesterday" : "Older";
+  return c.setDate(S.getDate() - 1), b >= S ? "Today" : b >= c ? "Yesterday" : "Older";
 }
-const Oe = ["Today", "Yesterday", "Older"];
-function _e(d) {
-  const p = d ? new Date(d) : null;
-  if (!p || Number.isNaN(p.getTime()))
+const Pe = ["Today", "Yesterday", "Older"];
+function Ae(h) {
+  const b = h ? new Date(h) : null;
+  if (!b || Number.isNaN(b.getTime()))
     return "";
-  const k = Date.now() - p.getTime(), S = Math.floor(k / 6e4);
+  const k = Date.now() - b.getTime(), S = Math.floor(k / 6e4);
   if (S < 1)
     return "just now";
   if (S < 60)
@@ -557,98 +431,98 @@ function _e(d) {
   const c = Math.floor(S / 60);
   if (c < 24)
     return `${c}h ago`;
-  const I = Math.floor(c / 24);
-  return I < 7 ? `${I}d ago` : p.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  const B = Math.floor(c / 24);
+  return B < 7 ? `${B}d ago` : b.toLocaleDateString(void 0, { month: "short", day: "numeric" });
 }
-function Ze({
-  threads: d = [],
-  activeThreadId: p,
+function Ke({
+  threads: h = [],
+  activeThreadId: b,
   onSelectThread: k,
   onNewChat: S,
   onCollapse: c,
-  onRenameThread: I,
-  onDeleteThread: P,
-  onPinThread: M,
-  loading: A = !1,
-  pageSize: h = 10,
+  onRenameThread: B,
+  onDeleteThread: O,
+  onPinThread: T,
+  loading: P = !1,
+  pageSize: f = 10,
   // Server-side pagination (controlled). When `onPageChange` is provided the
   // panel renders whatever `threads` it's given as the current page, drives the
   // controls from `page` / `pageCount`, and asks the parent to fetch new pages.
   page: ne,
-  pageCount: K,
-  onPageChange: E,
+  pageCount: U,
+  onPageChange: I,
   // Called when the All/Pinned filter changes. When provided, the parent is
   // expected to (re)fetch — e.g. hit the API with `&pinned=true`.
   onFilterChange: m
 }) {
-  const g = typeof E == "function", [y, H] = u(""), [F, V] = u("all"), _ = (o) => {
-    V(o), m == null || m(o);
-  }, [n, v] = u(1), [D, b] = u(null), [R, N] = u(null), [Q, j] = u(""), [$, Y] = u(null), [re, q] = u(null), X = te(null);
-  O(() => {
-    R && X.current && (X.current.focus(), X.current.select());
-  }, [R]), O(() => {
+  const p = typeof I == "function", [y, A] = d(""), [F, V] = d("all"), _ = (i) => {
+    V(i), m == null || m(i);
+  }, [n, v] = d(1), [E, x] = d(null), [D, N] = d(null), [G, H] = d(""), [$, Y] = d(null), [re, q] = d(null), Z = te(null);
+  j(() => {
+    D && Z.current && (Z.current.focus(), Z.current.select());
+  }, [D]), j(() => {
     if (!re)
       return;
-    const o = () => q(null), r = (L) => {
+    const i = () => q(null), r = (L) => {
       L.key === "Escape" && q(null);
     };
-    return document.addEventListener("click", o), document.addEventListener("keydown", r), () => {
-      document.removeEventListener("click", o), document.removeEventListener("keydown", r);
+    return document.addEventListener("click", i), document.addEventListener("keydown", r), () => {
+      document.removeEventListener("click", i), document.removeEventListener("keydown", r);
     };
   }, [re]);
-  const ae = typeof I == "function", de = typeof P == "function", ee = typeof M == "function", { groups: le, totalPages: B } = xe(() => {
-    const o = y.trim().toLowerCase(), L = [...d.filter((f) => F === "pinned" && !f.pinned ? !1 : o ? (f.title || "").toLowerCase().includes(o) || (f.last_message_preview || "").toLowerCase().includes(o) : !0)].sort((f, z) => {
-      if (f.pinned && !z.pinned)
+  const ae = typeof B == "function", de = typeof O == "function", ee = typeof T == "function", { groups: le, totalPages: R } = xe(() => {
+    const i = y.trim().toLowerCase(), L = [...h.filter((g) => F === "pinned" && !g.pinned ? !1 : i ? (g.title || "").toLowerCase().includes(i) || (g.last_message_preview || "").toLowerCase().includes(i) : !0)].sort((g, z) => {
+      if (g.pinned && !z.pinned)
         return -1;
-      if (!f.pinned && z.pinned)
+      if (!g.pinned && z.pinned)
         return 1;
-      const pe = new Date(f.updated_at || f.created_at || 0).getTime();
+      const pe = new Date(g.updated_at || g.created_at || 0).getTime();
       return new Date(z.updated_at || z.created_at || 0).getTime() - pe;
-    }), G = g ? Math.max(1, K || 1) : Math.max(1, Math.ceil(L.length / h));
+    }), Q = p ? Math.max(1, U || 1) : Math.max(1, Math.ceil(L.length / f));
     let C;
-    if (g)
+    if (p)
       C = L;
     else {
-      const z = (Math.min(n, G) - 1) * h;
-      C = L.slice(z, z + h);
+      const z = (Math.min(n, Q) - 1) * f;
+      C = L.slice(z, z + f);
     }
     const W = {};
-    for (const f of C) {
-      const z = je(f.updated_at || f.created_at);
-      (W[z] || (W[z] = [])).push(f);
+    for (const g of C) {
+      const z = We(g.updated_at || g.created_at);
+      (W[z] || (W[z] = [])).push(g);
     }
-    return { groups: Oe.map((f) => ({
-      label: f,
-      items: W[f] || []
-    })).filter((f) => f.items.length > 0), totalPages: G };
-  }, [d, y, F, n, h, g, K]), l = le.reduce((o, r) => o + r.items.length, 0), s = g ? Math.max(1, ne || 1) : n, T = g ? E : v;
-  O(() => {
-    g || v(1);
-  }, [y, F, g]), O(() => {
-    g || v((o) => Math.min(o, B));
-  }, [B, g]);
-  const x = xe(() => {
-    if (B <= 5)
-      return Array.from({ length: B }, (G, C) => C + 1);
+    return { groups: Pe.map((g) => ({
+      label: g,
+      items: W[g] || []
+    })).filter((g) => g.items.length > 0), totalPages: Q };
+  }, [h, y, F, n, f, p, U]), a = le.reduce((i, r) => i + r.items.length, 0), s = p ? Math.max(1, ne || 1) : n, M = p ? I : v;
+  j(() => {
+    p || v(1);
+  }, [y, F, p]), j(() => {
+    p || v((i) => Math.min(i, R));
+  }, [R, p]);
+  const u = xe(() => {
+    if (R <= 5)
+      return Array.from({ length: R }, (Q, C) => C + 1);
     let r = Math.max(1, s - 2);
-    const L = Math.min(B, r + 5 - 1);
-    return r = Math.max(1, L - 5 + 1), Array.from({ length: L - r + 1 }, (G, C) => r + C);
-  }, [B, s]), w = (o, r) => {
-    o.stopPropagation(), q(null), Y(null), N(r.id), j(r.title || r.name || "");
-  }, U = (o) => {
-    o && o.stopPropagation();
-    const r = (Q || "").trim();
-    R && r && (I == null || I(R, r)), N(null), j("");
-  }, Z = (o) => {
-    o && o.stopPropagation(), N(null), j("");
-  }, ce = (o, r) => {
-    o.stopPropagation(), q(null), N(null), Y(r.id);
-  }, ie = (o) => {
-    o && o.stopPropagation(), $ && (P == null || P($)), Y(null);
-  }, ve = (o) => {
-    o && o.stopPropagation(), Y(null);
-  }, ke = (o, r) => {
-    o.stopPropagation(), M == null || M(r.id, !r.pinned);
+    const L = Math.min(R, r + 5 - 1);
+    return r = Math.max(1, L - 5 + 1), Array.from({ length: L - r + 1 }, (Q, C) => r + C);
+  }, [R, s]), w = (i, r) => {
+    i.stopPropagation(), q(null), Y(null), N(r.id), H(r.title || r.name || "");
+  }, K = (i) => {
+    i && i.stopPropagation();
+    const r = (G || "").trim();
+    D && r && (B == null || B(D, r)), N(null), H("");
+  }, J = (i) => {
+    i && i.stopPropagation(), N(null), H("");
+  }, ce = (i, r) => {
+    i.stopPropagation(), q(null), N(null), Y(r.id);
+  }, oe = (i) => {
+    i && i.stopPropagation(), $ && (O == null || O($)), Y(null);
+  }, me = (i) => {
+    i && i.stopPropagation(), Y(null);
+  }, ve = (i, r) => {
+    i.stopPropagation(), T == null || T(r.id, !r.pinned);
   }, se = {
     display: "inline-flex",
     alignItems: "center",
@@ -660,11 +534,11 @@ function Ze({
     border: "none",
     borderRadius: "6px",
     cursor: "pointer",
-    color: i.muted,
+    color: o.muted,
     transition: "all 0.12s ease",
     flexShrink: 0
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -675,8 +549,8 @@ function Ze({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ a("div", { style: { padding: "16px 16px 0 16px", flexShrink: 0 }, children: [
-          /* @__PURE__ */ a(
+        /* @__PURE__ */ l("div", { style: { padding: "16px 16px 0 16px", flexShrink: 0 }, children: [
+          /* @__PURE__ */ l(
             "div",
             {
               style: {
@@ -686,7 +560,7 @@ function Ze({
                 height: "32px"
               },
               children: [
-                /* @__PURE__ */ e("div", { style: { fontSize: "14px", fontWeight: 400, color: i.title }, children: "Threads" }),
+                /* @__PURE__ */ e("div", { style: { fontSize: "14px", fontWeight: 400, color: o.title }, children: "Threads" }),
                 c && /* @__PURE__ */ e(
                   "button",
                   {
@@ -697,11 +571,11 @@ function Ze({
                       ...se,
                       width: "20px",
                       height: "20px",
-                      color: i.muted
+                      color: o.muted
                     },
-                    onMouseEnter: (o) => o.currentTarget.style.background = i.hoverBg,
-                    onMouseLeave: (o) => o.currentTarget.style.background = "transparent",
-                    children: /* @__PURE__ */ e(Ce, { size: 20, strokeWidth: 1.5 })
+                    onMouseEnter: (i) => i.currentTarget.style.background = o.hoverBg,
+                    onMouseLeave: (i) => i.currentTarget.style.background = "transparent",
+                    children: /* @__PURE__ */ e(we, { size: 20, strokeWidth: 1.5 })
                   }
                 )
               ]
@@ -714,12 +588,12 @@ function Ze({
                 display: "flex",
                 alignItems: "center",
                 height: "32px",
-                background: i.searchTrack,
+                background: o.searchTrack,
                 borderRadius: "11px",
                 padding: "1px",
                 marginTop: "12px"
               },
-              children: /* @__PURE__ */ a(
+              children: /* @__PURE__ */ l(
                 "div",
                 {
                   style: {
@@ -733,13 +607,13 @@ function Ze({
                     padding: "4px 8px"
                   },
                   children: [
-                    /* @__PURE__ */ e(Me, { size: 18, style: { color: i.faint, flexShrink: 0 } }),
+                    /* @__PURE__ */ e(Ce, { size: 18, style: { color: o.faint, flexShrink: 0 } }),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "text",
                         value: y,
-                        onChange: (o) => H(o.target.value),
+                        onChange: (i) => A(i.target.value),
                         placeholder: "Search",
                         style: {
                           flex: 1,
@@ -749,7 +623,7 @@ function Ze({
                           background: "transparent",
                           fontSize: "14px",
                           fontWeight: 500,
-                          color: i.title
+                          color: o.title
                         }
                       }
                     )
@@ -758,7 +632,7 @@ function Ze({
               )
             }
           ),
-          /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: "16px", marginTop: "12px" }, children: [
+          /* @__PURE__ */ l("div", { style: { display: "flex", alignItems: "center", gap: "16px", marginTop: "12px" }, children: [
             /* @__PURE__ */ e(
               "button",
               {
@@ -777,13 +651,13 @@ function Ze({
                   fontWeight: 400,
                   lineHeight: "24px",
                   transition: "all 0.12s ease",
-                  background: F === "all" ? i.pillDarkBg : i.hoverBg,
-                  color: F === "all" ? i.pillDarkText : i.title
+                  background: F === "all" ? o.pillDarkBg : o.hoverBg,
+                  color: F === "all" ? o.pillDarkText : o.title
                 },
                 children: "All"
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ l(
               "button",
               {
                 type: "button",
@@ -802,8 +676,8 @@ function Ze({
                   fontWeight: 400,
                   lineHeight: "24px",
                   transition: "all 0.12s ease",
-                  background: F === "pinned" ? i.pillDarkBg : i.hoverBg,
-                  color: F === "pinned" ? i.pillDarkText : i.title
+                  background: F === "pinned" ? o.pillDarkBg : o.hoverBg,
+                  color: F === "pinned" ? o.pillDarkText : o.title
                 },
                 children: [
                   /* @__PURE__ */ e(ue, { size: 16, style: { flexShrink: 0 } }),
@@ -813,29 +687,29 @@ function Ze({
             )
           ] })
         ] }),
-        /* @__PURE__ */ e("div", { style: { flex: 1, overflowY: "auto", padding: "16px 16px 8px 16px" }, children: A ? /* @__PURE__ */ e("div", { style: { padding: "30px 16px", textAlign: "center", color: i.faint, fontSize: "13px" }, children: "Loading threads..." }) : l === 0 ? /* @__PURE__ */ e("div", { style: { padding: "30px 16px", textAlign: "center", color: i.faint, fontSize: "13px" }, children: y ? "No threads found" : F === "pinned" ? "No pinned threads" : "No threads yet" }) : le.map((o) => /* @__PURE__ */ a("div", { style: { marginBottom: "8px" }, children: [
+        /* @__PURE__ */ e("div", { style: { flex: 1, overflowY: "auto", padding: "16px 16px 8px 16px" }, children: P ? /* @__PURE__ */ e("div", { style: { padding: "30px 16px", textAlign: "center", color: o.faint, fontSize: "13px" }, children: "Loading threads..." }) : a === 0 ? /* @__PURE__ */ e("div", { style: { padding: "30px 16px", textAlign: "center", color: o.faint, fontSize: "13px" }, children: y ? "No threads found" : F === "pinned" ? "No pinned threads" : "No threads yet" }) : le.map((i) => /* @__PURE__ */ l("div", { style: { marginBottom: "8px" }, children: [
           /* @__PURE__ */ e(
             "div",
             {
               style: {
                 fontSize: "13px",
                 fontWeight: 500,
-                color: i.title,
+                color: o.title,
                 padding: "8px 0 4px 0"
               },
-              children: o.label
+              children: i.label
             }
           ),
-          o.items.map((r) => {
-            const L = r.id === p, G = D === r.id, C = R === r.id, W = $ === r.id, J = re === r.id, f = ae || de, z = (ee || f) && (G || L || J) && !C && !W, pe = J || W || C, ge = L ? i.selectedBg : G || pe ? i.hoverBg : "transparent", Se = L || G || pe ? `1px solid ${i.border}` : "1px solid transparent";
-            return /* @__PURE__ */ a(
+          i.items.map((r) => {
+            const L = r.id === b, Q = E === r.id, C = D === r.id, W = $ === r.id, X = re === r.id, g = ae || de, z = (ee || g) && (Q || L || X) && !C && !W, pe = X || W || C, ge = L ? o.selectedBg : Q || pe ? o.hoverBg : "transparent", ke = L || Q || pe ? `1px solid ${o.border}` : "1px solid transparent";
+            return /* @__PURE__ */ l(
               "div",
               {
                 onClick: () => {
                   C || W || k == null || k(r.id);
                 },
-                onMouseEnter: () => b(r.id),
-                onMouseLeave: () => b((t) => t === r.id ? null : t),
+                onMouseEnter: () => x(r.id),
+                onMouseLeave: () => x((t) => t === r.id ? null : t),
                 style: {
                   display: "flex",
                   alignItems: "center",
@@ -844,7 +718,7 @@ function Ze({
                   marginBottom: "2px",
                   borderRadius: "8px",
                   background: ge,
-                  border: Se,
+                  border: ke,
                   cursor: C || W ? "default" : "pointer",
                   transition: "background 0.12s ease, border-color 0.12s ease",
                   boxSizing: "border-box",
@@ -861,7 +735,7 @@ function Ze({
                         width: "40px",
                         height: "40px",
                         flexShrink: 0,
-                        color: i.muted
+                        color: o.muted
                       },
                       children: /* @__PURE__ */ e(Te, { size: 20 })
                     }
@@ -869,29 +743,29 @@ function Ze({
                   C ? /* @__PURE__ */ e(
                     "input",
                     {
-                      ref: X,
+                      ref: Z,
                       type: "text",
-                      value: Q,
-                      onChange: (t) => j(t.target.value),
+                      value: G,
+                      onChange: (t) => H(t.target.value),
                       onClick: (t) => t.stopPropagation(),
                       onKeyDown: (t) => {
-                        t.stopPropagation(), t.key === "Enter" ? U(t) : t.key === "Escape" && Z(t);
+                        t.stopPropagation(), t.key === "Enter" ? K(t) : t.key === "Escape" && J(t);
                       },
                       style: {
                         flex: 1,
                         minWidth: 0,
                         fontSize: "14px",
                         fontWeight: 600,
-                        color: i.title,
+                        color: o.title,
                         background: "#fff",
-                        border: `1px solid ${i.border}`,
+                        border: `1px solid ${o.border}`,
                         borderRadius: "6px",
                         padding: "4px 8px",
                         outline: "none",
                         boxSizing: "border-box"
                       }
                     }
-                  ) : /* @__PURE__ */ a(
+                  ) : /* @__PURE__ */ l(
                     "div",
                     {
                       style: {
@@ -913,7 +787,7 @@ function Ze({
                               maxWidth: "100%",
                               fontSize: "14px",
                               fontWeight: L ? 550 : 500,
-                              color: i.title,
+                              color: o.title,
                               overflow: "hidden",
                               textOverflow: "ellipsis",
                               whiteSpace: "nowrap",
@@ -922,7 +796,7 @@ function Ze({
                             children: r.title || r.name || "Untitled thread"
                           }
                         ),
-                        W ? /* @__PURE__ */ a(
+                        W ? /* @__PURE__ */ l(
                           "div",
                           {
                             style: {
@@ -938,7 +812,7 @@ function Ze({
                                   style: {
                                     fontSize: "12px",
                                     fontWeight: 500,
-                                    color: i.title
+                                    color: o.title
                                   },
                                   children: "Confirm: delete this thread?"
                                 }
@@ -947,14 +821,14 @@ function Ze({
                                 "button",
                                 {
                                   type: "button",
-                                  onClick: ie,
+                                  onClick: oe,
                                   style: {
                                     padding: "3px 12px",
                                     fontSize: "12px",
                                     fontWeight: 600,
-                                    color: i.title,
+                                    color: o.title,
                                     background: "#ECEEF2",
-                                    border: `1px solid ${i.borderSubtle}`,
+                                    border: `1px solid ${o.borderSubtle}`,
                                     borderRadius: "6px",
                                     cursor: "pointer"
                                   },
@@ -967,59 +841,59 @@ function Ze({
                                 "button",
                                 {
                                   type: "button",
-                                  onClick: ve,
+                                  onClick: me,
                                   style: {
                                     padding: "3px 6px",
                                     fontSize: "12px",
                                     fontWeight: 500,
-                                    color: i.muted,
+                                    color: o.muted,
                                     background: "transparent",
                                     border: "none",
                                     cursor: "pointer"
                                   },
-                                  onMouseEnter: (t) => t.currentTarget.style.color = i.title,
-                                  onMouseLeave: (t) => t.currentTarget.style.color = i.muted,
+                                  onMouseEnter: (t) => t.currentTarget.style.color = o.title,
+                                  onMouseLeave: (t) => t.currentTarget.style.color = o.muted,
                                   children: "No"
                                 }
                               )
                             ]
                           }
-                        ) : /* @__PURE__ */ a(
+                        ) : /* @__PURE__ */ l(
                           "div",
                           {
                             style: {
                               fontSize: "12px",
-                              color: i.muted,
+                              color: o.muted,
                               overflow: "hidden",
                               textOverflow: "ellipsis",
                               whiteSpace: "nowrap",
                               lineHeight: 1.5
                             },
                             children: [
-                              r.message_count != null && /* @__PURE__ */ a(oe, { children: [
+                              r.message_count != null && /* @__PURE__ */ l(ie, { children: [
                                 r.message_count,
                                 " msg",
                                 r.message_count !== 1 ? "s" : "",
                                 " · "
                               ] }),
-                              _e(r.updated_at || r.created_at)
+                              Ae(r.updated_at || r.created_at)
                             ]
                           }
                         )
                       ]
                     }
                   ),
-                  C && /* @__PURE__ */ a("div", { style: { display: "inline-flex", alignItems: "center", gap: "2px", flexShrink: 0 }, children: [
+                  C && /* @__PURE__ */ l("div", { style: { display: "inline-flex", alignItems: "center", gap: "2px", flexShrink: 0 }, children: [
                     /* @__PURE__ */ e(
                       "button",
                       {
                         type: "button",
                         title: "Save",
-                        onClick: U,
+                        onClick: K,
                         style: { ...se, color: "#1f9d57" },
                         onMouseEnter: (t) => t.currentTarget.style.background = "rgba(31,157,87,0.12)",
                         onMouseLeave: (t) => t.currentTarget.style.background = "transparent",
-                        children: /* @__PURE__ */ e(ze, { size: 15 })
+                        children: /* @__PURE__ */ e(Me, { size: 15 })
                       }
                     ),
                     /* @__PURE__ */ e(
@@ -1027,11 +901,11 @@ function Ze({
                       {
                         type: "button",
                         title: "Cancel",
-                        onClick: Z,
+                        onClick: J,
                         style: se,
                         onMouseEnter: (t) => t.currentTarget.style.background = "rgba(0,0,0,0.06)",
                         onMouseLeave: (t) => t.currentTarget.style.background = "transparent",
-                        children: /* @__PURE__ */ e(Ie, { size: 15 })
+                        children: /* @__PURE__ */ e(ze, { size: 15 })
                       }
                     )
                   ] }),
@@ -1039,54 +913,54 @@ function Ze({
                     ue,
                     {
                       size: 14,
-                      style: { color: i.title, flexShrink: 0 },
+                      style: { color: o.title, flexShrink: 0 },
                       fill: "currentColor"
                     }
                   ),
-                  z && /* @__PURE__ */ a("div", { style: { display: "inline-flex", alignItems: "center", gap: "2px", flexShrink: 0 }, children: [
+                  z && /* @__PURE__ */ l("div", { style: { display: "inline-flex", alignItems: "center", gap: "2px", flexShrink: 0 }, children: [
                     ee && /* @__PURE__ */ e(
                       "button",
                       {
                         type: "button",
                         title: r.pinned ? "Unpin" : "Pin",
-                        onClick: (t) => ke(t, r),
+                        onClick: (t) => ve(t, r),
                         style: {
                           ...se,
-                          color: r.pinned ? i.title : i.muted
+                          color: r.pinned ? o.title : o.muted
                         },
                         onMouseEnter: (t) => {
-                          t.currentTarget.style.background = "rgba(0,0,0,0.06)", t.currentTarget.style.color = i.title;
+                          t.currentTarget.style.background = "rgba(0,0,0,0.06)", t.currentTarget.style.color = o.title;
                         },
                         onMouseLeave: (t) => {
-                          t.currentTarget.style.background = "transparent", t.currentTarget.style.color = r.pinned ? i.title : i.muted;
+                          t.currentTarget.style.background = "transparent", t.currentTarget.style.color = r.pinned ? o.title : o.muted;
                         },
                         children: /* @__PURE__ */ e(ue, { size: 14, fill: r.pinned ? "currentColor" : "none" })
                       }
                     ),
-                    f && /* @__PURE__ */ e(
+                    g && /* @__PURE__ */ e(
                       "button",
                       {
                         type: "button",
                         title: "More",
                         onClick: (t) => {
-                          t.stopPropagation(), q((we) => we === r.id ? null : r.id);
+                          t.stopPropagation(), q((Se) => Se === r.id ? null : r.id);
                         },
                         style: {
                           ...se,
-                          color: J ? i.title : i.muted,
-                          background: J ? "rgba(0,0,0,0.06)" : "transparent"
+                          color: X ? o.title : o.muted,
+                          background: X ? "rgba(0,0,0,0.06)" : "transparent"
                         },
                         onMouseEnter: (t) => {
-                          t.currentTarget.style.background = "rgba(0,0,0,0.06)", t.currentTarget.style.color = i.title;
+                          t.currentTarget.style.background = "rgba(0,0,0,0.06)", t.currentTarget.style.color = o.title;
                         },
                         onMouseLeave: (t) => {
-                          t.currentTarget.style.background = J ? "rgba(0,0,0,0.06)" : "transparent", t.currentTarget.style.color = J ? i.title : i.muted;
+                          t.currentTarget.style.background = X ? "rgba(0,0,0,0.06)" : "transparent", t.currentTarget.style.color = X ? o.title : o.muted;
                         },
-                        children: /* @__PURE__ */ e(Ee, { size: 14 })
+                        children: /* @__PURE__ */ e(Ie, { size: 14 })
                       }
                     )
                   ] }),
-                  J && f && /* @__PURE__ */ a(
+                  X && g && /* @__PURE__ */ l(
                     "div",
                     {
                       onClick: (t) => t.stopPropagation(),
@@ -1097,7 +971,7 @@ function Ze({
                         zIndex: 20,
                         width: "144px",
                         background: "#FFFFFF",
-                        border: `1px solid ${i.border}`,
+                        border: `1px solid ${o.border}`,
                         borderRadius: "4px",
                         boxShadow: "-2px 2px 4px rgba(0,0,0,0.1)",
                         overflow: "hidden"
@@ -1114,12 +988,12 @@ function Ze({
                               textAlign: "left",
                               padding: "12px",
                               fontSize: "13px",
-                              color: i.title,
+                              color: o.title,
                               background: "transparent",
                               border: "none",
                               cursor: "pointer"
                             },
-                            onMouseEnter: (t) => t.currentTarget.style.background = i.hoverBg,
+                            onMouseEnter: (t) => t.currentTarget.style.background = o.hoverBg,
                             onMouseLeave: (t) => t.currentTarget.style.background = "transparent",
                             children: "Rename"
                           }
@@ -1135,13 +1009,13 @@ function Ze({
                               textAlign: "left",
                               padding: "12px",
                               fontSize: "13px",
-                              color: i.title,
+                              color: o.title,
                               background: "transparent",
                               border: "none",
-                              borderTop: ae ? `1px solid ${i.border}` : "none",
+                              borderTop: ae ? `1px solid ${o.border}` : "none",
                               cursor: "pointer"
                             },
-                            onMouseEnter: (t) => t.currentTarget.style.background = i.hoverBg,
+                            onMouseEnter: (t) => t.currentTarget.style.background = o.hoverBg,
                             onMouseLeave: (t) => t.currentTarget.style.background = "transparent",
                             children: "Delete"
                           }
@@ -1154,8 +1028,8 @@ function Ze({
               r.id
             );
           })
-        ] }, o.label)) }),
-        !A && B > 1 && /* @__PURE__ */ a(
+        ] }, i.label)) }),
+        !P && R > 1 && /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -1167,15 +1041,15 @@ function Ze({
               height: "64px",
               padding: "0 16px",
               boxSizing: "border-box",
-              borderTop: `1px solid ${i.border}`
+              borderTop: `1px solid ${o.border}`
             },
             children: [
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ l(
                 "button",
                 {
                   type: "button",
                   disabled: s <= 1,
-                  onClick: () => T(Math.max(1, s - 1)),
+                  onClick: () => M(Math.max(1, s - 1)),
                   style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -1185,7 +1059,7 @@ function Ze({
                     padding: "4px 8px",
                     borderRadius: "10px",
                     background: "#FFFFFF",
-                    border: `1px solid ${i.borderSubtle}`,
+                    border: `1px solid ${o.borderSubtle}`,
                     fontSize: "12px",
                     lineHeight: "16px",
                     color: "#0b0b0b",
@@ -1198,13 +1072,13 @@ function Ze({
                   ]
                 }
               ),
-              x.map((o) => {
-                const r = o === s;
+              u.map((i) => {
+                const r = i === s;
                 return /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    onClick: () => T(o),
+                    onClick: () => M(i),
                     style: {
                       display: "inline-flex",
                       alignItems: "center",
@@ -1218,20 +1092,20 @@ function Ze({
                       cursor: "pointer",
                       background: r ? "#0b0b0b" : "#FFFFFF",
                       color: r ? "#FFFFFF" : "#0b0b0b",
-                      border: r ? "1px solid #0b0b0b" : `1px solid ${i.borderSubtle}`,
+                      border: r ? "1px solid #0b0b0b" : `1px solid ${o.borderSubtle}`,
                       fontWeight: r ? 600 : 400
                     },
-                    children: o
+                    children: i
                   },
-                  o
+                  i
                 );
               }),
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ l(
                 "button",
                 {
                   type: "button",
-                  disabled: s >= B,
-                  onClick: () => T(Math.min(B, s + 1)),
+                  disabled: s >= R,
+                  onClick: () => M(Math.min(R, s + 1)),
                   style: {
                     display: "inline-flex",
                     alignItems: "center",
@@ -1241,16 +1115,16 @@ function Ze({
                     padding: "4px 8px",
                     borderRadius: "10px",
                     background: "#FFFFFF",
-                    border: `1px solid ${i.borderSubtle}`,
+                    border: `1px solid ${o.borderSubtle}`,
                     fontSize: "12px",
                     lineHeight: "16px",
                     color: "#0b0b0b",
-                    cursor: s >= B ? "default" : "pointer",
-                    opacity: s >= B ? 0.5 : 1
+                    cursor: s >= R ? "default" : "pointer",
+                    opacity: s >= R ? 0.5 : 1
                   },
                   children: [
                     "Next",
-                    /* @__PURE__ */ e(De, { size: 12 })
+                    /* @__PURE__ */ e(Ee, { size: 12 })
                   ]
                 }
               )
@@ -1261,67 +1135,67 @@ function Ze({
     }
   );
 }
-const Ne = { error: (...d) => console.warn("toast.error:", ...d) }, $e = () => ({ userData: { name: "User", email: "" } });
-function Ge({
-  sessionTitle: d,
-  messages: p,
+const He = { error: (...h) => console.warn("toast.error:", ...h) }, je = () => ({ userData: { name: "User", email: "" } });
+function Ue({
+  sessionTitle: h,
+  messages: b,
   onSendMessage: k,
   currentUser: S
 }) {
   var _;
-  const [c, I] = u(""), [P, M] = u(!1), [A, h] = u(p || []), [ne, K] = u(!1), [E, m] = u(!1), { userData: g } = $e(), y = te(null), H = S || {
-    name: (g == null ? void 0 : g.name) || "You",
-    initials: ((_ = g == null ? void 0 : g.name) == null ? void 0 : _.split(" ").map((n) => n[0]).join("").toUpperCase()) || "YO",
+  const [c, B] = d(""), [O, T] = d(!1), [P, f] = d(b || []), [ne, U] = d(!1), [I, m] = d(!1), { userData: p } = je(), y = te(null), A = S || {
+    name: (p == null ? void 0 : p.name) || "You",
+    initials: ((_ = p == null ? void 0 : p.name) == null ? void 0 : _.split(" ").map((n) => n[0]).join("").toUpperCase()) || "YO",
     color: "#6B7C93"
   };
-  O(() => {
-    h(p || []);
-  }, [p]), O(() => {
+  j(() => {
+    f(b || []);
+  }, [b]), j(() => {
     y.current && y.current.scrollIntoView({ behavior: "smooth" });
-  }, [A]);
+  }, [P]);
   const F = async () => {
     if (!c.trim())
       return;
     const n = c.trim();
-    I(""), m(!0);
+    B(""), m(!0);
     const v = {
       id: `temp-${Date.now()}`,
       author: {
-        name: H.name,
-        role: (g == null ? void 0 : g.role) || "",
-        initials: H.initials,
-        color: H.color
+        name: A.name,
+        role: (p == null ? void 0 : p.role) || "",
+        initials: A.initials,
+        color: A.color
       },
       content: n,
       timestamp: "Just now",
       type: "comment",
       isOptimistic: !0
     };
-    if (h((D) => [...D, v]), k) {
+    if (f((E) => [...E, v]), k) {
       try {
-        await k(n), h(
-          (D) => D.map(
-            (b) => b.id === v.id ? { ...b, isOptimistic: !1 } : b
+        await k(n), f(
+          (E) => E.map(
+            (x) => x.id === v.id ? { ...x, isOptimistic: !1 } : x
           )
         );
       } catch {
-        h((b) => b.filter((R) => R.id !== v.id)), Ne.error("Failed to send message");
+        f((x) => x.filter((D) => D.id !== v.id)), He.error("Failed to send message");
       } finally {
         m(!1);
       }
       return;
     }
     setTimeout(() => {
-      h(
-        (D) => D.map(
-          (b) => b.id === v.id ? { ...b, isOptimistic: !1 } : b
+      f(
+        (E) => E.map(
+          (x) => x.id === v.id ? { ...x, isOptimistic: !1 } : x
         )
       ), m(!1);
     }, 500);
   }, V = (n) => {
     n.key === "Enter" && !n.shiftKey && (n.preventDefault(), F());
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ l(
     "div",
     {
       style: {
@@ -1334,7 +1208,7 @@ function Ge({
         overflow: "hidden"
       },
       children: [
-        d && /* @__PURE__ */ a(
+        h && /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -1355,7 +1229,7 @@ function Ge({
                   children: "Session Discussion"
                 }
               ),
-              d && /* @__PURE__ */ e(
+              h && /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
@@ -1365,13 +1239,13 @@ function Ge({
                     alignItems: "center",
                     gap: "8px"
                   },
-                  children: /* @__PURE__ */ e("span", { children: d })
+                  children: /* @__PURE__ */ e("span", { children: h })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -1395,7 +1269,7 @@ function Ge({
                   },
                   children: "Loading messages..."
                 }
-              ) : A.length === 0 ? /* @__PURE__ */ e(
+              ) : P.length === 0 ? /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
@@ -1407,7 +1281,7 @@ function Ge({
                   },
                   children: "No messages yet. Start the conversation!"
                 }
-              ) : A.map((n) => /* @__PURE__ */ a(
+              ) : P.map((n) => /* @__PURE__ */ l(
                 "div",
                 {
                   style: {
@@ -1455,8 +1329,8 @@ function Ge({
                         children: /* @__PURE__ */ e(fe, { size: 14 })
                       }
                     ),
-                    /* @__PURE__ */ a("div", { style: { flex: 1, minWidth: 0 }, children: [
-                      /* @__PURE__ */ a(
+                    /* @__PURE__ */ l("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ l(
                         "div",
                         {
                           style: {
@@ -1539,7 +1413,7 @@ function Ge({
                             gap: "6px",
                             marginTop: "8px"
                           },
-                          children: n.references.map((v, D) => /* @__PURE__ */ a(
+                          children: n.references.map((v, E) => /* @__PURE__ */ l(
                             "button",
                             {
                               type: "button",
@@ -1557,11 +1431,11 @@ function Ge({
                                 transition: "all 0.15s ease",
                                 fontWeight: 550
                               },
-                              onMouseEnter: (b) => {
-                                b.currentTarget.style.background = "rgba(255, 255, 255, 0.95)", b.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.24)";
+                              onMouseEnter: (x) => {
+                                x.currentTarget.style.background = "rgba(255, 255, 255, 0.95)", x.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.24)";
                               },
-                              onMouseLeave: (b) => {
-                                b.currentTarget.style.background = "rgba(255, 255, 255, 0.7)", b.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.16)";
+                              onMouseLeave: (x) => {
+                                x.currentTarget.style.background = "rgba(255, 255, 255, 0.7)", x.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.16)";
                               },
                               children: [
                                 v.type === "timestamp" && /* @__PURE__ */ e(fe, { size: 12 }),
@@ -1569,7 +1443,7 @@ function Ge({
                                 v.label
                               ]
                             },
-                            D
+                            E
                           ))
                         }
                       )
@@ -1582,7 +1456,7 @@ function Ge({
             ]
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ l(
           "div",
           {
             style: {
@@ -1591,7 +1465,7 @@ function Ge({
               background: "var(--paper-elevated, rgba(255,255,255,0.82))"
             },
             children: [
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ l(
                 "div",
                 {
                   style: {
@@ -1607,7 +1481,7 @@ function Ge({
                           width: "32px",
                           height: "32px",
                           borderRadius: "var(--radius-md, 8px)",
-                          background: H.color,
+                          background: A.color,
                           color: "white",
                           display: "flex",
                           alignItems: "center",
@@ -1617,10 +1491,10 @@ function Ge({
                           flexShrink: 0,
                           opacity: 0.9
                         },
-                        children: H.initials
+                        children: A.initials
                       }
                     ),
-                    /* @__PURE__ */ a(
+                    /* @__PURE__ */ l(
                       "div",
                       {
                         style: {
@@ -1634,10 +1508,10 @@ function Ge({
                             "textarea",
                             {
                               value: c,
-                              onChange: (n) => I(n.target.value),
+                              onChange: (n) => B(n.target.value),
                               onKeyDown: V,
-                              onFocus: () => M(!0),
-                              onBlur: () => M(!1),
+                              onFocus: () => T(!0),
+                              onBlur: () => T(!1),
                               placeholder: "Add a comment...",
                               style: {
                                 width: "100%",
@@ -1647,7 +1521,7 @@ function Ge({
                                 fontSize: "var(--text-md, 13px)",
                                 color: "var(--text-base, rgba(30,33,37,0.78))",
                                 background: "white",
-                                border: `1px solid ${P ? "rgba(94, 136, 176, 0.35)" : "rgba(52, 58, 64, 0.16)"}`,
+                                border: `1px solid ${O ? "rgba(94, 136, 176, 0.35)" : "rgba(52, 58, 64, 0.16)"}`,
                                 borderRadius: "var(--radius-md, 8px)",
                                 resize: "vertical",
                                 outline: "none",
@@ -1657,7 +1531,7 @@ function Ge({
                               }
                             }
                           ),
-                          /* @__PURE__ */ a(
+                          /* @__PURE__ */ l(
                             "div",
                             {
                               style: {
@@ -1666,7 +1540,7 @@ function Ge({
                                 justifyContent: "space-between"
                               },
                               children: [
-                                /* @__PURE__ */ a("div", { style: { display: "flex", gap: "4px" }, children: [
+                                /* @__PURE__ */ l("div", { style: { display: "flex", gap: "4px" }, children: [
                                   /* @__PURE__ */ e(
                                     "button",
                                     {
@@ -1689,7 +1563,7 @@ function Ge({
                                         n.currentTarget.style.background = "transparent", n.currentTarget.style.color = "rgba(30, 33, 37, 0.52)";
                                       },
                                       title: "Mention user",
-                                      children: /* @__PURE__ */ e(Re, { size: 16 })
+                                      children: /* @__PURE__ */ e(De, { size: 16 })
                                     }
                                   ),
                                   /* @__PURE__ */ e(
@@ -1739,7 +1613,7 @@ function Ge({
                                         n.currentTarget.style.background = "transparent", n.currentTarget.style.color = "rgba(30, 33, 37, 0.52)";
                                       },
                                       title: "Attach file",
-                                      children: /* @__PURE__ */ e(Be, { size: 16 })
+                                      children: /* @__PURE__ */ e(Re, { size: 16 })
                                     }
                                   )
                                 ] }),
@@ -1748,28 +1622,28 @@ function Ge({
                                   {
                                     type: "button",
                                     onClick: F,
-                                    disabled: !c.trim() || E,
+                                    disabled: !c.trim() || I,
                                     style: {
                                       padding: "6px 12px",
-                                      background: c.trim() && !E ? "rgba(94, 136, 176, 0.85)" : "var(--border-subtle, rgba(52,58,64,0.08))",
+                                      background: c.trim() && !I ? "rgba(94, 136, 176, 0.85)" : "var(--border-subtle, rgba(52,58,64,0.08))",
                                       border: "none",
                                       borderRadius: "6px",
-                                      color: c.trim() && !E ? "white" : "var(--text-faint, rgba(30,33,37,0.36))",
+                                      color: c.trim() && !I ? "white" : "var(--text-faint, rgba(30,33,37,0.36))",
                                       fontSize: "var(--text-sm, 11px)",
                                       fontWeight: 600,
-                                      cursor: c.trim() && !E ? "pointer" : "not-allowed",
+                                      cursor: c.trim() && !I ? "pointer" : "not-allowed",
                                       display: "flex",
                                       alignItems: "center",
                                       gap: "6px",
                                       transition: "all 0.15s ease"
                                     },
                                     onMouseEnter: (n) => {
-                                      c.trim() && !E && (n.currentTarget.style.background = "rgba(94, 136, 176, 1)");
+                                      c.trim() && !I && (n.currentTarget.style.background = "rgba(94, 136, 176, 1)");
                                     },
                                     onMouseLeave: (n) => {
-                                      c.trim() && !E && (n.currentTarget.style.background = "rgba(94, 136, 176, 0.85)");
+                                      c.trim() && !I && (n.currentTarget.style.background = "rgba(94, 136, 176, 0.85)");
                                     },
-                                    children: E ? /* @__PURE__ */ a(oe, { children: [
+                                    children: I ? /* @__PURE__ */ l(ie, { children: [
                                       /* @__PURE__ */ e("style", { children: `
                         @keyframes messageSpin {
                           from { transform: rotate(0deg); }
@@ -1790,8 +1664,8 @@ function Ge({
                                         }
                                       ),
                                       "Sending..."
-                                    ] }) : /* @__PURE__ */ a(oe, { children: [
-                                      /* @__PURE__ */ e(me, { size: 14 }),
+                                    ] }) : /* @__PURE__ */ l(ie, { children: [
+                                      /* @__PURE__ */ e(he, { size: 14 }),
                                       "Send"
                                     ] })
                                   }
@@ -1805,7 +1679,7 @@ function Ge({
                   ]
                 }
               ),
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ l(
                 "div",
                 {
                   style: {
@@ -1860,9 +1734,8 @@ function Ge({
   );
 }
 export {
-  qe as C,
-  Ge as M,
-  Ae as T,
-  Ze as a
+  Ye as C,
+  Ue as M,
+  Ke as a
 };
 //# sourceMappingURL=MessageThread.es.js.map