@botonic/webchat-react 2.26.0 → 2.28.0

package/trigger.js

@@ -1,114 +1,200 @@
-import { jsxs as V, Fragment as q, jsx as o } from "react/jsx-runtime";
-import { cx as D, cva as J } from "class-variance-authority";
-import { useState as s, useRef as h, useMemo as M, lazy as A, useCallback as l, useEffect as E, Component as Z, Suspense as X } from "react";
-import { ensureGlobalWebchatAPI as Y, setupGlobalWebchatAPI as $, signalWebchatReady as ee } from "@botonic/webchat-core";
-A(
-  () => import("./webchat-app-CLGvs-LL.js").then((i) => i.w).then((i) => ({ default: i.WebchatApp }))
+import { jsx as n, jsxs as ne, Fragment as Le } from "react/jsx-runtime";
+import { cx as oe, cva as Ee } from "class-variance-authority";
+import { useState as l, useRef as i, useEffect as u, useMemo as ye, lazy as ie, useCallback as h, Component as Ce, Suspense as Re } from "react";
+import { ensureGlobalWebchatAPI as Pe, setupGlobalWebchatAPI as xe, signalWebchatReady as Ae } from "@botonic/webchat-core";
+function Ie() {
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinejoin: "round",
+      role: "img",
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ n("path", { d: "M11.9824 1H12.0068C16.6626 1.00019 20.8294 3.94825 22.3779 8.34766V8.34863C23.9256 12.7351 22.5189 17.6607 18.8877 20.5752L18.8867 20.5762C15.366 23.4132 10.4571 23.7848 6.55273 21.5576C6.37266 21.455 6.16579 21.4117 5.96094 21.4316L5.87305 21.4443L1.80176 22.209L2.56738 18.1328C2.61117 17.8992 2.57029 17.6574 2.45215 17.4512C0.544246 14.1225 0.50971 10.0164 2.38574 6.64258C4.32746 3.1601 8.00376 1.00006 11.9824 1Z" })
+    }
+  );
+}
+function Ne() {
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      role: "img",
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ n("path", { d: "M6 9l6 6 6-6" })
+    }
+  );
+}
+const We = ie(
+  () => import("./webchat-app-I5AArwfY.js").then((p) => p.N).then((p) => ({ default: p.WebchatApp }))
 );
-function te(i, c) {
+function Me(p, m) {
   const {
-    appId: b,
-    position: R = "bottom-right",
-    isPulsing: _,
-    icon: v,
-    "aria-label": g,
-    className: W,
-    webchatConfig: O,
-    onReady: u,
-    loader: d
-  } = i, [a, f] = s(!1), [m, x] = s(!1), [I, P] = s(0), [n, w] = s(!1), [t, F] = s(null), [N, H] = s(!1), [p, C] = s("appearing"), k = h(!1), S = h(null), G = h(!1), z = h(!1);
-  z.current || (z.current = !0, Y());
-  const K = M(
-    () => d ? A(d) : A(
-      () => import("./webchat-app-CLGvs-LL.js").then((e) => e.w).then((e) => ({
-        default: e.WebchatApp
-      }))
-    ),
-    [d, I]
-  ), T = l(
+    appId: x,
+    position: S = "bottom-right",
+    isPulsing: f,
+    icon: D,
+    "aria-label": L,
+    className: z,
+    webchatConfig: V,
+    onReady: E,
+    loader: y,
+    proactiveMessage: C,
+    proactiveDelay: H = 5
+  } = p, [w, A] = l(!1), [d, b] = l(!1), [T, I] = l(0), [r, N] = l(!1), [t, ae] = l(null), [j, ce] = l(!1), [R, W] = l("appearing"), [le, q] = l(!1), [P, Y] = l(!1), [ue, M] = l(!1), [pe, de] = l(0), F = i(!1), K = i(null), Q = i(!1), U = i(!1), O = i(0), Z = i(!1), B = i(0), J = i({ x: 0, y: 0 }), X = i({ x: 0, y: 0 }), a = i(null), c = i(null), _ = i(!1), G = i(!1);
+  U.current || (U.current = !0, Pe()), u(() => {
+    G.current = P;
+  }, [P]), u(() => {
+    Z.current = r;
+  }, [r]);
+  const ge = ye(
+    () => y ? ie(y) : We,
+    [y]
+  ), he = h(
     (e) => {
-      e.target === e.currentTarget && p !== null && C(null);
+      e.target === e.currentTarget && R !== null && W(null);
     },
-    [p]
+    [R]
   );
-  E(() => {
+  u(() => {
     if (!t) return;
-    const e = t.machine.subscribe((L) => {
-      H(L.context.connectionStatus === "connected"), w(L.context.isOpen ?? !1);
+    const e = t.machine.subscribe((s) => {
+      const v = s.context.isOpen ?? !1, g = s.context.messageActors?.size ?? 0;
+      ce(s.context.connectionStatus === "connected"), N(v), v ? (q(!1), O.current = g) : (g > O.current && q(!0), O.current = g);
     });
     return () => e.unsubscribe();
-  }, [t]), E(() => {
-    const e = k.current, L = t !== null && S.current === null;
-    if (k.current = n, S.current = t, !!t) {
-      if (L && n) {
-        C("opening");
+  }, [t]), u(() => {
+    const e = F.current, s = t !== null && K.current === null;
+    if (F.current = r, K.current = t, !!t) {
+      if (s && r) {
+        W("opening");
         return;
       }
-      e === !1 && n ? C("opening") : e === !0 && !n && C("closing");
+      e === !1 && r ? W("opening") : e === !0 && !r && W("closing");
     }
-  }, [n, t]);
-  const j = l((e) => {
-    F(e), $(e);
+  }, [r, t]);
+  const me = h((e) => {
+    ae(e), xe(e);
   }, []);
-  E(() => {
-    !t || !N || G.current || (G.current = !0, ee(), u?.(t));
-  }, [t, N, u]);
-  const y = l(() => {
-    m && (x(!1), P((e) => e + 1)), a ? t ? t.open() : w(!0) : (f(!0), w(!0));
-  }, [m, a, t]), Q = l(() => {
-    t ? n ? t.close() : t.open() : y();
-  }, [t, n, y]), B = l(() => {
-    x(!1), P((e) => e + 1), f(!0), w(!0);
-  }, []), U = l((e) => {
-    console.error("Failed to load webchat:", e), x(!0);
+  u(() => {
+    !t || !j || Q.current || (Q.current = !0, Ae(), E?.(t));
+  }, [t, j, E]);
+  const k = h(() => {
+    d && (b(!1), I((e) => e + 1)), w ? t ? t.open() : N(!0) : (A(!0), N(!0));
+  }, [d, w, t]), fe = h(() => {
+    t ? r ? t.close() : t.open() : k();
+  }, [t, r, k]), $ = h(() => {
+    b(!1), I((e) => e + 1), A(!0), N(!0);
+  }, []), we = h((e) => {
+    console.error("Failed to load webchat:", e), b(!0);
   }, []);
-  return E(() => {
+  u(() => {
     if (typeof window > "u") return;
-    const e = () => y();
+    const e = () => k();
     return window.addEventListener("botonic:open", e), () => window.removeEventListener("botonic:open", e);
-  }, [y]), {
+  }, [k]), u(() => {
+    if (typeof window > "u") return;
+    const e = (s) => {
+      J.current = { x: s.clientX, y: s.clientY };
+    };
+    return window.addEventListener("mousemove", e, { passive: !0 }), () => window.removeEventListener("mousemove", e);
+  }, []), u(() => {
+    if (!C || _.current) return;
+    const e = setTimeout(() => {
+      if (_.current || Z.current || m.current?.matches(":hover")) return;
+      B.current = window.scrollY, X.current = { ...J.current }, Y(!0);
+      const s = () => {
+        window.removeEventListener("scroll", v), window.removeEventListener("mousemove", g), a.current = null, c.current = null, M(!0);
+      }, v = () => {
+        Math.abs(window.scrollY - B.current) > 80 && s();
+      }, g = (ee) => {
+        const { x: _e, y: ve } = X.current, te = ee.clientX - _e, re = ee.clientY - ve;
+        Math.sqrt(te * te + re * re) > 80 && s();
+      };
+      a.current = v, c.current = g, window.addEventListener("scroll", v, { passive: !0 }), window.addEventListener("mousemove", g, { passive: !0 });
+    }, H * 1e3);
+    return () => {
+      clearTimeout(e), a.current && (window.removeEventListener("scroll", a.current), a.current = null), c.current && (window.removeEventListener("mousemove", c.current), c.current = null);
+    };
+  }, [pe]), u(() => {
+    !r || !P || (_.current = !0, a.current && (window.removeEventListener("scroll", a.current), a.current = null), c.current && (window.removeEventListener("mousemove", c.current), c.current = null), M(!0));
+  }, [r, P]), u(() => {
+    if (typeof window > "u") return;
+    const e = () => {
+      _.current || !C || (B.current = window.scrollY, Y(!0));
+    }, s = () => {
+      G.current && (_.current = !0, a.current && (window.removeEventListener("scroll", a.current), a.current = null), c.current && (window.removeEventListener("mousemove", c.current), c.current = null), M(!0));
+    };
+    return window.addEventListener("botonic:popup:show", e), window.addEventListener("botonic:popup:hide", s), () => {
+      window.removeEventListener("botonic:popup:show", e), window.removeEventListener("botonic:popup:hide", s);
+    };
+  }, []);
+  const be = h(() => {
+    M(!1), Y(!1), G.current = !1, _.current || de((e) => e + 1);
+  }, []);
+  return {
     triggerProps: {
-      ref: c,
+      ref: m,
       type: "button",
-      onClick: m ? B : Q,
-      onAnimationEnd: T,
-      "aria-label": g || (n ? "Close chat" : "Open chat"),
-      "aria-expanded": n
+      onClick: d ? $ : fe,
+      onAnimationEnd: he,
+      "aria-label": L || (r ? "Close chat" : "Open chat"),
+      "aria-expanded": r
     },
-    icon: v,
-    isOpen: n,
-    className: W,
+    icon: D,
+    isOpen: r,
+    className: z,
     variants: {
-      position: R,
-      isPulsing: _,
-      isAppearing: p === "appearing",
-      isOpening: p === "opening",
-      isClosing: p === "closing",
-      isLoading: a && !t,
-      isOpen: n
+      position: S,
+      isPulsing: f,
+      isAppearing: R === "appearing",
+      isOpening: R === "opening",
+      isClosing: R === "closing",
+      isLoading: w && !t,
+      isOpen: r
     },
     webchatProps: {
-      appId: b,
-      isOpen: n,
+      appId: x,
+      isOpen: r,
       onClose: () => t?.close(),
-      onControllerReady: j,
-      ...O
+      onControllerReady: me,
+      ...V
     },
-    shouldRenderWebchat: a,
-    LazyWebchat: K,
-    loadError: m,
-    retryLoad: B,
-    handleLoadError: U,
-    retryKey: I
+    shouldRenderWebchat: w,
+    LazyWebchat: ge,
+    loadError: d,
+    retryLoad: $,
+    handleLoadError: we,
+    retryKey: T,
+    hasNewMessages: le,
+    isPopupVisible: P,
+    isPopupDismissing: ue,
+    proactiveMessage: C,
+    onPopupAnimationEnd: be
   };
 }
-const re = "webchat-trigger-module__base___BpGIN", r = {
-  base: re,
+const Oe = "webchat-trigger-module__base___BpGIN", o = {
+  base: Oe,
   "bottom-right": "webchat-trigger-module__bottom-right___Q9RB7",
   "bottom-left": "webchat-trigger-module__bottom-left___O0h6i",
   "top-right": "webchat-trigger-module__top-right___fRZQ7",
   "top-left": "webchat-trigger-module__top-left___HIH3L",
   "trigger-icon": "webchat-trigger-module__trigger-icon___8oGUm",
+  "new-messages-badge": "webchat-trigger-module__new-messages-badge___N3N26",
   "loading-spinner": "webchat-trigger-module__loading-spinner___UrhIi",
   "is-pulsing": "webchat-trigger-module__is-pulsing___bVsxi",
   "is-appearing": "webchat-trigger-module__is-appearing___WHdbF",
@@ -117,99 +203,109 @@ const re = "webchat-trigger-module__base___BpGIN", r = {
   "is-loading": "webchat-trigger-module__is-loading___Qnwvi",
   "is-open": "webchat-trigger-module__is-open___qJce6"
 };
-class ne extends Z {
+class ke extends Ce {
   constructor() {
     super(...arguments), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(c) {
-    this.props.onError(c);
+  componentDidCatch(m) {
+    this.props.onError(m);
   }
   render() {
     return this.state.hasError ? null : this.props.children;
   }
 }
-const oe = J(r.base, {
+const Se = "webchat-trigger-popup-module__popup___8qvlu", se = {
+  popup: Se,
+  "popup-dismiss": "webchat-trigger-popup-module__popup-dismiss___wucZD"
+}, De = Ee(o.base, {
   variants: {
     position: {
-      "bottom-right": r["bottom-right"],
-      "bottom-left": r["bottom-left"],
-      "top-right": r["top-right"],
-      "top-left": r["top-left"]
+      "bottom-right": o["bottom-right"],
+      "bottom-left": o["bottom-left"],
+      "top-right": o["top-right"],
+      "top-left": o["top-left"]
     },
     isPulsing: {
-      true: r["is-pulsing"]
+      true: o["is-pulsing"]
     },
     isAppearing: {
-      true: r["is-appearing"]
+      true: o["is-appearing"]
     },
     isOpening: {
-      true: r["is-opening"]
+      true: o["is-opening"]
     },
     isClosing: {
-      true: r["is-closing"]
+      true: o["is-closing"]
     },
     isLoading: {
-      true: r["is-loading"]
+      true: o["is-loading"]
     },
     isOpen: {
-      true: r["is-open"]
+      true: o["is-open"]
     }
   },
   defaultVariants: {
     position: "bottom-right"
   }
 });
-function ge(i) {
-  const c = h(null), {
-    triggerProps: b,
-    icon: R,
-    isOpen: _,
-    className: v,
-    variants: g,
-    webchatProps: W,
-    shouldRenderWebchat: O,
-    LazyWebchat: u,
-    loadError: d,
-    handleLoadError: a,
-    retryKey: f
-  } = te(i, c);
-  return /* @__PURE__ */ V(q, { children: [
-    /* @__PURE__ */ o(
+function Be(p) {
+  const m = i(null), {
+    triggerProps: x,
+    icon: S,
+    isOpen: f,
+    className: D,
+    variants: L,
+    webchatProps: z,
+    shouldRenderWebchat: V,
+    LazyWebchat: E,
+    loadError: y,
+    handleLoadError: C,
+    retryKey: H,
+    hasNewMessages: w,
+    isPopupVisible: A,
+    isPopupDismissing: d,
+    proactiveMessage: b,
+    onPopupAnimationEnd: T
+  } = Me(p, m), I = f ? /* @__PURE__ */ n(Ne, {}) : /* @__PURE__ */ n(Ie, {});
+  return /* @__PURE__ */ ne(Le, { children: [
+    (A || d) && b && /* @__PURE__ */ n(
+      "div",
+      {
+        className: oe(
+          se.popup,
+          d && se["popup-dismiss"]
+        ),
+        role: "status",
+        "aria-live": "polite",
+        onAnimationEnd: d ? T : void 0,
+        children: /* @__PURE__ */ n("p", { children: b })
+      }
+    ),
+    /* @__PURE__ */ ne(
       "button",
       {
-        ...b,
-        className: D(oe(g), v),
+        ...x,
+        className: oe(De(L), D),
         "data-testid": "webchat-trigger",
-        "aria-label": d ? "Retry loading chat" : b["aria-label"],
-        children: /* @__PURE__ */ o("div", { className: r["trigger-icon"], children: g.isLoading && _ ? /* @__PURE__ */ o("span", { className: r["loading-spinner"] }) : R || /* @__PURE__ */ o(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinejoin: "round",
-            "aria-hidden": !0,
-            children: /* @__PURE__ */ o("path", { d: "M11.9824 1H12.0068C16.6626 1.00019 20.8294 3.94825 22.3779 8.34766V8.34863C23.9256 12.7351 22.5189 17.6607 18.8877 20.5752L18.8867 20.5762C15.366 23.4132 10.4571 23.7848 6.55273 21.5576C6.37266 21.455 6.16579 21.4117 5.96094 21.4316L5.87305 21.4443L1.80176 22.209L2.56738 18.1328C2.61117 17.8992 2.57029 17.6574 2.45215 17.4512C0.544246 14.1225 0.50971 10.0164 2.38574 6.64258C4.32746 3.1601 8.00376 1.00006 11.9824 1Z" })
-          }
-        ) })
+        "aria-label": y ? "Retry loading chat" : x["aria-label"],
+        children: [
+          /* @__PURE__ */ n("div", { className: o["trigger-icon"], children: L.isLoading && f ? /* @__PURE__ */ n("span", { className: o["loading-spinner"] }) : S || I }),
+          w && !f && /* @__PURE__ */ n("div", { className: o["new-messages-badge"], "aria-hidden": !0 })
+        ]
       }
     ),
-    O && u && /* @__PURE__ */ o(ne, { onError: a, children: /* @__PURE__ */ o(
-      X,
+    V && E && /* @__PURE__ */ n(ke, { onError: C, children: /* @__PURE__ */ n(
+      Re,
       {
-        fallback: g.isLoading && _ ? /* @__PURE__ */ o("span", { className: r["loading-spinner"], "aria-hidden": !0 }) : null,
-        children: /* @__PURE__ */ o(u, { ...W })
+        fallback: L.isLoading && f ? /* @__PURE__ */ n("span", { className: o["loading-spinner"], "aria-hidden": !0 }) : null,
+        children: /* @__PURE__ */ n(E, { ...z })
       }
-    ) }, f)
+    ) }, H)
   ] });
 }
 export {
-  ge as WebchatTrigger
+  Be as WebchatTrigger
 };