fix: 修复一直重复生成对话按钮的问题，优化性能，避免鼠标悬浮时闪烁

web_assets/javascript/ChuanhuChat.js

@@ -12,6 +12,7 @@ var user_input_tb = null;
 var userInfoDiv = null;
 var appTitleDiv = null;
 var chatbot = null;
+var chatbotIndicator = null;
 var chatbotWrap = null;
 var apSwitch = null;
 var messageBotDivs = null;
@@ -43,7 +44,7 @@ function gradioLoaded(mutations) {
 }
 
 function initialize() {
-    var needInit = {gradioContainer, apSwitch, user_input_tb, userInfoDiv, appTitleDiv, chatbot, chatbotWrap, statusDisplay, sliders, updateChuanhuBtn};
+    var needInit = {gradioContainer, apSwitch, user_input_tb, userInfoDiv, appTitleDiv, chatbot, chatbotIndicator, chatbotWrap, statusDisplay, sliders, updateChuanhuBtn};
     initialized = true;
 
     loginUserForm = gradioApp().querySelector(".gradio-container > .main > .wrap > .panel > .form")
@@ -52,6 +53,7 @@ function initialize() {
     userInfoDiv = gradioApp().getElementById("user-info");
     appTitleDiv = gradioApp().getElementById("app-title");
     chatbot = gradioApp().querySelector('#chuanhu-chatbot');
+    chatbotIndicator = gradioApp().querySelector('#chuanhu-chatbot>div.wrap');
     chatbotWrap = gradioApp().querySelector('#chuanhu-chatbot > .wrapper > .wrap');
     apSwitch = gradioApp().querySelector('.apSwitch input[type="checkbox"]');
     updateToast = gradioApp().querySelector("#toast-update");
@@ -82,8 +84,7 @@ function initialize() {
         setSlider();
         if (!historyLoaded) loadHistoryHtml();
         if (!usernameGotten) getUserInfo();
-        mObserver.observe(chatbotWrap, { attributes: true, childList: true, subtree: true, characterData: true });
-        submitObserver.observe(cancelBtn, { attributes: true, characterData: true });
+        chatbotObserver.observe(chatbotIndicator, { attributes: true });
 
         const lastCheckTime = localStorage.getItem('lastCheckTime') || 0;
         const longTimeNoCheck = currentTime - lastCheckTime > 3 * 24 * 60 * 60 * 1000;
@@ -221,43 +222,21 @@ function setChatbotScroll() {
 }
 
 
-let timeoutId;
-let isThrottled = false;
-// 监听chatWrap元素的变化，为 bot 消息添加复制按钮。
-var mObserver = new MutationObserver(function (mutationsList) {
-    for (const mmutation of mutationsList) {
-        if (mmutation.type === 'childList') {
-            for (var node of mmutation.addedNodes) {
-                if (node.nodeType === 1 && node.classList.contains('message')) {
-                    saveHistoryHtml();
-                    disableSendBtn();
-                    document.querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
-                }
-            }
-            for (var node of mmutation.removedNodes) {
-                if (node.nodeType === 1 && node.classList.contains('message')) {
-                    saveHistoryHtml();
-                    disableSendBtn();
-                    document.querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
-                }
-            }
-        } else if (mmutation.type === 'attributes') {
-            if (isThrottled) break; // 为了防止重复不断疯狂渲染，加上等待_(:з」∠)_
-            isThrottled = true;
-            clearTimeout(timeoutId);
-            timeoutId = setTimeout(() => {
-                isThrottled = false;
-                document.querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
-                saveHistoryHtml();
-                disableSendBtn();
-            }, 1500);
-        }
+function chatbotContentChanged(attempt = 1) {
+    for (var i = 0; i < attempt; i++) {
+        setTimeout(() => {
+            saveHistoryHtml();
+            disableSendBtn();
+            gradioApp().querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
+        }, i === 0 ? 0 : 500);
     }
-});
+    // 理论上是不需要多次尝试执行的，可惜gradio的bug导致message可能没有渲染完毕，所以尝试500ms后再次执行
+}
 
-var submitObserver = new MutationObserver(function (mutationsList) {
-    document.querySelectorAll('#chuanhu-chatbot .message-wrap .message.bot').forEach(addChuanhuButton);
-    saveHistoryHtml();
+var chatbotObserver = new MutationObserver(() => {
+    if (chatbotIndicator.classList.contains('hide')) {
+        chatbotContentChanged(2);
+    }
 });
 
 // 监视页面内部 DOM 变动

web_assets/javascript/chat-history.js

@@ -25,14 +25,6 @@ function loadHistoryHtml() {
         return; // logged in, do nothing
     }
     if (!historyLoaded) {
-        var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
-        var gradioCopyButtons = tempDiv.querySelectorAll('button.copy_code_button');
-        for (var i = 0; i < buttons.length; i++) {
-            buttons[i].parentNode.removeChild(buttons[i]);
-        }
-        for (var i = 0; i < gradioCopyButtons.length; i++) {
-            gradioCopyButtons[i].parentNode.removeChild(gradioCopyButtons[i]);
-        }
         var fakeHistory = document.createElement('div');
         fakeHistory.classList.add('history-message');
         fakeHistory.innerHTML = tempDiv.innerHTML;

web_assets/javascript/message-button.js

@@ -4,20 +4,15 @@
 function addChuanhuButton(botElement) {
     var rawMessage = botElement.querySelector('.raw-message');
     var mdMessage = botElement.querySelector('.md-message');
-    // var gradioCopyMsgBtn = botElement.querySelector('div.icon-button>button[title="copy"]'); // 获取 gradio 的 copy button，它可以读取真正的原始 message
-    if (!rawMessage) {
+    
+    if (!rawMessage) { // 如果没有 raw message，说明是早期历史记录，去除按钮
         var buttons = botElement.querySelectorAll('button.chuanhu-btn');
         for (var i = 0; i < buttons.length; i++) {
             buttons[i].parentNode.removeChild(buttons[i]);
         }
         return;
     }
-    var oldCopyButton = null;
-    var oldToggleButton = null;
-    oldCopyButton = botElement.querySelector('button.copy-bot-btn');
-    oldToggleButton = botElement.querySelector('button.toggle-md-btn');
-    if (oldCopyButton) oldCopyButton.remove();
-    if (oldToggleButton) oldToggleButton.remove();
+    botElement.querySelectorAll('button.copy-bot-btn, button.toggle-md-btn').forEach(btn => btn.remove()); // 就算原先有了，也必须重新添加，而不是跳过
 
     // Copy bot button
     var copyButton = document.createElement('button');
@@ -66,13 +61,14 @@ function addChuanhuButton(botElement) {
     toggleButton.innerHTML = renderMarkdown ? mdIcon : rawIcon;
     toggleButton.addEventListener('click', () => {
         renderMarkdown = mdMessage.classList.contains('hideM');
-        if (renderMarkdown){
+        if (renderMarkdown) {
             renderMarkdownText(botElement);
             toggleButton.innerHTML=rawIcon;
         } else {
             removeMarkdownText(botElement);
             toggleButton.innerHTML=mdIcon;
         }
+        chatbotContentChanged(1); // to set md or raw in read-only history html
     });
     botElement.insertBefore(toggleButton, copyButton);
 
@@ -85,8 +81,7 @@ function addChuanhuButton(botElement) {
     function removeMarkdownText(message) {
         var rawDiv = message.querySelector('.raw-message');
         if (rawDiv) {
-            rawPre = rawDiv.querySelector('pre');
-            if (rawPre) rawDiv.innerHTML = rawPre.innerHTML;
+            rawDiv.innerHTML = rawDiv.querySelector('pre')?.innerHTML || rawDiv.innerHTML;
             rawDiv.classList.remove('hideM');
         }
         var mdDiv = message.querySelector('.md-message');