@brainbase-labs/chat-widget 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,94 +1,94 @@
-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) {
+import { useState as I, useRef as R, useEffect as U, useCallback as x, useMemo as ee } from "react";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+const te = "bb-chat-";
+function ie(o) {
   try {
-    const t = sessionStorage.getItem(`${Y}${n}`);
+    const t = sessionStorage.getItem(`${te}${o}`);
     return t ? JSON.parse(t) : null;
   } catch {
     return null;
   }
 }
-function Q(n, t) {
+function ne(o, t) {
   try {
     sessionStorage.setItem(
-      `${Y}${n}`,
+      `${te}${o}`,
       JSON.stringify(t)
     );
   } catch {
   }
 }
-function ee(n) {
+function se(o) {
   try {
-    sessionStorage.removeItem(`${Y}${n}`);
+    sessionStorage.removeItem(`${te}${o}`);
   } catch {
   }
 }
-function ae(n) {
+function le(o) {
   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,
+    onSessionStart: d,
+    onSessionEnd: u,
+    onMessage: c,
+    onError: m
+  } = o, [l, n] = I([]), [C, M] = I([]), [j, S] = 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), M(_.toolCalls), T.current = _.startTime);
+  }, [t.embedId]), U(() => {
+    g && l.length > 0 && ne(t.embedId, {
+      sessionId: g,
       deploymentId: t.deploymentId,
       workerId: t.workerId,
       flowId: t.flowId,
-      startTime: B.current,
-      messages: u,
+      startTime: T.current,
+      messages: l,
       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) => {
+  }, [g, l, C, t]);
+  const K = x(async () => (T.current = Date.now(), H(null), n([]), M([]), se(t.embedId), ""), [t.embedId]), B = x(
+    (_, b, k) => {
       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)));
+          const p = _.data;
+          p.session_id && (k(p.session_id), p.is_new && (T.current = Date.now(), d == null || d(p.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
+          const p = _.data;
+          p.content && n(
+            (h) => h.map(
+              (a) => a.id === b ? { ...a, content: p.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"
+          const p = _.data;
+          M((h) => {
+            const a = h.findIndex(
+              (f) => f.name === p.function && f.status === "pending"
             );
-            return a !== -1 && g.result !== void 0 ? c.map(
-              (w, j) => j === a ? { ...w, result: g.result, status: "completed" } : w
+            return a !== -1 && p.result !== void 0 ? h.map(
+              (f, v) => v === a ? { ...f, result: p.result, status: "completed" } : f
             ) : a === -1 ? [
-              ...c,
+              ...h,
               {
                 id: `tc-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-                name: g.function,
-                arguments: g.args ?? {},
+                name: p.function,
+                arguments: p.args ?? {},
                 status: "pending",
                 timestamp: Date.now()
               }
-            ] : c;
-          }), g.content && o(
-            (c) => c.map(
-              (a) => a.id === y ? { ...a, content: g.content, status: "streaming" } : a
+            ] : h;
+          }), p.content && n(
+            (h) => h.map(
+              (a) => a.id === b ? { ...a, content: p.content, status: "streaming" } : a
             )
           );
           break;
@@ -96,34 +96,34 @@ function ae(n) {
         case "waiting":
           break;
         case "done": {
-          o(
-            (g) => g.map((c) => c.id === y ? { ...c, status: "sent" } : c)
+          n(
+            (p) => p.map((h) => h.id === b ? { ...h, status: "sent" } : h)
           );
           break;
         }
         case "completed": {
-          o(
-            (g) => g.map((c) => c.id === y ? { ...c, status: "sent" } : c)
-          ), m && Q(t.embedId, {
-            sessionId: m,
+          n(
+            (p) => p.map((h) => h.id === b ? { ...h, status: "sent" } : h)
+          ), g && ne(t.embedId, {
+            sessionId: g,
             deploymentId: t.deploymentId,
             workerId: t.workerId,
             flowId: t.flowId,
-            startTime: B.current,
-            messages: u,
+            startTime: T.current,
+            messages: l,
             toolCalls: C,
             status: "completed"
           });
           break;
         }
         case "error": {
-          const g = _.data;
-          o(
-            (c) => c.map(
-              (a) => a.id === y ? {
+          const p = _.data;
+          n(
+            (h) => h.map(
+              (a) => a.id === b ? {
                 ...a,
                 status: "error",
-                content: g.error ?? "An error occurred"
+                content: p.error ?? "An error occurred"
               } : a
             )
           );
@@ -131,137 +131,137 @@ function ae(n) {
         }
       }
     },
-    [t, m, u, C, h]
-  ), T = x(
-    async (_, y, b) => {
-      const g = _.getReader(), c = new TextDecoder();
+    [t, g, l, C, d]
+  ), G = x(
+    async (_, b, k) => {
+      const p = _.getReader(), h = 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 { done: f, value: v } = await p.read();
+          if (f) break;
+          for (a += h.decode(v, { stream: !0 }); a.includes(`
 
 `); ) {
-            const [P, oe] = a.split(`
+            const [$, ae] = a.split(`
 
 `, 2);
-            a = oe;
-            for (const X of P.split(`
+            a = ae;
+            for (const oe of $.split(`
 `))
-              if (X.startsWith("data: "))
+              if (oe.startsWith("data: "))
                 try {
-                  const se = JSON.parse(X.slice(6));
-                  H(se, y, b);
+                  const ce = JSON.parse(oe.slice(6));
+                  B(ce, b, k);
                 } catch {
                 }
           }
         }
       } finally {
-        g.releaseLock();
+        p.releaseLock();
       }
     },
-    [H]
-  ), O = x(
+    [B]
+  ), J = x(
     async (_) => {
       if (!_.trim()) return;
-      const y = {
+      const b = {
         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,
+      n((a) => [...a, b]), c == null || c(b);
+      const k = `assistant-${Date.now()}`, p = {
+        id: k,
         role: "assistant",
         content: "",
         timestamp: Date.now(),
         status: "streaming"
       };
-      o((a) => [...a, g]), N(!0), D(null);
-      const c = (a) => {
-        S(a);
+      n((a) => [...a, p]), S(!0), P(null);
+      const h = (a) => {
+        H(a);
       };
       try {
         if (r) {
           const a = s.sendMessage(_);
-          for await (const w of a)
-            H(w, b, c);
+          for await (const f of a)
+            B(f, k, h);
         } else {
           const a = await s.sendMessage({
             embedId: t.embedId,
             message: _,
-            sessionId: m ?? void 0
+            sessionId: g ?? void 0
           });
-          await T(a, b, c);
+          await G(a, k, h);
         }
-        o(
+        n(
           (a) => a.map(
-            (w) => w.id === b && w.status === "streaming" ? { ...w, status: "sent" } : w
+            (f) => f.id === k && f.status === "streaming" ? { ...f, status: "sent" } : f
           )
         );
       } 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
+        const f = a instanceof Error ? a : new Error("Failed to send message");
+        P(f), m == null || m(f), n(
+          (v) => v.map(
+            ($) => $.id === k ? { ...$, status: "error", content: "Failed to get response" } : $
           )
         );
       } finally {
-        N(!1);
+        S(!1);
       }
     },
     [
-      m,
+      g,
       s,
       r,
       t.embedId,
-      H,
-      T,
-      i,
-      p
+      B,
+      G,
+      c,
+      m
     ]
-  ), $ = x(async () => {
-    if (!m) return;
+  ), A = x(async () => {
+    if (!g) return;
     const _ = {
-      sessionId: m,
+      sessionId: g,
       deploymentId: t.deploymentId,
       workerId: t.workerId,
       flowId: t.flowId,
-      startTime: B.current,
-      messages: u,
+      startTime: T.current,
+      messages: l,
       toolCalls: C,
       status: "completed"
     };
-    d == null || d(_), ee(t.embedId), S(null), o([]), L([]);
+    u == null || u(_), se(t.embedId), H(null), n([]), M([]);
   }, [
-    m,
+    g,
     t,
-    u,
+    l,
     C,
-    d
-  ]), G = x(() => {
-    o([]), L([]);
+    u
+  ]), z = x(() => {
+    n([]), M([]);
   }, []);
   return {
-    messages: u,
+    messages: l,
     toolCalls: C,
-    isLoading: V,
+    isLoading: j,
     error: q,
-    sessionId: m,
-    sendMessage: O,
-    endSession: $,
-    clearMessages: G,
+    sessionId: g,
+    sendMessage: J,
+    endSession: A,
+    clearMessages: z,
     startNewSession: K
   };
 }
-const ie = "https://whatsapp-based-server.onrender.com";
-function ce(n = ie) {
+const de = "https://whatsapp-based-server.onrender.com";
+function ue(o = de) {
   return {
     async getDeploymentConfig(t) {
-      const s = await fetch(`${n}/chat/config/${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();
@@ -280,7 +280,7 @@ function ce(n = ie) {
       };
     },
     async sendMessage(t) {
-      const s = await fetch(`${n}/chat/message`, {
+      const s = await fetch(`${o}/chat/message`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -300,7 +300,7 @@ function ce(n = ie) {
     }
   };
 }
-const le = {
+const me = {
   embedId: "mock-embed-id",
   deploymentId: "mock-deployment-id",
   workerId: "mock-worker-id",
@@ -310,7 +310,7 @@ const le = {
   agentLogoUrl: void 0,
   primaryColor: "#1a1a2e",
   styling: {}
-}, de = [
+}, ge = [
   {
     trigger: /hello|hi|hey/i,
     response: "Hello! I'm a demo AI assistant. How can I help you today?",
@@ -356,82 +356,65 @@ const le = {
     delay: 1e3
   }
 ];
-function z(n) {
-  return new Promise((t) => setTimeout(t, n));
+function F(o) {
+  return new Promise((t) => setTimeout(t, o));
 }
-function ue(n, t) {
-  const s = { ...le, ...n }, r = t ?? de, h = `mock-session-${Date.now()}`;
+function pe(o, t) {
+  const s = { ...me, ...o }, r = t ?? ge, d = `mock-session-${Date.now()}`;
   return {
-    async getDeploymentConfig(d) {
-      return await z(300), s;
+    async getDeploymentConfig(u) {
+      return await F(300), s;
     },
-    async *sendMessage(d) {
+    async *sendMessage(u) {
       yield {
         type: "session",
-        data: { session_id: h, is_new: !0 },
+        data: { session_id: d, 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)
+      const c = r.find(
+        (n) => typeof n.trigger == "string" ? u.toLowerCase().includes(n.trigger.toLowerCase()) : n.trigger.test(u)
       ) ?? r[r.length - 1];
-      if (await z(i.delay ?? 500), i.toolCalls)
-        for (const o of i.toolCalls)
+      if (await F(c.delay ?? 500), c.toolCalls)
+        for (const n of c.toolCalls)
           yield {
             type: "tool_call",
             data: {
-              function: o.name,
-              args: o.arguments
+              function: n.name,
+              args: n.arguments
             },
             timestamp: Date.now()
-          }, await z(300), yield {
+          }, await F(300), yield {
             type: "tool_call",
             data: {
-              function: o.name,
-              result: o.result
+              function: n.name,
+              result: n.result
             },
             timestamp: Date.now()
-          }, await z(200);
-      const p = i.response.split(" ");
-      let u = "";
-      for (const o of p)
-        u += (u ? " " : "") + o, yield {
+          }, await F(200);
+      const m = c.response.split(" ");
+      let l = "";
+      for (const n of m)
+        l += (l ? " " : "") + n, yield {
           type: "message",
-          data: { content: u, role: "assistant" },
+          data: { content: l, role: "assistant" },
           timestamp: Date.now()
-        }, await z(30 + Math.random() * 40);
+        }, await F(30 + Math.random() * 40);
       yield {
         type: "done",
-        data: { session_id: h },
+        data: { session_id: d },
         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(
+const Z = ({
+  className: o,
+  color: t = "currentColor",
+  cutoutColor: s = "var(--bb-primary-color)"
+}) => /* @__PURE__ */ i(
   "svg",
   {
-    className: n,
+    className: o,
     viewBox: "0 0 800 800",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -440,30 +423,30 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
         "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"
+          fill: t
         }
       ),
-      /* @__PURE__ */ e("circle", { cx: "400", cy: "400", r: "400", fill: "currentColor" }),
+      /* @__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: "currentColor"
+          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: "currentColor"
+          fill: t
         }
       ),
-      /* @__PURE__ */ e("circle", { cx: "400", cy: "400", r: "350", fill: "currentColor" }),
+      /* @__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: "currentColor"
+          fill: t
         }
       ),
       /* @__PURE__ */ e(
@@ -475,48 +458,66 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
           height: "270",
           rx: "12",
           transform: "rotate(45 399.919 209)",
-          fill: "white"
+          fill: s
         }
       )
     ]
   }
-), Te = ({
-  agentName: n = "AI Assistant",
+), he = "_header_1p6z5_1", _e = "_compact_1p6z5_9", fe = "_headerBackground_1p6z5_20", be = "_headerContent_1p6z5_59", we = "_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", w = {
+  header: he,
+  compact: _e,
+  headerBackground: fe,
+  headerContent: be,
+  topRow: we,
+  agentInfo: ye,
+  agentLogo: Ce,
+  agentLogoPlaceholder: ke,
+  brainbaseLogo: ve,
+  agentName: Ie,
+  actions: Ne,
+  actionButton: Le,
+  welcomeText: Be,
+  title: $e,
+  subtitle: xe
+}, Me = ({
+  agentName: o = "AI Assistant",
   agentLogoUrl: t,
   welcomeTitle: s,
   welcomeSubtitle: r,
-  onClose: h,
-  onNewChat: d,
-  showNewChatButton: i = !1
+  onClose: d,
+  onNewChatRequest: u,
+  showNewChatButton: c = !1,
+  compact: m = !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: [
+  const l = s || "Hello there.", n = r || "How can we help?";
+  return /* @__PURE__ */ i("div", { className: `${w.header} ${m ? w.compact : ""}`, children: [
+    /* @__PURE__ */ e("div", { className: w.headerBackground }),
+    /* @__PURE__ */ i("div", { className: w.headerContent, children: [
+      /* @__PURE__ */ i("div", { className: w.topRow, children: [
+        /* @__PURE__ */ i("div", { className: w.agentInfo, children: [
           t ? /* @__PURE__ */ e(
             "img",
             {
               src: t,
-              alt: n,
-              className: f.agentLogo
+              alt: o,
+              className: w.agentLogo
+            }
+          ) : /* @__PURE__ */ e("div", { className: w.agentLogoPlaceholder, children: /* @__PURE__ */ e(
+            Z,
+            {
+              className: w.brainbaseLogo,
+              color: "white",
+              cutoutColor: "var(--bb-primary-color)"
             }
-          ) : /* @__PURE__ */ e("div", { className: f.agentLogoPlaceholder, children: /* @__PURE__ */ e(He, { className: f.brainbaseLogo }) }),
-          /* @__PURE__ */ e("span", { className: f.agentName, children: n })
+          ) }),
+          /* @__PURE__ */ e("span", { className: w.agentName, children: o })
         ] }),
-        /* @__PURE__ */ l("div", { className: f.actions, children: [
-          i && d && /* @__PURE__ */ e(
+        /* @__PURE__ */ i("div", { className: w.actions, children: [
+          c && u && /* @__PURE__ */ e(
             "button",
             {
-              className: f.actionButton,
-              onClick: L,
+              className: w.actionButton,
+              onClick: u,
               "aria-label": "Start new chat",
               type: "button",
               children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
@@ -531,11 +532,11 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
               ) })
             }
           ),
-          h && /* @__PURE__ */ e(
+          d && /* @__PURE__ */ e(
             "button",
             {
-              className: f.actionButton,
-              onClick: h,
+              className: w.actionButton,
+              onClick: d,
               "aria-label": "Close chat",
               type: "button",
               children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
@@ -552,124 +553,56 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
           )
         ] })
       ] }),
-      /* @__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"
-          }
-        )
+      !m && /* @__PURE__ */ i("div", { className: w.welcomeText, children: [
+        /* @__PURE__ */ e("h1", { className: w.title, children: l }),
+        /* @__PURE__ */ e("p", { className: w.subtitle, children: n })
       ] })
-    ] }) })
+    ] })
   ] });
-}, 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,
+}, 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", N = {
+  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 = n.role === "user", h = n.status === "streaming", d = n.status === "error";
-  return /* @__PURE__ */ l(
+  const r = o.role === "user", d = o.status === "streaming", u = o.status === "error";
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: `${I.messageWrapper} ${r ? I.user : I.assistant}`,
+      className: `${N.messageWrapper} ${r ? N.user : N.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(
+        !r && /* @__PURE__ */ e("div", { className: N.avatar, children: s ? /* @__PURE__ */ e("img", { src: s, alt: t || "AI" }) : /* @__PURE__ */ e("div", { className: N.avatarPlaceholder, children: /* @__PURE__ */ e(
+          Z,
+          {
+            className: N.brainbaseLogo,
+            color: "white",
+            cutoutColor: "var(--bb-primary-color)"
+          }
+        ) }) }),
+        /* @__PURE__ */ i(
           "div",
           {
-            className: `${I.messageBubble} ${d ? I.error : ""}`,
+            className: `${N.messageBubble} ${u ? N.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 })
+              /* @__PURE__ */ i("div", { className: N.content, children: [
+                o.content,
+                d && /* @__PURE__ */ e("span", { className: N.cursor })
               ] }),
-              d && /* @__PURE__ */ l("div", { className: I.errorIndicator, children: [
-                /* @__PURE__ */ l("svg", { viewBox: "0 0 24 24", fill: "none", children: [
+              u && /* @__PURE__ */ i("div", { className: N.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" })
                 ] }),
@@ -681,26 +614,26 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
       ]
     }
   );
-}, 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(
+}, 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", L = {
+  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", d = (u) => u.replace(/_/g, " ").replace(/([A-Z])/g, " $1").trim().toLowerCase().replace(/^./, (c) => c.toUpperCase());
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: `${v.toolCall} ${t ? v.pending : ""} ${s ? v.completed : ""} ${r ? v.error : ""}`,
+      className: `${L.toolCall} ${t ? L.pending : ""} ${s ? L.completed : ""} ${r ? L.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(
+        /* @__PURE__ */ e("div", { className: L.iconWrapper, children: t ? /* @__PURE__ */ e("div", { className: L.spinner }) : s ? /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: L.checkIcon, children: /* @__PURE__ */ e(
           "path",
           {
             d: "M20 6L9 17L4 12",
@@ -709,7 +642,7 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
             strokeLinecap: "round",
             strokeLinejoin: "round"
           }
-        ) }) : /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: v.errorIcon, children: /* @__PURE__ */ e(
+        ) }) : /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: L.errorIcon, children: /* @__PURE__ */ e(
           "path",
           {
             d: "M6 18L18 6M6 6L18 18",
@@ -719,106 +652,61 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
             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) })
+        /* @__PURE__ */ i("div", { className: L.content, children: [
+          /* @__PURE__ */ e("span", { className: L.label, children: t ? "Running" : s ? "Completed" : "Failed" }),
+          /* @__PURE__ */ e("span", { className: L.name, children: d(o.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",
+}, 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__ */ 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 })
+}) => /* @__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,
+    {
+      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 })
   ] })
-] }), 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,
+] }), 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: h
+  agentLogoUrl: d
 }) => {
-  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"
+  var l;
+  const u = R(null), c = R(null);
+  U(() => {
+    var n;
+    (n = c.current) == null || n.scrollIntoView({ behavior: "smooth" });
+  }, [o, t, s]);
+  const m = t.filter(
+    (n) => n.status === "pending" || n.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(
+  return /* @__PURE__ */ i("div", { className: Y.messageList, ref: u, 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",
@@ -828,62 +716,62 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
           strokeLinejoin: "round"
         }
       ) }) }),
-      /* @__PURE__ */ e("p", { className: F.emptyText, children: "Start a conversation" })
+      /* @__PURE__ */ e("p", { className: Y.emptyText, children: "Start a conversation" })
     ] }),
-    n.map((o) => /* @__PURE__ */ e(
-      Ue,
+    o.map((n) => /* @__PURE__ */ e(
+      Fe,
       {
-        message: o,
+        message: n,
         agentName: r,
-        agentLogoUrl: h
+        agentLogoUrl: d
       },
-      o.id
+      n.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 })
+    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 }),
+    /* @__PURE__ */ e("div", { ref: c })
   ] });
-}, 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,
+}, gt = "_inputWrapper_5lgg7_1", pt = "_inputContainer_5lgg7_7", ht = "_textarea_5lgg7_23", _t = "_sendButton_5lgg7_50", ft = "_hint_5lgg7_89", O = {
+  inputWrapper: gt,
+  inputContainer: pt,
+  textarea: ht,
+  sendButton: _t,
+  hint: ft
+}, bt = ({
+  onSend: o,
   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`);
+  const [r, d] = I(""), u = R(null), c = x(() => {
+    const n = u.current;
+    n && (n.style.height = "auto", n.style.height = `${Math.min(n.scrollHeight, 150)}px`);
   }, []);
-  W(() => {
-    i();
-  }, [r, i]);
-  const p = x(
-    (o) => {
-      o == null || o.preventDefault();
+  U(() => {
+    c();
+  }, [r, c]);
+  const m = x(
+    (n) => {
+      n == null || n.preventDefault();
       const C = r.trim();
-      C && !t && (n(C), h(""), d.current && (d.current.style.height = "auto"));
+      C && !t && (o(C), d(""), u.current && (u.current.style.height = "auto"));
     },
-    [r, t, n]
-  ), u = x(
-    (o) => {
-      o.key === "Enter" && !o.shiftKey && (o.preventDefault(), p());
+    [r, t, o]
+  ), l = x(
+    (n) => {
+      n.key === "Enter" && !n.shiftKey && (n.preventDefault(), m());
     },
-    [p]
+    [m]
   );
-  return /* @__PURE__ */ l("form", { className: E.inputWrapper, onSubmit: p, children: [
-    /* @__PURE__ */ l("div", { className: E.inputContainer, children: [
+  return /* @__PURE__ */ i("form", { className: O.inputWrapper, onSubmit: m, children: [
+    /* @__PURE__ */ i("div", { className: O.inputContainer, children: [
       /* @__PURE__ */ e(
         "textarea",
         {
-          ref: d,
-          className: E.textarea,
+          ref: u,
+          className: O.textarea,
           value: r,
-          onChange: (o) => h(o.target.value),
-          onKeyDown: u,
+          onChange: (n) => d(n.target.value),
+          onKeyDown: l,
           placeholder: s,
           disabled: t,
           rows: 1,
@@ -894,7 +782,7 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
         "button",
         {
           type: "submit",
-          className: E.sendButton,
+          className: O.sendButton,
           disabled: t || !r.trim(),
           "aria-label": "Send message",
           children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e(
@@ -910,7 +798,7 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
         }
       )
     ] }),
-    /* @__PURE__ */ l("div", { className: E.hint, children: [
+    /* @__PURE__ */ i("div", { className: O.hint, children: [
       "Press ",
       /* @__PURE__ */ e("kbd", { children: "Enter" }),
       " to send, ",
@@ -918,15 +806,15 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
       " 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(
+}, wt = "_poweredBy_9jh5q_1", yt = "_logo_9jh5q_20", Ct = "_poweredText_9jh5q_24", kt = "_text_9jh5q_36", X = {
+  poweredBy: wt,
+  logo: yt,
+  poweredText: Ct,
+  text: kt
+}, vt = ({ className: o }) => /* @__PURE__ */ i(
   "svg",
   {
-    className: n,
+    className: o,
     viewBox: "0 0 800 800",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -975,89 +863,125 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
       )
     ]
   }
-), $t = () => /* @__PURE__ */ l(
+), It = () => /* @__PURE__ */ i(
   "a",
   {
     href: "https://brainbaselabs.com/",
     target: "_blank",
     rel: "noopener noreferrer",
-    className: R.poweredBy,
+    className: X.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" })
+      /* @__PURE__ */ e("span", { className: X.poweredText, children: "Powered by" }),
+      /* @__PURE__ */ e(vt, { className: X.logo }),
+      /* @__PURE__ */ e("span", { className: X.text, children: "Brainbase Labs" })
     ]
   }
-), Mt = "_container_14ilx_1", St = "_body_14ilx_25", te = {
-  container: Mt,
-  body: St
-}, Ht = ({
-  config: n,
+), 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 = {
+  container: Nt,
+  body: Lt,
+  confirmationOverlay: Bt,
+  confirmationDialog: $t,
+  confirmationText: xt,
+  confirmationButtons: Mt,
+  cancelButton: St,
+  confirmButton: Tt
+}, Wt = ({
+  config: o,
   messages: t,
   toolCalls: s,
   isLoading: r,
-  onSendMessage: h,
-  onClose: d,
-  onNewChat: i
+  onSendMessage: d,
+  onClose: u,
+  onNewChat: c
 }) => {
-  const p = t.length > 0;
-  return /* @__PURE__ */ l("div", { className: te.container, role: "dialog", "aria-label": "Chat window", children: [
+  const [m, l] = I(!1), n = t.length > 0, C = () => {
+    l(!0);
+  }, M = () => {
+    l(!1), c == null || c();
+  }, j = () => {
+    l(!1);
+  };
+  return /* @__PURE__ */ i("div", { className: D.container, role: "dialog", "aria-label": "Chat window", children: [
     /* @__PURE__ */ e(
-      Te,
+      Me,
       {
-        agentName: n.agentName,
-        agentLogoUrl: n.agentLogoUrl,
+        agentName: o.agentName,
+        agentLogoUrl: o.agentLogoUrl,
         welcomeTitle: "Hello there.",
         welcomeSubtitle: "How can we help?",
-        onClose: d,
-        onNewChat: i,
-        showNewChatButton: p
+        onClose: u,
+        onNewChatRequest: C,
+        showNewChatButton: n,
+        compact: n
       }
     ),
-    /* @__PURE__ */ l("div", { className: te.body, children: [
+    /* @__PURE__ */ i("div", { className: D.body, children: [
       /* @__PURE__ */ e(
-        ft,
+        mt,
         {
           messages: t,
           toolCalls: s,
           isLoading: r,
-          agentName: n.agentName,
-          agentLogoUrl: n.agentLogoUrl
+          agentName: o.agentName,
+          agentLogoUrl: o.agentLogoUrl
         }
       ),
       /* @__PURE__ */ e(
-        vt,
+        bt,
         {
-          onSend: h,
+          onSend: d,
           disabled: r,
           placeholder: "Ask a question..."
         }
       )
     ] }),
-    /* @__PURE__ */ e($t, {})
+    /* @__PURE__ */ e(It, {}),
+    m && /* @__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,
+            type: "button",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: D.confirmButton,
+            onClick: M,
+            type: "button",
+            children: "End Chat"
+          }
+        )
+      ] })
+    ] }) })
   ] });
-}, 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,
+}, 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
+}, re = ({
+  onClick: o,
   agentLogoUrl: t,
   unreadCount: s = 0
-}) => /* @__PURE__ */ l(
+}) => /* @__PURE__ */ i(
   "button",
   {
-    className: U.toggleButton,
-    onClick: n,
+    className: Q.toggleButton,
+    onClick: o,
     "aria-label": "Open chat",
     type: "button",
     children: [
-      t ? /* @__PURE__ */ e("img", { src: t, alt: "", className: U.agentLogo }) : /* @__PURE__ */ e(
+      t ? /* @__PURE__ */ e("img", { src: t, alt: "", className: Q.agentLogo }) : /* @__PURE__ */ e(
         "svg",
         {
-          className: U.icon,
+          className: Q.icon,
           viewBox: "0 0 24 24",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
@@ -1073,140 +997,312 @@ const me = "_header_tzm7g_1", ge = "_headerBackground_tzm7g_8", he = "_headerCon
           )
         }
       ),
-      s > 0 && /* @__PURE__ */ e("span", { className: U.unreadBadge, children: s > 9 ? "9+" : s })
+      s > 0 && /* @__PURE__ */ e("span", { className: Q.unreadBadge, children: s > 9 ? "9+" : s })
     ]
   }
-), zt = "_widget_1ehud_1", Et = "_inline_1ehud_25", ne = {
-  widget: zt,
+), 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 = {
+  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 d = () => {
+    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: [
+            /* @__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: y.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: y.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: 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,
+        {
+          className: y.logo,
+          color: "white",
+          cutoutColor: "var(--bb-primary-color)"
+        }
+      ) }),
+      r && /* @__PURE__ */ e(
+        "button",
+        {
+          className: y.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: 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__ */ e("div", { className: y.footer, children: /* @__PURE__ */ i(
+      "a",
+      {
+        href: "https://brainbaselabs.com",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: y.poweredBy,
+        children: [
+          "Powered by",
+          " ",
+          /* @__PURE__ */ e(
+            Z,
+            {
+              className: y.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", E = {
+  widget: Qt,
   "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,
+  inline: eo
+}, to = "https://whatsapp-based-server.onrender.com", so = ({
+  embedId: o,
+  apiBaseUrl: t = to,
   mockMode: s = !1,
   mockResponses: r,
-  position: h = "bottom-right",
-  defaultOpen: d = !1,
-  primaryColor: i,
-  agentName: p,
-  welcomeMessage: u,
-  className: o,
+  position: d = "bottom-right",
+  defaultOpen: u = !1,
+  primaryColor: c,
+  agentName: m,
+  welcomeMessage: l,
+  className: n,
   onSessionStart: C,
-  onSessionEnd: L,
-  onMessage: V,
-  onError: N
+  onSessionEnd: M,
+  onMessage: j,
+  onError: S
 }) => {
-  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 },
+  const [q, P] = I(u), [g, H] = I(null), [T, V] = I(!0), [K, B] = I(null), [G, J] = I(), A = ee(() => s ? pe(
+    { primaryColor: c, agentName: m, welcomeMessage: l },
     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);
-      }
+  ) : ue(t), [s, c, m, l, r, t]), z = x(async () => {
+    V(!0), B(null), J(void 0);
+    try {
+      const v = await A.getDeploymentConfig(o);
+      H({
+        ...v,
+        // Allow prop overrides
+        primaryColor: c ?? v.primaryColor,
+        agentName: m ?? v.agentName,
+        welcomeMessage: l ?? v.welcomeMessage
+      });
+    } catch (v) {
+      const $ = v instanceof Error ? v : new Error("Failed to load config");
+      $.message.includes("404") ? (B("not_found"), J("The chat widget with this embed ID was not found.")) : $.message.includes("Failed to fetch") || $.message.includes("network") ? B("network") : B("unknown"), s && (H({
+        embedId: o,
+        deploymentId: "mock-deployment",
+        workerId: "mock-worker",
+        flowId: "mock-flow",
+        primaryColor: c ?? "#1a1a2e",
+        agentName: m ?? "AI Assistant"
+      }), B(null)), S == null || S($);
+    } finally {
+      V(!1);
     }
-    return g(), () => {
-      b = !1;
-    };
-  }, [n, s, T, i, p, u, N]);
-  const O = J(() => m || {
-    embedId: n,
+  }, [o, s, A, c, m, l, S]);
+  U(() => {
+    z();
+  }, [z]);
+  const _ = ee(() => g || {
+    embedId: o,
     deploymentId: "",
     workerId: "",
     flowId: "",
-    primaryColor: i,
-    agentName: p,
-    welcomeMessage: u
-  }, [m, n, i, p, u]), $ = ae({
-    config: O,
-    apiClient: T,
+    primaryColor: c,
+    agentName: m,
+    welcomeMessage: l
+  }, [g, o, c, m, l]), b = le({
+    config: _,
+    apiClient: A,
     mockMode: s,
     onSessionStart: C,
-    onSessionEnd: L,
-    onMessage: V,
-    onError: N
-  }), G = J(
+    onSessionEnd: M,
+    onMessage: j,
+    onError: S
+  }), k = ee(
     () => ({
-      "--bb-primary-color": (m == null ? void 0 : m.primaryColor) ?? i ?? "#1a1a2e"
+      "--bb-primary-color": (g == null ? void 0 : g.primaryColor) ?? c ?? "#1a1a2e"
     }),
-    [m == null ? void 0 : m.primaryColor, i]
-  ), _ = () => {
-    $.endSession(), $.startNewSession();
-  };
-  if (B || K && !s)
-    return null;
-  const y = h === "inline";
-  return /* @__PURE__ */ e(
+    [g == null ? void 0 : g.primaryColor, c]
+  ), p = () => {
+    b.endSession(), b.startNewSession();
+  }, h = () => {
+    P(!1);
+  }, a = () => {
+    z();
+  }, f = d === "inline";
+  return T ? null : K && !s ? !f && !q ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${E.widget} ${E[d]} ${n ?? ""}`,
+      style: k,
+      children: /* @__PURE__ */ e(
+        re,
+        {
+          onClick: () => P(!0),
+          agentName: m
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${E.widget} ${E[d]} ${n ?? ""}`,
+      style: k,
+      children: /* @__PURE__ */ e(
+        Xt,
+        {
+          errorType: K,
+          message: G,
+          onRetry: a,
+          onClose: f ? void 0 : h
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
     "div",
     {
-      className: `${ne.widget} ${ne[h]} ${o ?? ""}`,
-      style: G,
-      children: q || y ? /* @__PURE__ */ e(
-        Ht,
+      className: `${E.widget} ${E[d]} ${n ?? ""}`,
+      style: k,
+      children: q || f ? /* @__PURE__ */ e(
+        Wt,
         {
-          config: O,
-          messages: $.messages,
-          toolCalls: $.toolCalls,
-          isLoading: $.isLoading,
-          onSendMessage: $.sendMessage,
-          onClose: y ? void 0 : () => D(!1),
-          onNewChat: _
+          config: _,
+          messages: b.messages,
+          toolCalls: b.toolCalls,
+          isLoading: b.isLoading,
+          onSendMessage: b.sendMessage,
+          onClose: f ? void 0 : h,
+          onNewChat: p
         }
       ) : /* @__PURE__ */ e(
-        Pt,
+        re,
         {
-          onClick: () => D(!0),
-          agentName: m == null ? void 0 : m.agentName,
-          agentLogoUrl: m == null ? void 0 : m.agentLogoUrl
+          onClick: () => P(!0),
+          agentName: g == null ? void 0 : g.agentName,
+          agentLogoUrl: g == null ? void 0 : g.agentLogoUrl
         }
       )
     }
   );
 };
-function Ft() {
+function ro() {
   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}`;
+  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 {
-  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
+  Wt as ChatContainer,
+  Me as ChatHeader,
+  re as ChatToggleButton,
+  so as ChatWidget,
+  Fe as Message,
+  bt as MessageInput,
+  mt as MessageList,
+  et as ToolCallDisplay,
+  ct as TypingIndicator,
+  se as clearSession,
+  ue as createAPIClient,
+  pe as createMockAPIClient,
+  ro as generateSessionId,
+  ie as getStoredSession,
+  ne as storeSession,
+  le as useChat
 };