@perspective-ai/sdk-react 1.3.0 → 1.4.0-pr-25-20260306102715

package/dist/index.cjs

@@ -16,6 +16,28 @@ function useStableCallback(callback) {
   );
   return callback ? stable : callback;
 }
+function sortObjectKeys(value) {
+  if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+    return Object.keys(value).sort().reduce((result, key) => {
+      result[key] = value[key];
+      return result;
+    }, {});
+  }
+  return value;
+}
+function useStableValue(value) {
+  const ref = react.useRef(value);
+  const serialized = JSON.stringify(
+    value,
+    (_key, currentValue) => sortObjectKeys(currentValue)
+  );
+  const prevSerialized = react.useRef(serialized);
+  if (prevSerialized.current !== serialized) {
+    prevSerialized.current = serialized;
+    ref.current = value;
+  }
+  return ref.current;
+}
 
 // src/hooks/usePopup.ts
 function usePopup(options) {
@@ -38,6 +60,9 @@ function usePopup(options) {
   const handleRef = react.useRef(null);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
+  const initialHiddenRef = react.useRef(!isOpen);
+  const stableParams = useStableValue(params);
+  const stableBrand = useStableValue(brand);
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
   const stableOnNavigate = useStableCallback(onNavigate);
@@ -52,65 +77,98 @@ function usePopup(options) {
     },
     [isControlled, onOpenChange]
   );
+  const destroyPopup = react.useCallback(
+    (targetHandle = handleRef.current) => {
+      if (!targetHandle) return;
+      targetHandle.update({ onClose: void 0 });
+      targetHandle.destroy();
+      if (handleRef.current === targetHandle) {
+        handleRef.current = null;
+        setHandle(null);
+      }
+    },
+    []
+  );
   const handleClose = react.useCallback(() => {
-    handleRef.current = null;
-    setHandle(null);
     setOpen(false);
     onClose?.();
   }, [setOpen, onClose]);
   const stableOnClose = useStableCallback(handleClose);
-  const createPopup = react.useCallback(() => {
-    if (handleRef.current) return handleRef.current;
-    const newHandle = sdk.openPopup({
+  const createPopupHandle = react.useCallback(
+    (startHidden) => sdk.openPopup({
       researchId,
-      params,
-      brand,
+      params: stableParams,
+      brand: stableBrand,
       theme,
       host,
       onReady: stableOnReady,
       onSubmit: stableOnSubmit,
       onNavigate: stableOnNavigate,
       onClose: stableOnClose,
-      onError: stableOnError
-    });
-    handleRef.current = newHandle;
-    setHandle(newHandle);
-    return newHandle;
-  }, [
-    researchId,
-    params,
-    brand,
-    theme,
-    host,
-    stableOnReady,
-    stableOnSubmit,
-    stableOnNavigate,
-    stableOnClose,
-    stableOnError
-  ]);
-  const destroyPopup = react.useCallback(() => {
-    if (handleRef.current) {
-      handleRef.current.destroy();
-      handleRef.current = null;
-      setHandle(null);
+      onError: stableOnError,
+      _startHidden: startHidden
+    }),
+    [
+      researchId,
+      stableParams,
+      stableBrand,
+      theme,
+      host,
+      stableOnReady,
+      stableOnSubmit,
+      stableOnNavigate,
+      stableOnClose,
+      stableOnError
+    ]
+  );
+  const setPopupHandle = react.useCallback(
+    (startHidden) => {
+      const newHandle = createPopupHandle(startHidden);
+      handleRef.current = newHandle;
+      setHandle(newHandle);
+      return newHandle;
+    },
+    [createPopupHandle]
+  );
+  react.useEffect(() => {
+    const currentHandle = handleRef.current;
+    if (!currentHandle) return;
+    if (isOpen) {
+      currentHandle.show();
+    } else {
+      currentHandle.hide();
     }
-  }, []);
+  }, [isOpen]);
+  react.useEffect(() => {
+    const nextHandle = setPopupHandle(
+      handleRef.current ? !handleRef.current.isOpen : initialHiddenRef.current
+    );
+    return () => {
+      if (handleRef.current === nextHandle) {
+        destroyPopup(nextHandle);
+      }
+    };
+  }, [destroyPopup, setPopupHandle]);
+  const ensurePopup = react.useCallback(() => {
+    if (handleRef.current) return handleRef.current;
+    return setPopupHandle(false);
+  }, [setPopupHandle]);
   const openFn = react.useCallback(() => {
     if (isControlled) {
       onOpenChange?.(true);
     } else {
-      createPopup();
+      ensurePopup().show();
       setInternalOpen(true);
     }
-  }, [isControlled, onOpenChange, createPopup]);
+  }, [ensurePopup, isControlled, onOpenChange]);
   const closeFn = react.useCallback(() => {
     if (isControlled) {
       onOpenChange?.(false);
     } else {
-      destroyPopup();
+      handleRef.current?.hide();
       setInternalOpen(false);
     }
-  }, [isControlled, onOpenChange, destroyPopup]);
+  }, [isControlled, onOpenChange]);
   const toggleFn = react.useCallback(() => {
     if (isOpen) {
       closeFn();
@@ -118,22 +176,6 @@ function usePopup(options) {
       openFn();
     }
   }, [isOpen, openFn, closeFn]);
-  react.useEffect(() => {
-    if (!isControlled) return;
-    if (controlledOpen && !handleRef.current) {
-      createPopup();
-    } else if (!controlledOpen && handleRef.current) {
-      destroyPopup();
-    }
-  }, [controlledOpen, isControlled, createPopup, destroyPopup]);
-  react.useEffect(() => {
-    return () => {
-      if (handleRef.current) {
-        handleRef.current.destroy();
-        handleRef.current = null;
-      }
-    };
-  }, []);
   return {
     open: openFn,
     close: closeFn,
@@ -162,6 +204,9 @@ function useSlider(options) {
   const handleRef = react.useRef(null);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
+  const initialHiddenRef = react.useRef(!isOpen);
+  const stableParams = useStableValue(params);
+  const stableBrand = useStableValue(brand);
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
   const stableOnNavigate = useStableCallback(onNavigate);
@@ -176,65 +221,98 @@ function useSlider(options) {
     },
     [isControlled, onOpenChange]
   );
+  const destroySlider = react.useCallback(
+    (targetHandle = handleRef.current) => {
+      if (!targetHandle) return;
+      targetHandle.update({ onClose: void 0 });
+      targetHandle.destroy();
+      if (handleRef.current === targetHandle) {
+        handleRef.current = null;
+        setHandle(null);
+      }
+    },
+    []
+  );
   const handleClose = react.useCallback(() => {
-    handleRef.current = null;
-    setHandle(null);
     setOpen(false);
     onClose?.();
   }, [setOpen, onClose]);
   const stableOnClose = useStableCallback(handleClose);
-  const createSlider = react.useCallback(() => {
-    if (handleRef.current) return handleRef.current;
-    const newHandle = sdk.openSlider({
+  const createSliderHandle = react.useCallback(
+    (startHidden) => sdk.openSlider({
       researchId,
-      params,
-      brand,
+      params: stableParams,
+      brand: stableBrand,
       theme,
       host,
       onReady: stableOnReady,
       onSubmit: stableOnSubmit,
       onNavigate: stableOnNavigate,
       onClose: stableOnClose,
-      onError: stableOnError
-    });
-    handleRef.current = newHandle;
-    setHandle(newHandle);
-    return newHandle;
-  }, [
-    researchId,
-    params,
-    brand,
-    theme,
-    host,
-    stableOnReady,
-    stableOnSubmit,
-    stableOnNavigate,
-    stableOnClose,
-    stableOnError
-  ]);
-  const destroySlider = react.useCallback(() => {
-    if (handleRef.current) {
-      handleRef.current.destroy();
-      handleRef.current = null;
-      setHandle(null);
+      onError: stableOnError,
+      _startHidden: startHidden
+    }),
+    [
+      researchId,
+      stableParams,
+      stableBrand,
+      theme,
+      host,
+      stableOnReady,
+      stableOnSubmit,
+      stableOnNavigate,
+      stableOnClose,
+      stableOnError
+    ]
+  );
+  const setSliderHandle = react.useCallback(
+    (startHidden) => {
+      const newHandle = createSliderHandle(startHidden);
+      handleRef.current = newHandle;
+      setHandle(newHandle);
+      return newHandle;
+    },
+    [createSliderHandle]
+  );
+  react.useEffect(() => {
+    const currentHandle = handleRef.current;
+    if (!currentHandle) return;
+    if (isOpen) {
+      currentHandle.show();
+    } else {
+      currentHandle.hide();
     }
-  }, []);
+  }, [isOpen]);
+  react.useEffect(() => {
+    const nextHandle = setSliderHandle(
+      handleRef.current ? !handleRef.current.isOpen : initialHiddenRef.current
+    );
+    return () => {
+      if (handleRef.current === nextHandle) {
+        destroySlider(nextHandle);
+      }
+    };
+  }, [destroySlider, setSliderHandle]);
+  const ensureSlider = react.useCallback(() => {
+    if (handleRef.current) return handleRef.current;
+    return setSliderHandle(false);
+  }, [setSliderHandle]);
   const openFn = react.useCallback(() => {
     if (isControlled) {
       onOpenChange?.(true);
     } else {
-      createSlider();
+      ensureSlider().show();
       setInternalOpen(true);
     }
-  }, [isControlled, onOpenChange, createSlider]);
+  }, [ensureSlider, isControlled, onOpenChange]);
   const closeFn = react.useCallback(() => {
     if (isControlled) {
       onOpenChange?.(false);
     } else {
-      destroySlider();
+      handleRef.current?.hide();
       setInternalOpen(false);
     }
-  }, [isControlled, onOpenChange, destroySlider]);
+  }, [isControlled, onOpenChange]);
   const toggleFn = react.useCallback(() => {
     if (isOpen) {
       closeFn();
@@ -242,22 +320,6 @@ function useSlider(options) {
       openFn();
     }
   }, [isOpen, openFn, closeFn]);
-  react.useEffect(() => {
-    if (!isControlled) return;
-    if (controlledOpen && !handleRef.current) {
-      createSlider();
-    } else if (!controlledOpen && handleRef.current) {
-      destroySlider();
-    }
-  }, [controlledOpen, isControlled, createSlider, destroySlider]);
-  react.useEffect(() => {
-    return () => {
-      if (handleRef.current) {
-        handleRef.current.destroy();
-        handleRef.current = null;
-      }
-    };
-  }, []);
   return {
     open: openFn,
     close: closeFn,
@@ -285,6 +347,8 @@ function useFloatBubble(options) {
   const [internalOpen, setInternalOpen] = react.useState(false);
   const handleRef = react.useRef(null);
   const isControlled = controlledOpen !== void 0;
+  const stableParams = useStableValue(params);
+  const stableBrand = useStableValue(brand);
   const stableOnReady = useStableCallback(onReady);
   const stableOnSubmit = useStableCallback(onSubmit);
   const stableOnNavigate = useStableCallback(onNavigate);
@@ -300,8 +364,8 @@ function useFloatBubble(options) {
   react.useEffect(() => {
     const newHandle = sdk.createFloatBubble({
       researchId,
-      params,
-      brand,
+      params: stableParams,
+      brand: stableBrand,
       theme,
       host,
       onReady: stableOnReady,
@@ -321,8 +385,8 @@ function useFloatBubble(options) {
     };
   }, [
     researchId,
-    params,
-    brand,
+    stableParams,
+    stableBrand,
     theme,
     host,
     stableOnReady,
@@ -380,14 +444,66 @@ function useFloatBubble(options) {
   };
 }
 function useAutoOpen(options) {
-  const { trigger, showOnce = "session", researchId, ...embedConfig } = options;
+  const {
+    trigger,
+    showOnce = "session",
+    researchId,
+    params,
+    brand,
+    theme,
+    host,
+    onReady,
+    onSubmit,
+    onNavigate,
+    onClose,
+    onError,
+    onAuth,
+    channel,
+    welcomeMessage
+  } = options;
   const cleanupRef = react.useRef(null);
   const [triggered, setTriggered] = react.useState(false);
   const triggerDelay = trigger.type === "timeout" ? trigger.delay : void 0;
+  const stableParams = useStableValue(params);
+  const stableBrand = useStableValue(brand);
+  const stableOnReady = useStableCallback(onReady);
+  const stableOnSubmit = useStableCallback(onSubmit);
+  const stableOnNavigate = useStableCallback(onNavigate);
+  const stableOnClose = useStableCallback(onClose);
+  const stableOnError = useStableCallback(onError);
+  const stableOnAuth = useStableCallback(onAuth);
   const stableOnTrigger = useStableCallback(() => {
     sdk.markShown(researchId, showOnce);
-    sdk.openPopup({ researchId, ...embedConfig });
+    sdk.openPopup({
+      researchId,
+      params: stableParams,
+      brand: stableBrand,
+      theme,
+      host,
+      onReady: stableOnReady,
+      onSubmit: stableOnSubmit,
+      onNavigate: stableOnNavigate,
+      onClose: stableOnClose,
+      onError: stableOnError,
+      onAuth: stableOnAuth,
+      channel,
+      welcomeMessage
+    });
   });
+  react.useEffect(() => {
+    if (triggered || !sdk.shouldShow(researchId, showOnce)) return;
+    sdk.preloadIframe(
+      researchId,
+      "popup",
+      sdk.getHost(host),
+      stableParams,
+      stableBrand,
+      theme
+    );
+    return () => {
+      sdk.destroyPreloadedByType(researchId, "popup");
+    };
+  }, [researchId, showOnce, host, stableParams, stableBrand, theme, triggered]);
   react.useEffect(() => {
     if (!sdk.shouldShow(researchId, showOnce)) return;
     cleanupRef.current = sdk.setupTrigger(trigger, () => {
@@ -405,7 +521,8 @@ function useAutoOpen(options) {
   const cancel = react.useCallback(() => {
     cleanupRef.current?.();
     cleanupRef.current = null;
-  }, []);
+    sdk.destroyPreloadedByType(researchId, "popup");
+  }, [researchId]);
   return { cancel, triggered };
 }
 function useThemeSync(theme = "system") {