From 9b0b2cf26099123e75d710bed451e1cc8c4fd0f7 Mon Sep 17 00:00:00 2001
From: binary-husky <qingxu.fu@outlook.com>
Date: Tue, 28 Jan 2025 23:32:40 +0800
Subject: [PATCH] auto hide tooltip when scoll down

---
 themes/common.css | 13 ++++++++++++-
 themes/common.js  | 20 +++++++++++++++++---
 themes/welcome.js |  1 +
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/themes/common.css b/themes/common.css
index 22b6e294..50568c5d 100644
--- a/themes/common.css
+++ b/themes/common.css
@@ -32,7 +32,6 @@
     visibility: hidden;
 }
 
-
 /* height of the upload box */
 .wrap.svelte-xwlu1w {
     min-height: var(--size-32);
@@ -285,6 +284,18 @@
     left: 10px;
 }
 
+#tooltip .hidden {
+    /* display: none; */
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+#tooltip .visible {
+    /* display: block; */
+    opacity: 1;
+    transition: opacity 0.5s ease;
+}
+
 #elem_fontsize,
 #elem_top_p,
 #elem_temperature,
diff --git a/themes/common.js b/themes/common.js
index 40848cee..f4a0a064 100644
--- a/themes/common.js
+++ b/themes/common.js
@@ -750,10 +750,24 @@ function minor_ui_adjustment() {
     var bar_btn_width = [];
     // 自动隐藏超出范围的toolbar按钮
     function auto_hide_toolbar() {
-        var qq = document.getElementById('tooltip');
-        var tab_nav = qq.getElementsByClassName('tab-nav');
+        // if chatbot hit upper page boarder, hide all
+        const elem_chatbot = document.getElementById('gpt-chatbot');
+        const chatbot_top = elem_chatbot.getBoundingClientRect().top;
+        var tooltip = document.getElementById('tooltip');
+        var tab_nav = tooltip.getElementsByClassName('tab-nav')[0];
+
+        // 20 px 大概是一个字的高度
+        if (chatbot_top < 20) {
+            // tab_nav.style.display = 'none';
+            if (tab_nav.classList.contains('visible')) {tab_nav.classList.remove('visible');}
+            if (!tab_nav.classList.contains('hidden')) {tab_nav.classList.add('hidden');}
+            return;
+        }
+        if (tab_nav.classList.contains('hidden')) {tab_nav.classList.remove('hidden');}
+        if (!tab_nav.classList.contains('visible')) {tab_nav.classList.add('visible');}
+        // tab_nav.style.display = '';
         if (tab_nav.length == 0) { return; }
-        var btn_list = tab_nav[0].getElementsByTagName('button')
+        var btn_list = tab_nav.getElementsByTagName('button')
         if (btn_list.length == 0) { return; }
         // 获取页面宽度
         var page_width = document.documentElement.clientWidth;
diff --git a/themes/welcome.js b/themes/welcome.js
index db452fd4..54c15d07 100644
--- a/themes/welcome.js
+++ b/themes/welcome.js
@@ -203,6 +203,7 @@ class WelcomeMessage {
         const elem_chatbot = document.getElementById('gpt-chatbot');
         const chatbot_top = elem_chatbot.getBoundingClientRect().top;
         const welcome_card_container = document.getElementsByClassName('welcome-card-container')[0];
+
         // detect if welcome card overflow
         let welcome_card_overflow = false;
         if (welcome_card_container) {