@brainbase-labs/chat-widget 0.1.10 → 0.1.12

package/dist/index.js

@@ -33,30 +33,30 @@ function le(o) {
     onSessionEnd: m,
     onMessage: c,
     onError: g
-  } = o, [l, n] = N([]), [b, M] = N([]), [A, H] = N(!1), [P, z] = N(null), [y, _] = N(null), S = U(0), K = U(!1);
+  } = o, [l, n] = N([]), [y, M] = N([]), [A, H] = N(!1), [P, z] = N(null), [b, _] = 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,
+    b && l.length > 0 && se(t.embedId, {
+      sessionId: b,
       deploymentId: t.deploymentId,
       workerId: t.workerId,
       flowId: t.flowId,
       startTime: S.current,
       messages: l,
-      toolCalls: b,
+      toolCalls: y,
       status: "active"
     });
-  }, [y, l, b, t]);
+  }, [b, l, y, t]);
   const G = x(async () => (S.current = Date.now(), _(null), n([]), M([]), re(t.embedId), ""), [t.embedId]), E = x(
-    (p, I, w) => {
+    (p, I, k) => {
       switch (p.type) {
         case "session": {
           const d = p.data;
-          d.session_id && (w(d.session_id), d.is_new && (S.current = Date.now(), u == null || u(d.session_id)));
+          d.session_id && (k(d.session_id), d.is_new && (S.current = Date.now(), u == null || u(d.session_id)));
           break;
         }
         case "message": {
@@ -104,14 +104,14 @@ function le(o) {
         case "completed": {
           n(
             (d) => d.map((h) => h.id === I ? { ...h, status: "sent" } : h)
-          ), y && se(t.embedId, {
-            sessionId: y,
+          ), b && se(t.embedId, {
+            sessionId: b,
             deploymentId: t.deploymentId,
             workerId: t.workerId,
             flowId: t.flowId,
             startTime: S.current,
             messages: l,
-            toolCalls: b,
+            toolCalls: y,
             status: "completed"
           });
           break;
@@ -131,9 +131,9 @@ function le(o) {
         }
       }
     },
-    [t, y, l, b, u]
+    [t, b, l, y, u]
   ), T = x(
-    async (p, I, w) => {
+    async (p, I, k) => {
       const d = p.getReader(), h = new TextDecoder();
       let a = "";
       try {
@@ -152,7 +152,7 @@ function le(o) {
               if (ne.startsWith("data: "))
                 try {
                   const ce = JSON.parse(ne.slice(6));
-                  E(ce, I, w);
+                  E(ce, I, k);
                 } catch {
                 }
           }
@@ -173,8 +173,8 @@ function le(o) {
         status: "sent"
       };
       n((a) => [...a, I]), c == null || c(I);
-      const w = `assistant-${Date.now()}`, d = {
-        id: w,
+      const k = `assistant-${Date.now()}`, d = {
+        id: k,
         role: "assistant",
         content: "",
         timestamp: Date.now(),
@@ -188,25 +188,25 @@ function le(o) {
         if (r) {
           const a = s.sendMessage(p);
           for await (const f of a)
-            E(f, w, h);
+            E(f, k, h);
         } else {
           const a = await s.sendMessage({
             embedId: t.embedId,
             message: p,
-            sessionId: y ?? void 0
+            sessionId: b ?? void 0
           });
-          await T(a, w, h);
+          await T(a, k, h);
         }
         n(
           (a) => a.map(
-            (f) => f.id === w && f.status === "streaming" ? { ...f, status: "sent" } : f
+            (f) => f.id === k && f.status === "streaming" ? { ...f, status: "sent" } : f
           )
         );
       } catch (a) {
         const f = a instanceof Error ? a : new Error("Failed to send message");
         z(f), g == null || g(f), n(
           (B) => B.map(
-            (v) => v.id === w ? { ...v, status: "error", content: "Failed to get response" } : v
+            (v) => v.id === k ? { ...v, status: "error", content: "Failed to get response" } : v
           )
         );
       } finally {
@@ -214,7 +214,7 @@ function le(o) {
       }
     },
     [
-      y,
+      b,
       s,
       r,
       t.embedId,
@@ -224,40 +224,40 @@ function le(o) {
       g
     ]
   ), J = x(async () => {
-    if (!y) return;
+    if (!b) return;
     const p = {
-      sessionId: y,
+      sessionId: b,
       deploymentId: t.deploymentId,
       workerId: t.workerId,
       flowId: t.flowId,
       startTime: S.current,
       messages: l,
-      toolCalls: b,
+      toolCalls: y,
       status: "completed"
     };
     m == null || m(p), re(t.embedId), _(null), n([]), M([]);
   }, [
-    y,
+    b,
     t,
     l,
-    b,
+    y,
     m
   ]), F = x(() => {
     n([]), M([]);
   }, []);
   return {
     messages: l,
-    toolCalls: b,
+    toolCalls: y,
     isLoading: A,
     error: P,
-    sessionId: y,
+    sessionId: b,
     sendMessage: ee,
     endSession: J,
     clearMessages: F,
     startNewSession: G
   };
 }
-const de = "https://whatsapp-based-server.onrender.com";
+const de = "https://chat-embed-deployment.onrender.com";
 function ue(o = de) {
   return {
     async getDeploymentConfig(t) {
@@ -463,12 +463,12 @@ const q = ({
       )
     ]
   }
-), 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 = {
+), he = "_header_1p6z5_1", _e = "_compact_1p6z5_9", fe = "_headerBackground_1p6z5_20", ye = "_headerContent_1p6z5_59", be = "_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", w = {
   header: he,
   compact: _e,
   headerBackground: fe,
-  headerContent: be,
-  topRow: ye,
+  headerContent: ye,
+  topRow: be,
   agentInfo: we,
   agentLogo: Ce,
   agentLogoPlaceholder: ke,
@@ -490,33 +490,33 @@ const q = ({
   compact: g = !1
 }) => {
   const l = s || "Hello there.", n = r !== void 0 ? r : s ? void 0 : "How can we help?";
-  return /* @__PURE__ */ i("div", { className: `${C.header} ${g ? C.compact : ""}`, children: [
-    /* @__PURE__ */ e("div", { className: C.headerBackground }),
-    /* @__PURE__ */ i("div", { className: C.headerContent, children: [
-      /* @__PURE__ */ i("div", { className: C.topRow, children: [
-        /* @__PURE__ */ i("div", { className: C.agentInfo, children: [
+  return /* @__PURE__ */ i("div", { className: `${w.header} ${g ? 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: o,
-              className: C.agentLogo
+              className: w.agentLogo
             }
-          ) : /* @__PURE__ */ e("div", { className: C.agentLogoPlaceholder, children: /* @__PURE__ */ e(
+          ) : /* @__PURE__ */ e("div", { className: w.agentLogoPlaceholder, children: /* @__PURE__ */ e(
             q,
             {
-              className: C.brainbaseLogo,
+              className: w.brainbaseLogo,
               color: "white",
               cutoutColor: "var(--bb-primary-color)"
             }
           ) }),
-          /* @__PURE__ */ e("span", { className: C.agentName, children: o })
+          /* @__PURE__ */ e("span", { className: w.agentName, children: o })
         ] }),
-        /* @__PURE__ */ i("div", { className: C.actions, children: [
+        /* @__PURE__ */ i("div", { className: w.actions, children: [
           c && m && /* @__PURE__ */ e(
             "button",
             {
-              className: C.actionButton,
+              className: w.actionButton,
               onClick: m,
               "aria-label": "Start new chat",
               type: "button",
@@ -535,7 +535,7 @@ const q = ({
           u && /* @__PURE__ */ e(
             "button",
             {
-              className: C.actionButton,
+              className: w.actionButton,
               onClick: u,
               "aria-label": "Close chat",
               type: "button",
@@ -553,9 +553,9 @@ const q = ({
           )
         ] })
       ] }),
-      !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 })
+      !g && /* @__PURE__ */ i("div", { className: w.welcomeText, children: [
+        /* @__PURE__ */ e("h1", { className: w.title, children: l }),
+        n && /* @__PURE__ */ e("p", { className: w.subtitle, children: n })
       ] })
     ] })
   ] });
@@ -690,7 +690,7 @@ const q = ({
   emptyText: ut
 }, mt = ({
   messages: o,
-  toolCalls: t,
+  toolCalls: t = [],
   isLoading: s,
   agentName: r,
   agentLogoUrl: u
@@ -737,7 +737,7 @@ const q = ({
   textarea: ht,
   sendButton: _t,
   hint: ft
-}, bt = ({
+}, yt = ({
   onSend: o,
   disabled: t = !1,
   placeholder: s = "Send a message..."
@@ -752,8 +752,8 @@ const q = ({
   const g = x(
     (n) => {
       n == null || n.preventDefault();
-      const b = r.trim();
-      b && !t && (o(b), u(""), m.current && (m.current.style.height = "auto"));
+      const y = r.trim();
+      y && !t && (o(y), u(""), m.current && (m.current.style.height = "auto"));
     },
     [r, t, o]
   ), l = x(
@@ -806,8 +806,8 @@ const q = ({
       " for new line"
     ] })
   ] });
-}, yt = "_poweredBy_9jh5q_1", wt = "_logo_9jh5q_20", Ct = "_poweredText_9jh5q_24", kt = "_text_9jh5q_36", X = {
-  poweredBy: yt,
+}, bt = "_poweredBy_9jh5q_1", wt = "_logo_9jh5q_20", Ct = "_poweredText_9jh5q_24", kt = "_text_9jh5q_36", X = {
+  poweredBy: bt,
   logo: wt,
   poweredText: Ct,
   text: kt
@@ -889,14 +889,14 @@ const q = ({
 }, Wt = ({
   config: o,
   messages: t,
-  toolCalls: s,
+  toolCalls: s = [],
   isLoading: r,
   onSendMessage: u,
   onClose: m,
   onNewChat: c
 }) => {
   var H;
-  const [g, l] = N(!1), n = t.length > 0, b = () => {
+  const [g, l] = N(!1), n = t.length > 0, y = () => {
     l(!0);
   }, M = () => {
     l(!1), c == null || c();
@@ -912,7 +912,7 @@ const q = ({
         welcomeTitle: o.welcomeMessage || "Hello there.",
         welcomeSubtitle: o.welcomeMessage ? void 0 : "How can we help?",
         onClose: m,
-        onNewChatRequest: b,
+        onNewChatRequest: y,
         showNewChatButton: n,
         compact: n
       }
@@ -929,7 +929,7 @@ const q = ({
         }
       ),
       /* @__PURE__ */ e(
-        bt,
+        yt,
         {
           onSend: u,
           disabled: r,
@@ -1001,7 +1001,7 @@ const q = ({
       s > 0 && /* @__PURE__ */ e("span", { className: Q.unreadBadge, children: s > 9 ? "9+" : s })
     ]
   }
-), jt = "_container_kgfgt_1", Vt = "_header_kgfgt_25", At = "_logoWrapper_kgfgt_38", zt = "_logo_kgfgt_38", Ft = "_closeButton_kgfgt_51", Ot = "_content_kgfgt_74", Rt = "_iconWrapper_kgfgt_84", Ut = "_errorIcon_kgfgt_95", Zt = "_title_kgfgt_101", qt = "_description_kgfgt_109", Kt = "_retryButton_kgfgt_117", Gt = "_footer_kgfgt_139", Jt = "_poweredBy_kgfgt_146", Yt = "_footerLogo_kgfgt_160", k = {
+), 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", C = {
   container: jt,
   header: Vt,
   logoWrapper: At,
@@ -1028,7 +1028,7 @@ const q = ({
         return {
           title: "Chat Not Found",
           description: t || "This chat widget is not configured correctly. Please check the embed ID.",
-          icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: k.errorIcon, children: [
+          icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: C.errorIcon, children: [
             /* @__PURE__ */ e(
               "circle",
               {
@@ -1054,7 +1054,7 @@ const q = ({
         return {
           title: "Connection Error",
           description: t || "Unable to connect to the chat service. Please check your internet connection.",
-          icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: k.errorIcon, children: [
+          icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: C.errorIcon, children: [
             /* @__PURE__ */ e(
               "path",
               {
@@ -1078,7 +1078,7 @@ const q = ({
         return {
           title: "Something Went Wrong",
           description: t || "An unexpected error occurred. Please try again later.",
-          icon: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: k.errorIcon, children: /* @__PURE__ */ e(
+          icon: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: C.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",
@@ -1090,12 +1090,12 @@ const q = ({
         };
     }
   }, { 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(
+  return /* @__PURE__ */ i("div", { className: C.container, children: [
+    /* @__PURE__ */ i("div", { className: C.header, children: [
+      /* @__PURE__ */ e("div", { className: C.logoWrapper, children: /* @__PURE__ */ e(
         q,
         {
-          className: k.logo,
+          className: C.logo,
           color: "white",
           cutoutColor: "var(--bb-primary-color)"
         }
@@ -1103,7 +1103,7 @@ const q = ({
       r && /* @__PURE__ */ e(
         "button",
         {
-          className: k.closeButton,
+          className: C.closeButton,
           onClick: r,
           "aria-label": "Close",
           type: "button",
@@ -1119,26 +1119,26 @@ const q = ({
         }
       )
     ] }),
-    /* @__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__ */ i("div", { className: C.content, children: [
+      /* @__PURE__ */ e("div", { className: C.iconWrapper, children: g }),
+      /* @__PURE__ */ e("h2", { className: C.title, children: m }),
+      /* @__PURE__ */ e("p", { className: C.description, children: c }),
+      s && /* @__PURE__ */ e("button", { className: C.retryButton, onClick: s, type: "button", children: "Try Again" })
     ] }),
-    /* @__PURE__ */ e("div", { className: k.footer, children: /* @__PURE__ */ i(
+    /* @__PURE__ */ e("div", { className: C.footer, children: /* @__PURE__ */ i(
       "a",
       {
         href: "https://brainbaselabs.com",
         target: "_blank",
         rel: "noopener noreferrer",
-        className: k.poweredBy,
+        className: C.poweredBy,
         children: [
           "Powered by",
           " ",
           /* @__PURE__ */ e(
             q,
             {
-              className: k.footerLogo,
+              className: C.footerLogo,
               color: "var(--bb-text-tertiary)",
               cutoutColor: "var(--bb-surface-bg)"
             }
@@ -1164,13 +1164,13 @@ const q = ({
   agentName: g,
   welcomeMessage: l,
   showBranding: n,
-  className: b,
+  className: y,
   onSessionStart: M,
   onSessionEnd: A,
   onMessage: H,
   onError: P
 }) => {
-  const [z, y] = N(m), [_, S] = N(null), [K, G] = N(!0), [E, T] = N(null), [ee, J] = N(), F = te(() => s ? pe(
+  const [z, b] = N(m), [_, S] = N(null), [K, G] = N(!0), [E, T] = N(null), [ee, J] = N(), F = te(() => s ? pe(
     { primaryColor: c, agentName: g, welcomeMessage: l },
     r
   ) : ue(t), [s, c, g, l, r, t]), p = x(async () => {
@@ -1217,7 +1217,7 @@ const q = ({
     styling: n !== void 0 ? {
       showBranding: n
     } : void 0
-  }, [_, o, c, g, l, n]), w = le({
+  }, [_, o, c, g, l, n]), k = le({
     config: I,
     apiClient: F,
     mockMode: s,
@@ -1231,21 +1231,21 @@ const q = ({
     }),
     [_ == null ? void 0 : _.primaryColor, c]
   ), h = () => {
-    w.endSession(), w.startNewSession();
+    k.endSession(), k.startNewSession();
   }, a = () => {
-    y(!1);
+    b(!1);
   }, f = () => {
     p();
   }, B = u === "inline";
   return K ? null : E && !s ? !B && !z ? /* @__PURE__ */ e(
     "div",
     {
-      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      className: `${V.widget} ${V[u]} ${y ?? ""}`,
       style: d,
       children: /* @__PURE__ */ e(
         ae,
         {
-          onClick: () => y(!0),
+          onClick: () => b(!0),
           agentName: g
         }
       )
@@ -1253,7 +1253,7 @@ const q = ({
   ) : /* @__PURE__ */ e(
     "div",
     {
-      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      className: `${V.widget} ${V[u]} ${y ?? ""}`,
       style: d,
       children: /* @__PURE__ */ e(
         Xt,
@@ -1268,23 +1268,22 @@ const q = ({
   ) : /* @__PURE__ */ e(
     "div",
     {
-      className: `${V.widget} ${V[u]} ${b ?? ""}`,
+      className: `${V.widget} ${V[u]} ${y ?? ""}`,
       style: d,
       children: z || B ? /* @__PURE__ */ e(
         Wt,
         {
           config: I,
-          messages: w.messages,
-          toolCalls: w.toolCalls,
-          isLoading: w.isLoading,
-          onSendMessage: w.sendMessage,
+          messages: k.messages,
+          isLoading: k.isLoading,
+          onSendMessage: k.sendMessage,
           onClose: B ? void 0 : a,
           onNewChat: h
         }
       ) : /* @__PURE__ */ e(
         ae,
         {
-          onClick: () => y(!0),
+          onClick: () => b(!0),
           agentName: _ == null ? void 0 : _.agentName,
           agentLogoUrl: _ == null ? void 0 : _.agentLogoUrl
         }
@@ -1304,7 +1303,7 @@ export {
   ae as ChatToggleButton,
   so as ChatWidget,
   Fe as Message,
-  bt as MessageInput,
+  yt as MessageInput,
   mt as MessageList,
   et as ToolCallDisplay,
   ct as TypingIndicator,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brainbase-labs/chat-widget",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "A React chat widget for embedding Brainbase Labs AI agents in your applications",
   "author": "Brainbase Labs <hello@brainbaselabs.com>",
   "license": "MIT",
@@ -69,12 +69,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.16.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@storybook/addon-links": "^10.1.7",
+    "@storybook/react": "^10.1.7",
+    "@storybook/react-vite": "^10.1.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
@@ -84,12 +81,14 @@
     "globals": "^15.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.4.7",
+    "storybook": "^10.1.7",
     "terser": "^5.37.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.16.0",
     "vite": "^6.0.3",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^4.3.0"
+    "vite-plugin-dts": "^4.3.0",
+    "eslint-plugin-storybook": "10.1.7",
+    "@storybook/addon-docs": "^10.1.7"
   }
 }