fix & refactor: 解决拷贝代码框按钮消失的问题

但是，现在的代码可能有点问题……
mutationList中不存在新增bot message的addNode，只能用属性变化分析，可能会导致加button次数过多？
但是bot对话内容生成时又是不断覆盖pre的……因此不能用之前的抖动.5s，否则页面框会闪烁。

这可能会导致浏览器占用一些CPU和内存……希望有人能优化一下，谢谢

assets/Kelpy-Codos.js

@@ -1,76 +0,0 @@
-// ==UserScript==
-// @name         Kelpy Codos
-// @namespace    https://github.com/Keldos-Li/Kelpy-Codos
-// @version      1.0.5
-// @author       Keldos; https://keldos.me/
-// @description  Add copy button to PRE tags before CODE tag, for Chuanhu Chat especially. 
-//               Based on Chuanhu Chat version: ac04408 (2023-3-22)
-// @license      Apache-2.0
-// @grant        none
-// ==/UserScript==
-
-(function () {
-    'use strict';
-
-    function addCopyButton(pre) {
-        var code = pre.querySelector('code');
-        if (!code) {
-            return; // 如果没有找到 <code> 元素，则不添加按钮
-        }
-        var firstChild = code.firstChild;
-        if (!firstChild) {
-            return; // 如果 <code> 元素没有子节点，则不添加按钮
-        }
-        var button = document.createElement('button');
-        button.textContent = '\uD83D\uDCCE'; // 使用 📎 符号作为“复制”按钮的文本
-        button.style.position = 'relative';
-        button.style.float = 'right';
-        button.style.fontSize = '1em'; // 可选：调整按钮大小
-        button.style.background = 'none'; // 可选：去掉背景颜色
-        button.style.border = 'none'; // 可选：去掉边框
-        button.style.cursor = 'pointer'; // 可选：显示指针样式
-        button.addEventListener('click', function () {
-            var range = document.createRange();
-            range.selectNodeContents(code);
-            range.setStartBefore(firstChild); // 将范围设置为第一个子节点之前
-            var selection = window.getSelection();
-            selection.removeAllRanges();
-            selection.addRange(range);
-
-            try {
-                var success = document.execCommand('copy');
-                if (success) {
-                    button.textContent = '\u2714';
-                    setTimeout(function () {
-                        button.textContent = '\uD83D\uDCCE'; // 恢复按钮为“复制”
-                    }, 2000);
-                } else {
-                    button.textContent = '\u2716';
-                }
-            } catch (e) {
-                console.error(e);
-                button.textContent = '\u2716';
-            }
-
-            selection.removeAllRanges();
-        });
-        code.insertBefore(button, firstChild); // 将按钮插入到第一个子元素之前
-    }
-
-    function handleNewElements(mutationsList, observer) {
-        for (var mutation of mutationsList) {
-            if (mutation.type === 'childList') {
-                for (var node of mutation.addedNodes) {
-                    if (node.nodeName === 'PRE') {
-                        addCopyButton(node);
-                    }
-                }
-            }
-        }
-    }
-
-    var observer = new MutationObserver(handleNewElements);
-    observer.observe(document.documentElement, { childList: true, subtree: true });
-
-    document.querySelectorAll('pre').forEach(addCopyButton);
-})();

assets/custom.css

@@ -287,7 +287,12 @@ ol:not(.options), ul:not(.options) {
 .toggle-md-btn {
     top: 0;
 }
-
+.copy-code-btn {
+    position: relative;
+    float: right;
+    font-size: 1em;
+    cursor: pointer;
+}
 
 .message-wrap>div img{
     border-radius: 10px !important;

assets/custom.js

@@ -333,6 +333,41 @@ function addChuanhuButton(botElement) {
     botElement.insertBefore(toggleButton, copyButton);
 }
 
+function addCopyCodeButton(pre) {
+    var code = null;
+    var firstChild = null;
+    code = pre.querySelector('code');
+    if (!code) return;
+    firstChild = code.querySelector('div');
+    if (!firstChild) return;
+    var oldCopyButton = null;
+    oldCopyButton = code.querySelector('button.copy-code-btn');
+    // if (oldCopyButton) oldCopyButton.remove();
+    if (oldCopyButton) return; // 没太有用，新生成的对话中始终会被pre覆盖，导致按钮消失，这段代码不启用……
+    var codeButton = document.createElement('button');
+    codeButton.classList.add('copy-code-btn');
+    codeButton.textContent = '\uD83D\uDCCE';
+
+    code.insertBefore(codeButton, firstChild);
+    codeButton.addEventListener('click', function () {
+        var range = document.createRange();
+        range.selectNodeContents(code);
+        range.setStartBefore(firstChild);
+        navigator.clipboard
+            .writeText(range.toString())
+            .then(() => {
+                codeButton.textContent = '\u2714';
+                setTimeout(function () {
+                    codeButton.textContent = '\uD83D\uDCCE';
+                }, 2000);
+            })
+            .catch(e => {
+                console.error(e);
+                codeButton.textContent = '\u2716';
+            });
+    });
+}
+
 function renderMarkdownText(message) {
     var mdDiv = message.querySelector('.md-message');
     if (mdDiv) mdDiv.classList.remove('hideM');
@@ -412,6 +447,8 @@ var mObserver = new MutationObserver(function (mutationsList) {
                         mathjaxUpdated = false;
                     }
                     saveHistoryHtml();
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
                 }
             }
             for (var node of mmutation.removedNodes) {
@@ -421,10 +458,13 @@ var mObserver = new MutationObserver(function (mutationsList) {
                         mathjaxUpdated = false;
                     }
                     saveHistoryHtml();
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
                 }
             }
         } else if (mmutation.type === 'attributes') {
             if (mmutation.target.nodeType === 1 && mmutation.target.classList.contains('message') && mmutation.target.getAttribute('data-testid') === 'bot') {
+                document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton); // 目前写的是有点问题的，会导致加button次数过多，但是bot对话内容生成时又是不断覆盖pre的……
                 if (isThrottled) break; // 为了防止重复不断疯狂渲染，加上等待_(:з」∠)_
                 isThrottled = true;
                 clearTimeout(timeoutId);

modules/overwrites.py

@@ -77,16 +77,14 @@ def postprocess_chat_messages(
             raise ValueError(f"Invalid message for Chatbot component: {chat_message}")
 
 with open("./assets/custom.js", "r", encoding="utf-8") as f, \
-    open("./assets/Kelpy-Codos.js", "r", encoding="utf-8") as f2, \
-    open("./assets/external-scripts.js", "r", encoding="utf-8") as f3:
+    open("./assets/external-scripts.js", "r", encoding="utf-8") as f1:
     customJS = f.read()
-    kelpyCodos = f2.read()
-    externalScripts = f3.read()
+    externalScripts = f1.read()
 
 
 def reload_javascript():
     print("Reloading javascript...")
-    js = f'<script>{customJS}</script><script>{kelpyCodos}</script><script async>{externalScripts}</script>'
+    js = f'<script>{customJS}</script><script async>{externalScripts}</script>'
     def template_response(*args, **kwargs):
         res = GradioTemplateResponseOriginal(*args, **kwargs)
         res.body = res.body.replace(b'</html>', f'{js}</html>'.encode("utf8"))