Update app.py

app.py

@@ -120,6 +120,7 @@ def render_message(history):
             user_message_html = markdown.markdown(
                 user_message, extensions=["fenced_code", CodeHiliteExtension()]
             )
+            user_message_html = markdown.markdown(escape_html(user_message), extensions=["fenced_code", "codehilite"])
             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;'>
@@ -130,34 +131,13 @@ def render_message(history):
             assistant_message_html = markdown.markdown(
                 assistant_message, extensions=["fenced_code", CodeHiliteExtension()]
             )
+            assistant_message_html = markdown.markdown(escape_html(assistant_message), extensions=["fenced_code", "codehilite"])
             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 style='color: white;'>{assistant_message_html}</span>
             </div>"""
 
-    messages_html += """
-        </div>
-    </div>
-
-    
-    <script>
-            function escapeHtml(unsafe) {
-                return unsafe
-                    .replace(/&/g, "&amp;")
-                    .replace(/</g, "&lt;")
-                    .replace(/>/g, "&gt;")
-                    .replace(/"/g, "&quot;")
-                    .replace(/'/g, "&#039;");
-            }
-            let messages = document.querySelectorAll('#message-content');
-            messages.forEach((message) => {
-                message.innerHTML = DOMPurify.sanitize(message.innerHTML); // Sanitize HTML content
-            });
-            MathJax.typeset();  
-    </script>
-    """
-
     return messages_html
 
 def escape_html(unsafe_text):
@@ -188,6 +168,15 @@ with gr.Blocks(css=css) as demo:
     <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>
+    <script>
+     if (typeof MathJax !== 'undefined') {
+            MathJax.typesetPromise()
+                .then(() => console.log("MathJax typesetting complete."))
+                .catch((err) => console.error("MathJax typesetting error:", err));
+        } else {
+            console.error("MathJax is not loaded.");
+        }
+    </script>
     """)
         gr.Markdown("## P-MSQ Chat Interface")
         chatbot_output = gr.HTML(elem_id="chatbox-container")