@modelnex/sdk 0.5.30 → 0.5.32

package/dist/index.js

@@ -2766,6 +2766,32 @@ function normalizeDevModeKey(value) {
   const normalized = value.trim();
   return normalized || void 0;
 }
+function observeInjectedDevModeKey(listener, options) {
+  if (typeof window === "undefined") return () => {
+  };
+  let currentKey = resolveInjectedDevModeKey();
+  const pollIntervalMs = options?.pollIntervalMs ?? 1e3;
+  const syncInjectedDevModeKey = () => {
+    const nextKey = resolveInjectedDevModeKey();
+    if (nextKey === currentKey) return;
+    currentKey = nextKey;
+    listener(nextKey);
+  };
+  const intervalId = window.setInterval(syncInjectedDevModeKey, pollIntervalMs);
+  window.addEventListener("focus", syncInjectedDevModeKey);
+  window.addEventListener("pageshow", syncInjectedDevModeKey);
+  if (typeof document !== "undefined") {
+    document.addEventListener("visibilitychange", syncInjectedDevModeKey);
+  }
+  return () => {
+    window.clearInterval(intervalId);
+    window.removeEventListener("focus", syncInjectedDevModeKey);
+    window.removeEventListener("pageshow", syncInjectedDevModeKey);
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", syncInjectedDevModeKey);
+    }
+  };
+}
 function resolveInjectedDevModeKey() {
   if (typeof window === "undefined") return void 0;
   const browserWindow = window;
@@ -8878,9 +8904,40 @@ var TOUR_THEME = {
   cardBorder: "var(--modelnex-tour-card-border, rgba(79, 70, 229, 0.12))",
   actionBg: "var(--modelnex-tour-action-bg, #1e1b4b)"
 };
+var DOCKED_DESKTOP_PANEL_HEIGHT_RATIO = 0.7;
+var UNDOCKED_DESKTOP_PANEL_HEIGHT_RATIO = 0.4;
 function shouldIgnoreTourGestureStart(target) {
   return target instanceof HTMLElement && Boolean(target.closest('[data-modelnex-review-toggle="true"]'));
 }
+function getViewportHeight() {
+  if (typeof window === "undefined") return 0;
+  const layoutViewportHeight = window.innerHeight || document.documentElement?.clientHeight || 0;
+  const visualViewportHeight = window.visualViewport?.height;
+  if (typeof visualViewportHeight === "number" && Number.isFinite(visualViewportHeight) && visualViewportHeight > 0) {
+    return Math.round(Math.min(layoutViewportHeight || visualViewportHeight, visualViewportHeight));
+  }
+  return layoutViewportHeight;
+}
+function useViewportHeight() {
+  const [viewportHeight, setViewportHeight] = (0, import_react18.useState)(() => getViewportHeight());
+  (0, import_react18.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const updateViewportHeight = () => {
+      setViewportHeight(getViewportHeight());
+    };
+    updateViewportHeight();
+    const visualViewport = window.visualViewport;
+    window.addEventListener("resize", updateViewportHeight, { passive: true });
+    visualViewport?.addEventListener("resize", updateViewportHeight);
+    visualViewport?.addEventListener("scroll", updateViewportHeight);
+    return () => {
+      window.removeEventListener("resize", updateViewportHeight);
+      visualViewport?.removeEventListener("resize", updateViewportHeight);
+      visualViewport?.removeEventListener("scroll", updateViewportHeight);
+    };
+  }, []);
+  return viewportHeight;
+}
 function useMediaQuery(query) {
   const [matches, setMatches] = (0, import_react18.useState)(false);
   (0, import_react18.useEffect)(() => {
@@ -9776,6 +9833,7 @@ function ModelNexChatBubble({
     e.stopPropagation();
   };
   const isMobile = useMediaQuery("(max-width: 640px)");
+  const viewportHeight = useViewportHeight();
   const themeStyles = (0, import_react18.useMemo)(() => {
     if (!theme) return null;
     const styles = {};
@@ -9805,13 +9863,13 @@ function ModelNexChatBubble({
     fontFamily: "var(--modelnex-font)",
     ...themeStyles
   };
-  const desktopPanelHeight = docked ? "min(calc(100vh - 48px), calc(var(--modelnex-panel-max-height, 600px) + 180px))" : "var(--modelnex-panel-max-height, 600px)";
-  const desktopPanelMaxHeight = docked ? "calc(100vh - 48px)" : "calc(100vh - 120px)";
+  const desktopPanelHeightRatio = docked ? DOCKED_DESKTOP_PANEL_HEIGHT_RATIO : UNDOCKED_DESKTOP_PANEL_HEIGHT_RATIO;
+  const desktopPanelHeight = viewportHeight > 0 ? `${Math.round(viewportHeight * desktopPanelHeightRatio)}px` : docked ? "70vh" : "40vh";
   const panelStyle = {
     width: isMobile ? "100%" : "var(--modelnex-panel-width, 380px)",
     maxWidth: "calc(100vw - 32px)",
     height: isMobile ? "100%" : desktopPanelHeight,
-    maxHeight: isMobile ? "100%" : desktopPanelMaxHeight,
+    maxHeight: isMobile ? "100%" : desktopPanelHeight,
     borderRadius: isMobile ? "0" : "var(--modelnex-radius-panel, 20px)",
     border: isMobile ? "none" : "1px solid var(--modelnex-border, #e4e4e7)",
     background: "var(--modelnex-bg, #ffffff)",
@@ -11762,7 +11820,8 @@ var ModelNexProvider = ({
   const [socketId, setSocketId] = (0, import_react21.useState)(null);
   const [actions, setActions] = (0, import_react21.useState)(/* @__PURE__ */ new Map());
   const [validatedBrowserDevMode, setValidatedBrowserDevMode] = (0, import_react21.useState)(false);
-  const resolvedDevModeKey = (0, import_react21.useMemo)(() => resolveInjectedDevModeKey(), []);
+  const [resolvedDevModeKey, setResolvedDevModeKey] = (0, import_react21.useState)(() => resolveInjectedDevModeKey());
+  (0, import_react21.useEffect)(() => observeInjectedDevModeKey(setResolvedDevModeKey), []);
   (0, import_react21.useEffect)(() => {
     let cancelled = false;
     if (!websiteId || !resolvedDevModeKey) {

package/dist/index.mjs

@@ -2557,6 +2557,32 @@ function normalizeDevModeKey(value) {
   const normalized = value.trim();
   return normalized || void 0;
 }
+function observeInjectedDevModeKey(listener, options) {
+  if (typeof window === "undefined") return () => {
+  };
+  let currentKey = resolveInjectedDevModeKey();
+  const pollIntervalMs = options?.pollIntervalMs ?? 1e3;
+  const syncInjectedDevModeKey = () => {
+    const nextKey = resolveInjectedDevModeKey();
+    if (nextKey === currentKey) return;
+    currentKey = nextKey;
+    listener(nextKey);
+  };
+  const intervalId = window.setInterval(syncInjectedDevModeKey, pollIntervalMs);
+  window.addEventListener("focus", syncInjectedDevModeKey);
+  window.addEventListener("pageshow", syncInjectedDevModeKey);
+  if (typeof document !== "undefined") {
+    document.addEventListener("visibilitychange", syncInjectedDevModeKey);
+  }
+  return () => {
+    window.clearInterval(intervalId);
+    window.removeEventListener("focus", syncInjectedDevModeKey);
+    window.removeEventListener("pageshow", syncInjectedDevModeKey);
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", syncInjectedDevModeKey);
+    }
+  };
+}
 function resolveInjectedDevModeKey() {
   if (typeof window === "undefined") return void 0;
   const browserWindow = window;
@@ -8668,9 +8694,40 @@ var TOUR_THEME = {
   cardBorder: "var(--modelnex-tour-card-border, rgba(79, 70, 229, 0.12))",
   actionBg: "var(--modelnex-tour-action-bg, #1e1b4b)"
 };
+var DOCKED_DESKTOP_PANEL_HEIGHT_RATIO = 0.7;
+var UNDOCKED_DESKTOP_PANEL_HEIGHT_RATIO = 0.4;
 function shouldIgnoreTourGestureStart(target) {
   return target instanceof HTMLElement && Boolean(target.closest('[data-modelnex-review-toggle="true"]'));
 }
+function getViewportHeight() {
+  if (typeof window === "undefined") return 0;
+  const layoutViewportHeight = window.innerHeight || document.documentElement?.clientHeight || 0;
+  const visualViewportHeight = window.visualViewport?.height;
+  if (typeof visualViewportHeight === "number" && Number.isFinite(visualViewportHeight) && visualViewportHeight > 0) {
+    return Math.round(Math.min(layoutViewportHeight || visualViewportHeight, visualViewportHeight));
+  }
+  return layoutViewportHeight;
+}
+function useViewportHeight() {
+  const [viewportHeight, setViewportHeight] = useState13(() => getViewportHeight());
+  useEffect17(() => {
+    if (typeof window === "undefined") return;
+    const updateViewportHeight = () => {
+      setViewportHeight(getViewportHeight());
+    };
+    updateViewportHeight();
+    const visualViewport = window.visualViewport;
+    window.addEventListener("resize", updateViewportHeight, { passive: true });
+    visualViewport?.addEventListener("resize", updateViewportHeight);
+    visualViewport?.addEventListener("scroll", updateViewportHeight);
+    return () => {
+      window.removeEventListener("resize", updateViewportHeight);
+      visualViewport?.removeEventListener("resize", updateViewportHeight);
+      visualViewport?.removeEventListener("scroll", updateViewportHeight);
+    };
+  }, []);
+  return viewportHeight;
+}
 function useMediaQuery(query) {
   const [matches, setMatches] = useState13(false);
   useEffect17(() => {
@@ -9566,6 +9623,7 @@ function ModelNexChatBubble({
     e.stopPropagation();
   };
   const isMobile = useMediaQuery("(max-width: 640px)");
+  const viewportHeight = useViewportHeight();
   const themeStyles = useMemo3(() => {
     if (!theme) return null;
     const styles = {};
@@ -9595,13 +9653,13 @@ function ModelNexChatBubble({
     fontFamily: "var(--modelnex-font)",
     ...themeStyles
   };
-  const desktopPanelHeight = docked ? "min(calc(100vh - 48px), calc(var(--modelnex-panel-max-height, 600px) + 180px))" : "var(--modelnex-panel-max-height, 600px)";
-  const desktopPanelMaxHeight = docked ? "calc(100vh - 48px)" : "calc(100vh - 120px)";
+  const desktopPanelHeightRatio = docked ? DOCKED_DESKTOP_PANEL_HEIGHT_RATIO : UNDOCKED_DESKTOP_PANEL_HEIGHT_RATIO;
+  const desktopPanelHeight = viewportHeight > 0 ? `${Math.round(viewportHeight * desktopPanelHeightRatio)}px` : docked ? "70vh" : "40vh";
   const panelStyle = {
     width: isMobile ? "100%" : "var(--modelnex-panel-width, 380px)",
     maxWidth: "calc(100vw - 32px)",
     height: isMobile ? "100%" : desktopPanelHeight,
-    maxHeight: isMobile ? "100%" : desktopPanelMaxHeight,
+    maxHeight: isMobile ? "100%" : desktopPanelHeight,
     borderRadius: isMobile ? "0" : "var(--modelnex-radius-panel, 20px)",
     border: isMobile ? "none" : "1px solid var(--modelnex-border, #e4e4e7)",
     background: "var(--modelnex-bg, #ffffff)",
@@ -11552,7 +11610,8 @@ var ModelNexProvider = ({
   const [socketId, setSocketId] = useState15(null);
   const [actions, setActions] = useState15(/* @__PURE__ */ new Map());
   const [validatedBrowserDevMode, setValidatedBrowserDevMode] = useState15(false);
-  const resolvedDevModeKey = useMemo5(() => resolveInjectedDevModeKey(), []);
+  const [resolvedDevModeKey, setResolvedDevModeKey] = useState15(() => resolveInjectedDevModeKey());
+  useEffect19(() => observeInjectedDevModeKey(setResolvedDevModeKey), []);
   useEffect19(() => {
     let cancelled = false;
     if (!websiteId || !resolvedDevModeKey) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelnex/sdk",
-  "version": "0.5.30",
+  "version": "0.5.32",
   "description": "React SDK for natural language control of web apps via AI agents",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,15 +20,6 @@
     "dist",
     "README.md"
   ],
-  "scripts": {
-    "prepublishOnly": "npm run build",
-    "build": "npm exec -- tsup src/index.ts --format cjs,esm --dts",
-    "dev": "npm exec -- tsup src/index.ts --format cjs,esm --watch --dts",
-    "lint": "eslint src/",
-    "test": "npm run build && node --test tests/*.test.js",
-    "test:ci": "npm run test && npm run test:unit",
-    "test:unit": "node --import tsx --test tests/*.test.ts"
-  },
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
@@ -67,5 +58,13 @@
   "bugs": {
     "url": "https://github.com/sharunaraksha/modelnex-sdk/issues"
   },
-  "homepage": "https://github.com/sharunaraksha/modelnex-sdk#readme"
-}
+  "homepage": "https://github.com/sharunaraksha/modelnex-sdk#readme",
+  "scripts": {
+    "build": "npm exec -- tsup src/index.ts --format cjs,esm --dts",
+    "dev": "npm exec -- tsup src/index.ts --format cjs,esm --watch --dts",
+    "lint": "eslint src/",
+    "test": "npm run build && node --test tests/*.test.js",
+    "test:ci": "npm run test && npm run test:unit",
+    "test:unit": "node --import tsx --test tests/*.test.ts"
+  }
+}

package/dist/dom-sync-L5KIP45X.mjs

@@ -1,55 +0,0 @@
-// src/utils/dom-sync.ts
-function waitForDomSettle(options = {}) {
-  const { timeoutMs = 5e3, debounceMs = 400, minWaitMs = 100 } = options;
-  return new Promise((resolve) => {
-    let debounceTimer = null;
-    let resolved = false;
-    const maxTimer = setTimeout(() => {
-      if (!resolved) {
-        resolved = true;
-        cleanup();
-        console.log("[DOM Sync] Forced resolution by max timeout");
-        resolve();
-      }
-    }, Math.max(timeoutMs, minWaitMs));
-    const finish = () => {
-      if (!resolved) {
-        resolved = true;
-        cleanup();
-        resolve();
-      }
-    };
-    const observer = new MutationObserver((mutations) => {
-      const hasSignificantMutations = mutations.some((m) => {
-        if (m.target instanceof HTMLElement) {
-          if (m.target.hasAttribute("data-modelnex-tour-highlight")) return false;
-          if (m.target.hasAttribute("data-modelnex-caption")) return false;
-          if (m.target.closest("#modelnex-studio-root")) return false;
-          if (m.target.closest("#modelnex-active-agent-root")) return false;
-        }
-        return true;
-      });
-      if (!hasSignificantMutations) return;
-      if (debounceTimer) clearTimeout(debounceTimer);
-      debounceTimer = setTimeout(finish, debounceMs);
-    });
-    const cleanup = () => {
-      observer.disconnect();
-      if (debounceTimer) clearTimeout(debounceTimer);
-      clearTimeout(maxTimer);
-    };
-    setTimeout(() => {
-      if (resolved) return;
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true
-      });
-      debounceTimer = setTimeout(finish, debounceMs);
-    }, minWaitMs);
-  });
-}
-export {
-  waitForDomSettle
-};