fix: 修正复制对话内容按钮可能获取渲染后内容的问题

- 主要是解决latex复制原始输出的问题
- 使用了gradio 3.40.0自带的复制功能来修复

ChuanhuChatbot.py

@@ -52,7 +52,7 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
     with gr.Row(equal_height=True):
         with gr.Column(scale=5):
             with gr.Row():
-                chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu_chatbot", latex_delimiters=latex_delimiters_set, height=700)
+                chatbot = gr.Chatbot(label="Chuanhu Chat", elem_id="chuanhu_chatbot", latex_delimiters=latex_delimiters_set, height=700, show_copy_button=True)
             with gr.Row():
                 with gr.Column(min_width=225, scale=12):
                     user_input = gr.Textbox(

assets/custom.css

@@ -416,7 +416,7 @@ hr.append-display {
 }
 
 #submit_btn, #cancel_btn {
-    height: 42px !important;
+    height: 40px !important;
 }
 #submit_btn::before {
     content: url("data:image/svg+xml, %3Csvg width='21px' height='20px' viewBox='0 0 21 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='send' transform='translate(0.435849, 0.088463)' fill='%23FFFFFF' fill-rule='nonzero'%3E %3Cpath d='M0.579148261,0.0428666046 C0.301105539,-0.0961547561 -0.036517765,0.122307382 0.0032026237,0.420210298 L1.4927172,18.1553639 C1.5125774,18.4334066 1.79062012,18.5922882 2.04880264,18.4929872 L8.24518329,15.8913017 L11.6412765,19.7441794 C11.8597387,19.9825018 12.2370824,19.8832008 12.3165231,19.5852979 L13.9450591,13.4882182 L19.7839562,11.0255541 C20.0619989,10.8865327 20.0818591,10.4694687 19.7839562,10.3105871 L0.579148261,0.0428666046 Z M11.6138902,17.0883151 L9.85385903,14.7195502 L0.718169621,0.618812241 L12.69945,12.9346347 L11.6138902,17.0883151 Z' id='shape'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
@@ -530,7 +530,11 @@ ol:not(.options), ul:not(.options) {
     padding: 0 !important;
     white-space: pre-wrap;
 }
-.raw-message.hideM, .md-message.hideM {
+.message .hideM {
+    display: none;
+}
+
+.message div.icon-button > button[title="copy"] {
     display: none;
 }
 

assets/custom.js

@@ -405,10 +405,9 @@ function setSliderRange() {
 }
 
 function addChuanhuButton(botElement) {
-    var rawMessage = null;
-    var mdMessage = null;
-    rawMessage = botElement.querySelector('.raw-message');
-    mdMessage = botElement.querySelector('.md-message');
+    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) {
         var buttons = botElement.querySelectorAll('button.chuanhu-btn');
         for (var i = 0; i < buttons.length; i++) {
@@ -429,11 +428,24 @@ function addChuanhuButton(botElement) {
     copyButton.classList.add('copy-bot-btn');
     copyButton.setAttribute('aria-label', 'Copy');
     copyButton.innerHTML = copyIcon;
+
     copyButton.addEventListener('click', async () => {
         const textToCopy = rawMessage.innerText;
         try {
             if ("clipboard" in navigator) {
-                await navigator.clipboard.writeText(textToCopy);
+                gradioCopyMsgBtn.click();
+                try {
+                    // try to copy from gradio's clipboard, which is really raw message
+                    const gradio_clipboard_content = await navigator.clipboard.readText();
+                    const regex = /<!-- SOO IN MESSAGE --><div class="really-raw hideM">([\s\S]*?)\n<\/div><!-- EOO IN MESSAGE -->/;
+                    const real_raw_message = gradio_clipboard_content.match(regex)[1];
+                    await navigator.clipboard.writeText(real_raw_message)
+                    // console.log("Copied from gradio's clipboard");
+                } catch (error) {
+                    await navigator.clipboard.writeText(textToCopy);
+                    // console.log("Copied from rawtext clipboard");
+                }
+                // await navigator.clipboard.writeText(textToCopy);
                 copyButton.innerHTML = copiedIcon;
                 setTimeout(() => {
                     copyButton.innerHTML = copyIcon;

modules/presets.py

@@ -175,6 +175,8 @@ SUMMARIZE_PROMPT = """Write a concise summary of the following:
 CONCISE SUMMARY IN 中文:"""
 
 ALREADY_CONVERTED_MARK = "<!-- ALREADY CONVERTED BY PARSER. -->"
+START_OF_OUTPUT_MARK = "<!-- SOO IN MESSAGE -->"
+END_OF_OUTPUT_MARK = "<!-- EOO IN MESSAGE -->"
 
 small_and_beautiful_theme = gr.themes.Soft(
         primary_hue=gr.themes.Color(

modules/utils.py

@@ -221,6 +221,7 @@ def convert_bot_before_marked(chat_message):
         hr_pattern = r'\n\n<hr class="append-display no-in-raw" />(.*?)'
         hr_match = re.search(hr_pattern, chat_message, re.DOTALL)
         clip_hr = chat_message[:hr_match.start()] if hr_match else chat_message
+
         raw = f'<div class="raw-message hideM">{escape_markdown(clip_hr)}</div>'
         for non_code, code in zip(non_code_parts, code_blocks + [""]):
             if non_code.strip():
@@ -230,7 +231,8 @@ def convert_bot_before_marked(chat_message):
                 result.append(code)
         result = "".join(result)
         md = f'<div class="md-message">{result}\n</div>'
-        return raw + md
+        really_raw = f'{START_OF_OUTPUT_MARK}<div class="really-raw hideM">{clip_hr}\n</div>{END_OF_OUTPUT_MARK}'
+        return raw + md + really_raw
 
 def convert_user_before_marked(chat_message):
     if '<div class="user-message">' in chat_message: