Update app.py

app.py

@@ -12,7 +12,6 @@ sessions = {}
 PRIMARY_SYSTEM_INSTRUCTIONS = "You are P-MSQ (Messaging Service Query), a friendly AI Chatbot that can help in any situations"
 ASSISTANT_PIC_PATH = "https://huggingface.co/spaces/PLRMB/P-MSQ-API-PREVIEW/resolve/main/API.png"  
 USER_PIC_PATH = "https://huggingface.co/spaces/PLRMB/P-MSQ-API-PREVIEW/resolve/main/usr.png"
-
 def render_avatars(userid):
     try:
         response = requests.post(
@@ -117,36 +116,43 @@ def respond(message, api_key, max_tokens, top_p, temperature):
         yield f"Error: {str(e)}"
 
 
+
 def render_message(history):
-    messages_markdown = "" 
+    messages_html = """
+    <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()
     for user_message, assistant_message, user_profile, assistant_profile, user_pic, assistant_pic in history:
         if user_message and user_message not in seen_messages:
             seen_messages.add(user_message)
-            messages_markdown += f"""
+            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;'>
-                <span style='color: white;'>{user_message}</span>
-            </div>
-            """
+                <span style='color: white;'>{user_message_html}</span>
+            </div>"""
 
         if assistant_message and assistant_message not in seen_messages:
             seen_messages.add(assistant_message)
-            messages_markdown += f"""
+            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}</span>
-            </div>
-            """
-
-    chatbox_html = f"""
-    <div id='chatbox-container' style='height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;'>
-        {messages_markdown}
-    </div>
-    """
-    return chatbox_html
+                <span style='color: white;'>{assistant_message_html}</span>
+            </div>"""
 
+    messages_html += "</div></div>"
+    return messages_html
+    
+def escape_html(unsafe_text):
+    return (
+        unsafe_text.replace("&", "&amp;")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;")
+        .replace('"', "&quot;")
+        .replace("'", "&#039;")
+    )
 
 css="""
 .chatbox {height: 400px; overflow: auto; border: 1px solid #262626; padding: 10px; background-color: #171717; display: flex;  flex-direction: column-reverse;}
@@ -163,9 +169,14 @@ with gr.Blocks(css=css) as demo:
         auth_status = gr.Textbox(label="Authorization Status", interactive=False)
 
     with gr.Column(visible=False) as chat_view:
-        gr.Markdown("<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>")
+        gr.HTML("""
+    <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>
+    """)
         gr.Markdown("## P-MSQ Chat Interface")
-        chatbot_output = gr.Markdown("", elem_id="chatbox-container")
+        chatbot_output = gr.HTML(elem_id="chatbox-container")
+        gr.Markdown(elem_id="chatbox-container") 
         msg_input = gr.Text(
             show_label=False, 
             placeholder="Type your message and press Shift+Enter...", 
@@ -242,12 +253,12 @@ with gr.Blocks(css=css) as demo:
     def authorize_and_proceed(user, api_key):
         if authorize(user, api_key, PRIMARY_SYSTEM_INSTRUCTIONS):
             gr.Info("Loading, please wait.")
-            messages_markdown, history = load_conversation(api_key)
+            messages_html, history = load_conversation(api_key)
 
             return (
             gr.update(visible=False), 
             gr.update(visible=True),  
-            messages_markdown,
+            messages_html,
             history
             )
         elif authorize(user, api_key, PRIMARY_SYSTEM_INSTRUCTIONS) == 403: 
@@ -280,4 +291,4 @@ with gr.Blocks(css=css) as demo:
     save_instructions_btn.click(save_custom_instructions, inputs=[api_key_input, system_instructions_input], outputs=auth_status)
     demo.launch(show_api=False)
 if __name__ == "__main__":
-    demo.queue = False
+    demo.queue = False