WIP: chat-with-more btns actually work

ChuanhuChatbot.py

@@ -124,10 +124,6 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                     )
                 with gr.Row(elem_id="chatbot-footer"):
                     with gr.Box(elem_id="chatbot-input-box"):
-                        # with gr.Row(elem_id="chatbot-input-btn-bar"):
-                        #     gr.Button(i18n("📄 上传文档"), variant="secondary", elem_id="upload-doc-btn", elem_classes="chatbot-input-button", scale=0)
-                        #     gr.Button(i18n("📄 xxx"), variant="secondary", elem_id="upload-index-btn", elem_classes="chatbot-input-button", scale=0)
-                        #     gr.Button(i18n("📄 xxx"), variant="secondary", elem_id="uplasdfasdfoad-qa-btn", elem_classes="chatbot-input-button", scale=0)
                         with gr.Row(elem_id="chatbot-input-row"):
                             gr.HTML(get_html("chatbot_more.html"))
                             with gr.Row(elem_id="chatbot-input-tb-row"):
@@ -279,11 +275,9 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                                 lines=1,
                             )
                     with gr.Tab(label=i18n("Extensions")):
-                        gr.Markdown("Will be here soon...\n(We hope)")
+                        gr.Markdown("Will be here soon...\n(We hope)\nAnd we hope you can help us to make more extensions!")
 
                     # 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"):
@@ -311,9 +305,9 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                         # 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")
+                        # with gr.Row():
+                        single_turn_checkbox = gr.Checkbox(label=i18n("单轮对话"), value=False, elem_classes="switch-checkbox", elem_id="gr-single-session-cb")
+                        use_websearch_checkbox = gr.Checkbox(label=i18n("使用在线搜索"), value=False, elem_classes="switch-checkbox", elem_id="gr-websearch-cb")
                         language_select_dropdown = gr.Dropdown(
                             label=i18n("选择回复语言（针对搜索&索引功能）"),
                             choices=REPLY_LANGUAGES,
@@ -391,6 +385,13 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                             openai_cancel_all_jobs_btn = gr.Button(i18n("取消所有任务"))
                             add_to_models_btn = gr.Button(i18n("添加训练好的模型到模型列表"), interactive=False)
 
+            with gr.Box(elem_id="fake-gradio-components", visible=False): 
+                updateChuanhuBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="update-chuanhu-btn")
+                changeSingleSessionBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="change-single-session-btn")
+                changeOnlineSearchBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="change-online-search-btn")
+                historySelectBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="history-select-btn") # Not used
+
+
     # https://github.com/gradio-app/gradio/pull/3296
     def create_greeting(request: gr.Request):
         if hasattr(request, "username") and request.username: # is not None or is not ""
@@ -607,13 +608,27 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
         [status_display],
         show_progress=True,
     )
-    historySelectBtn.click(
+    changeSingleSessionBtn.click(
+        fn=lambda value: gr.Checkbox.update(value=value),
+        inputs=[single_turn_checkbox], 
+        outputs=[single_turn_checkbox],
+        _js='(a)=>{return bgChangeSingleSession(a);}'
+    )
+    changeOnlineSearchBtn.click(
+        fn=lambda value: gr.Checkbox.update(value=value),
+        inputs=[use_websearch_checkbox], 
+        outputs=[use_websearch_checkbox],
+        _js='(a)=>{return bgChangeOnlineSearch(a);}'
+    )
+    historySelectBtn.click( # This is an experimental feature... Not actually used.
         fn=load_chat_history,
         inputs=[current_model, historyFileSelectDropdown, user_name],
         outputs=[saveFileName, systemPromptTxt, chatbot],
         _js='(a,b,c)=>{return bgSelectHistory(a,b,c);}'
     )
 
+
+
 logging.info(
     colorama.Back.GREEN
     + "\n川虎的温馨提示：访问 http://localhost:7860 查看界面"

web_assets/html/chatbot_more.html

@@ -19,7 +19,7 @@
         <span class="chatbot-input-more-label-group">
             <div class="chatbot-input-more-btn last-btn">
                 <label>
-                    <button>
+                    <button id="upload-files-btn">
                         <span class="chatbot-input-more-span">上传文件</span>
                         <span class="chatbot-input-more-icon">
                             <svg width="17.6625708px" height="22px" viewBox="0 0 17.6625708 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

web_assets/javascript/ChuanhuChat.js

@@ -100,6 +100,9 @@ function initialize() {
     setPopupBoxPosition();
     setSlider();
     checkModel();
+    transUpload();
+    // transCheckbox();
+    setCheckboxes();
     // setScrollShadow();
 
     if (!historyLoaded) loadHistoryHtml();

web_assets/javascript/fake-gradio.js

@@ -0,0 +1,73 @@
+
+// Fake gradio components!
+
+// buttons
+function newChatClick() {
+    gradioApp().querySelector('#empty-btn').click();
+}
+
+// index files
+function transUpload() {
+    var grUploader = gradioApp().querySelector("#upload-index-file > .center.flex");
+    var chatbotUploader = gradioApp().querySelector("#upload-files-btn");
+    let uploaderEvents = ["click", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop"];
+    transEventListeners(chatbotUploader, grUploader, uploaderEvents);
+}
+
+// checkbox
+var grSingleSessionCB;
+var grOnlineSearchCB;
+var chatbotSingleSessionCB;
+var chatbotOnlineSearchCB;
+function setCheckboxes() {
+    chatbotSingleSessionCB = gradioApp().querySelector('input[name="single-session-cb"]');
+    chatbotOnlineSearchCB = gradioApp().querySelector('input[name="online-search-cb"]');
+    grSingleSessionCB = gradioApp().querySelector("#gr-single-session-cb > label > input");
+    grOnlineSearchCB = gradioApp().querySelector("#gr-websearch-cb > label> input");
+
+    chatbotSingleSessionCB.addEventListener('change', (e) => {
+        grSingleSessionCB.checked = chatbotSingleSessionCB.checked;
+        gradioApp().querySelector('#change-single-session-btn').click();
+    });
+    chatbotOnlineSearchCB.addEventListener('change', (e) => {
+        grOnlineSearchCB.checked = chatbotOnlineSearchCB.checked;
+        gradioApp().querySelector('#change-online-search-btn').click();
+    });
+    grSingleSessionCB.addEventListener('change', (e) => {
+        chatbotSingleSessionCB.checked = grSingleSessionCB.checked;
+    });
+    grOnlineSearchCB.addEventListener('change', (e) => {
+        chatbotOnlineSearchCB.checked = grOnlineSearchCB.checked;
+    });
+}
+
+function bgChangeSingleSession() {
+    // const grSingleSessionCB = gradioApp().querySelector("#gr-single-session-cb > label > input");
+    let a = chatbotSingleSessionCB.checked;
+    return [a];
+}
+function bgChangeOnlineSearch() {
+    // const grOnlineSearchCB = gradioApp().querySelector("#gr-websearch-cb > label> input");
+    let a = chatbotOnlineSearchCB.checked;
+    return [a];
+}
+
+// UTILS
+function transEventListeners(target, source, events) {
+    events.forEach((sourceEvent) => {
+        target.addEventListener(sourceEvent, function (targetEvent) {
+            if(targetEvent.preventDefault) targetEvent.preventDefault();
+            if(targetEvent.stopPropagation) targetEvent.stopPropagation();
+
+            source.dispatchEvent(new Event(sourceEvent, {detail: targetEvent.detail}));
+            // console.log(targetEvent.detail);
+        });
+    });
+    /* 事实上，我发现这样写的大多数gradio组件并不适用。。所以。。。生气 */
+}
+
+function bgSelectHistory(a,b,c){
+    const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
+    let file = historySelectorInput.value;
+    return [a,file,c]
+}

web_assets/javascript/utils.js

@@ -1,25 +1,4 @@
 
-var gradioUploader = null;
-
-function testUpload(target) {
-    gradioUploader = gradioApp().querySelector("#upload-index-file > .center.flex");
-    let uploaderEvents = ["click", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop"];
-    transEventListeners(target, gradioUploader, uploaderEvents);
-}
-
-
-function transEventListeners(target, source, events) {
-    events.forEach((sourceEvent) => {
-        target.addEventListener(sourceEvent, function (targetEvent) {
-            if(targetEvent.preventDefault) targetEvent.preventDefault();
-            if(targetEvent.stopPropagation) targetEvent.stopPropagation();
-
-            source.dispatchEvent(new Event(sourceEvent, {detail: targetEvent.detail}));
-            console.log(targetEvent.detail);
-        });
-    });
-}
-
 
 function isImgUrl(url) {
     const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp)$/i;

web_assets/javascript/webui.js

@@ -1,8 +1,4 @@
 
-function newChatClick() {
-    gradioApp().querySelector('#empty-btn').click();
-}
-
 function openSettingBox() {
     chuanhuPopup.classList.add('showBox');
     popupWrapper.classList.add('showBox');
@@ -277,11 +273,6 @@ function setHistroyPanel() {
 //     });
 // }
 
-// function bgSelectHistory(a,b,c){
-//     const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');
-//     let file = historySelectorInput.value;
-//     return [a,file,c]
-// }
 
 // function testTrain() {