@bootdesk/js-web-adapter-react 0.3.4 → 0.3.5

package/dist/index.cjs

@@ -599,29 +599,101 @@ function useAttachmentUpload(uploadConfig) {
 
 // src/hooks/useBridge.ts
 var import_react7 = require("react");
+function getBridge() {
+  return typeof window !== "undefined" ? window.__chatBridge : null;
+}
+function hasNativeBridge() {
+  if (typeof window === "undefined") return false;
+  return !!getBridge() || !!window.webkit?.messageHandlers?.chatBridge || !!window.ReactNativeWebView || !!window.AndroidBridge;
+}
+function bridgeSend(msg) {
+  const bridge = getBridge();
+  if (bridge?.send) {
+    bridge.send(msg);
+  } else if (typeof window !== "undefined") {
+    window.parent.postMessage(msg, "*");
+  }
+}
 function useBridge() {
   const notificationCbRef = (0, import_react7.useRef)(null);
   const [config, setConfig] = (0, import_react7.useState)(null);
+  const [pushState, setPushState] = (0, import_react7.useState)(null);
   const isInIframe = typeof window !== "undefined" && window !== window.parent;
+  const isInWebView = !isInIframe && hasNativeBridge();
   const notifyMessage = (0, import_react7.useCallback)(
     (text) => {
-      if (!isInIframe) return;
-      window.parent.postMessage({ type: "chat-message", text }, "*");
+      if (!isInIframe && !isInWebView) return;
+      if (isInWebView) {
+        bridgeSend({ type: "chat-message", text });
+      } else {
+        window.parent.postMessage({ type: "chat-message", text }, "*");
+      }
     },
-    [isInIframe]
+    [isInIframe, isInWebView]
   );
   const notifyViewportConfig = (0, import_react7.useCallback)(
     (viewportContent) => {
-      if (!isInIframe) return;
-      window.parent.postMessage({ type: "chat-viewport-config", content: viewportContent }, "*");
+      if (!isInIframe && !isInWebView) return;
+      if (isInWebView) {
+        bridgeSend({ type: "chat-viewport-config", content: viewportContent });
+      } else {
+        window.parent.postMessage({ type: "chat-viewport-config", content: viewportContent }, "*");
+      }
     },
-    [isInIframe]
+    [isInIframe, isInWebView]
   );
   const onNotificationClicked = (0, import_react7.useCallback)((cb) => {
     notificationCbRef.current = cb;
   }, []);
+  const requestPushSubscribe = (0, import_react7.useCallback)(() => {
+    if (!isInIframe && !isInWebView) return;
+    if (isInWebView) {
+      bridgeSend({ type: "chat-push-subscribe" });
+    } else {
+      window.parent.postMessage({ type: "chat-push-subscribe" }, "*");
+    }
+  }, [isInIframe, isInWebView]);
+  const requestPushUnsubscribe = (0, import_react7.useCallback)(() => {
+    if (!isInIframe && !isInWebView) return;
+    if (isInWebView) {
+      bridgeSend({ type: "chat-push-unsubscribe" });
+    } else {
+      window.parent.postMessage({ type: "chat-push-unsubscribe" }, "*");
+    }
+  }, [isInIframe, isInWebView]);
+  const bridgeInScope = typeof window !== "undefined" ? getBridge() : null;
+  (0, import_react7.useEffect)(() => {
+    if (bridgeInScope?._pushState) {
+      setPushState(bridgeInScope._pushState);
+    }
+  }, [bridgeInScope?._pushState]);
+  (0, import_react7.useEffect)(() => {
+    if (!isInIframe && !isInWebView) return;
+    if (!getBridge()?._ready) {
+      const bridge = getBridge();
+      if (bridge) {
+        bridge._ready = true;
+        bridgeSend({ type: "chat-ready" });
+      } else {
+        if (!window.__chatBridge) {
+          window.__chatBridge = {};
+        }
+        window.__chatBridge._ready = true;
+        if (!window.__chatBridge.send) {
+          window.__chatBridge.send = function(msg) {
+            if (window.ReactNativeWebView?.postMessage) {
+              window.ReactNativeWebView.postMessage(JSON.stringify(msg));
+            } else {
+              window.parent.postMessage(msg, "*");
+            }
+          };
+        }
+        window.__chatBridge.send({ type: "chat-ready" });
+      }
+    }
+  }, [isInIframe, isInWebView]);
   (0, import_react7.useEffect)(() => {
-    if (!isInIframe) return;
+    if (!isInIframe && !isInWebView) return;
     function handleMessage(event) {
       const data = event.data;
       if (!data || typeof data !== "object" || !data.type) return;
@@ -633,11 +705,43 @@ function useBridge() {
       if (data.type === "chat-notification-clicked") {
         notificationCbRef.current?.();
       }
+      if (data.type === "chat-push-state" && typeof data.status === "string") {
+        setPushState(data.status);
+      }
+    }
+    function handleCustomEvent(event) {
+      const detail = event.detail;
+      if (!detail || typeof detail !== "object") return;
+      if (detail.type === "chat-config") {
+        const configData = { ...detail };
+        delete configData.type;
+        setConfig(configData);
+      }
+      if (detail.type === "chat-notification-clicked") {
+        notificationCbRef.current?.();
+      }
+      if (detail.type === "chat-push-state" && typeof detail.status === "string") {
+        setPushState(detail.status);
+      }
     }
     window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [isInIframe]);
-  return { config, isInIframe, notifyMessage, notifyViewportConfig, onNotificationClicked };
+    window.addEventListener("chat-bridge", handleCustomEvent);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      window.removeEventListener("chat-bridge", handleCustomEvent);
+    };
+  }, [isInIframe, isInWebView]);
+  return {
+    config,
+    isInIframe,
+    isInWebView,
+    notifyMessage,
+    notifyViewportConfig,
+    onNotificationClicked,
+    pushState,
+    requestPushSubscribe,
+    requestPushUnsubscribe
+  };
 }
 
 // src/i18n/LocaleProvider.tsx
@@ -4037,17 +4141,23 @@ function ChatWidget({
   const {
     config: iframeConfig,
     isInIframe,
+    isInWebView,
     notifyMessage,
     notifyViewportConfig,
-    onNotificationClicked
+    onNotificationClicked,
+    pushState: bridgePushState,
+    requestPushSubscribe,
+    requestPushUnsubscribe
   } = useBridge();
-  const effectiveLocale = localeProp ?? (isInIframe ? iframeConfig?.locale : void 0) ?? useLocale().locale;
+  const hasBridgePush = (isInIframe || isInWebView) && bridgePushState !== null;
+  const inBridge = isInIframe || isInWebView;
+  const effectiveLocale = localeProp ?? (inBridge ? iframeConfig?.locale : void 0) ?? useLocale().locale;
   const merged = mergeLocale(effectiveLocale);
   const dir = merged.direction;
   (0, import_react14.useEffect)(() => {
     client.setLocaleHeader(effectiveLocale);
   }, [client, effectiveLocale]);
-  const autoEmbedded = isInIframe && embedded !== false;
+  const autoEmbedded = inBridge && embedded !== false;
   const effectiveEmbedded = embedded === true || autoEmbedded;
   const effectiveMode = effectiveEmbedded ? "embedded" : initialMode;
   const [theme, setTheme] = (0, import_react14.useState)(() => {
@@ -4118,7 +4228,7 @@ function ChatWidget({
     if (!isSmallScreen) setIsOpen(true);
   }, [initialMode, isSmallScreen]);
   (0, import_react14.useEffect)(() => {
-    if (isInIframe) {
+    if (inBridge) {
       notifyViewportConfig("interactive-widget=resizes-content");
       return () => notifyViewportConfig("");
     }
@@ -4135,14 +4245,15 @@ function ChatWidget({
         meta.setAttribute("content", original);
       };
     }
-  }, [isOpen, displayMode, isSmallScreen, isInIframe, notifyViewportConfig]);
+  }, [isOpen, displayMode, isSmallScreen, inBridge, notifyViewportConfig]);
   const { messages, sendMessage, loading, isLoadingHistory, reloadMessages } = useMessages(
     client,
     (isOpen || effectiveEmbedded) && !isPreEntry
   );
   const { isSomeoneTyping } = useTyping(client);
+  const webPushEnabled = !!pushConfig && !hasBridgePush;
   const push = usePushNotifications({
-    enabled: !!pushConfig,
+    enabled: webPushEnabled,
     getVapidPublicKey: pushConfig?.getVapidPublicKey ?? (() => Promise.resolve("")),
     onSubscribe: pushConfig?.onSubscribe ?? (async () => {
     }),
@@ -4154,11 +4265,24 @@ function ChatWidget({
     notificationOptions: pushConfig?.notificationOptions
   });
   const handlePushToggle = (0, import_react14.useCallback)(() => {
-    if (push.isSubscribed) push.unsubscribe();
-    else push.subscribe();
-  }, [push.isSubscribed, push.subscribe, push.unsubscribe]);
+    if (hasBridgePush) {
+      if (bridgePushState === "subscribed") requestPushUnsubscribe();
+      else requestPushSubscribe();
+    } else {
+      if (push.isSubscribed) push.unsubscribe();
+      else push.subscribe();
+    }
+  }, [
+    hasBridgePush,
+    bridgePushState,
+    requestPushSubscribe,
+    requestPushUnsubscribe,
+    push.isSubscribed,
+    push.subscribe,
+    push.unsubscribe
+  ]);
   (0, import_react14.useEffect)(() => {
-    if (!isInIframe || !iframeConfig) return;
+    if (!inBridge || !iframeConfig) return;
     if (iframeConfig.theme?.cssVariables) {
       const root = document.documentElement;
       for (const [key, value] of Object.entries(iframeConfig.theme.cssVariables)) {
@@ -4169,24 +4293,24 @@ function ChatWidget({
     if (mode === "light" || mode === "dark" || mode === "auto") {
       setTheme(mode);
     }
-  }, [isInIframe, iframeConfig]);
+  }, [inBridge, iframeConfig]);
   (0, import_react14.useEffect)(() => {
-    if (!isInIframe) return;
+    if (!inBridge) return;
     onNotificationClicked(() => {
       reloadMessages();
     });
-  }, [isInIframe, onNotificationClicked, reloadMessages]);
-  const effectiveTitle = isInIframe && iframeConfig?.title || title;
-  const effectivePlaceholder = isInIframe && iframeConfig?.placeholder || placeholder || merged.chatWidget.placeholder;
+  }, [inBridge, onNotificationClicked, reloadMessages]);
+  const effectiveTitle = inBridge && iframeConfig?.title || title;
+  const effectivePlaceholder = inBridge && iframeConfig?.placeholder || placeholder || merged.chatWidget.placeholder;
   const currentUserId = "getCurrentUserId" in client ? client.getCurrentUserId() : "";
   const handleSend = (0, import_react14.useCallback)(
     async (text, attachments = []) => {
       await sendMessage(text, attachments);
-      if (isInIframe) {
+      if (inBridge) {
         notifyMessage(text);
       }
     },
-    [sendMessage, isInIframe, notifyMessage]
+    [sendMessage, inBridge, notifyMessage]
   );
   const handleActionClick = (0, import_react14.useCallback)(
     (messageId, actionId, value) => {
@@ -4211,19 +4335,26 @@ function ChatWidget({
   const close = (0, import_react14.useCallback)(() => {
     setIsOpen(false);
     setDisplayMode("floating");
+    if (isInWebView) {
+      window.__chatBridge?.send?.({ type: "chat-close" });
+    } else if (isInIframe) {
+      window.parent.postMessage({ type: "chat-close" }, "*");
+    }
     onClose?.();
-  }, [onClose]);
+  }, [onClose, isInIframe, isInWebView]);
   const embeddedClose = (0, import_react14.useCallback)(() => {
-    if (isInIframe) {
+    if (isInWebView) {
+      window.__chatBridge?.send?.({ type: "chat-close" });
+    } else if (isInIframe) {
       window.parent.postMessage({ type: "chat-close" }, "*");
     }
-  }, [isInIframe]);
+  }, [isInIframe, isInWebView]);
   const panelContent = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Header,
       {
         title: effectiveTitle,
-        onClose: effectiveEmbedded ? isInIframe ? embeddedClose : void 0 : displayMode === "floating" ? close : showClose ? close : void 0,
+        onClose: effectiveEmbedded ? inBridge ? embeddedClose : void 0 : displayMode === "floating" ? close : showClose ? close : void 0,
         onToggleFullscreen: effectiveEmbedded ? void 0 : showFullscreenToggle && !isSmallScreen ? toggleFullscreen : void 0,
         isFullscreen: effectiveEmbedded ? false : displayMode === "fullscreen",
         showConnectionStatus: true,
@@ -4231,8 +4362,8 @@ function ChatWidget({
         className: className?.header,
         theme,
         onThemeChange: handleThemeChange,
-        pushStatus: pushConfig ? push.status : void 0,
-        onPushToggle: pushConfig ? handlePushToggle : void 0
+        pushStatus: hasBridgePush ? bridgePushState : pushConfig ? push.status : void 0,
+        onPushToggle: hasBridgePush || pushConfig ? handlePushToggle : void 0
       }
     ),
     isPreEntry && preEntry ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-1 overflow-y-auto p-4", children: preEntry.render({ start: handleStart }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
@@ -4248,14 +4379,14 @@ function ChatWidget({
         }
       ),
       isSomeoneTyping && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TypingIndicator, {}),
-      pushConfig ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      !hasBridgePush && pushConfig ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         PushPermissionPrompt,
         {
           getVapidPublicKey: pushConfig.getVapidPublicKey,
           onSubscribe: pushConfig.onSubscribe,
           onUnsubscribe: pushConfig.onUnsubscribe
         }
-      ) : renderPushPrompt?.(),
+      ) : !hasBridgePush ? renderPushPrompt?.() : null,
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         InputArea,
         {