WIP: 为重命名和删除对话按钮绑定后台处理事件

ChuanhuChatbot.py

@@ -87,7 +87,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                                     # container=False,
                                 )
                             with gr.Column(scale=1):
-                                saveHistoryBtn = gr.Button(i18n("💾 保存对话"))
+                                saveHistoryBtn = gr.Button(i18n("💾 保存对话"), elem_id="gr-history-save-btn")
                                 exportMarkdownBtn = gr.Button(i18n("📝 导出为Markdown"))
                                 gr.Markdown(i18n("默认保存于history文件夹"))
                         with gr.Row():
@@ -411,6 +411,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                     updateFailure_i18n=i18n('更新失败，请尝试<a href="https://github.com/GaiZhenbiao/ChuanhuChatGPT/wiki/使用教程#手动更新" target="_blank">手动更新</a>'),
                     regenerate_i18n=i18n("重新生成"),
                     deleteRound_i18n=i18n("删除这轮问答"),
+                    renameChat_i18n=i18n("重命名该对话"),
                 ))
             with gr.Box(elem_id="fake-gradio-components", visible=False):
                 updateChuanhuBtn = gr.Button(visible=False, elem_classes="invisible-btn", elem_id="update-chuanhu-btn")
@@ -574,6 +575,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
         [current_model, saveFileName, chatbot, user_name],
         downloadFile,
         show_progress=True,
+        _js='(a,b,c,d)=>{return saveChatHistory(a,b,c,d);}'
     )
     saveHistoryBtn.click(get_history_list, [user_name], [historyFileSelectDropdown])
     exportMarkdownBtn.click(

locale/en_US.json

@@ -54,6 +54,7 @@
     "仅供查看": "For viewing only",
     "你真的要删除 ": "Are you sure you want to delete ",
     " 吗？": " ?",
+    "重命名该对话": "Rename this chat",
     "🔄 检查更新...": "🔄 Check for Update...",
     "您使用的就是最新版！": "You are using the latest version!",
     "正在尝试更新...": "Trying to update...",

locale/ja_JP.json

@@ -54,6 +54,7 @@
     "仅供查看": "閲覧専用",
     "你真的要删除 ": "本当に ",
     " 吗？": " を削除してもよろしいですか？",
+    "重命名该对话": "会話の名前を変更",
     "🔄 检查更新...": "🔄 アップデートをチェック...",
     "您使用的就是最新版！": "最新バージョンを使用しています！",
     "正在尝试更新...": "更新を試みています...",

locale/ko_KR.json

@@ -54,6 +54,7 @@
     "仅供查看": "읽기 전용",
     "你真的要删除 ": "정말로 ",
     " 吗？": " 을(를) 삭제하시겠습니까?",
+    "重命名该对话": "대화 이름 변경",
     "🔄 检查更新...": "🔄 업데이트 확인...",
     "您使用的就是最新版！": "최신 버전을 사용하고 있습니다!",
     "正在尝试更新...": "업데이트를 시도 중...",

locale/ru_RU.json

@@ -54,6 +54,7 @@
     "仅供查看": "Только для просмотра",
     "你真的要删除 ": "Вы уверены, что хотите удалить ",
     " 吗？": " ?",
+    "重命名该对话": "Переименовать этот диалог",
     "🔄 检查更新...": "🔄 Проверить обновления...",
     "您使用的就是最新版！": "Вы используете последнюю версию!",
     "正在尝试更新...": "Попытка обновления...",

locale/sv_SE.json

@@ -54,6 +54,7 @@
     "仅供查看": "Endast för visning",
     "你真的要删除 ": "Är du säker på att du vill ta bort ",
     " 吗？": " ?",
+    "重命名该对话": "Byt namn på dialogen",
     "🔄 检查更新...": "🔄 Sök efter uppdateringar...", 
     "您使用的就是最新版！": "Du använder den senaste versionen!",
     "正在尝试更新...": "Försöker uppdatera...", 

web_assets/html/web_config.html

@@ -10,5 +10,6 @@
         <span id="updateFailure_i18n">{updateFailure_i18n}</span>
         <span id="regenerate_i18n">{regenerate_i18n}</span>
         <span id="deleteRound_i18n">{deleteRound_i18n}</span>
+        <span id="renameChat_i18n">{renameChat_i18n}</span>
     </div>
 </div>

web_assets/javascript/ChuanhuChat.js

@@ -15,6 +15,7 @@ var chatbotArea = null;
 var chatbot = null;
 var chatbotIndicator = null;
 var uploaderIndicator = null;
+var chatListIndicator = null;
 var chatbotWrap = null;
 var apSwitch = null;
 var messageBotDivs = null;
@@ -47,6 +48,7 @@ function addInit() {
     
     chatbotIndicator = gradioApp().querySelector('#chuanhu-chatbot > div.wrap');
     uploaderIndicator = gradioApp().querySelector('#upload-index-file > div.wrap');
+    chatListIndicator = gradioApp().querySelector('#history-select-dropdown > div.wrap');
 
     for (let elem in needInit) {
         if (needInit[elem] == null) {
@@ -56,6 +58,7 @@ function addInit() {
     }
 
     chatbotObserver.observe(chatbotIndicator, { attributes: true });
+    chatListObserver.observe(chatListIndicator, { attributes: true });
     setUploader();
     
     return true;
@@ -365,6 +368,10 @@ var chatbotObserver = new MutationObserver(() => {
     }
 });
 
+var chatListObserver = new MutationObserver(() => {
+    setChatList();
+});
+
 // 监视页面内部 DOM 变动
 var gradioObserver = new MutationObserver(function (mutations) {
     for (var i = 0; i < mutations.length; i++) {

web_assets/javascript/chat-list.js

@@ -4,6 +4,8 @@ function setChatList() {
     var chatList = gradioApp().querySelector('fieldset#history-select-dropdown');
     selectedChat = chatList.querySelector(".wrap label.selected")
     if (!selectedChat || selectedChat.classList.contains('added-chat-btns')) {
+        chatList.querySelector('.chat-selected-btns')?.remove(); // remove old buttons
+        chatList.querySelectorAll('.added-chat-btns').forEach(chat => chat.classList.remove('added-chat-btns'));
         return;
     }
 
@@ -14,12 +16,32 @@ function setChatList() {
     ChatSelectedBtns.classList.add('chat-selected-btns');
     selectedChat.classList.add('added-chat-btns');
     ChatSelectedBtns.innerHTML = selectedChatBtns;
+
+    var renameBtn = ChatSelectedBtns.querySelector('#history-rename-btn');
+    renameBtn.addEventListener('click', function () {
+        gradioApp().querySelector('#gr-history-save-btn').click();
+    });
+
+    var deleteBtn = ChatSelectedBtns.querySelector('#history-delete-btn');
+    deleteBtn.addEventListener('click', function () {
+        gradioApp().querySelector('#gr-history-delete-btn').click();
+    });
     selectedChat.appendChild(ChatSelectedBtns);
 
     return;
 }
 
+function saveChatHistory(a, b, c, d) {
+    var fileName = b;
+    fileName = prompt(renameChat_i18n, b);
+    if (fileName && fileName.trim() !== "") {
+        return [a, fileName, c, d];
+    } else {
+        return [a, "", c, d];
+    }
+}
+
 const selectedChatBtns = `
-<button><svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" height="18px" width="18px" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></button>
-<button><svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" height="18px" width="18px" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>
+<button id="history-rename-btn"><svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" height="18px" width="18px" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></button>
+<button id="history-delete-btn"><svg class="icon-need-hover" stroke="currentColor" fill="none" stroke-width="2" height="18px" width="18px" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></button>
 `

web_assets/javascript/localization.js

@@ -23,6 +23,7 @@ function setLoclize() {
     updateFailure_i18n = gradioApp().querySelector('#updateFailure_i18n').innerText;
     regenerate_i18n = gradioApp().querySelector('#regenerate_i18n').innerText;
     deleteRound_i18n = gradioApp().querySelector('#deleteRound_i18n').innerText;
+    renameChat_i18n = gradioApp().querySelector('#renameChat_i18n').innerText;
 }
 
 function i18n(msg) {

web_assets/stylesheet/override-gradio.css

@@ -46,6 +46,9 @@ fieldset#history-select-dropdown .wrap label.selected {
     background: var(--message-list-background-selected);
     padding: 10px 64px 10px 16px;
 }
+fieldset#history-select-dropdown .wrap label:not(.selected) .chat-selected-btns{
+    display: none;
+}
 fieldset#history-select-dropdown .wrap label > span {
     /* font-size: small; */
     margin-left: 0;