Update app.py

app.py

@@ -39,6 +39,19 @@ def clear_conversation_history():
     except Exception as e:
         return f"Error clearing history: {e}", ""
 
+# Function to format bot response
+def format_bot_response(response):
+    """
+    Converts markdown-like symbols to HTML and structures response.
+    """
+    response = response.replace("**", "<b>").replace("**", "</b>")  # Bold formatting
+    response = response.replace("1.", "<br>&nbsp;&nbsp;1.")
+    response = response.replace("2.", "<br>&nbsp;&nbsp;2.")
+    response = response.replace("3.", "<br>&nbsp;&nbsp;3.")
+    response = response.replace("4.", "<br>&nbsp;&nbsp;4.")
+    response = response.replace("5.", "<br>&nbsp;&nbsp;5.")
+    return f"<div>{response}</div>"
+
 # Function to get response from the LLM
 def get_groq_response(message, history=[]):
     try:
@@ -47,7 +60,7 @@ def get_groq_response(message, history=[]):
             model="llama-3.1-70b-versatile",
             messages=messages
         )
-        return response.choices[0].message["content"]
+        return format_bot_response(response.choices[0].message["content"])
     except Exception as e:
         return f"Error: {str(e)}"
 
@@ -70,16 +83,40 @@ def chatbot(user_input, history):
     save_history(conversation_history)
     
     # Format for HTML display
-    display_html = "<br>".join(
-        f"<div><b>User:</b> {user}</div><div><b>Bot:</b> {bot}</div><br>"
+    display_html = "".join(
+        f"<div class='user-message'><b>User:</b> {user}</div>"
+        f"<div class='bot-message'><b>Bot:</b> {bot}</div>"
         for user, bot in conversation_history
     )
     
     return conversation_history, display_html, ""  # Clear the user input field
 
 # Gradio Interface
-with gr.Blocks() as demo:
-    gr.Markdown("# Chatbot with Enhanced Formatting and Selectable Chat History")
+with gr.Blocks(css="""
+    .user-message { 
+        background-color: #9ACBD0; 
+        padding: 10px; 
+        margin: 10px; 
+        border-radius: 8px; 
+        max-width: 60%; 
+        float: right; 
+        clear: both; 
+    }
+    .bot-message { 
+        background-color: #F2EFE7; 
+        padding: 10px; 
+        margin: 10px; 
+        border-radius: 8px; 
+        max-width: 60%; 
+        float: left; 
+        clear: both; 
+    }
+    .user-message:hover, .bot-message:hover {
+        transform: scale(1.02);
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    }
+""") as demo:
+    gr.Markdown("# Chatbot with Enhanced UI and User-Friendly Formatting")
     
     chat_display = gr.HTML(label="Conversation")
     user_input = gr.Textbox(label="Type your message here:")