Update app.py

app.py

@@ -122,49 +122,33 @@ def render_message(history):
     <div id="chatbox-container" class="chatbox" style="height: 400px; overflow: auto; border: 1px solid #262626; padding: 10px; background-color: #171717; display: flex; flex-direction: column-reverse;">
         <div id="messages" style="display: block; margin-bottom: 10px;">"""
 
-    seen_messages = set()  
-
+    seen_messages = set()
     for user_message, assistant_message, user_profile, assistant_profile, user_pic, assistant_pic in history:
-        if user_message and ("user", user_message) not in seen_messages:
-            seen_messages.add(("user", user_message))
+        if user_message and user_message not in seen_messages:
+            seen_messages.add(user_message)
+            user_message_html = escape_html(user_message)
             messages_html += f"""
-            <div style='display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px;'>
-                <img src='{user_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-bottom: 5px;'>
-                <div style='color: white; white-space: pre-wrap;'>{user_message}</div>
+            <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 style='color: white; white-space: pre-wrap;'>{user_message_html}</span>
             </div>"""
 
-        if assistant_message and ("assistant", assistant_message) not in seen_messages:
-            seen_messages.add(("assistant", assistant_message))
+        if assistant_message and assistant_message not in seen_messages:
+            seen_messages.add(assistant_message)
+            assistant_message_html = escape_html(assistant_message)
             messages_html += f"""
-            <div style='display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px;'>
-                <img src='{assistant_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-bottom: 5px;'>
-                <div style='color: white; white-space: pre-wrap;'>{assistant_message}</div>
+            <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; white-space: pre-wrap;'>{assistant_message_html}</span>
             </div>"""
 
     messages_html += "</div></div>"
+    return messages_html
 
-    mathjax_script = """
-    <script type="text/javascript">
-        MathJax = {
-            tex: {
-                inlineMath: [['\\(', '\\)']],
-                displayMath: [
-                    ['\\[', '\\]'],
-                    ['\\begin{equation}', '\\end{equation}'],
-                    ['\\begin{align}', '\\end{align}'],
-                    ['\\begin{alignat}', '\\end{alignat}'],
-                    ['\\begin{gather}', '\\end{gather}'],
-                    ['\\begin{CD}', '\\end{CD}']
-                ],
-                processEscapes: true
-            },
-            svg: { fontCache: 'global' }
-        };
-    </script>
-    <script type="text/javascript" async
-        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js"></script>
-    """
-    return messages_html + mathjax_script
+
+def escape_html(unsafe_text):
+    escaped_text = ''.join(f"&#{ord(char)};" if char not in ('\n', '\r') else '<br>' for char in unsafe_text)
+    return escaped_text
 
 
 def escape_html(unsafe_text):