@brainbase-labs/chat-widget 0.1.0

package/dist/index.js

@@ -0,0 +1,1212 @@
+import { useState as k, useRef as A, useEffect as W, useCallback as x, useMemo as J } from "react";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+const Y = "bb-chat-";
+function re(n) {
+  try {
+    const t = sessionStorage.getItem(`${Y}${n}`);
+    return t ? JSON.parse(t) : null;
+  } catch {
+    return null;
+  }
+}
+function Q(n, t) {
+  try {
+    sessionStorage.setItem(
+      `${Y}${n}`,
+      JSON.stringify(t)
+    );
+  } catch {
+  }
+}
+function ee(n) {
+  try {
+    sessionStorage.removeItem(`${Y}${n}`);
+  } catch {
+  }
+}
+function ae(n) {
+  const {
+    config: t,
+    apiClient: s,
+    mockMode: r,
+    onSessionStart: h,
+    onSessionEnd: d,
+    onMessage: i,
+    onError: p
+  } = n, [u, o] = k([]), [C, L] = k([]), [V, N] = k(!1), [q, D] = k(null), [m, S] = k(null), B = A(0), Z = A(!1);
+  W(() => {
+    if (Z.current) return;
+    Z.current = !0;
+    const _ = re(t.embedId);
+    _ && _.status === "active" && (S(_.sessionId), o(_.messages), L(_.toolCalls), B.current = _.startTime);
+  }, [t.embedId]), W(() => {
+    m && u.length > 0 && Q(t.embedId, {
+      sessionId: m,
+      deploymentId: t.deploymentId,
+      workerId: t.workerId,
+      flowId: t.flowId,
+      startTime: B.current,
+      messages: u,
+      toolCalls: C,
+      status: "active"
+    });
+  }, [m, u, C, t]);
+  const K = x(async () => (B.current = Date.now(), S(null), o([]), L([]), ee(t.embedId), ""), [t.embedId]), H = x(
+    (_, y, b) => {
+      switch (_.type) {
+        case "session": {
+          const g = _.data;
+          g.session_id && (b(g.session_id), g.is_new && (B.current = Date.now(), h == null || h(g.session_id)));
+          break;
+        }
+        case "message": {
+          const g = _.data;
+          g.content && o(
+            (c) => c.map(
+              (a) => a.id === y ? { ...a, content: g.content, status: "streaming" } : a
+            )
+          );
+          break;
+        }
+        case "tool_call": {
+          const g = _.data;
+          L((c) => {
+            const a = c.findIndex(
+              (w) => w.name === g.function && w.status === "pending"
+            );
+            return a !== -1 && g.result !== void 0 ? c.map(
+              (w, j) => j === a ? { ...w, result: g.result, status: "completed" } : w
+            ) : a === -1 ? [
+              ...c,
+              {
+                id: `tc-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+                name: g.function,
+                arguments: g.args ?? {},
+                status: "pending",
+                timestamp: Date.now()
+              }
+            ] : c;
+          }), g.content && o(
+            (c) => c.map(
+              (a) => a.id === y ? { ...a, content: g.content, status: "streaming" } : a
+            )
+          );
+          break;
+        }
+        case "waiting":
+          break;
+        case "done": {
+          o(
+            (g) => g.map((c) => c.id === y ? { ...c, status: "sent" } : c)
+          );
+          break;
+        }
+        case "completed": {
+          o(
+            (g) => g.map((c) => c.id === y ? { ...c, status: "sent" } : c)
+          ), m && Q(t.embedId, {
+            sessionId: m,
+            deploymentId: t.deploymentId,
+            workerId: t.workerId,
+            flowId: t.flowId,
+            startTime: B.current,
+            messages: u,
+            toolCalls: C,
+            status: "completed"
+          });
+          break;
+        }
+        case "error": {
+          const g = _.data;
+          o(
+            (c) => c.map(
+              (a) => a.id === y ? {
+                ...a,
+                status: "error",
+                content: g.error ?? "An error occurred"
+              } : a
+            )
+          );
+          break;
+        }
+      }
+    },
+    [t, m, u, C, h]
+  ), T = x(
+    async (_, y, b) => {
+      const g = _.getReader(), c = new TextDecoder();
+      let a = "";
+      try {
+        for (; ; ) {
+          const { done: w, value: j } = await g.read();
+          if (w) break;
+          for (a += c.decode(j, { stream: !0 }); a.includes(`
+
+`); ) {
+            const [P, oe] = a.split(`
+
+`, 2);
+            a = oe;
+            for (const X of P.split(`
+`))
+              if (X.startsWith("data: "))
+                try {
+                  const se = JSON.parse(X.slice(6));
+                  H(se, y, b);
+                } catch {
+                }
+          }
+        }
+      } finally {
+        g.releaseLock();
+      }
+    },
+    [H]
+  ), O = x(
+    async (_) => {
+      if (!_.trim()) return;
+      const y = {
+        id: `user-${Date.now()}`,
+        role: "user",
+        content: _,
+        timestamp: Date.now(),
+        status: "sent"
+      };
+      o((a) => [...a, y]), i == null || i(y);
+      const b = `assistant-${Date.now()}`, g = {
+        id: b,
+        role: "assistant",
+        content: "",
+        timestamp: Date.now(),
+        status: "streaming"
+      };
+      o((a) => [...a, g]), N(!0), D(null);
+      const c = (a) => {
+        S(a);
+      };
+      try {
+        if (r) {
+          const a = s.sendMessage(_);
+          for await (const w of a)
+            H(w, b, c);
+        } else {
+          const a = await s.sendMessage({
+            embedId: t.embedId,
+            message: _,
+            sessionId: m ?? void 0
+          });
+          await T(a, b, c);
+        }
+        o(
+          (a) => a.map(
+            (w) => w.id === b && w.status === "streaming" ? { ...w, status: "sent" } : w
+          )
+        );
+      } catch (a) {
+        const w = a instanceof Error ? a : new Error("Failed to send message");
+        D(w), p == null || p(w), o(
+          (j) => j.map(
+            (P) => P.id === b ? { ...P, status: "error", content: "Failed to get response" } : P
+          )
+        );
+      } finally {
+        N(!1);
+      }
+    },
+    [
+      m,
+      s,
+      r,
+      t.embedId,
+      H,
+      T,
+      i,
+      p
+    ]
+  ), $ = x(async () => {
+    if (!m) return;
+    const _ = {
+      sessionId: m,
+      deploymentId: t.deploymentId,
+      workerId: t.workerId,
+      flowId: t.flowId,
+      startTime: B.current,
+      messages: u,
+      toolCalls: C,
+      status: "completed"
+    };
+    d == null || d(_), ee(t.embedId), S(null), o([]), L([]);
+  }, [
+    m,
+    t,
+    u,
+    C,
+    d
+  ]), G = x(() => {
+    o([]), L([]);
+  }, []);
+  return {
+    messages: u,
+    toolCalls: C,
+    isLoading: V,
+    error: q,
+    sessionId: m,
+    sendMessage: O,
+    endSession: $,
+    clearMessages: G,
+    startNewSession: K
+  };
+}
+const ie = "https://whatsapp-based-server.onrender.com";
+function ce(n = ie) {
+  return {
+    async getDeploymentConfig(t) {
+      const s = await fetch(`${n}/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(`${n}/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 le = {
+  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: {}
+}, de = [
+  {
+    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 Brainbase AI 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 Brainbase AI agent!",
+    delay: 1e3
+  }
+];
+function z(n) {
+  return new Promise((t) => setTimeout(t, n));
+}
+function ue(n, t) {
+  const s = { ...le, ...n }, r = t ?? de, h = `mock-session-${Date.now()}`;
+  return {
+    async getDeploymentConfig(d) {
+      return await z(300), s;
+    },
+    async *sendMessage(d) {
+      yield {
+        type: "session",
+        data: { session_id: h, is_new: !0 },
+        timestamp: Date.now()
+      };
+      const i = r.find(
+        (o) => typeof o.trigger == "string" ? d.toLowerCase().includes(o.trigger.toLowerCase()) : o.trigger.test(d)
+      ) ?? r[r.length - 1];
+      if (await z(i.delay ?? 500), i.toolCalls)
+        for (const o of i.toolCalls)
+          yield {
+            type: "tool_call",
+            data: {
+              function: o.name,
+              args: o.arguments
+            },
+            timestamp: Date.now()
+          }, await z(300), yield {
+            type: "tool_call",
+            data: {
+              function: o.name,
+              result: o.result
+            },
+            timestamp: Date.now()
+          }, await z(200);
+      const p = i.response.split(" ");
+      let u = "";
+      for (const o of p)
+        u += (u ? " " : "") + o, yield {
+          type: "message",
+          data: { content: u, role: "assistant" },
+          timestamp: Date.now()
+        }, await z(30 + Math.random() * 40);
+      yield {
+        type: "done",
+        data: { session_id: h },
+        timestamp: Date.now()
+      };
+    }
+  };
+}
+const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerContent_tzm7g_40", pe = "_topRow_tzm7g_45", _e = "_agentInfo_tzm7g_52", fe = "_agentLogo_tzm7g_58", we = "_agentLogoPlaceholder_tzm7g_66", Ce = "_brainbaseLogo_tzm7g_77", be = "_agentName_tzm7g_82", ye = "_actions_tzm7g_89", Ie = "_actionButton_tzm7g_94", ve = "_welcomeText_tzm7g_122", ke = "_title_tzm7g_126", Ne = "_subtitle_tzm7g_134", Le = "_confirmationOverlay_tzm7g_142", xe = "_confirmationDialog_tzm7g_163", Be = "_confirmationText_tzm7g_184", $e = "_confirmationButtons_tzm7g_192", Me = "_cancelButton_tzm7g_197", Se = "_confirmButton_tzm7g_198", f = {
+  header: me,
+  headerBackground: ge,
+  headerContent: he,
+  topRow: pe,
+  agentInfo: _e,
+  agentLogo: fe,
+  agentLogoPlaceholder: we,
+  brainbaseLogo: Ce,
+  agentName: be,
+  actions: ye,
+  actionButton: Ie,
+  welcomeText: ve,
+  title: ke,
+  subtitle: Ne,
+  confirmationOverlay: Le,
+  confirmationDialog: xe,
+  confirmationText: Be,
+  confirmationButtons: $e,
+  cancelButton: Me,
+  confirmButton: Se
+}, He = ({ className: n }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    className: n,
+    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: "white"
+        }
+      )
+    ]
+  }
+), Te = ({
+  agentName: n = "AI Assistant",
+  agentLogoUrl: t,
+  welcomeTitle: s,
+  welcomeSubtitle: r,
+  onClose: h,
+  onNewChat: d,
+  showNewChatButton: i = !1
+}) => {
+  const [p, u] = k(!1), o = s || "Hello there.", C = r || "How can we help?", L = () => {
+    i && u(!0);
+  }, V = () => {
+    u(!1), d == null || d();
+  }, N = () => {
+    u(!1);
+  };
+  return /* @__PURE__ */ l("div", { className: f.header, children: [
+    /* @__PURE__ */ e("div", { className: f.headerBackground }),
+    /* @__PURE__ */ l("div", { className: f.headerContent, children: [
+      /* @__PURE__ */ l("div", { className: f.topRow, children: [
+        /* @__PURE__ */ l("div", { className: f.agentInfo, children: [
+          t ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: t,
+              alt: n,
+              className: f.agentLogo
+            }
+          ) : /* @__PURE__ */ e("div", { className: f.agentLogoPlaceholder, children: /* @__PURE__ */ e(He, { className: f.brainbaseLogo }) }),
+          /* @__PURE__ */ e("span", { className: f.agentName, children: n })
+        ] }),
+        /* @__PURE__ */ l("div", { className: f.actions, children: [
+          i && d && /* @__PURE__ */ e(
+            "button",
+            {
+              className: f.actionButton,
+              onClick: L,
+              "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"
+                }
+              ) })
+            }
+          ),
+          h && /* @__PURE__ */ e(
+            "button",
+            {
+              className: f.actionButton,
+              onClick: h,
+              "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"
+                }
+              ) })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ l("div", { className: f.welcomeText, children: [
+        /* @__PURE__ */ e("h1", { className: f.title, children: o }),
+        /* @__PURE__ */ e("p", { className: f.subtitle, children: C })
+      ] })
+    ] }),
+    p && /* @__PURE__ */ e("div", { className: f.confirmationOverlay, children: /* @__PURE__ */ l("div", { className: f.confirmationDialog, children: [
+      /* @__PURE__ */ e("p", { className: f.confirmationText, children: "End current chat and start a new conversation?" }),
+      /* @__PURE__ */ l("div", { className: f.confirmationButtons, children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: f.cancelButton,
+            onClick: N,
+            type: "button",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: f.confirmButton,
+            onClick: V,
+            type: "button",
+            children: "End Chat"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}, Ve = "_messageWrapper_c86gj_1", De = "_user_c86gj_19", je = "_assistant_c86gj_24", Pe = "_avatar_c86gj_28", ze = "_avatarPlaceholder_c86gj_43", Ee = "_brainbaseLogo_c86gj_53", Ae = "_messageBubble_c86gj_58", We = "_error_c86gj_76", Ze = "_content_c86gj_81", Oe = "_cursor_c86gj_88", Fe = "_errorIndicator_c86gj_107", I = {
+  messageWrapper: Ve,
+  user: De,
+  assistant: je,
+  avatar: Pe,
+  avatarPlaceholder: ze,
+  brainbaseLogo: Ee,
+  messageBubble: Ae,
+  error: We,
+  content: Ze,
+  cursor: Oe,
+  errorIndicator: Fe
+}, Re = ({ className: n }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    className: n,
+    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: "white"
+        }
+      )
+    ]
+  }
+), Ue = ({
+  message: n,
+  agentName: t,
+  agentLogoUrl: s
+}) => {
+  const r = n.role === "user", h = n.status === "streaming", d = n.status === "error";
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `${I.messageWrapper} ${r ? I.user : I.assistant}`,
+      children: [
+        !r && /* @__PURE__ */ e("div", { className: I.avatar, children: s ? /* @__PURE__ */ e("img", { src: s, alt: t || "AI" }) : /* @__PURE__ */ e("div", { className: I.avatarPlaceholder, children: /* @__PURE__ */ e(Re, { className: I.brainbaseLogo }) }) }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: `${I.messageBubble} ${d ? I.error : ""}`,
+            role: "article",
+            "aria-label": `${r ? "Your message" : `${t || "AI"} says`}`,
+            children: [
+              /* @__PURE__ */ l("div", { className: I.content, children: [
+                n.content,
+                h && /* @__PURE__ */ e("span", { className: I.cursor })
+              ] }),
+              d && /* @__PURE__ */ l("div", { className: I.errorIndicator, children: [
+                /* @__PURE__ */ l("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" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, qe = "_toolCall_1wby1_1", Ke = "_iconWrapper_1wby1_24", Ge = "_spinner_1wby1_33", Je = "_checkIcon_1wby1_48", Ye = "_errorIcon_1wby1_54", Xe = "_content_1wby1_60", Qe = "_label_1wby1_66", et = "_name_1wby1_73", tt = "_pending_1wby1_78", nt = "_completed_1wby1_82", ot = "_error_1wby1_54", v = {
+  toolCall: qe,
+  iconWrapper: Ke,
+  spinner: Ge,
+  checkIcon: Je,
+  errorIcon: Ye,
+  content: Xe,
+  label: Qe,
+  name: et,
+  pending: tt,
+  completed: nt,
+  error: ot
+}, st = ({ toolCall: n }) => {
+  const t = n.status === "pending" || n.status === "executing", s = n.status === "completed", r = n.status === "error", h = (d) => d.replace(/_/g, " ").replace(/([A-Z])/g, " $1").trim().toLowerCase().replace(/^./, (i) => i.toUpperCase());
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: `${v.toolCall} ${t ? v.pending : ""} ${s ? v.completed : ""} ${r ? v.error : ""}`,
+      children: [
+        /* @__PURE__ */ e("div", { className: v.iconWrapper, children: t ? /* @__PURE__ */ e("div", { className: v.spinner }) : s ? /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: v.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: v.errorIcon, children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M6 18L18 6M6 6L18 18",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) }),
+        /* @__PURE__ */ l("div", { className: v.content, children: [
+          /* @__PURE__ */ e("span", { className: v.label, children: t ? "Running" : s ? "Completed" : "Failed" }),
+          /* @__PURE__ */ e("span", { className: v.name, children: h(n.name) })
+        ] })
+      ]
+    }
+  );
+}, rt = "_wrapper_10rss_2", at = "_avatar_10rss_22", it = "_avatarPlaceholder_10rss_37", ct = "_brainbaseLogo_10rss_47", lt = "_bubble_10rss_52", dt = "_dot_10rss_63", M = {
+  wrapper: rt,
+  avatar: at,
+  avatarPlaceholder: it,
+  brainbaseLogo: ct,
+  bubble: lt,
+  dot: dt
+}, ut = ({ className: n }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    className: n,
+    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: "white"
+        }
+      )
+    ]
+  }
+), mt = ({
+  agentName: n = "AI",
+  agentLogoUrl: t
+}) => /* @__PURE__ */ l("div", { className: M.wrapper, role: "status", "aria-label": `${n} is typing`, children: [
+  /* @__PURE__ */ e("div", { className: M.avatar, children: t ? /* @__PURE__ */ e("img", { src: t, alt: n }) : /* @__PURE__ */ e("div", { className: M.avatarPlaceholder, children: /* @__PURE__ */ e(ut, { className: M.brainbaseLogo }) }) }),
+  /* @__PURE__ */ l("div", { className: M.bubble, children: [
+    /* @__PURE__ */ e("span", { className: M.dot }),
+    /* @__PURE__ */ e("span", { className: M.dot }),
+    /* @__PURE__ */ e("span", { className: M.dot })
+  ] })
+] }), gt = "_messageList_241kk_1", ht = "_emptyState_241kk_29", pt = "_emptyIcon_241kk_40", _t = "_emptyText_241kk_52", F = {
+  messageList: gt,
+  emptyState: ht,
+  emptyIcon: pt,
+  emptyText: _t
+}, ft = ({
+  messages: n,
+  toolCalls: t,
+  isLoading: s,
+  agentName: r,
+  agentLogoUrl: h
+}) => {
+  var u;
+  const d = A(null), i = A(null);
+  W(() => {
+    var o;
+    (o = i.current) == null || o.scrollIntoView({ behavior: "smooth" });
+  }, [n, t, s]);
+  const p = t.filter(
+    (o) => o.status === "pending" || o.status === "executing"
+  );
+  return /* @__PURE__ */ l("div", { className: F.messageList, ref: d, role: "log", "aria-live": "polite", children: [
+    n.length === 0 && !s && /* @__PURE__ */ l("div", { className: F.emptyState, children: [
+      /* @__PURE__ */ e("div", { className: F.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: F.emptyText, children: "Start a conversation" })
+    ] }),
+    n.map((o) => /* @__PURE__ */ e(
+      Ue,
+      {
+        message: o,
+        agentName: r,
+        agentLogoUrl: h
+      },
+      o.id
+    )),
+    p.map((o) => /* @__PURE__ */ e(st, { toolCall: o }, o.id)),
+    s && ((u = n[n.length - 1]) == null ? void 0 : u.role) === "user" && /* @__PURE__ */ e(mt, { agentName: r, agentLogoUrl: h }),
+    /* @__PURE__ */ e("div", { ref: i })
+  ] });
+}, wt = "_inputWrapper_5lgg7_1", Ct = "_inputContainer_5lgg7_7", bt = "_textarea_5lgg7_23", yt = "_sendButton_5lgg7_50", It = "_hint_5lgg7_89", E = {
+  inputWrapper: wt,
+  inputContainer: Ct,
+  textarea: bt,
+  sendButton: yt,
+  hint: It
+}, vt = ({
+  onSend: n,
+  disabled: t = !1,
+  placeholder: s = "Send a message..."
+}) => {
+  const [r, h] = k(""), d = A(null), i = x(() => {
+    const o = d.current;
+    o && (o.style.height = "auto", o.style.height = `${Math.min(o.scrollHeight, 150)}px`);
+  }, []);
+  W(() => {
+    i();
+  }, [r, i]);
+  const p = x(
+    (o) => {
+      o == null || o.preventDefault();
+      const C = r.trim();
+      C && !t && (n(C), h(""), d.current && (d.current.style.height = "auto"));
+    },
+    [r, t, n]
+  ), u = x(
+    (o) => {
+      o.key === "Enter" && !o.shiftKey && (o.preventDefault(), p());
+    },
+    [p]
+  );
+  return /* @__PURE__ */ l("form", { className: E.inputWrapper, onSubmit: p, children: [
+    /* @__PURE__ */ l("div", { className: E.inputContainer, children: [
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: d,
+          className: E.textarea,
+          value: r,
+          onChange: (o) => h(o.target.value),
+          onKeyDown: u,
+          placeholder: s,
+          disabled: t,
+          rows: 1,
+          "aria-label": "Message input"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "submit",
+          className: E.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__ */ l("div", { className: E.hint, children: [
+      "Press ",
+      /* @__PURE__ */ e("kbd", { children: "Enter" }),
+      " to send, ",
+      /* @__PURE__ */ e("kbd", { children: "Shift + Enter" }),
+      " for new line"
+    ] })
+  ] });
+}, kt = "_poweredBy_9jh5q_1", Nt = "_logo_9jh5q_20", Lt = "_poweredText_9jh5q_24", xt = "_text_9jh5q_36", R = {
+  poweredBy: kt,
+  logo: Nt,
+  poweredText: Lt,
+  text: xt
+}, Bt = ({ className: n }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    className: n,
+    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)"
+        }
+      )
+    ]
+  }
+), $t = () => /* @__PURE__ */ l(
+  "a",
+  {
+    href: "https://brainbaselabs.com/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: R.poweredBy,
+    "aria-label": "Powered by Brainbase Labs",
+    children: [
+      /* @__PURE__ */ e("span", { className: R.poweredText, children: "Powered by" }),
+      /* @__PURE__ */ e(Bt, { className: R.logo }),
+      /* @__PURE__ */ e("span", { className: R.text, children: "Brainbase Labs" })
+    ]
+  }
+), Mt = "_container_14ilx_1", St = "_body_14ilx_25", te = {
+  container: Mt,
+  body: St
+}, Ht = ({
+  config: n,
+  messages: t,
+  toolCalls: s,
+  isLoading: r,
+  onSendMessage: h,
+  onClose: d,
+  onNewChat: i
+}) => {
+  const p = t.length > 0;
+  return /* @__PURE__ */ l("div", { className: te.container, role: "dialog", "aria-label": "Chat window", children: [
+    /* @__PURE__ */ e(
+      Te,
+      {
+        agentName: n.agentName,
+        agentLogoUrl: n.agentLogoUrl,
+        welcomeTitle: "Hello there.",
+        welcomeSubtitle: "How can we help?",
+        onClose: d,
+        onNewChat: i,
+        showNewChatButton: p
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: te.body, children: [
+      /* @__PURE__ */ e(
+        ft,
+        {
+          messages: t,
+          toolCalls: s,
+          isLoading: r,
+          agentName: n.agentName,
+          agentLogoUrl: n.agentLogoUrl
+        }
+      ),
+      /* @__PURE__ */ e(
+        vt,
+        {
+          onSend: h,
+          disabled: r,
+          placeholder: "Ask a question..."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e($t, {})
+  ] });
+}, Tt = "_toggleButton_11dqz_1", Vt = "_icon_11dqz_31", Dt = "_agentLogo_11dqz_36", jt = "_unreadBadge_11dqz_43", U = {
+  toggleButton: Tt,
+  icon: Vt,
+  agentLogo: Dt,
+  unreadBadge: jt
+}, Pt = ({
+  onClick: n,
+  agentLogoUrl: t,
+  unreadCount: s = 0
+}) => /* @__PURE__ */ l(
+  "button",
+  {
+    className: U.toggleButton,
+    onClick: n,
+    "aria-label": "Open chat",
+    type: "button",
+    children: [
+      t ? /* @__PURE__ */ e("img", { src: t, alt: "", className: U.agentLogo }) : /* @__PURE__ */ e(
+        "svg",
+        {
+          className: U.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: U.unreadBadge, children: s > 9 ? "9+" : s })
+    ]
+  }
+), zt = "_widget_1ehud_1", Et = "_inline_1ehud_25", ne = {
+  widget: zt,
+  "bottom-right": "_bottom-right_1ehud_10",
+  "bottom-left": "_bottom-left_1ehud_17",
+  inline: Et
+}, At = "https://whatsapp-based-server.onrender.com", Ot = ({
+  embedId: n,
+  apiBaseUrl: t = At,
+  mockMode: s = !1,
+  mockResponses: r,
+  position: h = "bottom-right",
+  defaultOpen: d = !1,
+  primaryColor: i,
+  agentName: p,
+  welcomeMessage: u,
+  className: o,
+  onSessionStart: C,
+  onSessionEnd: L,
+  onMessage: V,
+  onError: N
+}) => {
+  const [q, D] = k(d), [m, S] = k(null), [B, Z] = k(!0), [K, H] = k(null), T = J(() => s ? ue(
+    { primaryColor: i, agentName: p, welcomeMessage: u },
+    r
+  ) : ce(t), [s, i, p, u, r, t]);
+  W(() => {
+    let b = !0;
+    async function g() {
+      try {
+        const c = await T.getDeploymentConfig(n);
+        b && (S({
+          ...c,
+          // Allow prop overrides
+          primaryColor: i ?? c.primaryColor,
+          agentName: p ?? c.agentName,
+          welcomeMessage: u ?? c.welcomeMessage
+        }), H(null));
+      } catch (c) {
+        const a = c instanceof Error ? c : new Error("Failed to load config");
+        b && (H(a), s && S({
+          embedId: n,
+          deploymentId: "mock-deployment",
+          workerId: "mock-worker",
+          flowId: "mock-flow",
+          primaryColor: i ?? "#1a1a2e",
+          agentName: p ?? "AI Assistant"
+          // Note: welcomeMessage is handled by the engine
+        })), N == null || N(a);
+      } finally {
+        b && Z(!1);
+      }
+    }
+    return g(), () => {
+      b = !1;
+    };
+  }, [n, s, T, i, p, u, N]);
+  const O = J(() => m || {
+    embedId: n,
+    deploymentId: "",
+    workerId: "",
+    flowId: "",
+    primaryColor: i,
+    agentName: p,
+    welcomeMessage: u
+  }, [m, n, i, p, u]), $ = ae({
+    config: O,
+    apiClient: T,
+    mockMode: s,
+    onSessionStart: C,
+    onSessionEnd: L,
+    onMessage: V,
+    onError: N
+  }), G = J(
+    () => ({
+      "--bb-primary-color": (m == null ? void 0 : m.primaryColor) ?? i ?? "#1a1a2e"
+    }),
+    [m == null ? void 0 : m.primaryColor, i]
+  ), _ = () => {
+    $.endSession(), $.startNewSession();
+  };
+  if (B || K && !s)
+    return null;
+  const y = h === "inline";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${ne.widget} ${ne[h]} ${o ?? ""}`,
+      style: G,
+      children: q || y ? /* @__PURE__ */ e(
+        Ht,
+        {
+          config: O,
+          messages: $.messages,
+          toolCalls: $.toolCalls,
+          isLoading: $.isLoading,
+          onSendMessage: $.sendMessage,
+          onClose: y ? void 0 : () => D(!1),
+          onNewChat: _
+        }
+      ) : /* @__PURE__ */ e(
+        Pt,
+        {
+          onClick: () => D(!0),
+          agentName: m == null ? void 0 : m.agentName,
+          agentLogoUrl: m == null ? void 0 : m.agentLogoUrl
+        }
+      )
+    }
+  );
+};
+function Ft() {
+  if (typeof crypto < "u" && crypto.randomUUID)
+    return `bb-${crypto.randomUUID()}`;
+  const n = Date.now().toString(36), t = Math.random().toString(36).substring(2, 15), s = Math.random().toString(36).substring(2, 15);
+  return `bb-${n}-${t}${s}`;
+}
+export {
+  Ht as ChatContainer,
+  Te as ChatHeader,
+  Pt as ChatToggleButton,
+  Ot as ChatWidget,
+  Ue as Message,
+  vt as MessageInput,
+  ft as MessageList,
+  st as ToolCallDisplay,
+  mt as TypingIndicator,
+  ee as clearSession,
+  ce as createAPIClient,
+  ue as createMockAPIClient,
+  Ft as generateSessionId,
+  re as getStoredSession,
+  Q as storeSession,
+  ae as useChat
+};