new messages with raw-md toggle again

modules/utils.py

@@ -265,7 +265,7 @@ def clip_rawtext(chat_message, need_escape=True):
     return final_message
 
 
-def convert_bot_before_marked(chat_message):
+def convert_bot_before_marked(chat_message): # deprecated after gradio 4.0
     """
     注意不能给输出加缩进, 否则会被marked解析成代码块
     """

web_assets/javascript/ChuanhuChat.js

@@ -468,7 +468,7 @@ let ChuanhuInfo = function () {
  */
 }
 let description = `
-© 2023 Chuanhu, MZhao, Keldos
+© 2023 - 2024 Chuanhu, MZhao, Keldos
 GitHub repository: [https://github.com/GaiZhenbiao/ChuanhuChatGPT]\n
 Enjoy our project!\n
 `

web_assets/javascript/message-button.js

@@ -1,24 +1,55 @@
 
 // 为 bot 消息添加复制与切换显示按钮 以及最新消息加上重新生成，删除最新消息，嗯。
 
+function convertBotMessage(gradioButtonMsg) {
+    var rawMessageStr = gradioButtonMsg.getAttribute('aria-label');
+    rawMessageStr = rawMessageStr.replace(/^bot's message: /, ''); // 去掉开头的“bot's message: ”
+    var insertChild = gradioButtonMsg.querySelector('.md');
+
+    var rawMessage = document.createElement('div');
+    rawMessage.classList.add('raw-message');
+    rawMessage.classList.add('hideM');
+    rawMessage.innerHTML = `<pre class="fake-pre">${rawMessageStr}</pre>`;
+
+    var mdMessage = document.createElement('div');
+    mdMessage.classList.add('md-message');
+    mdMessage.innerHTML = insertChild.innerHTML;
+
+    insertChild.innerHTML = '';
+    insertChild.appendChild(rawMessage);
+    insertChild.appendChild(mdMessage);
+}
+
 function addChuanhuButton(botElement) {
 
     // botElement = botRow.querySelector('.message.bot');
     var isLatestMessage = botElement.classList.contains('latest');
 
+    var gradioButtonMsg = botElement.querySelector('button[data-testid="bot"]');
     var rawMessage = botElement.querySelector('.raw-message');
     var mdMessage = botElement.querySelector('.md-message');
     
-    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]);
-        // }
-        botElement.querySelector('.message-btn-row')?.remove();
-        botElement.querySelector('.message-btn-column')?.remove();
-        return;
+    if (!rawMessage && !mdMessage) {
+        // 现在动态更新会导致 svelte.js 的 flush 出错，所以生成时不更新
+        if (chatbotIndicator.classList.contains('generating')) return;
+
+        convertBotMessage(gradioButtonMsg);
+        rawMessage = botElement.querySelector('.raw-message');
+        mdMessage = botElement.querySelector('.md-message');
     }
+    // 没有办法，太早的版本就不管了。没有办法区分最早版本和适配gradio4版本。
+
+    // 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]);
+    //     // }
+    //     botElement.querySelector('.message-btn-row')?.remove();
+    //     botElement.querySelector('.message-btn-column')?.remove();
+    //     return;
+    // }
     // botElement.querySelectorAll('button.copy-bot-btn, button.toggle-md-btn').forEach(btn => btn.remove()); // 就算原先有了，也必须重新添加，而不是跳过
+    
     if (!isLatestMessage) botElement.querySelector('.message-btn-row')?.remove();
     setLatestMessage();
 

web_assets/stylesheet/chatbot.css

@@ -225,11 +225,11 @@ hr.append-display {
     margin:0 !important;
 }
 .message .raw-message pre.fake-pre {
-    background: unset;
-    margin: unset;
-    font-size: unset;
+    background: unset !important;
+    margin: unset !important;
+    font-size: unset !important;
     /* font-family: unset; */
-    padding: unset;
+    padding: unset !important;
     white-space: inherit;
 }
 .message .raw-message {

web_assets/stylesheet/markdown.css

@@ -1,23 +1,23 @@
 
 /* 表格 */
-.md-message table {
+.message table {
     margin: 1em 0;
     border-collapse: collapse;
     empty-cells: show;
 }
-.md-message td, .message th {
+.message td, .message th {
     border: 1.2px solid var(--border-color-primary) !important;
     padding: 0.2em;
 }
-.md-message thead {
+.message thead {
     background-color: rgba(175,184,193,0.2);
 }
-.md-message thead th {
+.message thead th {
     padding: .5em .2em;
 }
 
 /* 行内代码 */
-.md-message :not(pre) > code {
+.message :not(pre) > code {
     display: inline;
     white-space: break-spaces;
     font-family: var(--font-mono) !important;
@@ -29,8 +29,8 @@
     font-size: var(--text-md) !important;
 }
 /* 代码块 */
-.md-message pre,
-.md-message pre[class*=language-] {
+.message pre,
+.message pre[class*=language-] {
     color: #fff;
     overflow-x: auto;
     overflow-y: hidden;
@@ -38,8 +38,8 @@
     border-radius: var(--radius-lg) !important;
     background: var(--neutral-950) !important;
 }
-.md-message pre code,
-.md-message pre code[class*=language-] {
+.message pre code,
+.message pre code[class*=language-] {
     color: #fff;
     padding: 0;
     margin: 0;
@@ -48,7 +48,7 @@
     font-family: var(--font-mono);
     font-size: var(--text-md);
 }
-.md-message .code_wrap {
+.message .code_wrap {
     margin: .8em 1em 1em 0em;
 }