WIP: 调整窗口填充架构

ChuanhuChatbot.py

@@ -65,7 +65,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                                 historyFileSelectDropdown = gr.Radio(
                                     label=i18n("从列表中加载对话"),
                                     choices=get_history_names(plain=True),
-                                    multiselect=False,
+                                    # multiselect=False,
                                     container=False,
                                     elem_id="history-select-dropdown"
                                 )
@@ -98,7 +98,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
         with gr.Column(elem_id="chuanhu-area", scale=5):
             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])
+                    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], show_share_button=False, )
                 with gr.Row():
                     with gr.Column(min_width=225, scale=12):
                         user_input = gr.Textbox(

web_assets/javascript/webui.js

@@ -52,6 +52,7 @@ function closeSide(sideArea) {
     } else if (sideArea == menu) {
         menuOpening = false;
     }
+    adjustMask();
 }
 
 function openSide(sideArea) {

web_assets/stylesheet/ChuanhuChat.css

@@ -220,24 +220,28 @@ body.popup-open {
     /* margin-top: 54px; */
     /* height: calc(100vh - 72px); */
     position: absolute;
-    top: 48px;
+    top: 65px;
+    height: calc(100vh - 65px);
 }
 
 #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;
+    padding-inline: 24px;
+    /* margin: 16px; */
+    /* border-radius: 24px; */
+    background: var(--chatbot-background-color-light);
+}
+.dark #chuanhu-area {
+    background: var(--chatbot-background-color-dark);
 }
 #chatbot-area {
     max-width: 1024px;
 }
-
 /* default invisible */
 #menu-area, #toolbox-area {
     height: 0;
@@ -261,20 +265,17 @@ body.popup-open {
 #menu-area.showSide {
     width: var(--menu-width);
     max-width: var(--menu-width);
-    height: 100%;
+    height: calc(100vh - 65px);
     visibility: visible;
     /* margin-right: 16px; */
 }
 
-#toolbox-area {
-
-}
 #toolbox-area > div {
     width: var(--toolbox-width);
 }
 #toolbox-area.showSide {
     width: var(--toolbox-width);
-    height: 100%;
+    height: calc(100vh - 65px);
     visibility: visible;
     /* margin-left: 16px; */
 }
@@ -336,6 +337,7 @@ body.popup-open {
     padding: 24px !important;
     border-bottom: 1.8px solid var(--border-color-primary);
 }
+#toolbox-area > .gradio-box > .gradio-row:first-of-type * ,
 #chuanhu-popup > .gradio-box > .gradio-row:first-of-type * {
     margin: 0;
 }
@@ -506,14 +508,14 @@ body.popup-open {
         display: none;
     }
     #toolbox-area > .gradio-box > .gradio-tabs{
-        height: auto;
+        height: 100%;
         width: var(--toolbox-width);
         overflow: hidden;
     }
     #toolbox-area > .gradio-box > .gradio-tabs > div.tabitem {
-        height: calc( 90vh - 48px - 46px - 45px );
-        overflow-x: auto;
-        border: none;
+        height: calc(100% - 40px);
+        overflow-y: auto;
+        border-style: none;
     }
     #toolbox-area > .gradio-box > .gradio-tabs > div.tab-nav {
         display: flex;
@@ -553,14 +555,26 @@ body.popup-open {
 
 #toolbox-area > .gradio-box {
     padding: 0;
+    height: 100%;
 }
 /* #chuanhu-popup ul.options {
     transform: translate(-50%, -50%);
 } */
 
+#chuanhu-history {
+    height: calc(100vh - 65px - 65px);
+    overflow-y: auto;
+}
+#chuanhu-func-nav {
+    position: absolute;
+    bottom: 0;
+    /* background: black; */
+    height: 64px;
+    overflow: hidden;
+}
 
 #history-select-wrap {
-    height: 300px;
+    height: 600px;
     overflow: auto;
     overflow-x: hidden;
 }

web_assets/stylesheet/chatbot.css

@@ -50,6 +50,11 @@ hr.append-display {
     padding: 0 4px;
 }
 
+/* 阻止generating时的border */
+#chuanhu-chatbot > .wrap {
+    border: none !important;
+}
+
 /* 亮色（默认） */
 #chuanhu-chatbot {
     background-color: var(--chatbot-background-color-light) !important;

web_assets/stylesheet/override-gradio.css

@@ -1,7 +1,6 @@
 .gradio-container {
     max-width: unset !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    padding: 0 !important;
 }
 
 /* 解决container=False时的错误填充 */