WIP: fix

web_assets/html/header_title.html

@@ -1,7 +1,7 @@
 <div class="gb_hd gb_7c gb_8c"
     style="display:inline-flex;">
     <buttom id="chuanhu-menu-btn" onclick='menuClick()' class="gb_Ec" aria-expanded="false" aria-label="Main menu" role="button" tabindex="0"
-        style="visibility: visible; width:32px; height:32px; margin-right:5px;"><svg focusable="false" viewBox="0 0 24 24">
+        style="visibility: visible; width:32px; height:32px; margin-right:5px;"><svg focusable="false" viewBox="0 0 24 24" fill="currentColor">
             <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
         </svg>
     </div>

web_assets/javascript/ChuanhuChat.js

@@ -94,6 +94,7 @@ function initialize() {
         setChatbotHeight();
         setChatbotScroll();
         setPopupBoxPosition();
+        setChatAreaWidth();
         setSlider();
         setAvatar();
         if (!historyLoaded) loadHistoryHtml();
@@ -212,11 +213,26 @@ function adjustDarkMode() {
     });
 }
 
+
 function setChatAreaWidth() {
     const screenWidth = window.innerWidth;
-    const menuWidth = gradioApp().querySelector('.menu').offsetWidth;
-    const chatAreaWidth = chatArea.offsetWidth
-
+    const menuArea = gradioApp().querySelector('#menu-area');
+    const chatbotArea = gradioApp().querySelector('#chatbot-area');
+    // const menuWidth = menuArea.offsetWidth;
+    const chatbotAreaWidth = chatbotArea.offsetWidth;
+    return;
+    if (menuArea.classList.contains('hideSide')) {
+    //     // chatbotArea.style.width = `${chatbotAreaWidth}px`;
+    //     chatbotArea.style.flexBasis = '75%'
+    // } else {
+    //     chatbotArea.style.flexBasis = `50%`;
+        // if (screenWidth > 499) {
+        //     // chatbotArea.style.width = `${screenWidth - menuWidth}px`;
+        //     chatbotArea.style.width = `800px`;
+        // } else {
+        //     // chatbotArea.style.width = `${chatbotAreaWidth}px`;
+        // }
+    }
 }
 
 function setPopupBoxPosition() {
@@ -317,7 +333,7 @@ window.addEventListener("DOMContentLoaded", function () {
     isInIframe = (window.self !== window.top);
     historyLoaded = false;
 });
-window.addEventListener('resize', ()=>{setChatbotHeight();setPopupBoxPosition()});
+window.addEventListener('resize', ()=>{setChatbotHeight();setPopupBoxPosition();});
 window.addEventListener('scroll', ()=>{setChatbotHeight(); setUpdateWindowHeight();setPopupBoxPosition();});
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", adjustDarkMode);
 

web_assets/javascript/webui.js

@@ -2,6 +2,7 @@ function openSettingBox() {
     chuanhuPopup.classList.add('showBox');
     popupWrapper.classList.add('showBox');
     settingBox.classList.remove('hideBox');
+    trainingBox.classList.add('hideBox');
     showMask();
 
 }
@@ -10,6 +11,7 @@ function openTrainingBox() {
     chuanhuPopup.classList.add('showBox');
     popupWrapper.classList.add('showBox');
     trainingBox.classList.remove('hideBox');
+    settingBox.classList.add('hideBox');
     showMask();
 }
 
@@ -42,6 +44,7 @@ function menuClick() {
         menu.classList.add('hideSide');
         // menuBtn.classList.remove('active');
     }
+    setChatAreaWidth();
 }
 
 function setHistroyPanel() {

web_assets/stylesheet/ChuanhuChat.css

@@ -159,19 +159,39 @@ body.popup-open {
 .hideBox {
     display: none;
 }
+
 .hideSide {
     width: 0 !important;
+    /* flex-basis: 0 !important; */
     display: none !important;
 }
 
 #chatbot-area {
-    transition: width 0.3s ease-in-out;
+    transition: flex-basis 0.5s ease;
+}
+#chatbot-area, #menu-area, #toolbox-area {
+    /* flex: none;
+    flex-grow: unset !important;
+    width: auto;
+    min-width: unset !important;
+    transition: flex-basis 0.5s ease; */
+}
+#chatbot-area {
+
+}
+#menu-area {
+
 }
-.chuanhu-history-panel ul.options {
+#toolbox-area {
+
+}
+
+
+/* .chuanhu-history-panel ul.options {
     position: relative;
     box-shadow: unset;
     overflow: hidden;
-}
+} */
 .chuanhu-history-panel {
     height: 500px;
     overflow: auto;