@modelnex/sdk 0.5.30 → 0.5.31

package/dist/index.js

@@ -8878,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)(() => {
@@ -9776,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 = {};
@@ -9805,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)",

package/dist/index.mjs

@@ -8668,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(() => {
@@ -9566,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 = {};
@@ -9595,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)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelnex/sdk",
-  "version": "0.5.30",
+  "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",