auto hide tooltip when scoll down

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,

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');
+        // if chatbot hit upper page boarder, hide all
-        var tab_nav = qq.getElementsByClassName('tab-nav');
+        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;

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) {