feat: 醒目提示已有知识库文件

GaiZhenbiao · Dec 22, 2023 · 712164d · 712164d
1 parent 3b194b1
commit 712164d
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 7 deletions.
diff --git a/ChuanhuChatbot.py b/ChuanhuChatbot.py
@@ -249,7 +249,7 @@ def create_new_model():
                                                 container=False,
                                             )
                         gr.Markdown("---", elem_classes="hr-line")
-                        with gr.Accordion(label=i18n("知识库"), open=True):
+                        with gr.Accordion(label=i18n("知识库"), open=True, elem_id="gr-kb-accordion"):
                             use_websearch_checkbox = gr.Checkbox(label=i18n(
                                 "使用在线搜索"), value=False, elem_classes="switch-checkbox", elem_id="gr-websearch-cb", visible=False)
                             index_files = gr.Files(label=i18n(

diff --git a/web_assets/html/chatbot_more.html b/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 class="may-disable-label">
-                    <div id="uploaded-files-div">
+                    <div id="uploaded-files-btn" onclick="showKnowledgeBase();">
                         <span class="chatbot-input-more-span tooltip-toggle" aria-label="{uploaded_files_tip}">{uploaded_files_label}</span>
                         <span class="chatbot-input-more-icon" id="uploaded-files-count"></span>
                     </div>

diff --git a/web_assets/javascript/webui.js b/web_assets/javascript/webui.js
@@ -258,6 +258,32 @@ function checkChatMoreMask() {
     }
 }
 
+function showKnowledgeBase(){
+    if (!toolboxOpening) {
+        toolboxClick();
+    }
+    switchToolBoxTab(0);
+    let knoledgeBaseAccordion = gradioApp().querySelector('#gr-kb-accordion');
+    let knoledgeBase = knoledgeBaseAccordion.querySelector('#upload-index-file');
+    if (knoledgeBase.parentElement.parentElement.style.display == 'none') {
+        knoledgeBaseAccordion.querySelector('.label-wrap')?.click();
+    }
+    // 将 knoledgeBase 滚动到可见区域
+    setTimeout(() => {knoledgeBaseAccordion.scrollIntoView({ behavior: "smooth"}); }, 100);
+    letThisSparkle(knoledgeBase, 5000);
+}
+
+function letThisSparkle(element, sparkleTime = 3000) {
+    element.classList.add('chuanhu-sparkle');
+    setTimeout(() => {element.classList.remove('chuanhu-sparkle');}, sparkleTime);
+}
+
+function switchToolBoxTab(tabIndex) {
+    let tabButtons = gradioApp().querySelectorAll('#chuanhu-toolbox-tabs .tab-nav > button');
+    let tab = tabButtons[tabIndex];
+    tab.click();
+}
+
 /*
 function setHistroyPanel() {
     const historySelectorInput = gradioApp().querySelector('#history-select-dropdown input');

diff --git a/web_assets/stylesheet/ChuanhuChat.css b/web_assets/stylesheet/ChuanhuChat.css
@@ -574,18 +574,18 @@ input:checked + .chatbot-input-more-span {
     opacity: 1;
 }
 
-#uploaded-files-div {
+#uploaded-files-btn {
     display: none;
 }
-.with-file #uploaded-files-div {
+.with-file #uploaded-files-btn {
     display: flex;
     justify-content: space-between;
     width: 100%;
 }
-.with-file label.may-disable-label {
+/* .with-file label.may-disable-label {
     cursor: not-allowed !important;
-}
-.with-file #uploaded-files-div > .chatbot-input-more-span {
+} */
+.with-file #uploaded-files-btn > .chatbot-input-more-span {
     opacity: 1;
 }
 #uploaded-files-count {
@@ -1176,6 +1176,34 @@ button:hover .icon-need-hover, button:hover.icon-need-hover {
 button:active .icon-need-hover, button:active.icon-need-hover {
     opacity: 1;
 }
+
+.chuanhu-sparkle >::before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    height: calc(100% - 4px);
+    width: calc(100% - 4px);
+    animation: border-pulse 2s cubic-bezier(.5,0,.5,1) infinite;
+    border: 2px solid var(--color-accent) !important;
+    border-radius: 4px;
+    pointer-events: none;
+}
+/* .chuanhu-sparkle {
+    animation: content-pulse 1s cubic-bezier(.5,0,.5,1) infinite;
+} */
+@keyframes border-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.1;
+    }
+}
+
 /* .main-body {
     flex-wrap: nowrap;
     gap: 0;