fix&feat: 修复原始消息中LaTeX被误渲染的问题; 原始消息改用等宽字体

fix #955.
origin commit: 3dc27c72e3bc0cbd2b1f4ea95a805f34f50eab07

ammended: 适配了之前的消息内容写法

ChuanhuChatbot.py

@@ -135,6 +135,7 @@ with gr.Blocks(theme=small_and_beautiful_theme) as demo:
                         label="Chuanhu Chat",
                         elem_id="chuanhu-chatbot",
                         latex_delimiters=latex_delimiters_set,
+                        sanitize_html=False,
                         # height=700,
                         show_label=False,
                         avatar_images=[config.user_avatar, config.bot_avatar],

modules/utils.py

@@ -233,7 +233,7 @@ def convert_bot_before_marked(chat_message):
     if '<div class="md-message">' in chat_message:
         return chat_message
     else:
-        raw = f'<div class="raw-message hideM"><pre>{clip_rawtext(chat_message)}</pre></div>'
+        raw = f'<div class="raw-message hideM"><pre class="fake-pre">{clip_rawtext(chat_message)}</pre></div>'
         # really_raw = f'{START_OF_OUTPUT_MARK}<div class="really-raw hideM">{clip_rawtext(chat_message, need_escape=False)}\n</div>{END_OF_OUTPUT_MARK}'
 
         code_block_pattern = re.compile(r"```(.*?)(?:```|$)", re.DOTALL)

web_assets/javascript/message-button.js

@@ -95,7 +95,11 @@ function addChuanhuButton(botElement) {
     function removeMarkdownText(message) {
         var rawDiv = message.querySelector('.raw-message');
         if (rawDiv) {
-            rawDiv.innerHTML = rawDiv.querySelector('pre')?.innerHTML || rawDiv.innerHTML;
+            // 判断pre是否存在fake-pre类，如果不存在，则为20231118之前的历史记录格式，需要转换，增加fake-pre类用于适配
+            if (!rawDiv.querySelector('pre')?.classList.contains('fake-pre')) {
+                rawDiv.innerHTML = rawDiv.innerHTML.replace(/<pre>/g, '<pre class="fake-pre">');
+            }
+            // rawDiv.innerHTML = rawDiv.querySelector('pre')?.innerHTML || rawDiv.innerHTML;
             rawDiv.classList.remove('hideM');
         }
         var mdDiv = message.querySelector('.md-message');

web_assets/stylesheet/chatbot.css

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