feat: 一键复制语言模型输出到剪贴板

assets/Kelpy-Codos.js

@@ -3,9 +3,9 @@
 // @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 ChatGPT especially. 
-//               Based on Chuanhu ChatGPT version: ac04408 (2023-3-22)
-// @license      GPL-3.0
+// @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==
 

assets/custom.css

@@ -4,7 +4,7 @@
 }
 
 .message p { margin-bottom: 0.6rem !important;}
-.message p:last-child { margin-bottom: 0 !important; }
+.message p:last-of-type { margin-bottom: 0 !important; }
 
 #app_title {
     font-weight: var(--prose-header-text-weight);
@@ -247,6 +247,31 @@ ol:not(.options), ul:not(.options) {
     width: auto !important;
     border-bottom-right-radius: 0 !important;
 }
+.raw-message {
+    display: none;
+}
+
+.copy-bot-btn {
+    border-radius: 5px;
+    /* background-color: #E6E6E6 !important; */
+    color: rgba(120, 120, 120, 0.64) !important;
+    padding: 4px !important;
+    position: absolute;
+    right: -22px;
+    bottom: 0;
+    cursor: pointer !important;
+    transition: color .2s ease, background-color .2s ease;
+}
+.copy-bot-btn:hover {
+    background-color: rgba(167, 167, 167, 0.25) !important;
+    color: unset !important;
+}
+.copy-bot-btn:active {
+    background-color: rgba(167, 167, 167, 0.5) !important;
+}
+.copy-bot-btn:focus {
+    outline: none;
+}
 
 .message-wrap>div img{
     border-radius: 10px !important;

assets/custom.js

@@ -272,6 +272,36 @@ function setChatbotHeight() {
     }
 }
 
+const copyIcon   = '<span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span>';
+const copiedIcon = '<span><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height=".8em" width=".8em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>';
+function addCopyBotButton(botElement) {
+    var copyButton = null;
+    var rawMessage = null;
+    rawMessage = botElement.querySelector('.raw-message');
+    copyButton = botElement.querySelector('button.copy-bot-btn');
+    if (!rawMessage) return;
+    if (copyButton) {
+        copyButton.remove();
+    }
+    var button = document.createElement('button');
+    button.classList.add('copy-bot-btn');
+    button.setAttribute('aria-label', 'Copy');
+    button.innerHTML = copyIcon;
+    button.addEventListener('click', () => {
+        const textToCopy = rawMessage.innerText;
+        navigator.clipboard
+            .writeText(textToCopy)
+            .catch(() => {
+                console.error("copy failed");
+            });
+        button.innerHTML = copiedIcon;
+        setTimeout(() => {
+            button.innerHTML = copyIcon;
+        }, 1500);
+    });
+    botElement.appendChild(button);
+};
+
 var rendertime = 0; // for debugging
 var mathjaxUpdated = false;
 
@@ -326,12 +356,13 @@ function updateMathJax() {
 
 let timeoutId;
 let isThrottled = false;
-// 监听所有元素中message的变化，用来查找需要渲染的mathjax
-var mObserver = new MutationObserver(function (mutationsList, observer) {
-    for (var mutation of mutationsList) {
-        if (mutation.type === 'childList') {
-            for (var node of mutation.addedNodes) {
-                if (node.nodeType === 1 && node.classList.contains('message') && node.classList.contains('bot')) {
+var mmutation
+// 监听所有元素中 bot message 的变化，用来查找需要渲染的mathjax, 并为 bot 消息添加复制按钮。
+var mObserver = new MutationObserver(function (mutationsList) {
+    for (mmutation of mutationsList) {
+        if (mmutation.type === 'childList') {
+            for (var node of mmutation.addedNodes) {
+                if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
                     if (shouldRenderLatex) {
                         renderMathJax();
                         mathjaxUpdated = false;
@@ -339,8 +370,8 @@ var mObserver = new MutationObserver(function (mutationsList, observer) {
                     saveHistoryHtml();
                 }
             }
-            for (var node of mutation.removedNodes) {
-                if (node.nodeType === 1 && node.classList.contains('message') && node.classList.contains('bot')) {
+            for (var node of mmutation.removedNodes) {
+                if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
                     if (shouldRenderLatex) {
                         renderMathJax();
                         mathjaxUpdated = false;
@@ -348,25 +379,25 @@ var mObserver = new MutationObserver(function (mutationsList, observer) {
                     saveHistoryHtml();
                 }
             }
-        } else if (mutation.type === 'attributes') {
-            if (mutation.target.nodeType === 1 && mutation.target.classList.contains('message') && mutation.target.classList.contains('bot')) {
+        } else if (mmutation.type === 'attributes') {
+            if (mmutation.target.nodeType === 1 && mmutation.target.classList.contains('message') && mmutation.target.getAttribute('data-testid') === 'bot') {
                 if (isThrottled) break; // 为了防止重复不断疯狂渲染，加上等待_(:з」∠)_
                 isThrottled = true;
                 clearTimeout(timeoutId);
                 timeoutId = setTimeout(() => {
                     isThrottled = false;
                     if (shouldRenderLatex) {
-                        // console.log("changed");
                         renderMathJax();
                         mathjaxUpdated = false;
                     }
+                    document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addCopyBotButton);
                     saveHistoryHtml();
                 }, 500);
             }
         }
     }
 });
-mObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });
+mObserver.observe(document.documentElement, { attributes: true, childList: true, subtree: true });
 
 var loadhistorytime = 0; // for debugging
 function saveHistoryHtml() {
@@ -387,10 +418,20 @@ function loadHistoryHtml() {
         return; // logged in, do nothing
     }
     if (!historyLoaded) {
-            var fakeHistory = document.createElement('div');
-            fakeHistory.classList.add('history-message');
-            fakeHistory.innerHTML = historyHtml;
-            chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
+        var tempDiv = document.createElement('div');
+        tempDiv.innerHTML = historyHtml;
+        var buttons = tempDiv.querySelectorAll('button.copy-bot-btn');
+        for (var i = 0; i < buttons.length; i++) {
+            buttons[i].parentNode.removeChild(buttons[i]);
+        }
+        var fakeHistory = document.createElement('div');
+        fakeHistory.classList.add('history-message');
+        fakeHistory.innerHTML = tempDiv.innerHTML;
+        chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
+        // var fakeHistory = document.createElement('div');
+        // fakeHistory.classList.add('history-message');
+        // fakeHistory.innerHTML = historyHtml;
+        // chatbotWrap.insertBefore(fakeHistory, chatbotWrap.firstChild);
         historyLoaded = true;
         console.log("History Loaded");
         loadhistorytime += 1; // for debugging

modules/utils.py

@@ -183,6 +183,7 @@ def convert_mdtext(md_text):
     non_code_parts = code_block_pattern.split(md_text)[::2]
 
     result = []
+    raw = f'<span class="raw-message">{html.escape(md_text)}</span>'
     for non_code, code in zip(non_code_parts, code_blocks + [""]):
         if non_code.strip():
             non_code = normalize_markdown(non_code)
@@ -194,6 +195,7 @@ def convert_mdtext(md_text):
             code = markdown_to_html_with_syntax_highlight(code)
             result.append(code)
     result = "".join(result)
+    result += raw
     result += ALREADY_CONVERTED_MARK
     return result