eat-js-sdk 2.0.50 → 2.0.52

package/dist/interaction-builder.mjs

@@ -5151,6 +5151,10 @@ const BREAKPOINTS = {
   MD: 732,
   LG: 1196
 };
+const LAYOUT_CONFIG = {
+  DEFAULT_IMAGE_HEIGHT: 200,
+  IMAGE_PADDING: 200
+};
 const STIMULUS_MAX_WORD_LENGTH_BEFORE_OVERFLOW = 80;
 const MODES = {
   SESSION: "session",
@@ -7790,30 +7794,37 @@ function getDynamicMarginTop(containerElement) {
   }
   const windowHeight = window.innerHeight;
   const contentHeight = containerElement.scrollHeight;
-  const offsetTop = containerElement.offsetTop;
-  const availableSpace = windowHeight - offsetTop;
-  if (availableSpace <= 0 || contentHeight <= 0) {
+  if (contentHeight <= 0 || windowHeight <= 0) {
     return "margin-top: 0px";
   }
-  const marginTop = Math.max(0, (availableSpace - contentHeight) / 2);
-  return `margin-top: ${marginTop}px`;
+  const rect = containerElement.getBoundingClientRect();
+  const images = containerElement.querySelectorAll("img");
+  const hasUnloadedImages = Array.from(images).some((img) => !img.complete);
+  let adjustedHeight = contentHeight;
+  if (hasUnloadedImages && images.length > 0) {
+    const firstImg = images[0];
+    const estimatedImgHeight = firstImg.naturalHeight || LAYOUT_CONFIG.DEFAULT_IMAGE_HEIGHT;
+    adjustedHeight = Math.max(contentHeight, estimatedImgHeight + LAYOUT_CONFIG.IMAGE_PADDING);
+  }
+  const containerTop = rect.top;
+  const availableSpace = windowHeight - containerTop;
+  if (adjustedHeight < availableSpace) {
+    const marginTop = (availableSpace - adjustedHeight) / 2;
+    return `margin-top: ${Math.max(0, marginTop)}px`;
+  }
+  return "margin-top: 0px";
 }
 function getWindowHeight() {
   if (typeof window === "undefined") {
     return { value: 0, cleanup: () => {
     } };
   }
-  let height = /* @__PURE__ */ state(proxy(window.innerHeight));
-  const updateHeight = () => {
-    set(height, window.innerHeight, true);
-  };
-  window.addEventListener("resize", updateHeight);
+  let height = proxy(window.innerHeight);
   return {
     get value() {
-      return get$1(height);
+      return height;
     },
     cleanup: () => {
-      window.removeEventListener("resize", updateHeight);
     }
   };
 }
@@ -8576,32 +8587,11 @@ function PromptContainer($$anchor, $$props) {
   let windowHeight = getWindowHeight();
   let contentLoader = /* @__PURE__ */ user_derived(() => useContentLoader(get$1(containerElement)));
   let dynamicMarginTop = /* @__PURE__ */ state("margin-top: 0px");
-  const RESIZE_DEBOUNCE_DELAY = 150;
   user_effect(() => {
     if (windowHeight.value > 0 && get$1(containerElement) && get$1(contentLoader).isLoaded) {
-      set(dynamicMarginTop, getDynamicMarginTop(get$1(containerElement)), true);
-    }
-  });
-  user_effect(() => {
-    if (windowHeight.value > 0 && get$1(containerElement) && get$1(contentLoader).isLoaded) {
-      let resizeTimeout;
-      const handleResize = () => {
-        clearTimeout(resizeTimeout);
-        resizeTimeout = window.setTimeout(
-          () => {
-            const newMargin = getDynamicMarginTop(get$1(containerElement));
-            if (newMargin !== get$1(dynamicMarginTop)) {
-              set(dynamicMarginTop, newMargin, true);
-            }
-          },
-          RESIZE_DEBOUNCE_DELAY
-        );
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        clearTimeout(resizeTimeout);
-        window.removeEventListener("resize", handleResize);
-      };
+      requestAnimationFrame(() => {
+        set(dynamicMarginTop, getDynamicMarginTop(get$1(containerElement)), true);
+      });
     }
   });
   let isStimulusModalOpen = /* @__PURE__ */ state(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.0.50",
+  "version": "2.0.52",
   "change version": "2.0.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [