WIP: 输入区文件管理提示

ChuanhuChatbot.py

@@ -129,6 +129,8 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                                 single_turn_label=i18n("单轮对话"),
                                 websearch_label=i18n("在线搜索"),
                                 upload_file_label=i18n("上传文件"),
+                                uploaded_files_label=i18n("知识库文件"),
+                                uploaded_files_tip=i18n("在toolbox中管理知识库文件")
                             ))
                             with gr.Row(elem_id="chatbot-input-tb-row"):
                                 with gr.Column(min_width=225, scale=12):
@@ -199,7 +201,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                                                 container=False,
                                             )
                         gr.Markdown("---", elem_classes="hr-line")
-                        with gr.Accordion(label=i18n("索引"), open=True):
+                        with gr.Accordion(label=i18n("知识库"), open=True):
                             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("上传"), type="file", elem_id="upload-index-file")
                             two_column = gr.Checkbox(label=i18n("双栏pdf"), value=advance_docs["pdf"].get("two_column", False))

web_assets/html/chatbot_more.html

@@ -18,7 +18,11 @@
 
         <span class="chatbot-input-more-label-group">
             <div class="chatbot-input-more-btn last-btn">
-                <label>
+                <label class="may-disable-label">
+                    <div id="uploaded-files-div">
+                        <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>
                     <button id="upload-files-btn">
                         <span class="chatbot-input-more-span">{upload_file_label}</span>
                         <span class="chatbot-input-more-icon">

web_assets/javascript/fake-gradio.js

@@ -13,10 +13,11 @@ function setUploader() {
         var fileInput = null;
         var fileCount = 0;
         fileInput = gradioApp().querySelector("#upload-index-file table.file-preview");
+        var fileCountSpan = gradioApp().querySelector("#uploaded-files-count");
         if (fileInput) {
             chatbotArea.classList.add('with-file');
             fileCount = fileInput.querySelectorAll('tbody > tr.file').length;
-            // chatbotArea.
+            fileCountSpan.innerText = fileCount;
         } else {
             chatbotArea.classList.remove('with-file');
             fileCount = 0;

web_assets/stylesheet/ChuanhuChat.css

@@ -512,9 +512,39 @@ button.chatbot-input-more-btn:active .sm-round-bg {
     flex-direction: row-reverse;
     display: inline-flex;
 }
-.chatbot-full-width .chatbot-input-more-span {
+.chatbot-input-more-span {
     opacity: 0.64;
 }
+input:checked + .chatbot-input-more-span {
+    opacity: 1;
+}
+
+#uploaded-files-div {
+    display: none;
+}
+.with-file #uploaded-files-div {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+.with-file label.may-disable-label {
+    cursor: not-allowed !important;
+}
+.with-file #uploaded-files-div > .chatbot-input-more-span {
+    opacity: 1;
+}
+#uploaded-files-count {
+    background: var(--primary-600);
+    color: white;
+    width: 19px;
+    height: 19px;
+    border-radius: 50%;
+    margin-right: 6px;
+    text-align: center;
+}
+.with-file #upload-files-btn {
+    display: none;
+}
 
 /* default invisible */
 #menu-area, #toolbox-area {

web_assets/stylesheet/custom-components.css

@@ -265,4 +265,57 @@ input:checked + .apSlider::before {
 
 .hr-line hr{
     margin: 0 !important;
+}
+
+.tooltip-toggle {
+    cursor: help;
+    position: relative;
+}
+
+.tooltip-toggle::before {
+    position: absolute;
+    bottom: calc(100% + 12px);
+    left: calc(50% - 60px + 0.5rem);
+    background-color: #2B222A;
+    border-radius: 5px;
+    color: #fff;
+    content: attr(aria-label);
+    padding: 0.5rem;
+    text-transform: none;
+    transition: all 0.5s ease;
+    /* height: fit-content; */
+    white-space: normal;
+    width: 120px;
+}
+.tooltip-toggle::after {
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid #2B222A;
+    content: " ";
+    font-size: 0;
+    line-height: 0;
+    /* margin-left: -5px; */
+    width: 0;
+}
+
+
+.tooltip-toggle::before,
+.tooltip-toggle::after {
+    color: #efefef;
+    /* font-family: monospace; */
+    /* font-size: 16px; */
+    opacity: 0;
+    pointer-events: none;
+    text-align: center;
+}
+
+.tooltip-toggle:focus::before,
+.tooltip-toggle:focus::after,
+.tooltip-toggle:hover::before,
+.tooltip-toggle:hover::after {
+    opacity: 1;
+    transition: all 0.5s ease;
 }