chordia-ui 3.9.2 → 3.9.4

package/dist/MessageThread.es.js

@@ -0,0 +1,1868 @@
+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,
+  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"
+}) {
+  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,
+      120
+    )}px`);
+  }, [h]), O(() => {
+    if (S) {
+      const l = [...M];
+      y && l.push(y), S(l);
+    }
+  }, [M, y, S]), O(() => {
+    let l;
+    return K && _ && (l = setInterval(() => {
+      if (D(Date.now() - _), j.current) {
+        const s = (Date.now() - j.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);
+      if (s === "[DONE]")
+        return { type: "done" };
+      try {
+        return { type: "data", data: JSON.parse(s) };
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }, de = (l) => {
+    var T, x;
+    if (!((x = (T = l.choices) == null ? void 0 : T[0]) != null && x.delta))
+      return;
+    j.current = Date.now(), Y(!1);
+    const s = l.choices[0].delta;
+    if (s.tool_calls || s.tool_results) {
+      V("tool");
+      return;
+    }
+    s.content !== void 0 && (V("responding"), H((w) => {
+      const U = w || {
+        id: Date.now().toString(),
+        role: "assistant",
+        content: "",
+        timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(void 0, {
+          hour: "2-digit",
+          minute: "2-digit"
+        }),
+        isStreaming: !0
+      }, Z = {
+        ...U,
+        content: (U.content || "") + (s.content || "")
+      };
+      return Q.current = Z, Z;
+    }));
+  }, ee = async (l) => {
+    const s = l.getReader(), T = new TextDecoder();
+    let x = "";
+    try {
+      for (; ; ) {
+        const { done: w, value: U } = await s.read();
+        if (w)
+          break;
+        x += T.decode(U, { stream: !0 });
+        const Z = x.split(`
+`);
+        x = Z.pop() || "";
+        for (const ce of Z)
+          if (ce.trim()) {
+            const ie = ae(ce);
+            if (ie) {
+              if (ie.type === "done")
+                return;
+              ie.type === "data" && de(ie.data);
+            }
+          }
+      }
+    } finally {
+      s.releaseLock();
+    }
+  }, le = async () => {
+    if (!h.trim() || m)
+      return;
+    const l = h.trim(), s = {
+      id: Date.now().toString(),
+      role: "user",
+      content: l,
+      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();
+    try {
+      let x;
+      if (k)
+        x = await k(l, T);
+      else if (p)
+        x = await p(l, T);
+      else {
+        setTimeout(() => {
+          const w = {
+            id: (Date.now() + 1).toString(),
+            role: "assistant",
+            content: "This is a demonstration response. In a real implementation, this would connect to your LLM backend.",
+            timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(void 0, {
+              hour: "2-digit",
+              minute: "2-digit"
+            })
+          };
+          A((U) => [...U, w]), X();
+        }, 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;
+        w instanceof ReadableStream ? await ee(w) : w instanceof Response && w.body && await ee(w.body);
+      }
+      Q.current && A((w) => [...w, {
+        ...Q.current,
+        isStreaming: !1
+      }]);
+    } catch (x) {
+      x.name !== "AbortError" && (He.error("Failed to send message"), console.error("Stream error:", x));
+    } finally {
+      X();
+    }
+  }, B = (l) => {
+    l.key === "Enter" && !l.shiftKey && (l.preventDefault(), le());
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        border: "1px solid var(--border, rgba(52,58,64,0.12))",
+        borderRadius: "var(--radius-lg, 12px)",
+        background: "var(--paper-elevated, rgba(255,255,255,0.82))",
+        overflow: "hidden"
+      },
+      children: [
+        P ? /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              padding: "16px 20px",
+              borderBottom: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+              background: "var(--paper-elevated, rgba(255,255,255,0.82))"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "var(--text-lg, 16px)",
+                    fontWeight: 720,
+                    letterSpacing: "-0.01em",
+                    color: "var(--text-strong, rgba(30,33,37,0.92))"
+                  },
+                  children: P
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "var(--text-sm, 11px)",
+                    color: "var(--text-muted, rgba(30,33,37,0.56))",
+                    marginTop: "2px"
+                  },
+                  children: "Ask questions, get insights from analyzed interactions"
+                }
+              )
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              flex: 1,
+              minHeight: 0,
+              overflowY: "auto",
+              padding: "20px",
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: M.length === 0 ? /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "var(--text-faint, rgba(30,33,37,0.36))",
+                  fontSize: "var(--text-md, 13px)",
+                  textAlign: "center",
+                  padding: "40px"
+                },
+                children: "No messages yet. Start a conversation by asking a question below."
+              }
+            ) : /* @__PURE__ */ a(oe, { children: [
+              M.map((l) => /* @__PURE__ */ e(
+                he,
+                {
+                  role: l.role,
+                  content: l.content,
+                  html: l.html,
+                  timestamp: l.timestamp,
+                  toolBadges: l.toolBadges,
+                  isStreaming: l.isStreaming,
+                  onCodeBlockClick: c
+                },
+                l.id
+              )),
+              y && /* @__PURE__ */ e(
+                he,
+                {
+                  role: y.role,
+                  content: y.content,
+                  timestamp: y.timestamp,
+                  isStreaming: !0,
+                  onCodeBlockClick: c
+                },
+                y.id
+              ),
+              K && (!y || $) && /* @__PURE__ */ e("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ e(
+                Ae,
+                {
+                  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__ */ a(
+          "div",
+          {
+            style: {
+              borderTop: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+              padding: "16px 20px",
+              background: "var(--paper-elevated, rgba(255,255,255,0.82))"
+            },
+            children: [
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "12px",
+                    alignItems: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "textarea",
+                      {
+                        ref: R,
+                        value: h,
+                        onChange: (l) => ne(l.target.value),
+                        onKeyDown: B,
+                        placeholder: I,
+                        rows: 1,
+                        disabled: m,
+                        style: {
+                          flex: 1,
+                          padding: "10px 14px",
+                          fontSize: "var(--text-base, 14px)",
+                          lineHeight: 1.5,
+                          color: "var(--text-strong, rgba(30,33,37,0.92))",
+                          background: "rgba(255, 255, 255, 0.95)",
+                          border: "1px solid rgba(52, 58, 64, 0.18)",
+                          borderRadius: "var(--radius-md, 8px)",
+                          resize: "none",
+                          outline: "none",
+                          transition: "border-color 0.15s ease",
+                          fontFamily: "inherit",
+                          minHeight: "42px",
+                          maxHeight: "120px",
+                          opacity: m ? 0.6 : 1,
+                          cursor: m ? "not-allowed" : "text"
+                        },
+                        onFocus: (l) => {
+                          m || (l.target.style.borderColor = "rgba(94, 136, 176, 0.35)");
+                        },
+                        onBlur: (l) => {
+                          l.target.style.borderColor = "rgba(52, 58, 64, 0.18)";
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: le,
+                        disabled: !h.trim() || m,
+                        style: {
+                          padding: "10px 16px",
+                          background: h.trim() && !m ? "var(--Base-Strong, #0B0B0B)" : "#ECEEF2",
+                          color: h.trim() && !m ? "white" : "var(--text-base)",
+                          border: "none",
+                          borderRadius: "var(--radius-md, 8px)",
+                          cursor: h.trim() && !m ? "pointer" : "not-allowed",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px",
+                          fontSize: "var(--text-md, 13px)",
+                          fontWeight: 650,
+                          transition: "all 0.15s ease",
+                          height: "42px"
+                        },
+                        children: m ? /* @__PURE__ */ a(oe, { children: [
+                          /* @__PURE__ */ e("style", { children: `
+                    @keyframes buttonSpin {
+                      from { transform: rotate(0deg); }
+                      to { transform: rotate(360deg); }
+                    }
+                  ` }),
+                          /* @__PURE__ */ e(
+                            "div",
+                            {
+                              style: {
+                                width: "14px",
+                                height: "14px",
+                                border: "2px solid rgba(255, 255, 255, 0.3)",
+                                borderTopColor: "white",
+                                borderRadius: "50%",
+                                animation: "buttonSpin 0.6s linear infinite"
+                              }
+                            }
+                          ),
+                          "Sending..."
+                        ] }) : /* @__PURE__ */ a(oe, { children: [
+                          /* @__PURE__ */ e(me, { size: 16 }),
+                          "Send"
+                        ] })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "var(--text-sm, 11px)",
+                    color: "var(--text-faint, rgba(30,33,37,0.36))",
+                    marginTop: "8px"
+                  },
+                  children: "Press Enter to send, Shift+Enter for new line"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const i = {
+  title: "#2e3236",
+  // grey/strong
+  muted: "#808183",
+  // grey/muted
+  faint: "#989898",
+  // neutral/400
+  hoverBg: "#f3f7f7",
+  // grey/hover
+  selectedBg: "#FAF5E9",
+  // selected thread background
+  border: "#d9d9d9",
+  // grey/absent
+  borderSubtle: "#e6e6e6",
+  pillDarkBg: "#272727",
+  // neutral/850
+  pillDarkText: "#f2f2f0",
+  // neutral/50
+  searchTrack: "#d8d8d8"
+  // neutral/150
+};
+function je(d) {
+  const p = d ? new Date(d) : null;
+  if (!p || Number.isNaN(p.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";
+}
+const Oe = ["Today", "Yesterday", "Older"];
+function _e(d) {
+  const p = d ? new Date(d) : null;
+  if (!p || Number.isNaN(p.getTime()))
+    return "";
+  const k = Date.now() - p.getTime(), S = Math.floor(k / 6e4);
+  if (S < 1)
+    return "just now";
+  if (S < 60)
+    return `${S}m ago`;
+  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" });
+}
+function Ze({
+  threads: d = [],
+  activeThreadId: p,
+  onSelectThread: k,
+  onNewChat: S,
+  onCollapse: c,
+  onRenameThread: I,
+  onDeleteThread: P,
+  onPinThread: M,
+  loading: A = !1,
+  pageSize: h = 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,
+  // 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(() => {
+    if (!re)
+      return;
+    const o = () => 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);
+    };
+  }, [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)
+        return -1;
+      if (!f.pinned && z.pinned)
+        return 1;
+      const pe = new Date(f.updated_at || f.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));
+    let C;
+    if (g)
+      C = L;
+    else {
+      const z = (Math.min(n, G) - 1) * h;
+      C = L.slice(z, z + h);
+    }
+    const W = {};
+    for (const f of C) {
+      const z = je(f.updated_at || f.created_at);
+      (W[z] || (W[z] = [])).push(f);
+    }
+    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);
+    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);
+  }, se = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "24px",
+    height: "24px",
+    padding: 0,
+    background: "transparent",
+    border: "none",
+    borderRadius: "6px",
+    cursor: "pointer",
+    color: i.muted,
+    transition: "all 0.12s ease",
+    flexShrink: 0
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: "#FFFFFF",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ a("div", { style: { padding: "16px 16px 0 16px", flexShrink: 0 }, children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                height: "32px"
+              },
+              children: [
+                /* @__PURE__ */ e("div", { style: { fontSize: "14px", fontWeight: 400, color: i.title }, children: "Threads" }),
+                c && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    title: "Collapse",
+                    onClick: c,
+                    style: {
+                      ...se,
+                      width: "20px",
+                      height: "20px",
+                      color: i.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 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                height: "32px",
+                background: i.searchTrack,
+                borderRadius: "11px",
+                padding: "1px",
+                marginTop: "12px"
+              },
+              children: /* @__PURE__ */ a(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flex: 1,
+                    alignItems: "center",
+                    gap: "8px",
+                    height: "30px",
+                    background: "#FFFFFF",
+                    borderRadius: "10px",
+                    padding: "4px 8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(Me, { size: 18, style: { color: i.faint, flexShrink: 0 } }),
+                    /* @__PURE__ */ e(
+                      "input",
+                      {
+                        type: "text",
+                        value: y,
+                        onChange: (o) => H(o.target.value),
+                        placeholder: "Search",
+                        style: {
+                          flex: 1,
+                          minWidth: 0,
+                          border: "none",
+                          outline: "none",
+                          background: "transparent",
+                          fontSize: "14px",
+                          fontWeight: 500,
+                          color: i.title
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: "16px", marginTop: "12px" }, children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => _("all"),
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: "28px",
+                  padding: "0 12px",
+                  borderRadius: "8px",
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  fontWeight: 400,
+                  lineHeight: "24px",
+                  transition: "all 0.12s ease",
+                  background: F === "all" ? i.pillDarkBg : i.hoverBg,
+                  color: F === "all" ? i.pillDarkText : i.title
+                },
+                children: "All"
+              }
+            ),
+            /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                onClick: () => _("pinned"),
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "8px",
+                  height: "28px",
+                  padding: "0 16px",
+                  borderRadius: "10px",
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  fontWeight: 400,
+                  lineHeight: "24px",
+                  transition: "all 0.12s ease",
+                  background: F === "pinned" ? i.pillDarkBg : i.hoverBg,
+                  color: F === "pinned" ? i.pillDarkText : i.title
+                },
+                children: [
+                  /* @__PURE__ */ e(ue, { size: 16, style: { flexShrink: 0 } }),
+                  "Pinned"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__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: {
+                fontSize: "13px",
+                fontWeight: 500,
+                color: i.title,
+                padding: "8px 0 4px 0"
+              },
+              children: o.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(
+              "div",
+              {
+                onClick: () => {
+                  C || W || k == null || k(r.id);
+                },
+                onMouseEnter: () => b(r.id),
+                onMouseLeave: () => b((t) => t === r.id ? null : t),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  padding: "8px 4px",
+                  marginBottom: "2px",
+                  borderRadius: "8px",
+                  background: ge,
+                  border: Se,
+                  cursor: C || W ? "default" : "pointer",
+                  transition: "background 0.12s ease, border-color 0.12s ease",
+                  boxSizing: "border-box",
+                  position: "relative"
+                },
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: "40px",
+                        height: "40px",
+                        flexShrink: 0,
+                        color: i.muted
+                      },
+                      children: /* @__PURE__ */ e(Te, { size: 20 })
+                    }
+                  ),
+                  C ? /* @__PURE__ */ e(
+                    "input",
+                    {
+                      ref: X,
+                      type: "text",
+                      value: Q,
+                      onChange: (t) => j(t.target.value),
+                      onClick: (t) => t.stopPropagation(),
+                      onKeyDown: (t) => {
+                        t.stopPropagation(), t.key === "Enter" ? U(t) : t.key === "Escape" && Z(t);
+                      },
+                      style: {
+                        flex: 1,
+                        minWidth: 0,
+                        fontSize: "14px",
+                        fontWeight: 600,
+                        color: i.title,
+                        background: "#fff",
+                        border: `1px solid ${i.border}`,
+                        borderRadius: "6px",
+                        padding: "4px 8px",
+                        outline: "none",
+                        boxSizing: "border-box"
+                      }
+                    }
+                  ) : /* @__PURE__ */ a(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        minWidth: 0,
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "4px",
+                        textAlign: "left"
+                      },
+                      children: [
+                        /* @__PURE__ */ e(
+                          "div",
+                          {
+                            title: r.title || r.name || "Untitled thread",
+                            style: {
+                              display: "block",
+                              minWidth: 0,
+                              maxWidth: "100%",
+                              fontSize: "14px",
+                              fontWeight: L ? 550 : 500,
+                              color: i.title,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                              lineHeight: 1.2
+                            },
+                            children: r.title || r.name || "Untitled thread"
+                          }
+                        ),
+                        W ? /* @__PURE__ */ a(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              flexWrap: "wrap",
+                              gap: "8px"
+                            },
+                            children: [
+                              /* @__PURE__ */ e(
+                                "span",
+                                {
+                                  style: {
+                                    fontSize: "12px",
+                                    fontWeight: 500,
+                                    color: i.title
+                                  },
+                                  children: "Confirm: delete this thread?"
+                                }
+                              ),
+                              /* @__PURE__ */ e(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: ie,
+                                  style: {
+                                    padding: "3px 12px",
+                                    fontSize: "12px",
+                                    fontWeight: 600,
+                                    color: i.title,
+                                    background: "#ECEEF2",
+                                    border: `1px solid ${i.borderSubtle}`,
+                                    borderRadius: "6px",
+                                    cursor: "pointer"
+                                  },
+                                  onMouseEnter: (t) => t.currentTarget.style.background = "#E2E5EA",
+                                  onMouseLeave: (t) => t.currentTarget.style.background = "#ECEEF2",
+                                  children: "Yes"
+                                }
+                              ),
+                              /* @__PURE__ */ e(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: ve,
+                                  style: {
+                                    padding: "3px 6px",
+                                    fontSize: "12px",
+                                    fontWeight: 500,
+                                    color: i.muted,
+                                    background: "transparent",
+                                    border: "none",
+                                    cursor: "pointer"
+                                  },
+                                  onMouseEnter: (t) => t.currentTarget.style.color = i.title,
+                                  onMouseLeave: (t) => t.currentTarget.style.color = i.muted,
+                                  children: "No"
+                                }
+                              )
+                            ]
+                          }
+                        ) : /* @__PURE__ */ a(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "12px",
+                              color: i.muted,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                              lineHeight: 1.5
+                            },
+                            children: [
+                              r.message_count != null && /* @__PURE__ */ a(oe, { children: [
+                                r.message_count,
+                                " msg",
+                                r.message_count !== 1 ? "s" : "",
+                                " · "
+                              ] }),
+                              _e(r.updated_at || r.created_at)
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  C && /* @__PURE__ */ a("div", { style: { display: "inline-flex", alignItems: "center", gap: "2px", flexShrink: 0 }, children: [
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        title: "Save",
+                        onClick: U,
+                        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 })
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        title: "Cancel",
+                        onClick: Z,
+                        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 })
+                      }
+                    )
+                  ] }),
+                  !C && !W && !z && r.pinned && /* @__PURE__ */ e(
+                    ue,
+                    {
+                      size: 14,
+                      style: { color: i.title, flexShrink: 0 },
+                      fill: "currentColor"
+                    }
+                  ),
+                  z && /* @__PURE__ */ a("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),
+                        style: {
+                          ...se,
+                          color: r.pinned ? i.title : i.muted
+                        },
+                        onMouseEnter: (t) => {
+                          t.currentTarget.style.background = "rgba(0,0,0,0.06)", t.currentTarget.style.color = i.title;
+                        },
+                        onMouseLeave: (t) => {
+                          t.currentTarget.style.background = "transparent", t.currentTarget.style.color = r.pinned ? i.title : i.muted;
+                        },
+                        children: /* @__PURE__ */ e(ue, { size: 14, fill: r.pinned ? "currentColor" : "none" })
+                      }
+                    ),
+                    f && /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        title: "More",
+                        onClick: (t) => {
+                          t.stopPropagation(), q((we) => we === r.id ? null : r.id);
+                        },
+                        style: {
+                          ...se,
+                          color: J ? i.title : i.muted,
+                          background: J ? "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;
+                        },
+                        onMouseLeave: (t) => {
+                          t.currentTarget.style.background = J ? "rgba(0,0,0,0.06)" : "transparent", t.currentTarget.style.color = J ? i.title : i.muted;
+                        },
+                        children: /* @__PURE__ */ e(Ee, { size: 14 })
+                      }
+                    )
+                  ] }),
+                  J && f && /* @__PURE__ */ a(
+                    "div",
+                    {
+                      onClick: (t) => t.stopPropagation(),
+                      style: {
+                        position: "absolute",
+                        top: "calc(100% - 2px)",
+                        right: "8px",
+                        zIndex: 20,
+                        width: "144px",
+                        background: "#FFFFFF",
+                        border: `1px solid ${i.border}`,
+                        borderRadius: "4px",
+                        boxShadow: "-2px 2px 4px rgba(0,0,0,0.1)",
+                        overflow: "hidden"
+                      },
+                      children: [
+                        ae && /* @__PURE__ */ e(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (t) => w(t, r),
+                            style: {
+                              display: "block",
+                              width: "100%",
+                              textAlign: "left",
+                              padding: "12px",
+                              fontSize: "13px",
+                              color: i.title,
+                              background: "transparent",
+                              border: "none",
+                              cursor: "pointer"
+                            },
+                            onMouseEnter: (t) => t.currentTarget.style.background = i.hoverBg,
+                            onMouseLeave: (t) => t.currentTarget.style.background = "transparent",
+                            children: "Rename"
+                          }
+                        ),
+                        de && /* @__PURE__ */ e(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (t) => ce(t, r),
+                            style: {
+                              display: "block",
+                              width: "100%",
+                              textAlign: "left",
+                              padding: "12px",
+                              fontSize: "13px",
+                              color: i.title,
+                              background: "transparent",
+                              border: "none",
+                              borderTop: ae ? `1px solid ${i.border}` : "none",
+                              cursor: "pointer"
+                            },
+                            onMouseEnter: (t) => t.currentTarget.style.background = i.hoverBg,
+                            onMouseLeave: (t) => t.currentTarget.style.background = "transparent",
+                            children: "Delete"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              },
+              r.id
+            );
+          })
+        ] }, o.label)) }),
+        !A && B > 1 && /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "6px",
+              height: "64px",
+              padding: "0 16px",
+              boxSizing: "border-box",
+              borderTop: `1px solid ${i.border}`
+            },
+            children: [
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  disabled: s <= 1,
+                  onClick: () => T(Math.max(1, s - 1)),
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "4px",
+                    height: "24px",
+                    padding: "4px 8px",
+                    borderRadius: "10px",
+                    background: "#FFFFFF",
+                    border: `1px solid ${i.borderSubtle}`,
+                    fontSize: "12px",
+                    lineHeight: "16px",
+                    color: "#0b0b0b",
+                    cursor: s <= 1 ? "default" : "pointer",
+                    opacity: s <= 1 ? 0.5 : 1
+                  },
+                  children: [
+                    /* @__PURE__ */ e(Fe, { size: 12 }),
+                    "Back"
+                  ]
+                }
+              ),
+              x.map((o) => {
+                const r = o === s;
+                return /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => T(o),
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      height: "24px",
+                      minWidth: "22px",
+                      padding: "4px 8px",
+                      borderRadius: "10px",
+                      fontSize: "12px",
+                      lineHeight: "16px",
+                      cursor: "pointer",
+                      background: r ? "#0b0b0b" : "#FFFFFF",
+                      color: r ? "#FFFFFF" : "#0b0b0b",
+                      border: r ? "1px solid #0b0b0b" : `1px solid ${i.borderSubtle}`,
+                      fontWeight: r ? 600 : 400
+                    },
+                    children: o
+                  },
+                  o
+                );
+              }),
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  disabled: s >= B,
+                  onClick: () => T(Math.min(B, s + 1)),
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "4px",
+                    height: "24px",
+                    padding: "4px 8px",
+                    borderRadius: "10px",
+                    background: "#FFFFFF",
+                    border: `1px solid ${i.borderSubtle}`,
+                    fontSize: "12px",
+                    lineHeight: "16px",
+                    color: "#0b0b0b",
+                    cursor: s >= B ? "default" : "pointer",
+                    opacity: s >= B ? 0.5 : 1
+                  },
+                  children: [
+                    "Next",
+                    /* @__PURE__ */ e(De, { size: 12 })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const Ne = { error: (...d) => console.warn("toast.error:", ...d) }, $e = () => ({ userData: { name: "User", email: "" } });
+function Ge({
+  sessionTitle: d,
+  messages: p,
+  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",
+    color: "#6B7C93"
+  };
+  O(() => {
+    h(p || []);
+  }, [p]), O(() => {
+    y.current && y.current.scrollIntoView({ behavior: "smooth" });
+  }, [A]);
+  const F = async () => {
+    if (!c.trim())
+      return;
+    const n = c.trim();
+    I(""), 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
+      },
+      content: n,
+      timestamp: "Just now",
+      type: "comment",
+      isOptimistic: !0
+    };
+    if (h((D) => [...D, v]), k) {
+      try {
+        await k(n), h(
+          (D) => D.map(
+            (b) => b.id === v.id ? { ...b, isOptimistic: !1 } : b
+          )
+        );
+      } catch {
+        h((b) => b.filter((R) => R.id !== v.id)), Ne.error("Failed to send message");
+      } finally {
+        m(!1);
+      }
+      return;
+    }
+    setTimeout(() => {
+      h(
+        (D) => D.map(
+          (b) => b.id === v.id ? { ...b, isOptimistic: !1 } : b
+        )
+      ), m(!1);
+    }, 500);
+  }, V = (n) => {
+    n.key === "Enter" && !n.shiftKey && (n.preventDefault(), F());
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: "var(--paper-elevated, rgba(255,255,255,0.82))",
+        border: "1px solid var(--border, rgba(52,58,64,0.12))",
+        borderRadius: "var(--radius-lg, 12px)",
+        overflow: "hidden"
+      },
+      children: [
+        d && /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              padding: "14px 16px",
+              borderBottom: "1px solid var(--border, rgba(52,58,64,0.12))",
+              background: "var(--paper-elevated, rgba(255,255,255,0.82))"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "var(--text-md, 13px)",
+                    fontWeight: 680,
+                    color: "var(--text-strong, rgba(30,33,37,0.92))",
+                    marginBottom: "3px"
+                  },
+                  children: "Session Discussion"
+                }
+              ),
+              d && /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    fontSize: "var(--text-sm, 11px)",
+                    color: "var(--text-muted, rgba(30,33,37,0.56))",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
+                  },
+                  children: /* @__PURE__ */ e("span", { children: d })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "16px"
+            },
+            children: [
+              ne ? /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "40px",
+                    color: "var(--text-faint, rgba(30,33,37,0.36))"
+                  },
+                  children: "Loading messages..."
+                }
+              ) : A.length === 0 ? /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "40px",
+                    color: "var(--text-faint, rgba(30,33,37,0.36))"
+                  },
+                  children: "No messages yet. Start the conversation!"
+                }
+              ) : A.map((n) => /* @__PURE__ */ a(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "12px",
+                    opacity: n.type === "system" ? 0.75 : 1
+                  },
+                  children: [
+                    n.type !== "system" && /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: "32px",
+                          height: "32px",
+                          borderRadius: "8px",
+                          background: n.author.color,
+                          color: "white",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: "11px",
+                          fontWeight: 650,
+                          flexShrink: 0,
+                          opacity: 0.9
+                        },
+                        children: n.author.initials
+                      }
+                    ),
+                    n.type === "system" && /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: "32px",
+                          height: "32px",
+                          borderRadius: "8px",
+                          background: "rgba(30, 33, 37, 0.08)",
+                          color: "rgba(30, 33, 37, 0.52)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: "11px",
+                          fontWeight: 650,
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ e(fe, { size: 14 })
+                      }
+                    ),
+                    /* @__PURE__ */ a("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ a(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "baseline",
+                            gap: "8px",
+                            marginBottom: "4px"
+                          },
+                          children: [
+                            /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: "var(--text-sm, 11px)",
+                                  fontWeight: 650,
+                                  color: "var(--text-base, rgba(30,33,37,0.78))"
+                                },
+                                children: n.author.name
+                              }
+                            ),
+                            /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: "var(--text-sm, 11px)",
+                                  color: "var(--text-faint, rgba(30,33,37,0.36))",
+                                  fontFamily: "var(--font-mono, monospace)"
+                                },
+                                children: n.timestamp
+                              }
+                            ),
+                            n.author.role && /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: "var(--text-xs, 10px)",
+                                  color: "var(--text-muted, rgba(30,33,37,0.56))",
+                                  background: "rgba(30, 33, 37, 0.06)",
+                                  padding: "2px 6px",
+                                  borderRadius: "4px",
+                                  textTransform: "uppercase",
+                                  letterSpacing: "0.04em",
+                                  fontWeight: 600
+                                },
+                                children: n.author.role
+                              }
+                            ),
+                            n.isEdited && /* @__PURE__ */ e(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: "var(--text-xs, 10px)",
+                                  color: "var(--text-faint, rgba(30,33,37,0.36))",
+                                  fontStyle: "italic"
+                                },
+                                children: "(edited)"
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "var(--text-md, 13px)",
+                            color: "var(--text-base, rgba(30,33,37,0.78))",
+                            lineHeight: 1.5,
+                            marginBottom: n.references ? "8px" : 0
+                          },
+                          children: n.content
+                        }
+                      ),
+                      n.references && n.references.length > 0 && /* @__PURE__ */ e(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            flexWrap: "wrap",
+                            gap: "6px",
+                            marginTop: "8px"
+                          },
+                          children: n.references.map((v, D) => /* @__PURE__ */ a(
+                            "button",
+                            {
+                              type: "button",
+                              style: {
+                                fontSize: "11px",
+                                padding: "4px 8px",
+                                borderRadius: "6px",
+                                border: "1px solid rgba(52, 58, 64, 0.16)",
+                                background: "rgba(255, 255, 255, 0.7)",
+                                color: v.type === "condition" ? "rgba(94, 136, 176, 0.85)" : v.type === "observation" ? "rgba(107, 123, 147, 0.85)" : v.type === "timestamp" ? "rgba(184, 156, 106, 0.85)" : "rgba(30, 33, 37, 0.65)",
+                                cursor: "pointer",
+                                display: "inline-flex",
+                                alignItems: "center",
+                                gap: "4px",
+                                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)";
+                              },
+                              onMouseLeave: (b) => {
+                                b.currentTarget.style.background = "rgba(255, 255, 255, 0.7)", b.currentTarget.style.borderColor = "rgba(52, 58, 64, 0.16)";
+                              },
+                              children: [
+                                v.type === "timestamp" && /* @__PURE__ */ e(fe, { size: 12 }),
+                                (v.type === "condition" || v.type === "observation") && /* @__PURE__ */ e(be, { size: 12 }),
+                                v.label
+                              ]
+                            },
+                            D
+                          ))
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                n.id
+              )),
+              /* @__PURE__ */ e("div", { ref: y })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              borderTop: "1px solid var(--border, rgba(52,58,64,0.12))",
+              background: "var(--paper-elevated, rgba(255,255,255,0.82))"
+            },
+            children: [
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "8px",
+                    alignItems: "flex-end"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          width: "32px",
+                          height: "32px",
+                          borderRadius: "var(--radius-md, 8px)",
+                          background: H.color,
+                          color: "white",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: "var(--text-sm, 11px)",
+                          fontWeight: 650,
+                          flexShrink: 0,
+                          opacity: 0.9
+                        },
+                        children: H.initials
+                      }
+                    ),
+                    /* @__PURE__ */ a(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: "8px"
+                        },
+                        children: [
+                          /* @__PURE__ */ e(
+                            "textarea",
+                            {
+                              value: c,
+                              onChange: (n) => I(n.target.value),
+                              onKeyDown: V,
+                              onFocus: () => M(!0),
+                              onBlur: () => M(!1),
+                              placeholder: "Add a comment...",
+                              style: {
+                                width: "100%",
+                                minHeight: "38px",
+                                maxHeight: "120px",
+                                padding: "8px 12px",
+                                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)"}`,
+                                borderRadius: "var(--radius-md, 8px)",
+                                resize: "vertical",
+                                outline: "none",
+                                transition: "border-color 0.15s ease",
+                                fontFamily: "inherit",
+                                lineHeight: 1.5
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ a(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between"
+                              },
+                              children: [
+                                /* @__PURE__ */ a("div", { style: { display: "flex", gap: "4px" }, children: [
+                                  /* @__PURE__ */ e(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      style: {
+                                        padding: "6px",
+                                        background: "transparent",
+                                        border: "none",
+                                        borderRadius: "6px",
+                                        color: "rgba(30, 33, 37, 0.52)",
+                                        cursor: "pointer",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        transition: "all 0.15s ease"
+                                      },
+                                      onMouseEnter: (n) => {
+                                        n.currentTarget.style.background = "rgba(30, 33, 37, 0.06)", n.currentTarget.style.color = "rgba(30, 33, 37, 0.75)";
+                                      },
+                                      onMouseLeave: (n) => {
+                                        n.currentTarget.style.background = "transparent", n.currentTarget.style.color = "rgba(30, 33, 37, 0.52)";
+                                      },
+                                      title: "Mention user",
+                                      children: /* @__PURE__ */ e(Re, { size: 16 })
+                                    }
+                                  ),
+                                  /* @__PURE__ */ e(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      style: {
+                                        padding: "6px",
+                                        background: "transparent",
+                                        border: "none",
+                                        borderRadius: "6px",
+                                        color: "rgba(30, 33, 37, 0.52)",
+                                        cursor: "pointer",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        transition: "all 0.15s ease"
+                                      },
+                                      onMouseEnter: (n) => {
+                                        n.currentTarget.style.background = "rgba(30, 33, 37, 0.06)", n.currentTarget.style.color = "rgba(30, 33, 37, 0.75)";
+                                      },
+                                      onMouseLeave: (n) => {
+                                        n.currentTarget.style.background = "transparent", n.currentTarget.style.color = "rgba(30, 33, 37, 0.52)";
+                                      },
+                                      title: "Reference condition",
+                                      children: /* @__PURE__ */ e(be, { size: 16 })
+                                    }
+                                  ),
+                                  /* @__PURE__ */ e(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      style: {
+                                        padding: "6px",
+                                        background: "transparent",
+                                        border: "none",
+                                        borderRadius: "6px",
+                                        color: "rgba(30, 33, 37, 0.52)",
+                                        cursor: "pointer",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        transition: "all 0.15s ease"
+                                      },
+                                      onMouseEnter: (n) => {
+                                        n.currentTarget.style.background = "rgba(30, 33, 37, 0.06)", n.currentTarget.style.color = "rgba(30, 33, 37, 0.75)";
+                                      },
+                                      onMouseLeave: (n) => {
+                                        n.currentTarget.style.background = "transparent", n.currentTarget.style.color = "rgba(30, 33, 37, 0.52)";
+                                      },
+                                      title: "Attach file",
+                                      children: /* @__PURE__ */ e(Be, { size: 16 })
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ e(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: F,
+                                    disabled: !c.trim() || E,
+                                    style: {
+                                      padding: "6px 12px",
+                                      background: c.trim() && !E ? "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))",
+                                      fontSize: "var(--text-sm, 11px)",
+                                      fontWeight: 600,
+                                      cursor: c.trim() && !E ? "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)");
+                                    },
+                                    onMouseLeave: (n) => {
+                                      c.trim() && !E && (n.currentTarget.style.background = "rgba(94, 136, 176, 0.85)");
+                                    },
+                                    children: E ? /* @__PURE__ */ a(oe, { children: [
+                                      /* @__PURE__ */ e("style", { children: `
+                        @keyframes messageSpin {
+                          from { transform: rotate(0deg); }
+                          to { transform: rotate(360deg); }
+                        }
+                      ` }),
+                                      /* @__PURE__ */ e(
+                                        "div",
+                                        {
+                                          style: {
+                                            width: "14px",
+                                            height: "14px",
+                                            border: "2px solid rgba(255, 255, 255, 0.3)",
+                                            borderTopColor: "white",
+                                            borderRadius: "50%",
+                                            animation: "messageSpin 0.6s linear infinite"
+                                          }
+                                        }
+                                      ),
+                                      "Sending..."
+                                    ] }) : /* @__PURE__ */ a(oe, { children: [
+                                      /* @__PURE__ */ e(me, { size: 14 }),
+                                      "Send"
+                                    ] })
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  style: {
+                    marginTop: "8px",
+                    fontSize: "var(--text-sm, 11px)",
+                    color: "var(--text-faint, rgba(30,33,37,0.36))",
+                    lineHeight: 1.4
+                  },
+                  children: [
+                    /* @__PURE__ */ e("strong", { children: "Tip:" }),
+                    " Use",
+                    " ",
+                    /* @__PURE__ */ e(
+                      "code",
+                      {
+                        style: {
+                          background: "rgba(30, 33, 37, 0.06)",
+                          padding: "2px 4px",
+                          borderRadius: "3px",
+                          fontFamily: "var(--font-mono, monospace)",
+                          fontSize: "var(--text-xs, 10px)"
+                        },
+                        children: "@"
+                      }
+                    ),
+                    " ",
+                    "to mention teammates,",
+                    " ",
+                    /* @__PURE__ */ e(
+                      "code",
+                      {
+                        style: {
+                          background: "rgba(30, 33, 37, 0.06)",
+                          padding: "2px 4px",
+                          borderRadius: "3px",
+                          fontFamily: "var(--font-mono, monospace)",
+                          fontSize: "var(--text-xs, 10px)"
+                        },
+                        children: "#"
+                      }
+                    ),
+                    " ",
+                    "to reference conditions"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  qe as C,
+  Ge as M,
+  Ae as T,
+  Ze as a
+};
+//# sourceMappingURL=MessageThread.es.js.map