WIP: make chatbot header

ChuanhuChatbot.py

@@ -97,8 +97,25 @@ 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(elem_id="chatbot-header"):
+                    model_select_dropdown = gr.Dropdown(
+                            label=i18n("选择模型"), choices=MODELS, multiselect=False, value=MODELS[DEFAULT_MODEL], interactive=True,
+                            show_label=False, container=False, elem_id="model-select-dropdown"
+                        )
+                    lora_select_dropdown = gr.Dropdown(
+                        label=i18n("选择LoRA模型"), choices=[], multiselect=False, interactive=True, visible=False
+                    )
+                    gr.HTML(get_html("chatbot_header_btn.html"),elem_id="chatbot-header-btn-bar")
                 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], show_share_button=False, )
+                    chatbot = gr.Chatbot(
+                        label="Chuanhu Chat", 
+                        elem_id="chuanhu-chatbot", 
+                        latex_delimiters=latex_delimiters_set, 
+                        height=700, 
+                        show_label=False,
+                        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(
@@ -195,12 +212,12 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                             usageTxt = gr.Markdown(i18n("多账号模式已开启，无需输入key，可直接开始对话"), elem_id="usage-display", elem_classes="insert-block", visible=show_api_billing)
                         else:
                             usageTxt = gr.Markdown(i18n("**发送消息** 或 **提交key** 以显示额度"), elem_id="usage-display", elem_classes="insert-block", visible=show_api_billing)
-                        model_select_dropdown = gr.Dropdown(
-                            label=i18n("选择模型"), choices=MODELS, multiselect=False, value=MODELS[DEFAULT_MODEL], interactive=True
-                        )
-                        lora_select_dropdown = gr.Dropdown(
-                            label=i18n("选择LoRA模型"), choices=[], multiselect=False, interactive=True, visible=False
-                        )
+                        # model_select_dropdown = gr.Dropdown(
+                        #     label=i18n("选择模型"), choices=MODELS, multiselect=False, value=MODELS[DEFAULT_MODEL], interactive=True
+                        # )
+                        # lora_select_dropdown = gr.Dropdown(
+                        #     label=i18n("选择LoRA模型"), choices=[], multiselect=False, interactive=True, visible=False
+                        # )
                         with gr.Row():
                             single_turn_checkbox = gr.Checkbox(label=i18n("单轮对话"), value=False, elem_classes="switch-checkbox")
                             use_websearch_checkbox = gr.Checkbox(label=i18n("使用在线搜索"), value=False, elem_classes="switch-checkbox")

web_assets/html/chatbot_header_btn.html

@@ -0,0 +1,3 @@
+<button id="open-toolbox-btn" onclick="toolboxClick()" style="width: 60px; height: 60px;">
+    工具栏
+</button>

web_assets/stylesheet/ChuanhuChat.css

@@ -231,7 +231,7 @@ body.popup-open {
     justify-content: center;
     overflow: hidden;
     flex-direction: row;
-    padding-inline: 24px;
+    /* padding-inline: 24px; */
     /* margin: 16px; */
     /* border-radius: 24px; */
     background: var(--chatbot-background-color-light);
@@ -240,7 +240,31 @@ body.popup-open {
     background: var(--chatbot-background-color-dark);
 }
 #chatbot-area {
-    max-width: 1024px;
+    /* max-width: 1024px; */
+    /* gap: 0; */
+}
+#chatbot-header {
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border-color-primary);
+    height: 60px;
+    position: absolute;
+    top: 0;
+    z-index: 50;
+    /* background: var(--header); */
+    /* !!!!!!!!!!!!!!!!!!!!!!!!这里颜色还要再写!!!!!!!!!!!!!!!!!!!!!! */
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+}
+#model-select-dropdown {
+    max-width: 0;
+    background: none;
+}
+#model-select-dropdown > label > .wrap {
+    background: none;
+}
+#chatbot-header-btn-bar {
+    justify-content: flex-end;
+    display: flex;
 }
 /* default invisible */
 #menu-area, #toolbox-area {

web_assets/stylesheet/chatbot.css

@@ -138,6 +138,16 @@ hr.append-display {
 
 #chuanhu-chatbot>.wrapper>.wrap {
     overflow-x: hidden;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    padding-inline: 20px;
+    padding-top: 72px;
+}
+#chuanhu-chatbot>.wrapper>.wrap .message-wrap {
+    align-self: center;
+    width: 100%;
+    max-width: 1024px;
 }
 
 .message.user p {