WIP: 重写侧边栏样式与开关逻辑

ChuanhuChatbot.py

@@ -96,7 +96,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                 gr.HTML(get_html("func_nav.html"))
 
         with gr.Column(elem_id="chuanhu-area", scale=5):
-            with gr.Column(scale=5, elem_id="chatbot-area"):
+            with gr.Column(elem_id="chatbot-area"):
                 with gr.Row():
                     chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu-chatbot", latex_delimiters=latex_delimiters_set, height=700, avatar_images=[config.user_avatar, config.bot_avatar])
                 with gr.Row():
@@ -126,54 +126,54 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                         with gr.Column(min_width=20, scale=1):
                             dislikeBtn = gr.Button(i18n("👎"))
 
-            with gr.Column(elem_id="toolbox-area", min_width=50, scale=1):
-                with gr.Box(elem_id="chuanhu-toolbox"):
-                    with gr.Row():
-                        gr.Markdown("## 🛠️ Toolbox")
-                        gr.HTML(get_html("close_btn.html").format(obj="toolbox"), elem_classes="close-btn")
-                    with gr.Tabs(elem_id="chuanhu-toolbox-tabs"):
-                        with gr.Tab(label=i18n("Prompt")):
-                        # with gr.Accordion(label="Prompt", open=True):
-                            systemPromptTxt = gr.Textbox(
-                                show_label=True,
-                                placeholder=i18n("在这里输入System Prompt..."),
-                                label="System prompt",
-                                value=INITIAL_SYSTEM_PROMPT,
-                                lines=10
-                            )
-                            with gr.Accordion(label=i18n("加载Prompt模板"), open=True):
-                                with gr.Column():
-                                    with gr.Row():
-                                        with gr.Column(scale=6):
-                                            templateFileSelectDropdown = gr.Dropdown(
-                                                label=i18n("选择Prompt模板集合文件"),
-                                                choices=get_template_names(plain=True),
-                                                multiselect=False,
-                                                value=get_template_names(plain=True)[0],
-                                                container=False,
-                                            )
-                                        with gr.Column(scale=1):
-                                            templateRefreshBtn = gr.Button(i18n("🔄 刷新"))
-                                    with gr.Row():
-                                        with gr.Column():
-                                            templateSelectDropdown = gr.Dropdown(
-                                                label=i18n("从Prompt模板中加载"),
-                                                choices=load_template(
-                                                    get_template_names(plain=True)[0], mode=1
-                                                ),
-                                                multiselect=False,
-                                                container=False,
-                                            )
-                        with gr.Tab(label=i18n("Parameters")):
-                            gr.Markdown("will be here soon...")
-                        with gr.Tab(label=i18n("Extensions")):
-                            gr.Markdown("no, not yet...")  
-                        with gr.Tab(label=i18n("不知道还有啥tab")):
-                            gr.Markdown("I am Keldos. Hello, world!")
-
-                        # changeAPIURLBtn = gr.Button(i18n("🔄 切换API地址"))
-                        updateChuanhuBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="update-chuanhu-btn")
-                        historySelectBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="history-select-btn")
+        with gr.Column(elem_id="toolbox-area", scale=1):
+            with gr.Box(elem_id="chuanhu-toolbox"): # For CSS setting, there is an extra box. Don't remove it.
+                with gr.Row():
+                    gr.Markdown("## 🛠️ Toolbox")
+                    gr.HTML(get_html("close_btn.html").format(obj="toolbox"), elem_classes="close-btn")
+                with gr.Tabs(elem_id="chuanhu-toolbox-tabs"):
+                    with gr.Tab(label=i18n("Prompt")):
+                    # with gr.Accordion(label="Prompt", open=True):
+                        systemPromptTxt = gr.Textbox(
+                            show_label=True,
+                            placeholder=i18n("在这里输入System Prompt..."),
+                            label="System prompt",
+                            value=INITIAL_SYSTEM_PROMPT,
+                            lines=10
+                        )
+                        with gr.Accordion(label=i18n("加载Prompt模板"), open=True):
+                            with gr.Column():
+                                with gr.Row():
+                                    with gr.Column(scale=6):
+                                        templateFileSelectDropdown = gr.Dropdown(
+                                            label=i18n("选择Prompt模板集合文件"),
+                                            choices=get_template_names(plain=True),
+                                            multiselect=False,
+                                            value=get_template_names(plain=True)[0],
+                                            container=False,
+                                        )
+                                    with gr.Column(scale=1):
+                                        templateRefreshBtn = gr.Button(i18n("🔄 刷新"))
+                                with gr.Row():
+                                    with gr.Column():
+                                        templateSelectDropdown = gr.Dropdown(
+                                            label=i18n("从Prompt模板中加载"),
+                                            choices=load_template(
+                                                get_template_names(plain=True)[0], mode=1
+                                            ),
+                                            multiselect=False,
+                                            container=False,
+                                        )
+                    with gr.Tab(label=i18n("Parameters")):
+                        gr.Markdown("will be here soon...")
+                    with gr.Tab(label=i18n("Extensions")):
+                        gr.Markdown("no, not yet...")  
+                    with gr.Tab(label=i18n("不知道还有啥tab")):
+                        gr.Markdown("I am Keldos. Hello, world!")
+
+                    # changeAPIURLBtn = gr.Button(i18n("🔄 切换API地址"))
+                    updateChuanhuBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="update-chuanhu-btn")
+                    historySelectBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="history-select-btn")
 
     with gr.Row(elem_id="popup-wrapper"):
         with gr.Box(elem_id="chuanhu-popup"):

web_assets/javascript/ChuanhuChat.js

@@ -112,6 +112,9 @@ function initialize() {
     settingBox.classList.add('hideBox');
     trainingBox.classList.add('hideBox');
     // trainBody.classList.add('hide-body');
+
+    adjustSide();
+
     return true;
 }
 
@@ -322,6 +325,7 @@ window.addEventListener("DOMContentLoaded", function () {
 window.addEventListener('resize', ()=>{
     setChatbotHeight();
     setPopupBoxPosition();
+    adjustSide();
     windowWidth = window.innerWidth;
 });
 window.addEventListener('scroll', ()=>{setChatbotHeight(); setUpdateWindowHeight();setPopupBoxPosition();});

web_assets/javascript/webui.js

@@ -25,77 +25,12 @@ function showMask() {
     });
 }
 
-
-function showSideMask() {
-    const oldSideMask = gradioApp().querySelector('.chuanhu-side-mask');
-    if (oldSideMask) {
-        showOrHideSideMask(oldSideMask);
-        return;
-    }
-
-
-    function showOrHideSideMask(sideMask) {
-        if (document.querySelector('.showSide')) {
-
-            if (windowWidth < 1024) {
-                if (menu.classList.contains('showSide') && toolbox.classList.contains('showSide')) {
-                    toolbox.classList.remove('showSide');
-                    chuanhuHeader.classList.remove('under-box');
-                    // if both menu and toolbox are open, close toolbox...
-                }
-            }
-            // console.log("test in showSide")
-            if (windowWidth <= 768) {
-                document.body.classList.add('popup-open');
-                // sideMask.style.opacity = '0';
-                if (document.querySelector('.chuanhu-side-mask')) {
-                    sideMask.style.display = 'block';
-                    // setTimeout(() => {sideMask.style.opacity = '0.5'; }, 200);
-                    setTimeout(() => {sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';}, 200);
-                    sideMask.classList.add('mask-blur');
-                } else {
-                    // sideMask.style.opacity = '0.5';
-                    sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
-                    sideMask.classList.add('mask-blur');
-                }
-                // sideMask.style.display = 'block';
-                // // sideMask.style.opacity = '0.5';
-                // setTimeout(() => {sideMask.style.opacity = '0.5'; }, 100);
-
-                // sideMask.style.display = 'block';
-            } else {
-                // sideMask.style.display = 'none';
-                document.body.classList.remove('popup-open');
-                // sideMask.style.opacity = '0';
-                sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
-                // sideMask.style.display = 'none';
-                // note: 动画卡，气死我了
-                setTimeout(() => {sideMask.style.display = 'none'; }, 100);
-            }
-        }
-    }
-
-    const sideMask = document.createElement('div');
-    sideMask.classList.add('chuanhu-side-mask');
-    window.addEventListener('resize', () => {
-        showOrHideSideMask(sideMask);
-    });
-
-    gradioApp().appendChild(sideMask);
-    showOrHideSideMask(sideMask);
-    
-
-    sideMask.addEventListener('click', () => {
-        closeSide(menu);
-        closeSide(toolbox);
-    });
-}
-
 function closeBtnClick(obj) {
     if (obj == "box") {
         closeBox();
     } else if (obj == "toolbox") {
         closeSide(toolbox);
+        wantOpenToolbox = false;
     }
 }
 
@@ -109,43 +44,139 @@ function closeBox() {
 }
 
 function closeSide(sideArea) {
-    
-    document.querySelector('.chuanhu-side-mask').style.opacity = '0';
-    setTimeout(() => {document.querySelector('.chuanhu-side-mask').remove();}, 300);
     document.body.classList.remove('popup-open');
-
     sideArea.classList.remove('showSide');
+    if (sideArea == toolbox) {
+        chuanhuHeader.classList.remove('under-box');
+        toolboxOpening = false;
+    } else if (sideArea == menu) {
+        menuOpening = false;
+    }
+}
 
-    chuanhuHeader.classList.remove('under-box');
-
+function openSide(sideArea) {
+    sideArea.classList.add('showSide');
+    if (sideArea == toolbox) {
+        chuanhuHeader.classList.add('under-box');
+        toolboxOpening = true;
+    } else if (sideArea == menu) {
+        menuOpening = true;
+    }
+    // document.body.classList.add('popup-open');
 }
 
 function menuClick() {
-    // var menuBtn = gradioApp().querySelector('.menu-btn');
-    if (menu.classList.contains('showSide')) {
-        menu.classList.remove('showSide');
+    shouldAutoClose = false;
+    if (menuOpening) {
         closeSide(menu);
+        wantOpenMenu = false;
     } else {
-        menu.classList.add('showSide');
-        showSideMask();
+        if (windowWidth < 1024 && toolboxOpening) {
+            closeSide(toolbox);
+            wantOpenToolbox = false;
+        }
+        openSide(menu);
+        wantOpenMenu = true;
     }
+    adjustSide();
 }
 
 function toolboxClick() {
-    if (toolbox.classList.contains('showSide')) {
-        toolbox.classList.remove('showSide');
-        chuanhuHeader.classList.remove('under-box');
+    shouldAutoClose = false;
+    if (toolboxOpening) {
         closeSide(toolbox);
+        wantOpenToolbox = false;
     } else {
-        if (menu.classList.contains('showSide') && windowWidth < 1024) {
-            menu.classList.remove('showSide');
+        if (windowWidth < 1024 && menuOpening) {
+            closeSide(menu);
+            wantOpenMenu = false;
         }
-        toolbox.classList.add('showSide');
-        chuanhuHeader.classList.add('under-box');
-        showSideMask();
+        openSide(toolbox);
+        wantOpenToolbox = true;
     }
+    adjustSide();
 }
 
+var menuOpening = false;
+var toolboxOpening = false;
+var shouldAutoClose = true;
+var wantOpenMenu = windowWidth > 768;
+var wantOpenToolbox = false;
+
+function adjustSide() {
+    if (windowWidth >= 1024) {
+        shouldAutoClose = true;
+        if (wantOpenMenu) {
+            openSide(menu);
+        } else if (wantOpenToolbox) {
+            openSide(toolbox);
+        } else {
+            closeSide(menu);
+            closeSide(toolbox);
+        }
+    } else if (windowWidth > 768 && windowWidth < 1024 ) {
+        shouldAutoClose = true;
+        if (wantOpenToolbox) {
+            if (wantOpenMenu) {
+                closeSide(toolbox);
+                openSide(menu);
+            } else {
+                closeSide(menu);
+                openSide(toolbox);
+            }
+        } else if (wantOpenMenu) {
+            if (wantOpenToolbox) {
+                closeSide(menu);
+                openSide(toolbox);
+            } else {
+                closeSide(toolbox);
+                openSide(menu);
+            }
+        } else if (!wantOpenMenu && !wantOpenToolbox){
+            closeSide(menu);
+            closeSide(toolbox);
+        }
+    } else { // windowWidth <= 768
+        if (shouldAutoClose) {
+            closeSide(menu);
+            // closeSide(toolbox);
+        }
+    }
+    adjustMask();
+}
+
+function adjustMask() {
+    var sideMask = null;
+    if (!gradioApp().querySelector('.chuanhu-side-mask')) {
+        sideMask = document.createElement('div');
+        sideMask.classList.add('chuanhu-side-mask');
+        gradioApp().appendChild(sideMask);
+        sideMask.addEventListener('click', () => {
+            closeSide(menu);
+            closeSide(toolbox);
+        });
+    }
+    sideMask = gradioApp().querySelector('.chuanhu-side-mask');
+
+    if (windowWidth > 768) {
+        sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+        setTimeout(() => {sideMask.style.display = 'none'; }, 100);
+        return;
+    }
+    // if (windowWidth <= 768)
+    if (menuOpening || toolboxOpening) {
+        document.body.classList.add('popup-open');
+        sideMask.style.display = 'block';
+        setTimeout(() => {sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';}, 200);
+        sideMask.classList.add('mask-blur');
+    } else if (!menuOpening && !toolboxOpening) {
+        sideMask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
+        setTimeout(() => {sideMask.style.display = 'none'; }, 100);
+    }
+}
+
+
+/*
 function setHistroyPanel() {
     const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
     const historyPanel = document.createElement('div');
@@ -170,6 +201,7 @@ function setHistroyPanel() {
         }
     });
 }
+*/
 
 // function addHistoryPanelListener(historyPanel){
 //     historyPanel.querySelectorAll('ul.options > li').forEach((historyItem) => {

web_assets/stylesheet/ChuanhuChat.css

@@ -10,8 +10,8 @@
     --switch-checkbox-color-light: #e5e7eb;
     --switch-checkbox-color-dark: #515151;
 
-    --menu-width: 300px;
-    --menu-background-fill: white;
+    --menu-width: 320px;
+    --menu-background-fill: transparent;
     --toolbox-width: 280px;
 }
 
@@ -198,10 +198,10 @@ body.popup-open {
     border-bottom: 1px solid var(--border-color-primary);
 
     @media screen and (max-width: 639px) {
-        padding: 6px 24px;
+        padding: 6px 16px;
     }
     @media screen and (min-width: 640px) {
-        padding: 6px 48px;
+        padding: 6px 24px;
     }
     /* @media screen and (min-width: 1024px) {
         padding: 6px 96px;
@@ -216,13 +216,26 @@ body.popup-open {
     gap: 0;
     overflow: hidden;
     display: inline-flex;
+    justify-content: space-between;
     /* margin-top: 54px; */
     /* height: calc(100vh - 72px); */
     position: absolute;
     top: 48px;
 }
-.api-docs-wrap {
-    margin-top: 64px;
+
+#chuanhu-area {
+    flex: unset;
+    width: 100%;
+    flex-wrap: nowrap;
+    /* gap: 0; */
+    justify-content: center;
+    overflow: hidden;
+    flex-direction: row;
+    padding-bottom: 6px;
+    margin: 0 16px;
+}
+#chatbot-area {
+    max-width: 1024px;
 }
 
 /* default invisible */
@@ -245,34 +258,28 @@ body.popup-open {
 #menu-area > div {
     width: var(--menu-width);
 }
-#toolbox-area > div {
-    width: var(--toolbox-width);
-}
 #menu-area.showSide {
     width: var(--menu-width);
+    max-width: var(--menu-width);
     height: 100%;
     visibility: visible;
-    margin-right: 16px;
+    /* margin-right: 16px; */
 }
 
+#toolbox-area {
+
+}
+#toolbox-area > div {
+    width: var(--toolbox-width);
+}
 #toolbox-area.showSide {
     width: var(--toolbox-width);
     height: 100%;
     visibility: visible;
-    margin-left: 16px;
-}
-
-#chuanhu-area {
-    flex: unset;
-    width: 100%;
-    flex-wrap: nowrap;
-    gap: 0;
-    justify-content: center;
-    overflow: hidden;
-    flex-direction: row;
-    padding-bottom: 6px;
+    /* margin-left: 16px; */
 }
 
+/* When screen width <= 768 */
 @media screen and (max-width: 767px) {
     #menu-area {
         position: fixed;
@@ -283,8 +290,6 @@ body.popup-open {
     }
     #menu-area.showSide {
         left: 0;
-        /* box-shadow: 0 2px 64px 4px rgba(0, 0, 0, 0.2); */
-        /* margin-left: -16px; */
     }
 
     #toolbox-area {
@@ -331,6 +336,9 @@ body.popup-open {
     padding: 24px !important;
     border-bottom: 1.8px solid var(--border-color-primary);
 }
+#chuanhu-popup > .gradio-box > .gradio-row:first-of-type * {
+    margin: 0;
+}
 
 #toolbox-area > .gradio-box > .gradio-row > .close-btn,
 #chuanhu-popup > .gradio-box > .gradio-row > .close-btn {
@@ -381,6 +389,7 @@ body.popup-open {
     color: var(--button-primary-text-color);
 }
 
+/* 小屏幕的tab样式 */
 @media screen and (max-width: 767px) {
     
     #popup-wrapper.showBox {
@@ -484,7 +493,8 @@ body.popup-open {
         transform: translateX(-50%);
     }
 }
-/* 下面是大屏幕的 */
+
+/* 下面是大屏幕的 toolbox tab 样式 */
 @media screen and (min-width: 768px) {
     #toolbox-area {
         border-left: 1px solid var(--border-color-primary);

web_assets/stylesheet/override-gradio.css

@@ -1,3 +1,8 @@
+.gradio-container {
+    max-width: unset !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
 
 /* 解决container=False时的错误填充 */
 div.form {
@@ -14,6 +19,10 @@ footer {
     font-size: 85%;
 }
 
+.api-docs-wrap {
+    margin-top: 64px;
+}
+
 /* 覆盖 gradio 丑陋的复制按钮样式 */
 .message .code_wrap button[title="copy"] {
     border-radius: 5px !important;