From 686b09afd1bdd1c08b6731da7241e7b1a8d03e58 Mon Sep 17 00:00:00 2001
From: heheer <heheer@sealos.io>
Date: Thu, 13 Feb 2025 15:10:22 +0800
Subject: [PATCH] chatbot not overflow (#3777)

* chatbot not overflow

* add comment
---
 projects/app/public/js/iframe.js | 44 ++++++++++++--------------------
 1 file changed, 16 insertions(+), 28 deletions(-)

diff --git a/projects/app/public/js/iframe.js b/projects/app/public/js/iframe.js
index a2d19f992e00..5e5f81004c2d 100644
--- a/projects/app/public/js/iframe.js
+++ b/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 = [
-      {
-        // 左下
-        check: () => btn.left >= ww && vh - btn.bottom >= wh,
-        pos: () => [vw - btn.left, vh - btn.bottom - wh]
-      },
-      {
-        // 右上
-        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]
-      }
-    ];
+    let right = 0;
+    if (btn.left >= ww) {
+      right = vw - btn.left + 10; // 左侧有空间则放在左侧，间距 10
+    } else if (vw - btn.right >= ww) {
+      right = vw - btn.right - ww - 10; // 右侧有空间则放在右侧
+    }
 
-    const [right, bottom] = directions.find((d) => d.check()).pos();
-    Object.assign(chatWindow.style, {
-      right: `${right}px`,
-      bottom: `${bottom}px`
-    });
+    let bottom = Math.max(30, vh - btn.bottom); // 聊天窗口底部和按钮对齐，最少 30
+    if (btn.top < wh) {
+      bottom = Math.min(bottom, vh - wh - 30); // 确保聊天窗口不超出顶部
+    }
+
+    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`;