chatbot not overflow (#3777)

* chatbot not overflow

* add comment

projects/app/public/js/iframe.js

@@ -25,7 +25,6 @@ function embedChatbot() {
   ChatBtn.style.cssText =
     'position: fixed; bottom: 30px; right: 60px; width: 40px; height: 40px; cursor: pointer; z-index: 2147483647; transition: 0;';
 
-  // btn icon
   const ChatBtnDiv = document.createElement('img');
   ChatBtnDiv.src = defaultOpen ? CloseIcon : MessageIcon;
   ChatBtnDiv.setAttribute('width', '100%');
@@ -74,34 +73,20 @@ function embedChatbot() {
       chatWindow.offsetHeight
     ];
 
-    const directions = [
+    let right = 0;
-      {
+    if (btn.left >= ww) {
-        // 左下
+      right = vw - btn.left + 10; // 左侧有空间则放在左侧，间距 10
-        check: () => btn.left >= ww && vh - btn.bottom >= wh,
+    } else if (vw - btn.right >= ww) {
-        pos: () => [vw - btn.left, vh - btn.bottom - wh]
+      right = vw - btn.right - ww - 10; // 右侧有空间则放在右侧
-      },
+    }
-      {
-        // 右上
-        check: () => vw - btn.right >= ww && btn.top >= wh,
-        pos: () => [vw - btn.right - ww, vh - btn.top]
-      },
-      {
-        // 右下
-        check: () => vw - btn.right >= ww && vh - btn.bottom >= wh,
-        pos: () => [vw - btn.right - ww, vh - btn.bottom - wh]
-      },
-      {
-        // 左上
-        check: () => true,
-        pos: () => [vw - btn.left, vh - btn.top]
-      }
-    ];
 
-    const [right, bottom] = directions.find((d) => d.check()).pos();
+    let bottom = Math.max(30, vh - btn.bottom); // 聊天窗口底部和按钮对齐，最少 30
-    Object.assign(chatWindow.style, {
+    if (btn.top < wh) {
-      right: `${right}px`,
+      bottom = Math.min(bottom, vh - wh - 30); // 确保聊天窗口不超出顶部
-      bottom: `${bottom}px`
+    }
-    });
+
+    chatWindow.style.right = `${right}px`;
+    chatWindow.style.bottom = `${bottom}px`;
   };
 
   ChatBtn.addEventListener('click', function () {
@@ -144,6 +129,9 @@ function embedChatbot() {
     let newRight = ChatBtn.initialRight - deltaX;
     let newBottom = ChatBtn.initialBottom - deltaY;
 
+    newRight = Math.max(20, Math.min(window.innerWidth - 60, newRight));
+    newBottom = Math.max(30, Math.min(window.innerHeight - 70, newBottom));
+
     ChatBtn.style.right = `${newRight}px`;
     ChatBtn.style.bottom = `${newBottom}px`;