@modelnex/sdk 0.5.29 → 0.5.31

package/README.md

@@ -86,7 +86,6 @@ Current behavior:
 | `serverUrl` | Backend base URL for chat, tags, tours, voice, and recording APIs |
 | `websiteId` | Tenant/integration identifier |
 | `userProfile` | End-user targeting data for tours/workflows |
-| `devMode` | Enables recording/studio tooling for your internal users |
 
 ## Chat Bubble Props
 
@@ -115,10 +114,7 @@ export function AppShell({ children, currentUser }) {
   return (
     <ModelNexProvider
       websiteId="prod_site_123"
-      
-      // Development setup
-      devMode={process.env.NODE_ENV === 'development'}
-      
+
       // User Targeting for Tours & Workflows
       userProfile={{
         userId: currentUser.id,
@@ -132,6 +128,16 @@ export function AppShell({ children, currentUser }) {
 }
 ```
 
+### Browser-Injected Dev Mode
+
+```html
+<script>
+  window.__MODELNEX_DEV_MODE_KEY__ = 'dmk_live_xxxxxxxxx';
+</script>
+```
+
+The SDK now enables dev tooling only after it finds a browser-injected dev mode key and validates it with the backend for the current `websiteId`.
+
 ### Themed Chat Bubble
 
 ```tsx

package/dist/dom-sync-L5KIP45X.mjs

@@ -0,0 +1,55 @@
+// 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
+};

package/dist/index.d.mts

@@ -845,15 +845,6 @@ interface ModelNexProviderProps {
      * Same-origin base for tour API (avoids CORS for ?modelnex_test_tour=)
      */
     toursApiBase?: string;
-    /**
-     * Enable SDK dev tools unconditionally (tour recording, studio mode)
-     */
-    devMode?: boolean;
-    /**
-     * Optional dev mode key. When present, the SDK validates it with the backend
-     * and enables dev tooling when the key matches the project configuration.
-     */
-    devModeKey?: string;
 }
 declare const ModelNexProvider: React$1.FC<ModelNexProviderProps>;
 

package/dist/index.d.ts

@@ -845,15 +845,6 @@ interface ModelNexProviderProps {
      * Same-origin base for tour API (avoids CORS for ?modelnex_test_tour=)
      */
     toursApiBase?: string;
-    /**
-     * Enable SDK dev tools unconditionally (tour recording, studio mode)
-     */
-    devMode?: boolean;
-    /**
-     * Optional dev mode key. When present, the SDK validates it with the backend
-     * and enables dev tooling when the key matches the project configuration.
-     */
-    devModeKey?: string;
 }
 declare const ModelNexProvider: React$1.FC<ModelNexProviderProps>;
 

package/dist/index.js

@@ -2766,9 +2766,7 @@ function normalizeDevModeKey(value) {
   const normalized = value.trim();
   return normalized || void 0;
 }
-function resolveInjectedDevModeKey(explicitDevModeKey) {
-  const normalizedExplicitKey = normalizeDevModeKey(explicitDevModeKey);
-  if (normalizedExplicitKey) return normalizedExplicitKey;
+function resolveInjectedDevModeKey() {
   if (typeof window === "undefined") return void 0;
   const browserWindow = window;
   for (const globalName of DEV_MODE_KEY_GLOBAL_NAMES) {
@@ -8880,9 +8878,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)(() => {
@@ -9778,6 +9807,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 = {};
@@ -9807,13 +9837,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)",
@@ -11741,8 +11771,6 @@ var ModelNexProvider = ({
   websiteId,
   userProfile,
   toursApiBase,
-  devMode,
-  devModeKey,
   serverUrl: serverUrlProp
 }) => {
   const serverUrl = serverUrlProp ?? DEFAULT_MODELNEX_SERVER_URL;
@@ -11766,7 +11794,7 @@ 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(devModeKey), [devModeKey]);
+  const resolvedDevModeKey = (0, import_react21.useMemo)(() => resolveInjectedDevModeKey(), []);
   (0, import_react21.useEffect)(() => {
     let cancelled = false;
     if (!websiteId || !resolvedDevModeKey) {
@@ -11783,7 +11811,7 @@ var ModelNexProvider = ({
       cancelled = true;
     };
   }, [resolvedDevModeKey, serverUrl, websiteId]);
-  const effectiveDevMode = Boolean(devMode) || validatedBrowserDevMode;
+  const effectiveDevMode = validatedBrowserDevMode;
   const registerAction = (0, import_react21.useCallback)((action) => {
     setActions((prev) => {
       const next = new Map(prev);

package/dist/index.mjs

@@ -2557,9 +2557,7 @@ function normalizeDevModeKey(value) {
   const normalized = value.trim();
   return normalized || void 0;
 }
-function resolveInjectedDevModeKey(explicitDevModeKey) {
-  const normalizedExplicitKey = normalizeDevModeKey(explicitDevModeKey);
-  if (normalizedExplicitKey) return normalizedExplicitKey;
+function resolveInjectedDevModeKey() {
   if (typeof window === "undefined") return void 0;
   const browserWindow = window;
   for (const globalName of DEV_MODE_KEY_GLOBAL_NAMES) {
@@ -8670,9 +8668,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(() => {
@@ -9568,6 +9597,7 @@ function ModelNexChatBubble({
     e.stopPropagation();
   };
   const isMobile = useMediaQuery("(max-width: 640px)");
+  const viewportHeight = useViewportHeight();
   const themeStyles = useMemo3(() => {
     if (!theme) return null;
     const styles = {};
@@ -9597,13 +9627,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)",
@@ -11531,8 +11561,6 @@ var ModelNexProvider = ({
   websiteId,
   userProfile,
   toursApiBase,
-  devMode,
-  devModeKey,
   serverUrl: serverUrlProp
 }) => {
   const serverUrl = serverUrlProp ?? DEFAULT_MODELNEX_SERVER_URL;
@@ -11556,7 +11584,7 @@ var ModelNexProvider = ({
   const [socketId, setSocketId] = useState15(null);
   const [actions, setActions] = useState15(/* @__PURE__ */ new Map());
   const [validatedBrowserDevMode, setValidatedBrowserDevMode] = useState15(false);
-  const resolvedDevModeKey = useMemo5(() => resolveInjectedDevModeKey(devModeKey), [devModeKey]);
+  const resolvedDevModeKey = useMemo5(() => resolveInjectedDevModeKey(), []);
   useEffect19(() => {
     let cancelled = false;
     if (!websiteId || !resolvedDevModeKey) {
@@ -11573,7 +11601,7 @@ var ModelNexProvider = ({
       cancelled = true;
     };
   }, [resolvedDevModeKey, serverUrl, websiteId]);
-  const effectiveDevMode = Boolean(devMode) || validatedBrowserDevMode;
+  const effectiveDevMode = validatedBrowserDevMode;
   const registerAction = useCallback14((action) => {
     setActions((prev) => {
       const next = new Map(prev);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelnex/sdk",
-  "version": "0.5.29",
+  "version": "0.5.31",
   "description": "React SDK for natural language control of web apps via AI agents",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,6 +20,15 @@
     "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",
@@ -58,13 +67,5 @@
   "bugs": {
     "url": "https://github.com/sharunaraksha/modelnex-sdk/issues"
   },
-  "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"
-  }
-}
+  "homepage": "https://github.com/sharunaraksha/modelnex-sdk#readme"
+}