fix: disable chat list when generating/switch

#1174
GaiZhenbiao · Nov 13, 2024 · d1ca9f3 · d1ca9f3
1 parent 0752e6e
commit d1ca9f3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/web_assets/javascript/ChuanhuChat.js b/web_assets/javascript/ChuanhuChat.js
@@ -402,6 +402,7 @@ function chatbotContentChanged(attempt = 1, force = false) {
             // clearMessageRows();
             saveHistoryHtml();
             disableSendBtn();
+            disableChatListClick(); // 避免生成中切换对话导致错误
             // updateSlider();
             updateCheckboxes();
             bindFancyBox();
@@ -410,6 +411,7 @@ function chatbotContentChanged(attempt = 1, force = false) {
 
             if (chatbotIndicator.classList.contains('hide')) { // generation finished
                 setLatestMessage();
+                enableChatListClick();
                 setChatList();
             }
 

diff --git a/web_assets/javascript/chat-list.js b/web_assets/javascript/chat-list.js
@@ -1,5 +1,5 @@
-
 var currentChatName = null;
+var isChatListRecentlyEnabled = false;
 
 function setChatListHeader() {
     var grHistoryRefreshBtn = gradioApp().querySelector('button#gr-history-refresh-btn');
@@ -8,7 +8,6 @@ function setChatListHeader() {
     grHistoryRefreshBtn.className = "";
     grHistoryUploadBtn.className = "";
 
-
     grHistoryRefreshBtn.innerHTML = HistoryRefreshIcon;
     grHistoryUploadBtn.innerHTML = HistoryUploadIcon;
 }
@@ -17,17 +16,13 @@ function setChatList() {
     exportBtnCheck();
     var selectedChat = null;
     var chatList = gradioApp().querySelector('fieldset#history-select-dropdown');
-    selectedChat = chatList.querySelector("label.selected")
+    selectedChat = chatList.querySelector("label.selected");
     if (!selectedChat) {
         currentChatName = null;
         return;
     }
 
-    // if (userLogged) {
-    //     currentChatName = username + "/" + selectedChat.querySelector('span').innerText;
-    // } else {
-        currentChatName = selectedChat.querySelector('span').innerText;
-    // }
+    currentChatName = selectedChat.querySelector('span').innerText;
 
     if (selectedChat.classList.contains('added-chat-btns')) {
         return;
@@ -55,6 +50,33 @@ function setChatList() {
     return;
 }
 
+function disableChatListClick() {
+    var chatList = gradioApp().querySelector('fieldset#history-select-dropdown');
+    if (chatList.querySelector('label').style.pointerEvents !== 'none' && !isChatListRecentlyEnabled) {
+        console.log("disableChatListClick");
+        chatList.querySelectorAll('label').forEach(label => {
+            label.style.transition = 'opacity 0.1s ease';
+            label.style.pointerEvents = 'none';
+            label.style.opacity = '0.72';
+        });
+    }
+}
+function enableChatListClick() {
+    var chatList = gradioApp().querySelector('fieldset#history-select-dropdown');
+    if (chatList.querySelector('label').style.pointerEvents !== 'auto') {
+        console.log("enableChatListClick");
+        chatList.querySelectorAll('label').forEach(label => {
+            label.style.transition = 'opacity 0.2s ease';
+            label.style.pointerEvents = 'auto';
+            label.style.opacity = '1';
+        });
+        isChatListRecentlyEnabled = true;
+        setTimeout(() => {
+            isChatListRecentlyEnabled = false;
+        }, 500); // 避免短时间内多次调用造成闪烁
+    }
+}
+
 function exportBtnCheck() {
     var grHistoryExportBtn = gradioApp().querySelector('#gr-history-download-json-btn');
     var exportBtn = gradioApp().querySelector('#export-chat-btn');