@botonic/webchat-react 2.23.1

package/trigger.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @botonic/webchat-react/trigger
+ *
+ * Lightweight trigger entry point with lazy loading.
+ *
+ * This entry exports only the WebchatTrigger component (~5kB).
+ * The full webchat UI (~66kB) is lazy-loaded when needed.
+ *
+ * ## Usage
+ * ```tsx
+ * import { WebchatTrigger } from '@botonic/webchat-react/trigger'
+ * import '@botonic/webchat-react/styles.css'
+ *
+ * <WebchatTrigger appId="your-app-id" />
+ * ```
+ *
+ * ## Custom Composition
+ * ```tsx
+ * // my-webchat.tsx
+ * import { WebchatCompositionProps, WebchatProvider, WebchatContainer } from '@botonic/webchat-react'
+ *
+ * export default function MyWebchat(props: WebchatCompositionProps) {
+ *   return (
+ *     <WebchatProvider {...props}>
+ *       <WebchatContainer>
+ *         <MyCustomHeader />
+ *         <WebchatMessages />
+ *         <WebchatInput />
+ *       </WebchatContainer>
+ *     </WebchatProvider>
+ *   )
+ * }
+ *
+ * // main.tsx
+ * import { WebchatTrigger } from '@botonic/webchat-react/trigger'
+ * <WebchatTrigger appId="xxx" loader={() => import('./my-webchat')} />
+ * ```
+ */
+export { WebchatTrigger } from './lib/components/webchat-trigger/webchat-trigger';
+export type { WebchatCompositionProps, WebchatLoader, WebchatTriggerProps, } from './lib/types/webchat-props';

package/trigger.js

@@ -0,0 +1,215 @@
+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-CtAHJapU.js").then((i) => i.w).then((i) => ({ default: i.WebchatApp }))
+);
+function te(i, c) {
+  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-CtAHJapU.js").then((e) => e.w).then((e) => ({
+        default: e.WebchatApp
+      }))
+    ),
+    [d, I]
+  ), T = l(
+    (e) => {
+      e.target === e.currentTarget && p !== null && C(null);
+    },
+    [p]
+  );
+  E(() => {
+    if (!t) return;
+    const e = t.machine.subscribe((L) => {
+      H(L.context.connectionStatus === "connected"), w(L.context.isOpen ?? !1);
+    });
+    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");
+        return;
+      }
+      e === !1 && n ? C("opening") : e === !0 && !n && C("closing");
+    }
+  }, [n, t]);
+  const j = l((e) => {
+    F(e), $(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);
+  }, []);
+  return E(() => {
+    if (typeof window > "u") return;
+    const e = () => y();
+    return window.addEventListener("botonic:open", e), () => window.removeEventListener("botonic:open", e);
+  }, [y]), {
+    triggerProps: {
+      ref: c,
+      type: "button",
+      onClick: m ? B : Q,
+      onAnimationEnd: T,
+      "aria-label": g || (n ? "Close chat" : "Open chat"),
+      "aria-expanded": n
+    },
+    icon: v,
+    isOpen: n,
+    className: W,
+    variants: {
+      position: R,
+      isPulsing: _,
+      isAppearing: p === "appearing",
+      isOpening: p === "opening",
+      isClosing: p === "closing",
+      isLoading: a && !t,
+      isOpen: n
+    },
+    webchatProps: {
+      appId: b,
+      isOpen: n,
+      onClose: () => t?.close(),
+      onControllerReady: j,
+      ...O
+    },
+    shouldRenderWebchat: a,
+    LazyWebchat: K,
+    loadError: m,
+    retryLoad: B,
+    handleLoadError: U,
+    retryKey: I
+  };
+}
+const re = "webchat-trigger-module__base___BpGIN", r = {
+  base: re,
+  "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",
+  "loading-spinner": "webchat-trigger-module__loading-spinner___UrhIi",
+  "is-pulsing": "webchat-trigger-module__is-pulsing___bVsxi",
+  "is-appearing": "webchat-trigger-module__is-appearing___WHdbF",
+  "is-opening": "webchat-trigger-module__is-opening___NzPKU",
+  "is-closing": "webchat-trigger-module__is-closing___Gbp3t",
+  "is-loading": "webchat-trigger-module__is-loading___Qnwvi",
+  "is-open": "webchat-trigger-module__is-open___qJce6"
+};
+class ne extends Z {
+  constructor() {
+    super(...arguments), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  componentDidCatch(c) {
+    this.props.onError(c);
+  }
+  render() {
+    return this.state.hasError ? null : this.props.children;
+  }
+}
+const oe = J(r.base, {
+  variants: {
+    position: {
+      "bottom-right": r["bottom-right"],
+      "bottom-left": r["bottom-left"],
+      "top-right": r["top-right"],
+      "top-left": r["top-left"]
+    },
+    isPulsing: {
+      true: r["is-pulsing"]
+    },
+    isAppearing: {
+      true: r["is-appearing"]
+    },
+    isOpening: {
+      true: r["is-opening"]
+    },
+    isClosing: {
+      true: r["is-closing"]
+    },
+    isLoading: {
+      true: r["is-loading"]
+    },
+    isOpen: {
+      true: r["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(
+      "button",
+      {
+        ...b,
+        className: D(oe(g), v),
+        "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" })
+          }
+        ) })
+      }
+    ),
+    O && u && /* @__PURE__ */ o(ne, { onError: a, children: /* @__PURE__ */ o(
+      X,
+      {
+        fallback: g.isLoading && _ ? /* @__PURE__ */ o("span", { className: r["loading-spinner"], "aria-hidden": !0 }) : null,
+        children: /* @__PURE__ */ o(u, { ...W })
+      }
+    ) }, f)
+  ] });
+}
+export {
+  ge as WebchatTrigger
+};