@brainbase-labs/chat-widget 0.1.7 → 0.1.9

package/dist/index.js

@@ -0,0 +1,1318 @@
+import { useState as N, useRef as U, useEffect as Z, useCallback as x, useMemo as te } from "react";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+const oe = "bb-chat-";
+function ie(o) {
+  try {
+    const t = sessionStorage.getItem(`${oe}${o}`);
+    return t ? JSON.parse(t) : null;
+  } catch {
+    return null;
+  }
+}
+function se(o, t) {
+  try {
+    sessionStorage.setItem(
+      `${oe}${o}`,
+      JSON.stringify(t)
+    );
+  } catch {
+  }
+}
+function re(o) {
+  try {
+    sessionStorage.removeItem(`${oe}${o}`);
+  } catch {
+  }
+}
+function le(o) {
+  const {
+    config: t,
+    apiClient: s,
+    mockMode: r,
+    onSessionStart: u,
+    onSessionEnd: m,
+    onMessage: c,
+    onError: g
+  } = o, [l, n] = N([]), [b, M] = N([]), [A, H] = N(!1), [P, z] = N(null), [y, _] = N(null), S = U(0), K = U(!1);
+  Z(() => {
+    if (K.current) return;
+    K.current = !0;
+    const p = ie(t.embedId);
+    p && p.status === "active" && (_(p.sessionId), n(p.messages), M(p.toolCalls), S.current = p.startTime);
+  }, [t.embedId]), Z(() => {
+    y && l.length > 0 && se(t.embedId, {
+      sessionId: y,
+      deploymentId: t.deploymentId,
+      workerId: t.workerId,
+      flowId: t.flowId,
+      startTime: S.current,
+      messages: l,
+      toolCalls: b,
+      status: "active"
+    });
+  }, [y, l, b, t]);
+  const G = x(async () => (S.current = Date.now(), _(null), n([]), M([]), re(t.embedId), ""), [t.embedId]), E = x(
+    (p, I, w) => {
+      switch (p.type) {
+        case "session": {
+          const d = p.data;
+          d.session_id && (w(d.session_id), d.is_new && (S.current = Date.now(), u == null || u(d.session_id)));
+          break;
+        }
+        case "message": {
+          const d = p.data;
+          d.content && n(
+            (h) => h.map(
+              (a) => a.id === I ? { ...a, content: d.content, status: "streaming" } : a
+            )
+          );
+          break;
+        }
+        case "tool_call": {
+          const d = p.data;
+          M((h) => {
+            const a = h.findIndex(
+              (f) => f.name === d.function && f.status === "pending"
+            );
+            return a !== -1 && d.result !== void 0 ? h.map(
+              (f, B) => B === a ? { ...f, result: d.result, status: "completed" } : f
+            ) : a === -1 ? [
+              ...h,
+              {
+                id: `tc-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+                name: d.function,
+                arguments: d.args ?? {},
+                status: "pending",
+                timestamp: Date.now()
+              }
+            ] : h;
+          }), d.content && n(
+            (h) => h.map(
+              (a) => a.id === I ? { ...a, content: d.content, status: "streaming" } : a
+            )
+          );
+          break;
+        }
+        case "waiting":
+          break;
+        case "done": {
+          n(
+            (d) => d.map((h) => h.id === I ? { ...h, status: "sent" } : h)
+          );
+          break;
+        }
+        case "completed": {
+          n(
+            (d) => d.map((h) => h.id === I ? { ...h, status: "sent" } : h)
+          ), y && se(t.embedId, {
+            sessionId: y,
+            deploymentId: t.deploymentId,
+            workerId: t.workerId,
+            flowId: t.flowId,
+            startTime: S.current,
+            messages: l,
+            toolCalls: b,
+            status: "completed"
+          });
+          break;
+        }
+        case "error": {
+          const d = p.data;
+          n(
+            (h) => h.map(
+              (a) => a.id === I ? {
+                ...a,
+                status: "error",
+                content: d.error ?? "An error occurred"
+              } : a
+            )
+          );
+          break;
+        }
+      }
+    },
+    [t, y, l, b, u]
+  ), T = x(
+    async (p, I, w) => {
+      const d = p.getReader(), h = new TextDecoder();
+      let a = "";
+      try {
+        for (; ; ) {
+          const { done: f, value: B } = await d.read();
+          if (f) break;
+          for (a += h.decode(B, { stream: !0 }); a.includes(`
+
+`); ) {
+            const [v, j] = a.split(`
+
+`, 2);
+            a = j;
+            for (const ne of v.split(`
+`))
+              if (ne.startsWith("data: "))
+                try {
+                  const ce = JSON.parse(ne.slice(6));
+                  E(ce, I, w);
+                } catch {
+                }
+          }
+        }
+      } finally {
+        d.releaseLock();
+      }
+    },
+    [E]
+  ), ee = x(
+    async (p) => {
+      if (!p.trim()) return;
+      const I = {
+        id: `user-${Date.now()}`,
+        role: "user",
+        content: p,
+        timestamp: Date.now(),
+        status: "sent"
+      };
+      n((a) => [...a, I]), c == null || c(I);
+      const w = `assistant-${Date.now()}`, d = {
+        id: w,
+        role: "assistant",
+        content: "",
+        timestamp: Date.now(),
+        status: "streaming"
+      };
+      n((a) => [...a, d]), H(!0), z(null);
+      const h = (a) => {
+        _(a);
+      };
+      try {
+        if (r) {
+          const a = s.sendMessage(p);
+          for await (const f of a)
+            E(f, w, h);
+        } else {
+          const a = await s.sendMessage({
+            embedId: t.embedId,
+            message: p,
+            sessionId: y ?? void 0
+          });
+          await T(a, w, h);
+        }
+        n(
+          (a) => a.map(
+            (f) => f.id === w && f.status === "streaming" ? { ...f, status: "sent" } : f
+          )
+        );
+      } catch (a) {
+        const f = a instanceof Error ? a : new Error("Failed to send message");
+        z(f), g == null || g(f), n(
+          (B) => B.map(
+            (v) => v.id === w ? { ...v, status: "error", content: "Failed to get response" } : v
+          )
+        );
+      } finally {
+        H(!1);
+      }
+    },
+    [
+      y,
+      s,
+      r,
+      t.embedId,
+      E,
+      T,
+      c,
+      g
+    ]
+  ), J = x(async () => {
+    if (!y) return;
+    const p = {
+      sessionId: y,
+      deploymentId: t.deploymentId,
+      workerId: t.workerId,
+      flowId: t.flowId,
+      startTime: S.current,
+      messages: l,
+      toolCalls: b,
+      status: "completed"
+    };
+    m == null || m(p), re(t.embedId), _(null), n([]), M([]);
+  }, [
+    y,
+    t,
+    l,
+    b,
+    m
+  ]), F = x(() => {
+    n([]), M([]);
+  }, []);
+  return {
+    messages: l,
+    toolCalls: b,
+    isLoading: A,
+    error: P,
+    sessionId: y,
+    sendMessage: ee,
+    endSession: J,
+    clearMessages: F,
+    startNewSession: G
+  };
+}
+const de = "https://whatsapp-based-server.onrender.com";
+function ue(o = de) {
+  return {
+    async getDeploymentConfig(t) {
+      const s = await fetch(`${o}/chat/config/${t}`);
+      if (!s.ok)
+        throw new Error(`Failed to fetch deployment config: ${s.status}`);
+      const r = await s.json();
+      return {
+        embedId: r.embedId,
+        // Note: The public config endpoint doesn't expose internal IDs
+        // These will be resolved server-side when sending messages
+        deploymentId: "",
+        workerId: "",
+        flowId: "",
+        welcomeMessage: r.welcomeMessage,
+        agentName: r.agentName,
+        agentLogoUrl: r.agentLogoUrl,
+        primaryColor: r.primaryColor,
+        styling: r.styling
+      };
+    },
+    async sendMessage(t) {
+      const s = await fetch(`${o}/chat/message`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          embed_id: t.embedId,
+          message: t.message,
+          session_id: t.sessionId || void 0,
+          metadata: t.metadata
+        })
+      });
+      if (!s.ok) {
+        const r = await s.text();
+        throw new Error(`Failed to send message: ${s.status} - ${r}`);
+      }
+      if (!s.body)
+        throw new Error("No response stream available");
+      return s.body;
+    }
+  };
+}
+const me = {
+  embedId: "mock-embed-id",
+  deploymentId: "mock-deployment-id",
+  workerId: "mock-worker-id",
+  flowId: "mock-flow-id",
+  // Note: welcomeMessage is handled by the engine, not the widget
+  agentName: "AI Assistant",
+  agentLogoUrl: void 0,
+  primaryColor: "#1a1a2e",
+  styling: {}
+}, ge = [
+  {
+    trigger: /hello|hi|hey/i,
+    response: "Hello! I'm a demo AI assistant. How can I help you today?",
+    delay: 500
+  },
+  {
+    trigger: /weather/i,
+    response: "I'd check the weather for you, but I'm in mock mode! In production, I could use a weather API.",
+    delay: 800,
+    toolCalls: [
+      {
+        name: "get_weather",
+        arguments: { location: "San Francisco" },
+        result: { temperature: 72, condition: "sunny" }
+      }
+    ]
+  },
+  {
+    trigger: /help|support/i,
+    response: "I'm here to help! You can ask me questions, and I'll do my best to assist you. In production, I'd be connected to your agent with full capabilities.",
+    delay: 600
+  },
+  {
+    trigger: /pricing|cost|price/i,
+    response: "For pricing information, I'd typically check our database or connect you with the sales team. This is a mock response demonstrating how I'd handle pricing questions.",
+    delay: 700,
+    toolCalls: [
+      {
+        name: "lookup_pricing",
+        arguments: { plan: "all" },
+        result: {
+          plans: [
+            { name: "Starter", price: "$29/mo" },
+            { name: "Pro", price: "$99/mo" }
+          ]
+        }
+      }
+    ]
+  },
+  {
+    trigger: /.*/,
+    response: "I'm running in mock mode. This is a simulated response to demonstrate the chat UI. In production, I'd be connected to your agent!",
+    delay: 1e3
+  }
+];
+function O(o) {
+  return new Promise((t) => setTimeout(t, o));
+}
+function pe(o, t) {
+  const s = { ...me, ...o }, r = t ?? ge, u = `mock-session-${Date.now()}`;
+  return {
+    async getDeploymentConfig(m) {
+      return await O(300), s;
+    },
+    async *sendMessage(m) {
+      yield {
+        type: "session",
+        data: { session_id: u, is_new: !0 },
+        timestamp: Date.now()
+      };
+      const c = r.find(
+        (n) => typeof n.trigger == "string" ? m.toLowerCase().includes(n.trigger.toLowerCase()) : n.trigger.test(m)
+      ) ?? r[r.length - 1];
+      if (await O(c.delay ?? 500), c.toolCalls)
+        for (const n of c.toolCalls)
+          yield {
+            type: "tool_call",
+            data: {
+              function: n.name,
+              args: n.arguments
+            },
+            timestamp: Date.now()
+          }, await O(300), yield {
+            type: "tool_call",
+            data: {
+              function: n.name,
+              result: n.result
+            },
+            timestamp: Date.now()
+          }, await O(200);
+      const g = c.response.split(" ");
+      let l = "";
+      for (const n of g)
+        l += (l ? " " : "") + n, yield {
+          type: "message",
+          data: { content: l, role: "assistant" },
+          timestamp: Date.now()
+        }, await O(30 + Math.random() * 40);
+      yield {
+        type: "done",
+        data: { session_id: u },
+        timestamp: Date.now()
+      };
+    }
+  };
+}
+const q = ({
+  className: o,
+  color: t = "currentColor",
+  cutoutColor: s = "var(--bb-primary-color)"
+}) => /* @__PURE__ */ i(
+  "svg",
+  {
+    className: o,
+    viewBox: "0 0 800 800",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M400 412C400 405.373 405.373 400 412 400H788C794.627 400 800 405.373 800 412V740C800 773.137 773.137 800 740 800H412C405.373 800 400 794.627 400 788V412Z",
+          fill: t
+        }
+      ),
+      /* @__PURE__ */ e("circle", { cx: "400", cy: "400", r: "400", fill: t }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M0 60C0 26.8629 26.8629 0 60 0H397.614C398.932 0 400 1.06811 400 2.38569V2.38569C400 221.982 221.982 400 2.38569 400V400C1.06811 400 0 398.932 0 397.614V60Z",
+          fill: t
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M400 412C400 405.373 405.373 400 412 400H738C744.627 400 750 405.373 750 412V725C750 738.807 738.807 750 725 750H412C405.373 750 400 744.627 400 738V412Z",
+          fill: t
+        }
+      ),
+      /* @__PURE__ */ e("circle", { cx: "400", cy: "400", r: "350", fill: t }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M50 75C50 61.1929 61.1929 50 75 50H388C394.627 50 400 55.3726 400 62V388C400 394.627 394.627 400 388 400H62C55.3726 400 50 394.627 50 388V75Z",
+          fill: t
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          x: "399.919",
+          y: "209",
+          width: "270",
+          height: "270",
+          rx: "12",
+          transform: "rotate(45 399.919 209)",
+          fill: s
+        }
+      )
+    ]
+  }
+), he = "_header_1p6z5_1", _e = "_compact_1p6z5_9", fe = "_headerBackground_1p6z5_20", be = "_headerContent_1p6z5_59", ye = "_topRow_1p6z5_64", we = "_agentInfo_1p6z5_79", Ce = "_agentLogo_1p6z5_85", ke = "_agentLogoPlaceholder_1p6z5_102", ve = "_brainbaseLogo_1p6z5_123", Ie = "_agentName_1p6z5_137", Ne = "_actions_1p6z5_144", Le = "_actionButton_1p6z5_149", $e = "_welcomeText_1p6z5_183", Be = "_title_1p6z5_202", xe = "_subtitle_1p6z5_210", C = {
+  header: he,
+  compact: _e,
+  headerBackground: fe,
+  headerContent: be,
+  topRow: ye,
+  agentInfo: we,
+  agentLogo: Ce,
+  agentLogoPlaceholder: ke,
+  brainbaseLogo: ve,
+  agentName: Ie,
+  actions: Ne,
+  actionButton: Le,
+  welcomeText: $e,
+  title: Be,
+  subtitle: xe
+}, Me = ({
+  agentName: o = "AI Assistant",
+  agentLogoUrl: t,
+  welcomeTitle: s,
+  welcomeSubtitle: r,
+  onClose: u,
+  onNewChatRequest: m,
+  showNewChatButton: c = !1,
+  compact: g = !1
+}) => {
+  const l = s || "Hello there.", n = r !== void 0 ? r : s ? void 0 : "How can we help?";
+  return /* @__PURE__ */ i("div", { className: `${C.header} ${g ? C.compact : ""}`, children: [
+    /* @__PURE__ */ e("div", { className: C.headerBackground }),
+    /* @__PURE__ */ i("div", { className: C.headerContent, children: [
+      /* @__PURE__ */ i("div", { className: C.topRow, children: [
+        /* @__PURE__ */ i("div", { className: C.agentInfo, children: [
+          t ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: t,
+              alt: o,
+              className: C.agentLogo
+            }
+          ) : /* @__PURE__ */ e("div", { className: C.agentLogoPlaceholder, children: /* @__PURE__ */ e(
+            q,
+            {
+              className: C.brainbaseLogo,
+              color: "white",
+              cutoutColor: "var(--bb-primary-color)"
+            }
+          ) }),
+          /* @__PURE__ */ e("span", { className: C.agentName, children: o })
+        ] }),
+        /* @__PURE__ */ i("div", { className: C.actions, children: [
+          c && m && /* @__PURE__ */ e(
+            "button",
+            {
+              className: C.actionButton,
+              onClick: m,
+              "aria-label": "Start new chat",
+              type: "button",
+              children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
+                "path",
+                {
+                  d: "M12 5V19M5 12H19",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          ),
+          u && /* @__PURE__ */ e(
+            "button",
+            {
+              className: C.actionButton,
+              onClick: u,
+              "aria-label": "Close chat",
+              type: "button",
+              children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
+                "path",
+                {
+                  d: "M6 18L18 6M6 6L18 18",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          )
+        ] })
+      ] }),
+      !g && /* @__PURE__ */ i("div", { className: C.welcomeText, children: [
+        /* @__PURE__ */ e("h1", { className: C.title, children: l }),
+        n && /* @__PURE__ */ e("p", { className: C.subtitle, children: n })
+      ] })
+    ] })
+  ] });
+}, Se = "_messageWrapper_c86gj_1", Te = "_user_c86gj_19", We = "_assistant_c86gj_24", De = "_avatar_c86gj_28", He = "_avatarPlaceholder_c86gj_43", Pe = "_brainbaseLogo_c86gj_53", Ee = "_messageBubble_c86gj_58", je = "_error_c86gj_76", Ve = "_content_c86gj_81", Ae = "_cursor_c86gj_88", ze = "_errorIndicator_c86gj_107", L = {
+  messageWrapper: Se,
+  user: Te,
+  assistant: We,
+  avatar: De,
+  avatarPlaceholder: He,
+  brainbaseLogo: Pe,
+  messageBubble: Ee,
+  error: je,
+  content: Ve,
+  cursor: Ae,
+  errorIndicator: ze
+}, Fe = ({
+  message: o,
+  agentName: t,
+  agentLogoUrl: s
+}) => {
+  const r = o.role === "user", u = o.status === "streaming", m = o.status === "error";
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: `${L.messageWrapper} ${r ? L.user : L.assistant}`,
+      children: [
+        !r && /* @__PURE__ */ e("div", { className: L.avatar, children: s ? /* @__PURE__ */ e("img", { src: s, alt: t || "AI" }) : /* @__PURE__ */ e("div", { className: L.avatarPlaceholder, children: /* @__PURE__ */ e(
+          q,
+          {
+            className: L.brainbaseLogo,
+            color: "white",
+            cutoutColor: "var(--bb-primary-color)"
+          }
+        ) }) }),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: `${L.messageBubble} ${m ? L.error : ""}`,
+            role: "article",
+            "aria-label": `${r ? "Your message" : `${t || "AI"} says`}`,
+            children: [
+              /* @__PURE__ */ i("div", { className: L.content, children: [
+                o.content,
+                u && /* @__PURE__ */ e("span", { className: L.cursor })
+              ] }),
+              m && /* @__PURE__ */ i("div", { className: L.errorIndicator, children: [
+                /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", children: [
+                  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
+                  /* @__PURE__ */ e("path", { d: "M12 8V12M12 16H12.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+                ] }),
+                /* @__PURE__ */ e("span", { children: "Failed to send" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Oe = "_toolCall_1wby1_1", Re = "_iconWrapper_1wby1_24", Ue = "_spinner_1wby1_33", Ze = "_checkIcon_1wby1_48", qe = "_errorIcon_1wby1_54", Ke = "_content_1wby1_60", Ge = "_label_1wby1_66", Je = "_name_1wby1_73", Ye = "_pending_1wby1_78", Xe = "_completed_1wby1_82", Qe = "_error_1wby1_54", $ = {
+  toolCall: Oe,
+  iconWrapper: Re,
+  spinner: Ue,
+  checkIcon: Ze,
+  errorIcon: qe,
+  content: Ke,
+  label: Ge,
+  name: Je,
+  pending: Ye,
+  completed: Xe,
+  error: Qe
+}, et = ({ toolCall: o }) => {
+  const t = o.status === "pending" || o.status === "executing", s = o.status === "completed", r = o.status === "error", u = (m) => m.replace(/_/g, " ").replace(/([A-Z])/g, " $1").trim().toLowerCase().replace(/^./, (c) => c.toUpperCase());
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: `${$.toolCall} ${t ? $.pending : ""} ${s ? $.completed : ""} ${r ? $.error : ""}`,
+      children: [
+        /* @__PURE__ */ e("div", { className: $.iconWrapper, children: t ? /* @__PURE__ */ e("div", { className: $.spinner }) : s ? /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: $.checkIcon, children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M20 6L9 17L4 12",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) : /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: $.errorIcon, children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M6 18L18 6M6 6L18 18",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) }),
+        /* @__PURE__ */ i("div", { className: $.content, children: [
+          /* @__PURE__ */ e("span", { className: $.label, children: t ? "Running" : s ? "Completed" : "Failed" }),
+          /* @__PURE__ */ e("span", { className: $.name, children: u(o.name) })
+        ] })
+      ]
+    }
+  );
+}, tt = "_wrapper_10rss_2", ot = "_avatar_10rss_22", nt = "_avatarPlaceholder_10rss_37", st = "_brainbaseLogo_10rss_47", rt = "_bubble_10rss_52", at = "_dot_10rss_63", W = {
+  wrapper: tt,
+  avatar: ot,
+  avatarPlaceholder: nt,
+  brainbaseLogo: st,
+  bubble: rt,
+  dot: at
+}, ct = ({
+  agentName: o = "AI",
+  agentLogoUrl: t
+}) => /* @__PURE__ */ i("div", { className: W.wrapper, role: "status", "aria-label": `${o} is typing`, children: [
+  /* @__PURE__ */ e("div", { className: W.avatar, children: t ? /* @__PURE__ */ e("img", { src: t, alt: o }) : /* @__PURE__ */ e("div", { className: W.avatarPlaceholder, children: /* @__PURE__ */ e(
+    q,
+    {
+      className: W.brainbaseLogo,
+      color: "white",
+      cutoutColor: "var(--bb-primary-color)"
+    }
+  ) }) }),
+  /* @__PURE__ */ i("div", { className: W.bubble, children: [
+    /* @__PURE__ */ e("span", { className: W.dot }),
+    /* @__PURE__ */ e("span", { className: W.dot }),
+    /* @__PURE__ */ e("span", { className: W.dot })
+  ] })
+] }), it = "_messageList_241kk_1", lt = "_emptyState_241kk_29", dt = "_emptyIcon_241kk_40", ut = "_emptyText_241kk_52", Y = {
+  messageList: it,
+  emptyState: lt,
+  emptyIcon: dt,
+  emptyText: ut
+}, mt = ({
+  messages: o,
+  toolCalls: t,
+  isLoading: s,
+  agentName: r,
+  agentLogoUrl: u
+}) => {
+  var l;
+  const m = U(null), c = U(null);
+  Z(() => {
+    var n;
+    (n = c.current) == null || n.scrollIntoView({ behavior: "smooth" });
+  }, [o, t, s]);
+  const g = t.filter(
+    (n) => n.status === "pending" || n.status === "executing"
+  );
+  return /* @__PURE__ */ i("div", { className: Y.messageList, ref: m, role: "log", "aria-live": "polite", children: [
+    o.length === 0 && !s && /* @__PURE__ */ i("div", { className: Y.emptyState, children: [
+      /* @__PURE__ */ e("div", { className: Y.emptyIcon, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M8 12H8.01M12 12H12.01M16 12H16.01M21 12C21 16.4183 16.9706 20 12 20C10.4607 20 9.01172 19.6565 7.74467 19.0511L3 20L4.39499 16.28C3.51156 15.0423 3 13.5743 3 12C3 7.58172 7.02944 4 12 4C16.9706 4 21 7.58172 21 12Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) }) }),
+      /* @__PURE__ */ e("p", { className: Y.emptyText, children: "Start a conversation" })
+    ] }),
+    o.map((n) => /* @__PURE__ */ e(
+      Fe,
+      {
+        message: n,
+        agentName: r,
+        agentLogoUrl: u
+      },
+      n.id
+    )),
+    g.map((n) => /* @__PURE__ */ e(et, { toolCall: n }, n.id)),
+    s && ((l = o[o.length - 1]) == null ? void 0 : l.role) === "user" && /* @__PURE__ */ e(ct, { agentName: r, agentLogoUrl: u }),
+    /* @__PURE__ */ e("div", { ref: c })
+  ] });
+}, gt = "_inputWrapper_5lgg7_1", pt = "_inputContainer_5lgg7_7", ht = "_textarea_5lgg7_23", _t = "_sendButton_5lgg7_50", ft = "_hint_5lgg7_89", R = {
+  inputWrapper: gt,
+  inputContainer: pt,
+  textarea: ht,
+  sendButton: _t,
+  hint: ft
+}, bt = ({
+  onSend: o,
+  disabled: t = !1,
+  placeholder: s = "Send a message..."
+}) => {
+  const [r, u] = N(""), m = U(null), c = x(() => {
+    const n = m.current;
+    n && (n.style.height = "auto", n.style.height = `${Math.min(n.scrollHeight, 150)}px`);
+  }, []);
+  Z(() => {
+    c();
+  }, [r, c]);
+  const g = x(
+    (n) => {
+      n == null || n.preventDefault();
+      const b = r.trim();
+      b && !t && (o(b), u(""), m.current && (m.current.style.height = "auto"));
+    },
+    [r, t, o]
+  ), l = x(
+    (n) => {
+      n.key === "Enter" && !n.shiftKey && (n.preventDefault(), g());
+    },
+    [g]
+  );
+  return /* @__PURE__ */ i("form", { className: R.inputWrapper, onSubmit: g, children: [
+    /* @__PURE__ */ i("div", { className: R.inputContainer, children: [
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: m,
+          className: R.textarea,
+          value: r,
+          onChange: (n) => u(n.target.value),
+          onKeyDown: l,
+          placeholder: s,
+          disabled: t,
+          rows: 1,
+          "aria-label": "Message input"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "submit",
+          className: R.sendButton,
+          disabled: t || !r.trim(),
+          "aria-label": "Send message",
+          children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i("div", { className: R.hint, children: [
+      "Press ",
+      /* @__PURE__ */ e("kbd", { children: "Enter" }),
+      " to send, ",
+      /* @__PURE__ */ e("kbd", { children: "Shift + Enter" }),
+      " for new line"
+    ] })
+  ] });
+}, yt = "_poweredBy_9jh5q_1", wt = "_logo_9jh5q_20", Ct = "_poweredText_9jh5q_24", kt = "_text_9jh5q_36", X = {
+  poweredBy: yt,
+  logo: wt,
+  poweredText: Ct,
+  text: kt
+}, vt = ({ className: o }) => /* @__PURE__ */ i(
+  "svg",
+  {
+    className: o,
+    viewBox: "0 0 800 800",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M400 412C400 405.373 405.373 400 412 400H788C794.627 400 800 405.373 800 412V740C800 773.137 773.137 800 740 800H412C405.373 800 400 794.627 400 788V412Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ e("circle", { cx: "400", cy: "400", r: "400", fill: "currentColor" }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M0 60C0 26.8629 26.8629 0 60 0H397.614C398.932 0 400 1.06811 400 2.38569V2.38569C400 221.982 221.982 400 2.38569 400V400C1.06811 400 0 398.932 0 397.614V60Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M400 412C400 405.373 405.373 400 412 400H738C744.627 400 750 405.373 750 412V725C750 738.807 738.807 750 725 750H412C405.373 750 400 744.627 400 738V412Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ e("circle", { cx: "400", cy: "400", r: "350", fill: "currentColor" }),
+      /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M50 75C50 61.1929 61.1929 50 75 50H388C394.627 50 400 55.3726 400 62V388C400 394.627 394.627 400 388 400H62C55.3726 400 50 394.627 50 388V75Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          x: "399.919",
+          y: "209",
+          width: "270",
+          height: "270",
+          rx: "12",
+          transform: "rotate(45 399.919 209)",
+          fill: "var(--bb-surface-bg, #ffffff)"
+        }
+      )
+    ]
+  }
+), It = ({ showBranding: o = !0 }) => o ? /* @__PURE__ */ i(
+  "a",
+  {
+    href: "https://brainbaselabs.com/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: X.poweredBy,
+    "aria-label": "Powered by Brainbase Labs",
+    children: [
+      /* @__PURE__ */ e("span", { className: X.poweredText, children: "Powered by" }),
+      /* @__PURE__ */ e(vt, { className: X.logo }),
+      /* @__PURE__ */ e("span", { className: X.text, children: "Brainbase Labs" })
+    ]
+  }
+) : null, Nt = "_container_m2o9l_1", Lt = "_body_m2o9l_26", $t = "_confirmationOverlay_m2o9l_35", Bt = "_confirmationDialog_m2o9l_56", xt = "_confirmationText_m2o9l_78", Mt = "_confirmationButtons_m2o9l_86", St = "_cancelButton_m2o9l_91", Tt = "_confirmButton_m2o9l_92", D = {
+  container: Nt,
+  body: Lt,
+  confirmationOverlay: $t,
+  confirmationDialog: Bt,
+  confirmationText: xt,
+  confirmationButtons: Mt,
+  cancelButton: St,
+  confirmButton: Tt
+}, Wt = ({
+  config: o,
+  messages: t,
+  toolCalls: s,
+  isLoading: r,
+  onSendMessage: u,
+  onClose: m,
+  onNewChat: c
+}) => {
+  var H;
+  const [g, l] = N(!1), n = t.length > 0, b = () => {
+    l(!0);
+  }, M = () => {
+    l(!1), c == null || c();
+  }, A = () => {
+    l(!1);
+  };
+  return /* @__PURE__ */ i("div", { className: D.container, role: "dialog", "aria-label": "Chat window", children: [
+    /* @__PURE__ */ e(
+      Me,
+      {
+        agentName: o.agentName,
+        agentLogoUrl: o.agentLogoUrl,
+        welcomeTitle: o.welcomeMessage || "Hello there.",
+        welcomeSubtitle: o.welcomeMessage ? void 0 : "How can we help?",
+        onClose: m,
+        onNewChatRequest: b,
+        showNewChatButton: n,
+        compact: n
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: D.body, children: [
+      /* @__PURE__ */ e(
+        mt,
+        {
+          messages: t,
+          toolCalls: s,
+          isLoading: r,
+          agentName: o.agentName,
+          agentLogoUrl: o.agentLogoUrl
+        }
+      ),
+      /* @__PURE__ */ e(
+        bt,
+        {
+          onSend: u,
+          disabled: r,
+          placeholder: "Ask a question..."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(It, { showBranding: ((H = o.styling) == null ? void 0 : H.showBranding) ?? !0 }),
+    g && /* @__PURE__ */ e("div", { className: D.confirmationOverlay, children: /* @__PURE__ */ i("div", { className: D.confirmationDialog, children: [
+      /* @__PURE__ */ e("p", { className: D.confirmationText, children: "End current chat and start a new conversation?" }),
+      /* @__PURE__ */ i("div", { className: D.confirmationButtons, children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: D.cancelButton,
+            onClick: A,
+            type: "button",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: D.confirmButton,
+            onClick: M,
+            type: "button",
+            children: "End Chat"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}, Dt = "_toggleButton_11dqz_1", Ht = "_icon_11dqz_31", Pt = "_agentLogo_11dqz_36", Et = "_unreadBadge_11dqz_43", Q = {
+  toggleButton: Dt,
+  icon: Ht,
+  agentLogo: Pt,
+  unreadBadge: Et
+}, ae = ({
+  onClick: o,
+  agentLogoUrl: t,
+  unreadCount: s = 0
+}) => /* @__PURE__ */ i(
+  "button",
+  {
+    className: Q.toggleButton,
+    onClick: o,
+    "aria-label": "Open chat",
+    type: "button",
+    children: [
+      t ? /* @__PURE__ */ e("img", { src: t, alt: "", className: Q.agentLogo }) : /* @__PURE__ */ e(
+        "svg",
+        {
+          className: Q.icon,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M8 12H8.01M12 12H12.01M16 12H16.01M21 12C21 16.4183 16.9706 20 12 20C10.4607 20 9.01172 19.6565 7.74467 19.0511L3 20L4.39499 16.28C3.51156 15.0423 3 13.5743 3 12C3 7.58172 7.02944 4 12 4C16.9706 4 21 7.58172 21 12Z",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ),
+      s > 0 && /* @__PURE__ */ e("span", { className: Q.unreadBadge, children: s > 9 ? "9+" : s })
+    ]
+  }
+), jt = "_container_kgfgt_1", Vt = "_header_kgfgt_25", At = "_logoWrapper_kgfgt_38", zt = "_logo_kgfgt_38", Ft = "_closeButton_kgfgt_51", Ot = "_content_kgfgt_74", Rt = "_iconWrapper_kgfgt_84", Ut = "_errorIcon_kgfgt_95", Zt = "_title_kgfgt_101", qt = "_description_kgfgt_109", Kt = "_retryButton_kgfgt_117", Gt = "_footer_kgfgt_139", Jt = "_poweredBy_kgfgt_146", Yt = "_footerLogo_kgfgt_160", k = {
+  container: jt,
+  header: Vt,
+  logoWrapper: At,
+  logo: zt,
+  closeButton: Ft,
+  content: Ot,
+  iconWrapper: Rt,
+  errorIcon: Ut,
+  title: Zt,
+  description: qt,
+  retryButton: Kt,
+  footer: Gt,
+  poweredBy: Jt,
+  footerLogo: Yt
+}, Xt = ({
+  errorType: o,
+  message: t,
+  onRetry: s,
+  onClose: r
+}) => {
+  const u = () => {
+    switch (o) {
+      case "not_found":
+        return {
+          title: "Chat Not Found",
+          description: t || "This chat widget is not configured correctly. Please check the embed ID.",
+          icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: k.errorIcon, children: [
+            /* @__PURE__ */ e(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "path",
+              {
+                d: "M12 7V13M12 16V16.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            )
+          ] })
+        };
+      case "network":
+        return {
+          title: "Connection Error",
+          description: t || "Unable to connect to the chat service. Please check your internet connection.",
+          icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: k.errorIcon, children: [
+            /* @__PURE__ */ e(
+              "path",
+              {
+                d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "path",
+              {
+                d: "M8 15L16 9M8 9L16 15",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            )
+          ] })
+        };
+      default:
+        return {
+          title: "Something Went Wrong",
+          description: t || "An unexpected error occurred. Please try again later.",
+          icon: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: k.errorIcon, children: /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round"
+            }
+          ) })
+        };
+    }
+  }, { title: m, description: c, icon: g } = u();
+  return /* @__PURE__ */ i("div", { className: k.container, children: [
+    /* @__PURE__ */ i("div", { className: k.header, children: [
+      /* @__PURE__ */ e("div", { className: k.logoWrapper, children: /* @__PURE__ */ e(
+        q,
+        {
+          className: k.logo,
+          color: "white",
+          cutoutColor: "var(--bb-primary-color)"
+        }
+      ) }),
+      r && /* @__PURE__ */ e(
+        "button",
+        {
+          className: k.closeButton,
+          onClick: r,
+          "aria-label": "Close",
+          type: "button",
+          children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M6 18L18 6M6 6L18 18",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          ) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i("div", { className: k.content, children: [
+      /* @__PURE__ */ e("div", { className: k.iconWrapper, children: g }),
+      /* @__PURE__ */ e("h2", { className: k.title, children: m }),
+      /* @__PURE__ */ e("p", { className: k.description, children: c }),
+      s && /* @__PURE__ */ e("button", { className: k.retryButton, onClick: s, type: "button", children: "Try Again" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: k.footer, children: /* @__PURE__ */ i(
+      "a",
+      {
+        href: "https://brainbaselabs.com",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: k.poweredBy,
+        children: [
+          "Powered by",
+          " ",
+          /* @__PURE__ */ e(
+            q,
+            {
+              className: k.footerLogo,
+              color: "var(--bb-text-tertiary)",
+              cutoutColor: "var(--bb-surface-bg)"
+            }
+          ),
+          /* @__PURE__ */ e("span", { children: "Brainbase Labs" })
+        ]
+      }
+    ) })
+  ] });
+}, Qt = "_widget_1ehud_1", eo = "_inline_1ehud_25", V = {
+  widget: Qt,
+  "bottom-right": "_bottom-right_1ehud_10",
+  "bottom-left": "_bottom-left_1ehud_17",
+  inline: eo
+}, to = "https://whatsapp-based-server.onrender.com", so = ({
+  embedId: o,
+  apiBaseUrl: t = to,
+  mockMode: s = !1,
+  mockResponses: r,
+  position: u = "bottom-right",
+  defaultOpen: m = !1,
+  primaryColor: c,
+  agentName: g,
+  welcomeMessage: l,
+  showBranding: n,
+  className: b,
+  onSessionStart: M,
+  onSessionEnd: A,
+  onMessage: H,
+  onError: P
+}) => {
+  const [z, y] = N(m), [_, S] = N(null), [K, G] = N(!0), [E, T] = N(null), [ee, J] = N(), F = te(() => s ? pe(
+    { primaryColor: c, agentName: g, welcomeMessage: l },
+    r
+  ) : ue(t), [s, c, g, l, r, t]), p = x(async () => {
+    G(!0), T(null), J(void 0);
+    try {
+      const v = await F.getDeploymentConfig(o);
+      S({
+        ...v,
+        // Allow prop overrides
+        primaryColor: c ?? v.primaryColor,
+        agentName: g ?? v.agentName,
+        welcomeMessage: l ?? v.welcomeMessage,
+        styling: {
+          ...v.styling ?? {},
+          ...n !== void 0 ? { showBranding: n } : {}
+        }
+      });
+    } catch (v) {
+      const j = v instanceof Error ? v : new Error("Failed to load config");
+      j.message.includes("404") ? (T("not_found"), J("The chat widget with this embed ID was not found.")) : j.message.includes("Failed to fetch") || j.message.includes("network") ? T("network") : T("unknown"), s && (S({
+        embedId: o,
+        deploymentId: "mock-deployment",
+        workerId: "mock-worker",
+        flowId: "mock-flow",
+        primaryColor: c ?? "#1a1a2e",
+        agentName: g ?? "AI Assistant",
+        styling: n !== void 0 ? { showBranding: n } : void 0
+      }), T(null)), P == null || P(j);
+    } finally {
+      G(!1);
+    }
+  }, [o, s, F, c, g, l, P]);
+  Z(() => {
+    p();
+  }, [p]);
+  const I = te(() => _ || {
+    embedId: o,
+    deploymentId: "",
+    workerId: "",
+    flowId: "",
+    primaryColor: c,
+    agentName: g,
+    welcomeMessage: l,
+    styling: n !== void 0 ? {
+      showBranding: n
+    } : void 0
+  }, [_, o, c, g, l, n]), w = le({
+    config: I,
+    apiClient: F,
+    mockMode: s,
+    onSessionStart: M,
+    onSessionEnd: A,
+    onMessage: H,
+    onError: P
+  }), d = te(
+    () => ({
+      "--bb-primary-color": (_ == null ? void 0 : _.primaryColor) ?? c ?? "#1a1a2e"
+    }),
+    [_ == null ? void 0 : _.primaryColor, c]
+  ), h = () => {
+    w.endSession(), w.startNewSession();
+  }, a = () => {
+    y(!1);
+  }, f = () => {
+    p();
+  }, B = u === "inline";
+  return K ? null : E && !s ? !B && !z ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      style: d,
+      children: /* @__PURE__ */ e(
+        ae,
+        {
+          onClick: () => y(!0),
+          agentName: g
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      style: d,
+      children: /* @__PURE__ */ e(
+        Xt,
+        {
+          errorType: E,
+          message: ee,
+          onRetry: f,
+          onClose: B ? void 0 : a
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      style: d,
+      children: z || B ? /* @__PURE__ */ e(
+        Wt,
+        {
+          config: I,
+          messages: w.messages,
+          toolCalls: w.toolCalls,
+          isLoading: w.isLoading,
+          onSendMessage: w.sendMessage,
+          onClose: B ? void 0 : a,
+          onNewChat: h
+        }
+      ) : /* @__PURE__ */ e(
+        ae,
+        {
+          onClick: () => y(!0),
+          agentName: _ == null ? void 0 : _.agentName,
+          agentLogoUrl: _ == null ? void 0 : _.agentLogoUrl
+        }
+      )
+    }
+  );
+};
+function ro() {
+  if (typeof crypto < "u" && crypto.randomUUID)
+    return `bb-${crypto.randomUUID()}`;
+  const o = Date.now().toString(36), t = Math.random().toString(36).substring(2, 15), s = Math.random().toString(36).substring(2, 15);
+  return `bb-${o}-${t}${s}`;
+}
+export {
+  Wt as ChatContainer,
+  Me as ChatHeader,
+  ae as ChatToggleButton,
+  so as ChatWidget,
+  Fe as Message,
+  bt as MessageInput,
+  mt as MessageList,
+  et as ToolCallDisplay,
+  ct as TypingIndicator,
+  re as clearSession,
+  ue as createAPIClient,
+  pe as createMockAPIClient,
+  ro as generateSessionId,
+  ie as getStoredSession,
+  se as storeSession,
+  le as useChat
+};