@brainbase-labs/chat-widget 0.1.8 → 0.1.10

package/dist/index.js

@@ -1,26 +1,26 @@
-import { useState as I, useRef as R, useEffect as U, useCallback as M, useMemo as ee } from "react";
+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 te = "bb-chat-";
+const oe = "bb-chat-";
 function ie(o) {
   try {
-    const t = sessionStorage.getItem(`${te}${o}`);
+    const t = sessionStorage.getItem(`${oe}${o}`);
     return t ? JSON.parse(t) : null;
   } catch {
     return null;
   }
 }
-function ne(o, t) {
+function se(o, t) {
   try {
     sessionStorage.setItem(
-      `${te}${o}`,
+      `${oe}${o}`,
       JSON.stringify(t)
     );
   } catch {
   }
 }
-function se(o) {
+function re(o) {
   try {
-    sessionStorage.removeItem(`${te}${o}`);
+    sessionStorage.removeItem(`${oe}${o}`);
   } catch {
   }
 }
@@ -29,66 +29,66 @@ function le(o) {
     config: t,
     apiClient: s,
     mockMode: r,
-    onSessionStart: d,
-    onSessionEnd: u,
+    onSessionStart: u,
+    onSessionEnd: m,
     onMessage: c,
-    onError: m
-  } = o, [l, n] = I([]), [C, S] = I([]), [j, N] = I(!1), [q, P] = I(null), [g, H] = I(null), T = R(0), V = R(!1);
-  U(() => {
-    if (V.current) return;
-    V.current = !0;
-    const _ = ie(t.embedId);
-    _ && _.status === "active" && (H(_.sessionId), n(_.messages), S(_.toolCalls), T.current = _.startTime);
-  }, [t.embedId]), U(() => {
-    g && l.length > 0 && ne(t.embedId, {
-      sessionId: g,
+    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: T.current,
+      startTime: S.current,
       messages: l,
-      toolCalls: C,
+      toolCalls: b,
       status: "active"
     });
-  }, [g, l, C, t]);
-  const K = M(async () => (T.current = Date.now(), H(null), n([]), S([]), se(t.embedId), ""), [t.embedId]), $ = M(
-    (_, w, k) => {
-      switch (_.type) {
+  }, [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 p = _.data;
-          p.session_id && (k(p.session_id), p.is_new && (T.current = Date.now(), d == null || d(p.session_id)));
+          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 p = _.data;
-          p.content && n(
+          const d = p.data;
+          d.content && n(
             (h) => h.map(
-              (a) => a.id === w ? { ...a, content: p.content, status: "streaming" } : a
+              (a) => a.id === I ? { ...a, content: d.content, status: "streaming" } : a
             )
           );
           break;
         }
         case "tool_call": {
-          const p = _.data;
-          S((h) => {
+          const d = p.data;
+          M((h) => {
             const a = h.findIndex(
-              (f) => f.name === p.function && f.status === "pending"
+              (f) => f.name === d.function && f.status === "pending"
             );
-            return a !== -1 && p.result !== void 0 ? h.map(
-              (f, v) => v === a ? { ...f, result: p.result, status: "completed" } : f
+            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: p.function,
-                arguments: p.args ?? {},
+                name: d.function,
+                arguments: d.args ?? {},
                 status: "pending",
                 timestamp: Date.now()
               }
             ] : h;
-          }), p.content && n(
+          }), d.content && n(
             (h) => h.map(
-              (a) => a.id === w ? { ...a, content: p.content, status: "streaming" } : a
+              (a) => a.id === I ? { ...a, content: d.content, status: "streaming" } : a
             )
           );
           break;
@@ -97,33 +97,33 @@ function le(o) {
           break;
         case "done": {
           n(
-            (p) => p.map((h) => h.id === w ? { ...h, status: "sent" } : h)
+            (d) => d.map((h) => h.id === I ? { ...h, status: "sent" } : h)
           );
           break;
         }
         case "completed": {
           n(
-            (p) => p.map((h) => h.id === w ? { ...h, status: "sent" } : h)
-          ), g && ne(t.embedId, {
-            sessionId: g,
+            (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: T.current,
+            startTime: S.current,
             messages: l,
-            toolCalls: C,
+            toolCalls: b,
             status: "completed"
           });
           break;
         }
         case "error": {
-          const p = _.data;
+          const d = p.data;
           n(
             (h) => h.map(
-              (a) => a.id === w ? {
+              (a) => a.id === I ? {
                 ...a,
                 status: "error",
-                content: p.error ?? "An error occurred"
+                content: d.error ?? "An error occurred"
               } : a
             )
           );
@@ -131,130 +131,130 @@ function le(o) {
         }
       }
     },
-    [t, g, l, C, d]
-  ), G = M(
-    async (_, w, k) => {
-      const p = _.getReader(), h = new TextDecoder();
+    [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: v } = await p.read();
+          const { done: f, value: B } = await d.read();
           if (f) break;
-          for (a += h.decode(v, { stream: !0 }); a.includes(`
+          for (a += h.decode(B, { stream: !0 }); a.includes(`
 
 `); ) {
-            const [x, ae] = a.split(`
+            const [v, j] = a.split(`
 
 `, 2);
-            a = ae;
-            for (const oe of x.split(`
+            a = j;
+            for (const ne of v.split(`
 `))
-              if (oe.startsWith("data: "))
+              if (ne.startsWith("data: "))
                 try {
-                  const ce = JSON.parse(oe.slice(6));
-                  $(ce, w, k);
+                  const ce = JSON.parse(ne.slice(6));
+                  E(ce, I, w);
                 } catch {
                 }
           }
         }
       } finally {
-        p.releaseLock();
+        d.releaseLock();
       }
     },
-    [$]
-  ), J = M(
-    async (_) => {
-      if (!_.trim()) return;
-      const w = {
+    [E]
+  ), ee = x(
+    async (p) => {
+      if (!p.trim()) return;
+      const I = {
         id: `user-${Date.now()}`,
         role: "user",
-        content: _,
+        content: p,
         timestamp: Date.now(),
         status: "sent"
       };
-      n((a) => [...a, w]), c == null || c(w);
-      const k = `assistant-${Date.now()}`, p = {
-        id: k,
+      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, p]), N(!0), P(null);
+      n((a) => [...a, d]), H(!0), z(null);
       const h = (a) => {
-        H(a);
+        _(a);
       };
       try {
         if (r) {
-          const a = s.sendMessage(_);
+          const a = s.sendMessage(p);
           for await (const f of a)
-            $(f, k, h);
+            E(f, w, h);
         } else {
           const a = await s.sendMessage({
             embedId: t.embedId,
-            message: _,
-            sessionId: g ?? void 0
+            message: p,
+            sessionId: y ?? void 0
           });
-          await G(a, k, h);
+          await T(a, w, h);
         }
         n(
           (a) => a.map(
-            (f) => f.id === k && f.status === "streaming" ? { ...f, status: "sent" } : f
+            (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");
-        P(f), m == null || m(f), n(
-          (v) => v.map(
-            (x) => x.id === k ? { ...x, status: "error", content: "Failed to get response" } : x
+        z(f), g == null || g(f), n(
+          (B) => B.map(
+            (v) => v.id === w ? { ...v, status: "error", content: "Failed to get response" } : v
           )
         );
       } finally {
-        N(!1);
+        H(!1);
       }
     },
     [
-      g,
+      y,
       s,
       r,
       t.embedId,
-      $,
-      G,
+      E,
+      T,
       c,
-      m
+      g
     ]
-  ), A = M(async () => {
-    if (!g) return;
-    const _ = {
-      sessionId: g,
+  ), J = x(async () => {
+    if (!y) return;
+    const p = {
+      sessionId: y,
       deploymentId: t.deploymentId,
       workerId: t.workerId,
       flowId: t.flowId,
-      startTime: T.current,
+      startTime: S.current,
       messages: l,
-      toolCalls: C,
+      toolCalls: b,
       status: "completed"
     };
-    u == null || u(_), se(t.embedId), H(null), n([]), S([]);
+    m == null || m(p), re(t.embedId), _(null), n([]), M([]);
   }, [
-    g,
+    y,
     t,
     l,
-    C,
-    u
-  ]), z = M(() => {
-    n([]), S([]);
+    b,
+    m
+  ]), F = x(() => {
+    n([]), M([]);
   }, []);
   return {
     messages: l,
-    toolCalls: C,
-    isLoading: j,
-    error: q,
-    sessionId: g,
-    sendMessage: J,
-    endSession: A,
-    clearMessages: z,
-    startNewSession: K
+    toolCalls: b,
+    isLoading: A,
+    error: P,
+    sessionId: y,
+    sendMessage: ee,
+    endSession: J,
+    clearMessages: F,
+    startNewSession: G
   };
 }
 const de = "https://whatsapp-based-server.onrender.com";
@@ -356,25 +356,25 @@ const me = {
     delay: 1e3
   }
 ];
-function F(o) {
+function O(o) {
   return new Promise((t) => setTimeout(t, o));
 }
 function pe(o, t) {
-  const s = { ...me, ...o }, r = t ?? ge, d = `mock-session-${Date.now()}`;
+  const s = { ...me, ...o }, r = t ?? ge, u = `mock-session-${Date.now()}`;
   return {
-    async getDeploymentConfig(u) {
-      return await F(300), s;
+    async getDeploymentConfig(m) {
+      return await O(300), s;
     },
-    async *sendMessage(u) {
+    async *sendMessage(m) {
       yield {
         type: "session",
-        data: { session_id: d, is_new: !0 },
+        data: { session_id: u, is_new: !0 },
         timestamp: Date.now()
       };
       const c = r.find(
-        (n) => typeof n.trigger == "string" ? u.toLowerCase().includes(n.trigger.toLowerCase()) : n.trigger.test(u)
+        (n) => typeof n.trigger == "string" ? m.toLowerCase().includes(n.trigger.toLowerCase()) : n.trigger.test(m)
       ) ?? r[r.length - 1];
-      if (await F(c.delay ?? 500), c.toolCalls)
+      if (await O(c.delay ?? 500), c.toolCalls)
         for (const n of c.toolCalls)
           yield {
             type: "tool_call",
@@ -383,31 +383,31 @@ function pe(o, t) {
               args: n.arguments
             },
             timestamp: Date.now()
-          }, await F(300), yield {
+          }, await O(300), yield {
             type: "tool_call",
             data: {
               function: n.name,
               result: n.result
             },
             timestamp: Date.now()
-          }, await F(200);
-      const m = c.response.split(" ");
+          }, await O(200);
+      const g = c.response.split(" ");
       let l = "";
-      for (const n of m)
+      for (const n of g)
         l += (l ? " " : "") + n, yield {
           type: "message",
           data: { content: l, role: "assistant" },
           timestamp: Date.now()
-        }, await F(30 + Math.random() * 40);
+        }, await O(30 + Math.random() * 40);
       yield {
         type: "done",
-        data: { session_id: d },
+        data: { session_id: u },
         timestamp: Date.now()
       };
     }
   };
 }
-const Z = ({
+const q = ({
   className: o,
   color: t = "currentColor",
   cutoutColor: s = "var(--bb-primary-color)"
@@ -463,61 +463,61 @@ const Z = ({
       )
     ]
   }
-), he = "_header_1p6z5_1", _e = "_compact_1p6z5_9", fe = "_headerBackground_1p6z5_20", we = "_headerContent_1p6z5_59", be = "_topRow_1p6z5_64", ye = "_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", Be = "_welcomeText_1p6z5_183", $e = "_title_1p6z5_202", xe = "_subtitle_1p6z5_210", b = {
+), 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: we,
-  topRow: be,
-  agentInfo: ye,
+  headerContent: be,
+  topRow: ye,
+  agentInfo: we,
   agentLogo: Ce,
   agentLogoPlaceholder: ke,
   brainbaseLogo: ve,
   agentName: Ie,
   actions: Ne,
   actionButton: Le,
-  welcomeText: Be,
-  title: $e,
+  welcomeText: $e,
+  title: Be,
   subtitle: xe
 }, Me = ({
   agentName: o = "AI Assistant",
   agentLogoUrl: t,
   welcomeTitle: s,
   welcomeSubtitle: r,
-  onClose: d,
-  onNewChatRequest: u,
+  onClose: u,
+  onNewChatRequest: m,
   showNewChatButton: c = !1,
-  compact: m = !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: `${b.header} ${m ? b.compact : ""}`, children: [
-    /* @__PURE__ */ e("div", { className: b.headerBackground }),
-    /* @__PURE__ */ i("div", { className: b.headerContent, children: [
-      /* @__PURE__ */ i("div", { className: b.topRow, children: [
-        /* @__PURE__ */ i("div", { className: b.agentInfo, children: [
+  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: b.agentLogo
+              className: C.agentLogo
             }
-          ) : /* @__PURE__ */ e("div", { className: b.agentLogoPlaceholder, children: /* @__PURE__ */ e(
-            Z,
+          ) : /* @__PURE__ */ e("div", { className: C.agentLogoPlaceholder, children: /* @__PURE__ */ e(
+            q,
             {
-              className: b.brainbaseLogo,
+              className: C.brainbaseLogo,
               color: "white",
               cutoutColor: "var(--bb-primary-color)"
             }
           ) }),
-          /* @__PURE__ */ e("span", { className: b.agentName, children: o })
+          /* @__PURE__ */ e("span", { className: C.agentName, children: o })
         ] }),
-        /* @__PURE__ */ i("div", { className: b.actions, children: [
-          c && u && /* @__PURE__ */ e(
+        /* @__PURE__ */ i("div", { className: C.actions, children: [
+          c && m && /* @__PURE__ */ e(
             "button",
             {
-              className: b.actionButton,
-              onClick: u,
+              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(
@@ -532,11 +532,11 @@ const Z = ({
               ) })
             }
           ),
-          d && /* @__PURE__ */ e(
+          u && /* @__PURE__ */ e(
             "button",
             {
-              className: b.actionButton,
-              onClick: d,
+              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(
@@ -553,9 +553,9 @@ const Z = ({
           )
         ] })
       ] }),
-      !m && /* @__PURE__ */ i("div", { className: b.welcomeText, children: [
-        /* @__PURE__ */ e("h1", { className: b.title, children: l }),
-        n && /* @__PURE__ */ e("p", { className: b.subtitle, children: n })
+      !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 })
       ] })
     ] })
   ] });
@@ -576,14 +576,14 @@ const Z = ({
   agentName: t,
   agentLogoUrl: s
 }) => {
-  const r = o.role === "user", d = o.status === "streaming", u = o.status === "error";
+  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(
-          Z,
+          q,
           {
             className: L.brainbaseLogo,
             color: "white",
@@ -593,15 +593,15 @@ const Z = ({
         /* @__PURE__ */ i(
           "div",
           {
-            className: `${L.messageBubble} ${u ? L.error : ""}`,
+            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,
-                d && /* @__PURE__ */ e("span", { className: L.cursor })
+                u && /* @__PURE__ */ e("span", { className: L.cursor })
               ] }),
-              u && /* @__PURE__ */ i("div", { className: L.errorIndicator, children: [
+              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" })
@@ -614,7 +614,7 @@ const Z = ({
       ]
     }
   );
-}, 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", B = {
+}, 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,
@@ -627,13 +627,13 @@ const Z = ({
   completed: Xe,
   error: Qe
 }, et = ({ toolCall: o }) => {
-  const t = o.status === "pending" || o.status === "executing", s = o.status === "completed", r = o.status === "error", d = (u) => u.replace(/_/g, " ").replace(/([A-Z])/g, " $1").trim().toLowerCase().replace(/^./, (c) => c.toUpperCase());
+  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: `${B.toolCall} ${t ? B.pending : ""} ${s ? B.completed : ""} ${r ? B.error : ""}`,
+      className: `${$.toolCall} ${t ? $.pending : ""} ${s ? $.completed : ""} ${r ? $.error : ""}`,
       children: [
-        /* @__PURE__ */ e("div", { className: B.iconWrapper, children: t ? /* @__PURE__ */ e("div", { className: B.spinner }) : s ? /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: B.checkIcon, children: /* @__PURE__ */ e(
+        /* @__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",
@@ -642,7 +642,7 @@ const Z = ({
             strokeLinecap: "round",
             strokeLinejoin: "round"
           }
-        ) }) : /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: B.errorIcon, children: /* @__PURE__ */ e(
+        ) }) : /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: $.errorIcon, children: /* @__PURE__ */ e(
           "path",
           {
             d: "M6 18L18 6M6 6L18 18",
@@ -652,9 +652,9 @@ const Z = ({
             strokeLinejoin: "round"
           }
         ) }) }),
-        /* @__PURE__ */ i("div", { className: B.content, children: [
-          /* @__PURE__ */ e("span", { className: B.label, children: t ? "Running" : s ? "Completed" : "Failed" }),
-          /* @__PURE__ */ e("span", { className: B.name, children: d(o.name) })
+        /* @__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) })
         ] })
       ]
     }
@@ -671,7 +671,7 @@ const Z = ({
   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(
-    Z,
+    q,
     {
       className: W.brainbaseLogo,
       color: "white",
@@ -693,18 +693,18 @@ const Z = ({
   toolCalls: t,
   isLoading: s,
   agentName: r,
-  agentLogoUrl: d
+  agentLogoUrl: u
 }) => {
   var l;
-  const u = R(null), c = R(null);
-  U(() => {
+  const m = U(null), c = U(null);
+  Z(() => {
     var n;
     (n = c.current) == null || n.scrollIntoView({ behavior: "smooth" });
   }, [o, t, s]);
-  const m = t.filter(
+  const g = t.filter(
     (n) => n.status === "pending" || n.status === "executing"
   );
-  return /* @__PURE__ */ i("div", { className: Y.messageList, ref: u, role: "log", "aria-live": "polite", children: [
+  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",
@@ -723,54 +723,54 @@ const Z = ({
       {
         message: n,
         agentName: r,
-        agentLogoUrl: d
+        agentLogoUrl: u
       },
       n.id
     )),
-    m.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: d }),
+    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", O = {
+}, 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
-}, wt = ({
+}, bt = ({
   onSend: o,
   disabled: t = !1,
   placeholder: s = "Send a message..."
 }) => {
-  const [r, d] = I(""), u = R(null), c = M(() => {
-    const n = u.current;
+  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`);
   }, []);
-  U(() => {
+  Z(() => {
     c();
   }, [r, c]);
-  const m = M(
+  const g = x(
     (n) => {
       n == null || n.preventDefault();
-      const C = r.trim();
-      C && !t && (o(C), d(""), u.current && (u.current.style.height = "auto"));
+      const b = r.trim();
+      b && !t && (o(b), u(""), m.current && (m.current.style.height = "auto"));
     },
     [r, t, o]
-  ), l = M(
+  ), l = x(
     (n) => {
-      n.key === "Enter" && !n.shiftKey && (n.preventDefault(), m());
+      n.key === "Enter" && !n.shiftKey && (n.preventDefault(), g());
     },
-    [m]
+    [g]
   );
-  return /* @__PURE__ */ i("form", { className: O.inputWrapper, onSubmit: m, children: [
-    /* @__PURE__ */ i("div", { className: O.inputContainer, children: [
+  return /* @__PURE__ */ i("form", { className: R.inputWrapper, onSubmit: g, children: [
+    /* @__PURE__ */ i("div", { className: R.inputContainer, children: [
       /* @__PURE__ */ e(
         "textarea",
         {
-          ref: u,
-          className: O.textarea,
+          ref: m,
+          className: R.textarea,
           value: r,
-          onChange: (n) => d(n.target.value),
+          onChange: (n) => u(n.target.value),
           onKeyDown: l,
           placeholder: s,
           disabled: t,
@@ -782,7 +782,7 @@ const Z = ({
         "button",
         {
           type: "submit",
-          className: O.sendButton,
+          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(
@@ -798,7 +798,7 @@ const Z = ({
         }
       )
     ] }),
-    /* @__PURE__ */ i("div", { className: O.hint, children: [
+    /* @__PURE__ */ i("div", { className: R.hint, children: [
       "Press ",
       /* @__PURE__ */ e("kbd", { children: "Enter" }),
       " to send, ",
@@ -806,9 +806,9 @@ const Z = ({
       " for new line"
     ] })
   ] });
-}, bt = "_poweredBy_9jh5q_1", yt = "_logo_9jh5q_20", Ct = "_poweredText_9jh5q_24", kt = "_text_9jh5q_36", X = {
-  poweredBy: bt,
-  logo: yt,
+}, 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(
@@ -877,11 +877,11 @@ const Z = ({
       /* @__PURE__ */ e("span", { className: X.text, children: "Brainbase Labs" })
     ]
   }
-) : null, Nt = "_container_m2o9l_1", Lt = "_body_m2o9l_26", Bt = "_confirmationOverlay_m2o9l_35", $t = "_confirmationDialog_m2o9l_56", xt = "_confirmationText_m2o9l_78", Mt = "_confirmationButtons_m2o9l_86", St = "_cancelButton_m2o9l_91", Tt = "_confirmButton_m2o9l_92", D = {
+) : 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: Bt,
-  confirmationDialog: $t,
+  confirmationOverlay: $t,
+  confirmationDialog: Bt,
   confirmationText: xt,
   confirmationButtons: Mt,
   cancelButton: St,
@@ -891,16 +891,16 @@ const Z = ({
   messages: t,
   toolCalls: s,
   isLoading: r,
-  onSendMessage: d,
-  onClose: u,
+  onSendMessage: u,
+  onClose: m,
   onNewChat: c
 }) => {
-  var N;
-  const [m, l] = I(!1), n = t.length > 0, C = () => {
+  var H;
+  const [g, l] = N(!1), n = t.length > 0, b = () => {
     l(!0);
-  }, S = () => {
+  }, M = () => {
     l(!1), c == null || c();
-  }, j = () => {
+  }, A = () => {
     l(!1);
   };
   return /* @__PURE__ */ i("div", { className: D.container, role: "dialog", "aria-label": "Chat window", children: [
@@ -911,8 +911,8 @@ const Z = ({
         agentLogoUrl: o.agentLogoUrl,
         welcomeTitle: o.welcomeMessage || "Hello there.",
         welcomeSubtitle: o.welcomeMessage ? void 0 : "How can we help?",
-        onClose: u,
-        onNewChatRequest: C,
+        onClose: m,
+        onNewChatRequest: b,
         showNewChatButton: n,
         compact: n
       }
@@ -929,23 +929,23 @@ const Z = ({
         }
       ),
       /* @__PURE__ */ e(
-        wt,
+        bt,
         {
-          onSend: d,
+          onSend: u,
           disabled: r,
           placeholder: "Ask a question..."
         }
       )
     ] }),
-    /* @__PURE__ */ e(It, { showBranding: ((N = o.styling) == null ? void 0 : N.showBranding) ?? !0 }),
-    m && /* @__PURE__ */ e("div", { className: D.confirmationOverlay, children: /* @__PURE__ */ i("div", { className: D.confirmationDialog, children: [
+    /* @__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: j,
+            onClick: A,
             type: "button",
             children: "Cancel"
           }
@@ -954,7 +954,7 @@ const Z = ({
           "button",
           {
             className: D.confirmButton,
-            onClick: S,
+            onClick: M,
             type: "button",
             children: "End Chat"
           }
@@ -967,7 +967,7 @@ const Z = ({
   icon: Ht,
   agentLogo: Pt,
   unreadBadge: Et
-}, re = ({
+}, ae = ({
   onClick: o,
   agentLogoUrl: t,
   unreadCount: s = 0
@@ -1001,7 +1001,7 @@ const Z = ({
       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", y = {
+), 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,
@@ -1022,13 +1022,13 @@ const Z = ({
   onRetry: s,
   onClose: r
 }) => {
-  const d = () => {
+  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: y.errorIcon, children: [
+          icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: k.errorIcon, children: [
             /* @__PURE__ */ e(
               "circle",
               {
@@ -1054,7 +1054,7 @@ const Z = ({
         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: y.errorIcon, children: [
+          icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: k.errorIcon, children: [
             /* @__PURE__ */ e(
               "path",
               {
@@ -1078,7 +1078,7 @@ const Z = ({
         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: y.errorIcon, children: /* @__PURE__ */ e(
+          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",
@@ -1089,13 +1089,13 @@ const Z = ({
           ) })
         };
     }
-  }, { title: u, description: c, icon: m } = d();
-  return /* @__PURE__ */ i("div", { className: y.container, children: [
-    /* @__PURE__ */ i("div", { className: y.header, children: [
-      /* @__PURE__ */ e("div", { className: y.logoWrapper, children: /* @__PURE__ */ e(
-        Z,
+  }, { 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: y.logo,
+          className: k.logo,
           color: "white",
           cutoutColor: "var(--bb-primary-color)"
         }
@@ -1103,7 +1103,7 @@ const Z = ({
       r && /* @__PURE__ */ e(
         "button",
         {
-          className: y.closeButton,
+          className: k.closeButton,
           onClick: r,
           "aria-label": "Close",
           type: "button",
@@ -1119,26 +1119,26 @@ const Z = ({
         }
       )
     ] }),
-    /* @__PURE__ */ i("div", { className: y.content, children: [
-      /* @__PURE__ */ e("div", { className: y.iconWrapper, children: m }),
-      /* @__PURE__ */ e("h2", { className: y.title, children: u }),
-      /* @__PURE__ */ e("p", { className: y.description, children: c }),
-      s && /* @__PURE__ */ e("button", { className: y.retryButton, onClick: s, type: "button", children: "Try Again" })
+    /* @__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: y.footer, children: /* @__PURE__ */ i(
+    /* @__PURE__ */ e("div", { className: k.footer, children: /* @__PURE__ */ i(
       "a",
       {
         href: "https://brainbaselabs.com",
         target: "_blank",
         rel: "noopener noreferrer",
-        className: y.poweredBy,
+        className: k.poweredBy,
         children: [
           "Powered by",
           " ",
           /* @__PURE__ */ e(
-            Z,
+            q,
             {
-              className: y.footerLogo,
+              className: k.footerLogo,
               color: "var(--bb-text-tertiary)",
               cutoutColor: "var(--bb-surface-bg)"
             }
@@ -1148,7 +1148,7 @@ const Z = ({
       }
     ) })
   ] });
-}, Qt = "_widget_1ehud_1", eo = "_inline_1ehud_25", E = {
+}, Qt = "_widget_1ehud_1", eo = "_inline_1ehud_25", V = {
   widget: Qt,
   "bottom-right": "_bottom-right_1ehud_10",
   "bottom-left": "_bottom-left_1ehud_17",
@@ -1158,126 +1158,135 @@ const Z = ({
   apiBaseUrl: t = to,
   mockMode: s = !1,
   mockResponses: r,
-  position: d = "bottom-right",
-  defaultOpen: u = !1,
+  position: u = "bottom-right",
+  defaultOpen: m = !1,
   primaryColor: c,
-  agentName: m,
+  agentName: g,
   welcomeMessage: l,
-  className: n,
-  onSessionStart: C,
-  onSessionEnd: S,
-  onMessage: j,
-  onError: N
+  showBranding: n,
+  className: b,
+  onSessionStart: M,
+  onSessionEnd: A,
+  onMessage: H,
+  onError: P
 }) => {
-  const [q, P] = I(u), [g, H] = I(null), [T, V] = I(!0), [K, $] = I(null), [G, J] = I(), A = ee(() => s ? pe(
-    { primaryColor: c, agentName: m, welcomeMessage: l },
+  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, m, l, r, t]), z = M(async () => {
-    V(!0), $(null), J(void 0);
+  ) : ue(t), [s, c, g, l, r, t]), p = x(async () => {
+    G(!0), T(null), J(void 0);
     try {
-      const v = await A.getDeploymentConfig(o);
-      H({
+      const v = await F.getDeploymentConfig(o);
+      S({
         ...v,
         // Allow prop overrides
         primaryColor: c ?? v.primaryColor,
-        agentName: m ?? v.agentName,
-        welcomeMessage: l ?? v.welcomeMessage
+        agentName: g ?? v.agentName,
+        welcomeMessage: l ?? v.welcomeMessage,
+        styling: {
+          ...v.styling ?? {},
+          ...n !== void 0 ? { showBranding: n } : {}
+        }
       });
     } catch (v) {
-      const x = v instanceof Error ? v : new Error("Failed to load config");
-      x.message.includes("404") ? ($("not_found"), J("The chat widget with this embed ID was not found.")) : x.message.includes("Failed to fetch") || x.message.includes("network") ? $("network") : $("unknown"), s && (H({
+      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: m ?? "AI Assistant"
-      }), $(null)), N == null || N(x);
+        agentName: g ?? "AI Assistant",
+        styling: n !== void 0 ? { showBranding: n } : void 0
+      }), T(null)), P == null || P(j);
     } finally {
-      V(!1);
+      G(!1);
     }
-  }, [o, s, A, c, m, l, N]);
-  U(() => {
-    z();
-  }, [z]);
-  const _ = ee(() => g || {
+  }, [o, s, F, c, g, l, P]);
+  Z(() => {
+    p();
+  }, [p]);
+  const I = te(() => _ || {
     embedId: o,
     deploymentId: "",
     workerId: "",
     flowId: "",
     primaryColor: c,
-    agentName: m,
-    welcomeMessage: l
-  }, [g, o, c, m, l]), w = le({
-    config: _,
-    apiClient: A,
+    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: C,
-    onSessionEnd: S,
-    onMessage: j,
-    onError: N
-  }), k = ee(
+    onSessionStart: M,
+    onSessionEnd: A,
+    onMessage: H,
+    onError: P
+  }), d = te(
     () => ({
-      "--bb-primary-color": (g == null ? void 0 : g.primaryColor) ?? c ?? "#1a1a2e"
+      "--bb-primary-color": (_ == null ? void 0 : _.primaryColor) ?? c ?? "#1a1a2e"
     }),
-    [g == null ? void 0 : g.primaryColor, c]
-  ), p = () => {
+    [_ == null ? void 0 : _.primaryColor, c]
+  ), h = () => {
     w.endSession(), w.startNewSession();
-  }, h = () => {
-    P(!1);
   }, a = () => {
-    z();
-  }, f = d === "inline";
-  return T ? null : K && !s ? !f && !q ? /* @__PURE__ */ e(
+    y(!1);
+  }, f = () => {
+    p();
+  }, B = u === "inline";
+  return K ? null : E && !s ? !B && !z ? /* @__PURE__ */ e(
     "div",
     {
-      className: `${E.widget} ${E[d]} ${n ?? ""}`,
-      style: k,
+      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      style: d,
       children: /* @__PURE__ */ e(
-        re,
+        ae,
         {
-          onClick: () => P(!0),
-          agentName: m
+          onClick: () => y(!0),
+          agentName: g
         }
       )
     }
   ) : /* @__PURE__ */ e(
     "div",
     {
-      className: `${E.widget} ${E[d]} ${n ?? ""}`,
-      style: k,
+      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      style: d,
       children: /* @__PURE__ */ e(
         Xt,
         {
-          errorType: K,
-          message: G,
-          onRetry: a,
-          onClose: f ? void 0 : h
+          errorType: E,
+          message: ee,
+          onRetry: f,
+          onClose: B ? void 0 : a
         }
       )
     }
   ) : /* @__PURE__ */ e(
     "div",
     {
-      className: `${E.widget} ${E[d]} ${n ?? ""}`,
-      style: k,
-      children: q || f ? /* @__PURE__ */ e(
+      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      style: d,
+      children: z || B ? /* @__PURE__ */ e(
         Wt,
         {
-          config: _,
+          config: I,
           messages: w.messages,
           toolCalls: w.toolCalls,
           isLoading: w.isLoading,
           onSendMessage: w.sendMessage,
-          onClose: f ? void 0 : h,
-          onNewChat: p
+          onClose: B ? void 0 : a,
+          onNewChat: h
         }
       ) : /* @__PURE__ */ e(
-        re,
+        ae,
         {
-          onClick: () => P(!0),
-          agentName: g == null ? void 0 : g.agentName,
-          agentLogoUrl: g == null ? void 0 : g.agentLogoUrl
+          onClick: () => y(!0),
+          agentName: _ == null ? void 0 : _.agentName,
+          agentLogoUrl: _ == null ? void 0 : _.agentLogoUrl
         }
       )
     }
@@ -1292,18 +1301,18 @@ function ro() {
 export {
   Wt as ChatContainer,
   Me as ChatHeader,
-  re as ChatToggleButton,
+  ae as ChatToggleButton,
   so as ChatWidget,
   Fe as Message,
-  wt as MessageInput,
+  bt as MessageInput,
   mt as MessageList,
   et as ToolCallDisplay,
   ct as TypingIndicator,
-  se as clearSession,
+  re as clearSession,
   ue as createAPIClient,
   pe as createMockAPIClient,
   ro as generateSessionId,
   ie as getStoredSession,
-  ne as storeSession,
+  se as storeSession,
   le as useChat
 };