eat-js-sdk 2.0.50 → 2.0.51

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",
@@ -7789,14 +7793,25 @@ function getDynamicMarginTop(containerElement) {
     return "margin-top: 0px";
   }
   const windowHeight = window.innerHeight;
-  const contentHeight = containerElement.scrollHeight;
-  const offsetTop = containerElement.offsetTop;
-  const availableSpace = windowHeight - offsetTop;
-  if (availableSpace <= 0 || contentHeight <= 0) {
+  let contentHeight = containerElement.scrollHeight;
+  const rect = containerElement.getBoundingClientRect();
+  const images = containerElement.querySelectorAll("img");
+  const hasUnloadedImages = Array.from(images).some((img) => !img.complete);
+  if (hasUnloadedImages && images.length > 0) {
+    const firstImg = images[0];
+    const estimatedImgHeight = firstImg.naturalHeight || LAYOUT_CONFIG.DEFAULT_IMAGE_HEIGHT;
+    contentHeight = Math.max(contentHeight, estimatedImgHeight + LAYOUT_CONFIG.IMAGE_PADDING);
+  }
+  if (contentHeight <= 0) {
     return "margin-top: 0px";
   }
-  const marginTop = Math.max(0, (availableSpace - contentHeight) / 2);
-  return `margin-top: ${marginTop}px`;
+  const containerTop = rect.top;
+  const availableSpace = windowHeight - containerTop;
+  if (contentHeight < availableSpace) {
+    const marginTop = (availableSpace - contentHeight) / 2;
+    return `margin-top: ${Math.max(0, marginTop)}px`;
+  }
+  return "margin-top: 0px";
 }
 function getWindowHeight() {
   if (typeof window === "undefined") {
@@ -8576,32 +8591,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.51",
   "change version": "2.0.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [