Update app.py

app.py

@@ -115,46 +115,44 @@ def render_message(history):
 
     for user_message, assistant_message, user_profile, assistant_profile, user_pic, assistant_pic in history:
         if user_message:
-            user_message_html = markdown.markdown(user_message)
+            user_message_html = markdown.markdown(
+                user_message, extensions=["fenced_code", CodeHiliteExtension()]
+            )
             messages_html += f"""
             <div style='display: flex; align-items: center; margin-bottom: 10px;'>
                 <img src='{user_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>
-                <span id="message-content" style='color: white;'>{user_message_html}</span>
-            </div><br>"""
+                <span style='color: white;'>{user_message_html}</span>
+            </div>"""
 
         if assistant_message:
-            assistant_message_html = markdown.markdown(assistant_message)
+            assistant_message_html = markdown.markdown(
+                assistant_message, extensions=["fenced_code", CodeHiliteExtension()]
+            )
             messages_html += f"""
             <div style='display: flex; align-items: center; margin-bottom: 10px;'>
                 <img src='{assistant_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>
-                <span id="message-content" style='color: white;'>{assistant_message_html}</span>
-            </div><br>"""
-
-    messages_html += """
-        </div></div>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js"></script>
-        <script>
-            function escapeHtml(unsafe) {
-            return unsafe
-                .replace(/&/g, "&amp;")
-                .replace(/</g, "&lt;")
-                .replace(/>/g, "&gt;")
-                .replace(/"/g, "&quot;")
-                .replace(/'/g, "&#039;");
-            }
-            let message = document.getElementById('message-content').innerHTML;
-            document.getElementById('message-content').innerHTML = escapeHtml(message);
-            MathJax.typeset();  // Process math expressions
-        </script>
-        """ 
-    return messages_html
+                <span style='color: white;'>{assistant_message_html}</span>
+            </div>
+             <script type="text/javascript" id="MathJax-script" async
+                src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js">
+            </script>
+            """
 
+    return messages_html
 
 js = """
-function HTMLClean() {
-    alert("This page is in-dev stage, expect lots of restarts, the interface is open-sourced (not the backend that is responsible for API Keys)")
- }
+document.addEventListener("DOMContentLoaded", function() {
+    MathJax = {
+        tex: {
+            inlineMath: [['$', '$'], ['\\(', '\\)']],
+            displayMath: [['$$', '$$'], ['\\[', '\\]']]
+        },
+        svg: {
+            fontCache: 'global'
+        }
+    };
+    MathJax.typeset(); // Process math expressions globally
+});
 """
 css="""
 .chatbox {height: 400px; overflow: auto; border: 1px solid #262626; padding: 10px; background-color: #171717; display: flex;  flex-direction: column-reverse;}