WIP: 在chatbot header中加入导出按钮

ChuanhuChatbot.py

@@ -113,7 +113,10 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                         label=i18n("选择LoRA模型"), choices=[], multiselect=False, interactive=True, visible=False,
                         container=False,
                     )
-                    gr.HTML(get_html("chatbot_header_btn.html"),elem_id="chatbot-header-btn-bar")
+                    gr.HTML(get_html("chatbot_header_btn.html").format(
+                        json_label=i18n("历史记录（JSON）"),
+                        md_label=i18n("导出为 Markdown")
+                    ),elem_id="chatbot-header-btn-bar")
                 with gr.Row():
                     chatbot = gr.Chatbot(
                         label="Chuanhu Chat",

locale/en_US.json

@@ -35,6 +35,8 @@
     "对话历史记录": "Dialog History",
     "💾 保存对话": "💾 Save Dialog",
     "📝 导出为Markdown": "📝 Export as Markdown",
+    "历史记录（JSON）": "History file (JSON)",
+    "导出为 Markdown": "Export as Markdown",
     "默认保存于history文件夹": "Default save in history folder",
     "下载/上传历史记录": "Download/Upload History",
     "高级": "Advanced",

locale/ja_JP.json

@@ -35,6 +35,8 @@
     "对话历史记录": "会話履歴",
     "💾 保存对话": "💾 会話を保存",
     "📝 导出为Markdown": "📝 Markdownでエクスポート",
+    "历史记录（JSON）": "履歴ファイル（JSON）",
+    "导出为 Markdown": "Markdownでエクスポート",
     "默认保存于history文件夹": "デフォルトでhistoryフォルダに保存されます",
     "下载/上传历史记录": "履歴をダウンロード/アップロード",
     "高级": "Advanced",

locale/ko_KR.json

@@ -35,6 +35,8 @@
     "对话历史记录": "대화 기록",
     "💾 保存对话": "💾 대화 저장",
     "📝 导出为Markdown": "📝 마크다운으로 내보내기",
+    "历史记录（JSON）": "기록 파일 (JSON)",
+    "导出为 Markdown": "마크다운으로 내보내기",
     "默认保存于history文件夹": "히스토리 폴더에 기본 저장",
     "下载/上传历史记录": "기록 다운로드/업로드",
     "高级": "고급",

locale/ru_RU.json

@@ -35,6 +35,8 @@
     "对话历史记录": "История диалога",
     "💾 保存对话": "💾 Сохранить диалог",
     "📝 导出为Markdown": "📝 Экспортировать в Markdown",
+    "历史记录（JSON）": "Файл истории (JSON)",
+    "导出为 Markdown": "Экспортировать в Markdown",
     "默认保存于history文件夹": "По умолчанию сохраняется в папку history",
     "下载/上传历史记录": "Загрузить/загрузить историю",
     "高级": "Расширенные настройки",

locale/sv-SE.json

@@ -35,6 +35,8 @@
     "对话历史记录": "Dialoghistorik",  
     "💾 保存对话": "💾 Spara Dialog",  
     "📝 导出为Markdown": "📝 Exportera som Markdown",  
+    "历史记录（JSON）": "Historikfil (JSON)",
+    "导出为 Markdown": "Exportera som Markdown",
     "默认保存于history文件夹": "Sparas som standard i mappen history",
     "下载/上传历史记录": "Ladda ner/ladda upp historik",
     "高级": "Avancerat",  

web_assets/html/chatbot_header_btn.html

@@ -14,6 +14,25 @@
     </div>
 
     <div class="btn-bar-group">
+        <div class="nav-item-dropdown">
+            <button id="export-chat-btn" onclick="" class="chuanhu-ui-btn dropdown-trigger">
+                <svg width="24px" height="24px" viewBox="0 0 16.1359 20.56475" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                    <g stroke="none" fill="currentColor" fill-opacity="0.85" fill-rule="nonzero">
+                        <path d="M13.3438,5.76305 C15.2024,5.76305 16.1359,6.7002 16.1359,8.5309 L16.1359,17.79695 C16.1359,19.62395 15.2024,20.56475 13.3438,20.56475 L2.79211,20.56475 C0.941602,20.56475 0,19.63125 0,17.79695 L0,8.5309 C0,6.69293 0.941602,5.76305 2.79211,5.76305 L5.71,5.76275 L5.71,7.06975 L2.81555,7.06993 C1.89173222,7.06993 1.36322898,7.53591574 1.30735769,8.43213487 L1.30242,8.59475 L1.30242,17.73305 C1.30242,18.74355 1.83739,19.25425 2.81555,19.25425 L13.3204,19.25425 C14.2759,19.25425 14.8335,18.74355 14.8335,17.73305 L14.8335,8.59475 C14.8335,7.59235 14.2759,7.06993 13.3204,7.06993 L10.416,7.06975 L10.416,5.76275 L13.3438,5.76305 Z"></path>
+                        <path d="M8.06391,13.43715 C8.41559,13.43715 8.71512,13.14575 8.71512,12.80215 L8.71512,3.14567 L8.66297,1.78664 L9.38039,2.54004 L10.8584,4.09078 C10.978,4.21852 11.1454,4.28602 11.301,4.28602 C11.6373,4.28602 11.8964,4.04309 11.8964,3.7193 C11.8964,3.53941 11.8245,3.41531 11.6967,3.29566 L8.5316,0.21586 C8.37153,0.05578 8.2357,0 8.06391,0 C7.9002,0 7.76074,0.05578 7.59621,0.21586 L4.42746,3.29566 C4.30781,3.41531 4.23586,3.53941 4.23586,3.7193 C4.23586,4.04309 4.48324,4.28602 4.82321,4.28602 C4.97883,4.28602 5.15426,4.21852 5.27028,4.09078 L6.75188,2.54004 L7.47293,1.78301 L7.42078,3.14567 L7.42078,12.80215 C7.42078,13.14575 7.72031,13.43715 8.06391,13.43715 Z"></path>
+                    </g>
+                </svg>
+            </button>
+            <div class="dropdown-menu">
+                <div class="dropdown-menu-item">
+                    <button onclick="jsonDownloadClick()">{json_label}</button>
+                </div>
+                <div class="dropdown-menu-item">
+                    <button onclick="mdDownloadClick()">{md_label}</button>
+                </div>
+            </div>
+        </div>
+
         <button id="new-chat-btn" onclick="newChatClick()" class="chuanhu-ui-btn">
             <svg width="24px" height="24px" viewBox="0 0 41.3058 37.9805" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

web_assets/javascript/fake-gradio.js

@@ -5,6 +5,12 @@
 function newChatClick() {
     gradioApp().querySelector('#empty-btn').click();
 }
+function jsonDownloadClick() {
+    gradioApp().querySelector('#gr-history-download-btn').click();
+}
+function mdDownloadClick() {
+    return;
+}
 
 // index files
 function setUploader() {

web_assets/stylesheet/custom-components.css

@@ -321,4 +321,46 @@ input:checked + .apSlider::before {
 .tooltip-toggle:hover::after {
     opacity: 1;
     transition: all 0.5s ease;
+}
+
+
+.nav-item-dropdown, .dropdown-trigger {
+    position: relative;
+}
+.nav-item-dropdown:hover>.dropdown-menu {
+    display: block;
+    opacity: 1;
+}
+.dropdown-trigger:focus+.dropdown-menu {
+    display: block;
+    opacity: 1;
+}
+.dropdown-menu {
+    background-color: var(--chatbot-input-more-background-solid-color);
+    display: inline-block;
+    /* text-align: right; */
+    position: absolute;
+    /* top: 2.5rem; */
+    left: 50%;
+    transform: translateX(-50%);
+    display: none;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    width: auto;
+    border-radius: 5px;
+    box-shadow: var(--shadow-sm);
+}
+
+.dropdown-menu-item {
+    cursor: pointer;
+    padding: 8px 12px;
+    text-align: center;
+    white-space: nowrap;
+    margin: 0 !important;
+}
+.dropdown-menu-item button {
+    margin: 0 !important;
+}
+.dropdown-menu-item:hover {
+    background-color: var(--chatbot-input-more-background-mobilewidth-hover);
 }