add escape to avoid html being rendered in raw message

web_assets/javascript/message-button.js

@@ -20,7 +20,7 @@ function convertBotMessage(gradioButtonMsg) {
             const part = agentParts[i];
             if (i % 2 === 0) {
                 if (part !== "" && part !== "\n") {
-                    finalMessage += `<pre class="fake-pre">${part.trim()}</pre>`;
+                    finalMessage += `<pre class="fake-pre">${escapeMarkdown(part.trim())}</pre>`;
                 }
             } else {
                 finalMessage += part.replace(' data-fancybox="gallery"', ''); // 避免 raw message 中的图片被 fancybox 处理

web_assets/javascript/utils.js

@@ -15,6 +15,44 @@ function isImgUrl(url) {
     return false;
 }
 
+function escapeMarkdown(text) {
+    /*
+    Escape Markdown special characters to HTML-safe equivalents.
+    */
+    const escapeChars = {
+        // ' ': ' ',
+        "_": "_",
+        "*": "*",
+        "[": "[",
+        "]": "]",
+        "(": "(",
+        ")": ")",
+        "{": "{",
+        "}": "}",
+        "#": "#",
+        "+": "+",
+        "-": "-",
+        ".": ".",
+        "!": "!",
+        "`": "`",
+        ">": ">",
+        "<": "&#60;",
+        "|": "&#124;",
+        "$": "&#36;",
+        ":": "&#58;",
+    };
+
+    text = text.replace(/ {4}/g, "&nbsp;&nbsp;&nbsp;&nbsp;"); // Replace 4 spaces with non-breaking spaces
+
+    let escapedText = "";
+    for (let i = 0; i < text.length; i++) {
+        const currentChar = text.charAt(i);
+        escapedText += escapeChars[currentChar] || currentChar;
+    }
+
+    return escapedText;
+}
+
 function downloadHistory(gradioUsername, historyname, format=".json") {
     let fileUrl;
     if (gradioUsername === null || gradioUsername.trim() === "") {