@nameless26/widget 0.1.0 → 0.1.2

package/dist/index.es.js

@@ -1,34 +1,266 @@
-import { jsxs as p, Fragment as B, jsx as e } from "react/jsx-runtime";
-import { useState as k, useRef as D, useCallback as I, useEffect as H, forwardRef as E } from "react";
-function O(t) {
-  return `nexus_widget_session_${t}`;
+import { jsxs as f, Fragment as P, jsx as e } from "react/jsx-runtime";
+import { useState as m, useRef as S, useEffect as j, useCallback as E } from "react";
+function _({ color: t }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      style: { background: "var(--nx-surface)" },
+      className: `flex items-end gap-1 px-3 py-2.5 rounded-2xl rounded-bl-sm w-fit\r
+                    bg-[rgba(255,255,255,0.06)]`,
+      children: [0, 1, 2].map((s) => /* @__PURE__ */ e(
+        "span",
+        {
+          style: {
+            width: 6,
+            height: 6,
+            borderRadius: "50%",
+            background: t,
+            opacity: 0.6,
+            animation: `nexusBounce 1.2s ease-in-out ${s * 0.2}s infinite`
+          }
+        },
+        s
+      ))
+    }
+  );
+}
+function U({
+  msg: t,
+  primaryColor: s
+}) {
+  const n = t.role === "user";
+  return t.content ? /* @__PURE__ */ e("div", { className: `flex ${n ? "justify-end" : "justify-start"}`, children: /* @__PURE__ */ e(
+    "div",
+    {
+      style: n ? { background: s } : { background: "var(--nx-surface)", color: "var(--nx-text)" },
+      className: `max-w-[82%] px-3 py-2.5 rounded-2xl text-sm leading-relaxed
+                    ${n ? "text-white rounded-br-sm" : "bg-[rgba(255,255,255,0.06)] text-[rgba(255,255,255,0.8)] rounded-bl-sm"}`,
+      children: t.content
+    }
+  ) }) : /* @__PURE__ */ e(P, {});
+}
+function J({
+  agentName: t,
+  messages: s,
+  isLoading: n,
+  error: b,
+  primaryColor: d,
+  welcomeMessage: i,
+  onSend: x,
+  onClose: l,
+  isFullView: r,
+  onToggleFullView: p
+}) {
+  const [u, c] = m(""), B = S(null), g = S(null);
+  j(() => {
+    B.current?.scrollIntoView({ behavior: "smooth" });
+  }, [s, n]), j(() => {
+    g.current?.focus();
+  }, []);
+  const N = () => {
+    !u.trim() || n || (x(u), c(""));
+  }, T = (o) => {
+    o.key === "Enter" && !o.shiftKey && (o.preventDefault(), N());
+  };
+  return /* @__PURE__ */ f(P, { children: [
+    /* @__PURE__ */ e("style", { children: `
+        @keyframes nexusBounce {
+          0%, 80%, 100% { transform: translateY(0); }
+          40%            { transform: translateY(-5px); }
+        }
+        button {
+          cursor: pointer;
+        }
+      ` }),
+    /* @__PURE__ */ f(
+      "div",
+      {
+        style: {
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          position: "relative",
+          background: "var(--nx-bg)",
+          borderColor: r ? "none" : "var(--nx-border)"
+        },
+        className: `flex flex-col overflow-hidden shadow-2xl h-full ${r ? "" : "rounded-2xl border"}`,
+        role: "dialog",
+        "aria-label": `${t} chat`,
+        children: [
+          !r && /* @__PURE__ */ f(
+            "div",
+            {
+              style: { background: "var(--nx-bg)", borderBottom: "1px solid var(--nx-border)" },
+              className: "flex items-center justify-between px-4 py-3 shrink-0",
+              children: [
+                /* @__PURE__ */ f("div", { className: "flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-[var(--nx-text)]/40" }),
+                  /* @__PURE__ */ e("span", { style: { color: d }, className: "text-sm font-medium", children: t })
+                ] }),
+                /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: p,
+                      "aria-label": "Expand to full view",
+                      className: "nexus-ctrl-btn p-2",
+                      children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }) })
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: l,
+                      "aria-label": "Close chat",
+                      className: "nexus-ctrl-btn p-2",
+                      children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          r && /* @__PURE__ */ f("div", { className: "absolute top-4 right-4 flex items-center gap-2", style: { zIndex: 10 }, children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: p,
+                "aria-label": "Exit full view",
+                className: "nexus-ctrl-btn p-2",
+                children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" }) })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: l,
+                "aria-label": "Close chat",
+                className: "nexus-ctrl-btn p-2",
+                children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "flex-1 overflow-y-auto",
+              style: { minHeight: 0, background: "var(--nx-bg)" },
+              children: /* @__PURE__ */ f(
+                "div",
+                {
+                  className: "space-y-3 p-2",
+                  style: r ? { maxWidth: 720, margin: "0 auto" } : void 0,
+                  children: [
+                    s.length === 0 && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: { background: "var(--nx-surface)", color: "var(--nx-text)" },
+                        className: "max-w-[82%] px-3 py-2.5 rounded-2xl rounded-bl-sm text-sm leading-relaxed",
+                        children: i
+                      }
+                    ) }),
+                    s.map((o) => /* @__PURE__ */ e(U, { msg: o, primaryColor: d }, o.id)),
+                    n && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e(_, { color: d }) }),
+                    b && /* @__PURE__ */ e("div", { className: "text-center text-xs text-red-400/70 py-1", children: b }),
+                    /* @__PURE__ */ e("div", { ref: B })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                background: "var(--nx-bg)",
+                borderColor: r ? "none" : "var(--nx-border)"
+              },
+              className: `${!r && "border-t"} shrink-0 px-2.5`,
+              children: /* @__PURE__ */ f(
+                "div",
+                {
+                  className: "relative w-full mx-auto flex items-center shadow rounded-xl",
+                  style: { maxWidth: r ? 720 : "none", marginBottom: r ? 20 : 12, marginTop: r ? 0 : 10 },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "textarea",
+                      {
+                        ref: g,
+                        rows: 1,
+                        value: u,
+                        onChange: (o) => {
+                          c(o.target.value), o.target.style.height = "auto", o.target.style.height = `${Math.min(o.target.scrollHeight, 100)}px`;
+                        },
+                        onKeyDown: T,
+                        placeholder: "Type a message…",
+                        disabled: n,
+                        style: {
+                          resize: "none",
+                          minHeight: 44,
+                          maxHeight: 100,
+                          overflowY: "auto",
+                          paddingRight: 52
+                          // room for send button
+                        },
+                        className: `nexus-input w-full border rounded-xl px-3 py-2.5 text-sm\r
+                 transition-colors disabled:opacity-40`
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: N,
+                        disabled: !u.trim() || n,
+                        "aria-label": "Send message",
+                        style: {
+                          position: "absolute",
+                          right: 6,
+                          bottom: 6,
+                          background: u.trim() && !n ? d : "var(--nx-surface)"
+                        },
+                        className: `w-8 h-8 rounded-lg flex items-center justify-center\r
+                 transition-colors disabled:opacity-40\r
+                 disabled:cursor-not-allowed`,
+                        children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: u.trim() && !n ? "white" : "var(--nx-text-muted)", viewBox: "0 0 16 16", children: /* @__PURE__ */ e("path", { fillRule: "evenodd", d: "M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5" }) })
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 function W(t) {
-  const s = sessionStorage.getItem(O(t));
+  return `nexus_widget_session_${t}`;
+}
+function K(t) {
+  const s = sessionStorage.getItem(W(t));
   if (s) return s;
-  const r = crypto.randomUUID();
-  return sessionStorage.setItem(O(t), r), r;
+  const n = crypto.randomUUID();
+  return sessionStorage.setItem(W(t), n), n;
 }
-async function* A(t, s) {
-  const r = new TextDecoder();
-  let d = "";
+async function* Y(t, s) {
+  const n = new TextDecoder();
+  let b = "";
   try {
     for (; ; ) {
       if (s.aborted) return;
-      const { done: o, value: f } = await t.read();
-      if (o) return;
-      d += r.decode(f, { stream: !0 });
-      const l = d.split(`
+      const { done: d, value: i } = await t.read();
+      if (d) return;
+      b += n.decode(i, { stream: !0 });
+      const x = b.split(`
 
 `);
-      d = l.pop() ?? "";
-      for (const y of l)
-        for (const b of y.split(`
+      b = x.pop() ?? "";
+      for (const l of x)
+        for (const r of l.split(`
 `)) {
-          if (!b.startsWith("data: ")) continue;
-          const c = b.slice(6).trim();
+          if (!r.startsWith("data: ")) continue;
+          const p = r.slice(6).trim();
           try {
-            yield JSON.parse(c);
+            yield JSON.parse(p);
           } catch {
           }
         }
@@ -37,383 +269,375 @@ async function* A(t, s) {
     t.releaseLock();
   }
 }
-function J({ agentId: t, baseUrl: s = "http://localhost:8000/api", endUserId: r }) {
-  const [d, o] = k([]), [f, l] = k(!1), [y, b] = k(!0), [c, u] = k(null), [N, x] = k(null), [g, S] = k(null), n = D(W(t)), w = D(null), j = I(async () => {
-    var T;
-    (T = w.current) == null || T.abort(), b(!0), u(null);
-    const a = new AbortController();
-    w.current = a;
+function q({ agentId: t, baseUrl: s, agentCoreUrl: n, endUserId: b }) {
+  const [d, i] = m([]), [x, l] = m(!1), [r, p] = m(!0), [u, c] = m(null), [B, g] = m(null), [N, T] = m(null), o = S(K(t)), y = S(null), M = E(async () => {
+    y.current?.abort(), p(!0), c(null);
+    const v = new AbortController();
+    y.current = v;
     try {
-      const h = await fetch(`${s}/widget/session`, {
+      const a = await fetch(`${s}/widget/session`, {
         method: "POST",
-        signal: a.signal,
+        signal: v.signal,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           agentId: t,
-          sessionId: n.current
+          sessionId: o.current
         })
       });
-      if (!h.ok)
-        throw new Error(`HTTP ${h.status}`);
-      const v = await h.json();
-      S(v.token);
-      const C = await fetch(`${s}/chat/history`, {
+      if (!a.ok)
+        throw new Error(`HTTP ${a.status}`);
+      const C = await a.json();
+      T(C.token);
+      const w = await fetch(`${s}/chat/history`, {
         method: "POST",
-        signal: a.signal,
+        signal: v.signal,
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Bearer ${v.token}`
+          Authorization: `Bearer ${C.token}`
         },
         body: JSON.stringify({
           agentId: t,
-          sessionId: n.current
+          sessionId: o.current
         })
       });
-      if (!C.ok)
-        throw new Error(`HTTP ${C.status}`);
-      const i = await C.json();
-      o(i.messages ?? []), x(i.conversationId ?? null);
-    } catch (h) {
-      (h == null ? void 0 : h.name) !== "AbortError" && u("Unable to initialize widget session.");
+      if (w.status == 404) {
+        i([]), g(null);
+        return;
+      }
+      if (!w.ok)
+        throw new Error(`HTTP ${w.status}`);
+      const h = await w.json();
+      i(h.messages ?? []), g(h.conversationId ?? null);
+    } catch (a) {
+      console.log(a), a.status != 404 && a?.name !== "AbortError" && c("Error Loading History");
     } finally {
-      b(!1);
+      p(!1);
     }
   }, [t]);
-  H(() => (j(), () => {
-    var a;
-    (a = w.current) == null || a.abort();
-  }), [j]);
-  const P = I(() => {
-    var a;
-    (a = w.current) == null || a.abort(), l(!1);
-  }, []), _ = I(() => {
-    var a;
-    (a = w.current) == null || a.abort(), o([]), x(null), u(null), l(!1), n.current = crypto.randomUUID(), S(null), j();
-  }, [j]), z = I(
-    async (a) => {
-      var C;
-      if (!a.trim() || f || !g) return;
-      (C = w.current) == null || C.abort();
-      const T = new AbortController();
-      w.current = T, u(null);
-      const h = `u_${Date.now()}`, v = `a_${Date.now()}`;
-      o((i) => [
-        ...i,
-        { id: h, role: "user", content: a.trim() }
+  j(() => (M(), () => {
+    y.current?.abort();
+  }), [M]);
+  const H = E(() => {
+    y.current?.abort(), l(!1);
+  }, []), R = E(() => {
+    y.current?.abort(), i([]), g(null), c(null), l(!1), o.current = crypto.randomUUID(), T(null), M();
+  }, [M]), $ = E(
+    async (v) => {
+      if (!v.trim() || x || !N) return;
+      y.current?.abort();
+      const a = new AbortController();
+      y.current = a, c(null);
+      const C = `u_${Date.now()}`, w = `a_${Date.now()}`;
+      i((h) => [
+        ...h,
+        { id: C, role: "user", content: v.trim() }
       ]), l(!0);
       try {
-        const i = await fetch(`${s}/chat`, {
+        const h = await fetch(`${n}/chat`, {
           method: "POST",
-          signal: T.signal,
+          signal: a.signal,
           headers: {
             "Content-Type": "application/json",
-            Authorization: `Bearer ${g}`
+            Authorization: `Bearer ${N}`
           },
           body: JSON.stringify({
             agent_id: t,
-            message: a.trim(),
-            session_id: n.current,
-            end_user_id: r
+            message: v.trim(),
+            session_id: o.current
           })
         });
-        if (!i.ok || !i.body)
-          throw new Error(`HTTP ${i.status}`);
-        o((m) => [
-          ...m,
-          { id: v, role: "assistant", content: "" }
+        if (!h.ok || !h.body)
+          throw new Error(`HTTP ${h.status}`);
+        i((k) => [
+          ...k,
+          { id: w, role: "assistant", content: "" }
         ]);
-        const M = i.body.getReader();
-        for await (const m of A(M, T.signal))
-          switch (m.type) {
+        const D = h.body.getReader();
+        for await (const k of Y(D, a.signal))
+          switch (k.type) {
             case "start":
-              x(m.conversationId);
+              g(k.conversationId);
               break;
             case "token":
-              o(
-                (R) => R.map(
-                  ($) => $.id === v ? { ...$, content: $.content + m.content } : $
+              i(
+                (O) => O.map(
+                  (I) => I.id === w ? { ...I, content: I.content + k.content } : I
                 )
               );
               break;
             case "done":
               break;
             case "error":
-              u(m.message), o(
-                (R) => R.filter(($) => $.id !== v)
+              c(k.message), i(
+                (O) => O.filter((I) => I.id !== w)
               );
               break;
           }
-      } catch (i) {
-        if ((i == null ? void 0 : i.name) === "AbortError") return;
-        u("Something went wrong. Please try again."), o(
-          (M) => M.filter(
-            (m) => m.id !== h && m.id !== v
+      } catch (h) {
+        if (h?.name === "AbortError") return;
+        c("Something went wrong. Please try again."), i(
+          (D) => D.filter(
+            (k) => k.id !== C && k.id !== w
           )
         );
       } finally {
         l(!1);
       }
     },
-    [t, r, f, g]
+    [t, b, x, N]
   );
   return {
     messages: d,
-    isLoading: f,
-    historyLoading: y,
-    error: c,
-    conversationId: N,
-    send: z,
-    reset: _,
-    cancel: P
+    isLoading: x,
+    historyLoading: r,
+    error: u,
+    conversationId: B,
+    send: $,
+    reset: R,
+    cancel: H
   };
 }
-function K({ color: t }) {
-  return /* @__PURE__ */ e("div", { className: `flex items-end gap-1 px-3 py-2.5 rounded-2xl rounded-bl-sm w-fit\r
-                    bg-[rgba(255,255,255,0.06)]`, children: [0, 1, 2].map((s) => /* @__PURE__ */ e(
-    "span",
-    {
-      style: {
-        width: 6,
-        height: 6,
-        borderRadius: "50%",
-        background: t,
-        opacity: 0.6,
-        animation: `nexusBounce 1.2s ease-in-out ${s * 0.2}s infinite`
-      }
-    },
-    s
-  )) });
+const L = {
+  bg: "#0d0d1a",
+  surface: "rgba(255,255,255,0.06)",
+  border: "rgba(255,255,255,0.08)",
+  text: "rgba(255,255,255,0.82)",
+  textMuted: "rgba(255,255,255,0.25)",
+  inputBg: "rgba(255,255,255,0.05)",
+  inputBorder: "rgba(255,255,255,0.08)",
+  inputBorderFocus: "rgba(255,255,255,0.20)",
+  error: "rgba(248,113,113,0.75)"
+}, A = {
+  bg: "#f8f9fb",
+  surface: "rgba(0,0,0,0.055)",
+  border: "rgba(0,0,0,0.09)",
+  text: "rgba(0,0,0,0.82)",
+  textMuted: "rgba(0,0,0,0.38)",
+  inputBg: "rgba(0,0,0,0.04)",
+  inputBorder: "rgba(0,0,0,0.10)",
+  inputBorderFocus: "rgba(0,0,0,0.22)",
+  error: "rgba(220,38,38,0.80)"
+};
+function z(t) {
+  return t === "system" ? typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches ? L : A : t === "dark" ? L : A;
 }
-function L({
-  msg: t,
-  primaryColor: s
-}) {
-  const r = t.role === "user";
-  return /* @__PURE__ */ e("div", { className: `flex ${r ? "justify-end" : "justify-start"}`, children: /* @__PURE__ */ e(
-    "div",
-    {
-      style: r ? { background: s } : void 0,
-      className: `max-w-[82%] px-3 py-2.5 rounded-2xl text-sm leading-relaxed
-                    ${r ? "text-white rounded-br-sm" : "bg-[rgba(255,255,255,0.06)] text-[rgba(255,255,255,0.8)] rounded-bl-sm"}`,
-      children: t.content
-    }
-  ) });
+function G(t) {
+  return {
+    "--nx-bg": t.bg,
+    "--nx-surface": t.surface,
+    "--nx-border": t.border,
+    "--nx-text": t.text,
+    "--nx-text-muted": t.textMuted,
+    "--nx-input-bg": t.inputBg,
+    "--nx-input-border": t.inputBorder,
+    "--nx-input-border-focus": t.inputBorderFocus,
+    "--nx-error": t.error
+  };
 }
-function U({
-  agentName: t,
-  messages: s,
-  isLoading: r,
-  error: d,
-  primaryColor: o,
-  welcomeMessage: f,
-  onSend: l,
-  onReset: y,
-  onClose: b
+function Z({
+  agentId: t,
+  agentName: s,
+  baseUrl: n,
+  agentCoreUrl: b,
+  primaryColor: d = "#6366f1",
+  welcomeMessage: i = "Hi! How can I help you?",
+  position: x = "bottom-right",
+  theme: l = "dark"
 }) {
-  const [c, u] = k(""), N = D(null), x = D(null);
-  H(() => {
-    var n;
-    (n = N.current) == null || n.scrollIntoView({ behavior: "smooth" });
-  }, [s, r]), H(() => {
-    var n;
-    (n = x.current) == null || n.focus();
-  }, []);
-  const g = () => {
-    !c.trim() || r || (l(c), u(""));
-  }, S = (n) => {
-    n.key === "Enter" && !n.shiftKey && (n.preventDefault(), g());
+  const [r, p] = m(!1), [u, c] = m(!1), [B, g] = m(() => z(l)), N = S(null), { messages: T, isLoading: o, error: y, send: M, reset: H, cancel: R } = q({ agentId: t, baseUrl: n, agentCoreUrl: b }), $ = x !== "bottom-left", v = () => {
+    R(), p(!1), c(!1);
   };
-  return /* @__PURE__ */ p(B, { children: [
+  return j(() => {
+    if (g(z(l)), l !== "system") return;
+    const a = window.matchMedia("(prefers-color-scheme: dark)"), C = () => g(z("system"));
+    return a.addEventListener("change", C), () => a.removeEventListener("change", C);
+  }, [l]), /* @__PURE__ */ f(P, { children: [
     /* @__PURE__ */ e("style", { children: `
-        @keyframes nexusBounce {
-          0%, 80%, 100% { transform: translateY(0); }
-          40%            { transform: translateY(-5px); }
-        }
-      ` }),
-    /* @__PURE__ */ p(
+  .nexus-bubble-btn {
+    transition: transform 0.2s ease, box-shadow 0.15s ease, opacity 0.18s ease;
+  }
+  .nexus-bubble-btn:hover {
+    transform: scale(1.07) !important;
+    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35) !important;
+  }
+  .nexus-bubble-btn:active { transform: scale(0.96) !important; }
+  .nexus-input::-webkit-scrollbar {
+    display: none;
+  }
+  .nexus-input {
+    background: var(--nx-input-bg);
+    border-color: var(--nx-input-border);
+    color: var(--nx-text);
+    width: 100%;
+     scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .nexus-input::placeholder { color: var(--nx-text-muted); }
+  .nexus-input:focus { border-color: var(--nx-input-border-focus); outline: none; }
+
+  .nexus-ctrl-btn {
+    color: var(--nx-text-muted);
+    transition: color 0.15s ease, background 0.15s ease;
+    border-radius: 50%;
+  }
+  .nexus-ctrl-btn:hover {
+    color: var(--nx-text);
+    background: var(--nx-surface);
+  }
+` }),
+    /* @__PURE__ */ f(
       "div",
       {
-        style: { fontFamily: "system-ui, -apple-system, sans-serif" },
-        className: `flex flex-col overflow-hidden rounded-2xl shadow-2xl\r
-                   border border-[rgba(255,255,255,0.08)]`,
-        role: "dialog",
-        "aria-label": `${t} chat`,
+        ref: N,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 9999,
+          pointerEvents: "none",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          ...G(B)
+        },
         children: [
-          /* @__PURE__ */ p(
+          /* @__PURE__ */ e(
             "div",
             {
-              style: { background: o },
-              className: "flex items-center justify-between px-4 py-3 shrink-0",
-              children: [
-                /* @__PURE__ */ p("div", { className: "flex items-center gap-2.5", children: [
-                  /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-white/40" }),
-                  /* @__PURE__ */ e("span", { className: "text-white text-sm font-medium", children: t })
-                ] }),
-                /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ e(
-                    "button",
-                    {
-                      onClick: y,
-                      "aria-label": "Start new conversation",
-                      className: `p-1.5 rounded-full text-white/60 hover:text-white\r
-                         hover:bg-white/15 transition-colors`,
-                      children: /* @__PURE__ */ p(
-                        "svg",
-                        {
-                          width: "14",
-                          height: "14",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          children: [
-                            /* @__PURE__ */ e("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-                            /* @__PURE__ */ e("path", { d: "M3 3v5h5" })
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    "button",
-                    {
-                      onClick: b,
-                      "aria-label": "Close chat",
-                      className: `p-1.5 rounded-full text-white/60 hover:text-white\r
-                         hover:bg-white/15 transition-colors`,
-                      children: /* @__PURE__ */ e(
-                        "svg",
-                        {
-                          width: "14",
-                          height: "14",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          children: /* @__PURE__ */ e("path", { d: "M18 6 6 18M6 6l12 12" })
-                        }
-                      )
-                    }
-                  )
-                ] })
-              ]
+              style: u ? {
+                position: "absolute",
+                inset: 0,
+                opacity: 1,
+                pointerEvents: "auto",
+                transition: "all 0.25s ease"
+              } : r ? {
+                position: "absolute",
+                [$ ? "right" : "left"]: 0,
+                top: 0,
+                bottom: 0,
+                width: 380,
+                opacity: 1,
+                pointerEvents: "auto",
+                transition: "all 0.28s cubic-bezier(0.34, 1.45, 0.64, 1)"
+              } : {
+                position: "absolute",
+                [$ ? "right" : "left"]: 20,
+                bottom: 88,
+                width: 420,
+                height: "calc(100vh - 108px)",
+                border: "1px solid var(--nx-border)",
+                opacity: 0,
+                transform: "scale(0.82) translateY(12px)",
+                transformOrigin: `bottom ${$ ? "right" : "left"}`,
+                pointerEvents: "none",
+                transition: "all 0.2s ease-in"
+              },
+              children: r && /* @__PURE__ */ e(
+                J,
+                {
+                  agentName: s ?? "Assistant",
+                  messages: T,
+                  isLoading: o,
+                  error: y ?? null,
+                  primaryColor: d,
+                  welcomeMessage: i,
+                  onSend: M,
+                  onReset: H,
+                  onClose: v,
+                  onToggleFullView: () => c((a) => !a),
+                  isFullView: u
+                }
+              )
             }
           ),
-          /* @__PURE__ */ p("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 bg-[#0d0d1a]", style: { minHeight: 0 }, children: [
-            s.length === 0 && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e("div", { className: `max-w-[82%] px-3 py-2.5 rounded-2xl rounded-bl-sm\r
-                              bg-[rgba(255,255,255,0.06)] text-sm\r
-                              text-[rgba(255,255,255,0.8)] leading-relaxed`, children: f }) }),
-            s.map((n) => /* @__PURE__ */ e(L, { msg: n, primaryColor: o }, n.id)),
-            r && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e(K, { color: o }) }),
-            d && /* @__PURE__ */ e("div", { className: "text-center text-xs text-red-400/70 py-1", children: d }),
-            /* @__PURE__ */ e("div", { ref: N })
-          ] }),
-          /* @__PURE__ */ p("div", { className: `px-3 py-3 bg-[#0d0d1a] border-t border-[rgba(255,255,255,0.06)]\r
-                        flex items-end gap-2 shrink-0`, children: [
-            /* @__PURE__ */ e(
-              "textarea",
-              {
-                ref: x,
-                rows: 1,
-                value: c,
-                onChange: (n) => u(n.target.value),
-                onKeyDown: S,
-                placeholder: "Type a message…",
-                disabled: r,
-                style: { resize: "none", maxHeight: 100, overflowY: "auto" },
-                className: `flex-1 bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.08)]\r
-                       rounded-xl px-3 py-2.5 text-sm text-white/80 placeholder-white/25\r
-                       focus:outline-none focus:border-[rgba(255,255,255,0.18)]\r
-                       transition-colors disabled:opacity-40`
-              }
-            ),
-            /* @__PURE__ */ e(
-              "button",
-              {
-                onClick: g,
-                disabled: !c.trim() || r,
-                "aria-label": "Send message",
-                style: { background: c.trim() && !r ? o : void 0 },
-                className: `shrink-0 w-9 h-9 rounded-xl flex items-center justify-center\r
-                       bg-[rgba(255,255,255,0.08)] transition-colors\r
-                       disabled:opacity-40 disabled:cursor-not-allowed`,
-                children: /* @__PURE__ */ p(
-                  "svg",
-                  {
-                    width: "14",
-                    height: "14",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "white",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    children: [
-                      /* @__PURE__ */ e("path", { d: "m22 2-7 20-4-9-9-4Z" }),
-                      /* @__PURE__ */ e("path", { d: "M22 2 11 13" })
-                    ]
-                  }
-                )
-              }
-            )
-          ] })
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: "nexus-bubble-btn",
+              onClick: () => p((a) => !a),
+              "aria-label": r ? "Close chat" : "Open chat",
+              "aria-expanded": r,
+              style: {
+                position: "absolute",
+                [$ ? "right" : "left"]: 20,
+                bottom: 20,
+                width: 56,
+                height: 56,
+                borderRadius: "50%",
+                background: d,
+                border: "none",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxShadow: "0 4px 20px rgba(0, 0, 0, 0.28)",
+                pointerEvents: "auto",
+                opacity: r ? 0 : 1,
+                transform: r ? "scale(0.5)" : "scale(1)"
+              },
+              children: /* @__PURE__ */ e("span", { style: { position: "relative", width: 40, height: 40 }, children: /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transition: "opacity 0.2s ease, transform 0.2s ease",
+                    opacity: r ? 0 : 1,
+                    transform: r ? "scale(0.65) rotate(-15deg)" : "scale(1) rotate(0deg)"
+                  },
+                  children: /* @__PURE__ */ f("svg", { width: "512", height: "512", viewBox: "0 0 512 512", xmlns: "http://www.w3.org/2000/svg", children: [
+                    /* @__PURE__ */ e("circle", { cx: "256", cy: "256", r: "220", fill: "#6366f1" }),
+                    /* @__PURE__ */ e("rect", { x: "156", y: "150", width: "200", height: "170", rx: "36", fill: "white" }),
+                    /* @__PURE__ */ e(
+                      "line",
+                      {
+                        x1: "256",
+                        y1: "120",
+                        x2: "256",
+                        y2: "150",
+                        stroke: "white",
+                        "stroke-width": "10",
+                        "stroke-linecap": "round"
+                      }
+                    ),
+                    /* @__PURE__ */ e("circle", { cx: "256", cy: "105", r: "14", fill: "white" }),
+                    /* @__PURE__ */ e("circle", { cx: "210", cy: "220", r: "18", fill: "#6366f1" }),
+                    /* @__PURE__ */ e("circle", { cx: "302", cy: "220", r: "18", fill: "#6366f1" }),
+                    /* @__PURE__ */ e("rect", { x: "206", y: "265", width: "100", height: "16", rx: "8", fill: "#6366f1" }),
+                    /* @__PURE__ */ e("rect", { x: "132", y: "205", width: "24", height: "60", rx: "12", fill: "white" }),
+                    /* @__PURE__ */ e("rect", { x: "356", y: "205", width: "24", height: "60", rx: "12", fill: "white" }),
+                    /* @__PURE__ */ e(
+                      "path",
+                      {
+                        d: `M180 340
+           h152
+           a24 24 0 0 1 24 24
+           v20
+           a24 24 0 0 1 -24 24
+           h-80
+           l-28 24
+           8-24
+           h-52
+           a24 24 0 0 1 -24 -24
+           v-20
+           a24 24 0 0 1 24 -24z`,
+                        fill: "white"
+                      }
+                    ),
+                    /* @__PURE__ */ e("circle", { cx: "220", cy: "374", r: "8", fill: "#6366f1" }),
+                    /* @__PURE__ */ e("circle", { cx: "256", cy: "374", r: "8", fill: "#6366f1" }),
+                    /* @__PURE__ */ e("circle", { cx: "292", cy: "374", r: "8", fill: "#6366f1" })
+                  ] })
+                }
+              ) })
+            }
+          )
         ]
       }
     )
   ] });
 }
-const F = E(
-  ({
-    agentId: t,
-    baseUrl: s,
-    primaryColor: r = "#6366f1",
-    position: d = "bottom-right",
-    welcomeMessage: o = "Hi! How can I help you today?",
-    agentName: f = "Assistant",
-    endUserId: l
-  }, y) => {
-    const {
-      messages: b,
-      isLoading: c,
-      historyLoading: u,
-      error: N,
-      conversationId: x,
-      send: g,
-      reset: S,
-      cancel: n
-    } = J({ agentId: t, baseUrl: s, endUserId: l });
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        ref: y,
-        style: {
-          position: "fixed",
-          [d === "bottom-left" ? "left" : "right"]: "20px",
-          bottom: "20px",
-          zIndex: 9999,
-          fontFamily: "system-ui, -apple-system, sans-serif"
-        },
-        children: /* @__PURE__ */ e(
-          U,
-          {
-            agentName: f,
-            messages: b,
-            isLoading: c,
-            error: N,
-            primaryColor: r,
-            welcomeMessage: o,
-            onSend: g,
-            onReset: S,
-            onClose: n
-          }
-        )
-      }
-    );
-  }
-);
-F.displayName = "NexusWidget";
 export {
-  F as NexusWidget,
-  J as useChat
+  Z as NexusWidget,
+  q as useChat
 };