Update app.py

app.py

@@ -9,7 +9,7 @@ def chat(user_input, chat_history):
         # Update chat history
         chat_history.append(("User", user_input))
         chat_history.append(("AI", response))
-        # Format chat history for display
+        # Format chat history for display with a conversational style
         formatted_history = "\n".join(
             [f"{role}: {message}" for role, message in chat_history]
         )
@@ -17,11 +17,11 @@ def chat(user_input, chat_history):
     except Exception as e:
         return f"Error: {e}", chat_history
 
-# Create Gradio interface with professional design
+# Create Gradio interface with updated modern design
 with gr.Blocks(css="""
     body {
-        background-color: #121212;
-        color: #f1f1f1;
+        background-color: #f7f7f7;
+        color: #333;
         font-family: 'Roboto', sans-serif;
         display: flex;
         justify-content: center;
@@ -31,51 +31,59 @@ with gr.Blocks(css="""
     }
     .gradio-container {
         width: 100%;
-        max-width: 700px;
-        background-color: #1e1e1e;
-        padding: 25px;
-        border-radius: 12px;
-        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+        max-width: 500px;
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
     }
     .gradio-container .textbox, .gradio-container .button {
-        background-color: #333;
-        color: #f1f1f1;
-        border: 1px solid #444;
-        border-radius: 8px;
+        background-color: #eeeeee;
+        color: #333;
+        border: 1px solid #ccc;
+        border-radius: 10px;
+        padding: 12px;
         font-size: 16px;
     }
     .gradio-container .textbox:focus, .gradio-container .button:focus {
         border-color: #007bff;
+        box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
     }
     .gradio-container .button:hover {
         background-color: #007bff;
+        color: #fff;
         cursor: pointer;
     }
     .textbox {
-        margin-bottom: 15px;
+        margin-bottom: 20px;
     }
     #chatbox {
-        height: 400px;
+        height: 350px;
         overflow-y: auto;
-        border: 2px solid #444;
-        padding: 15px;
-        border-radius: 8px;
-        background-color: #2a2a2a;
-        color: #f1f1f1;
+        border: none;
+        padding: 20px;
+        border-radius: 10px;
+        background-color: #f1f1f1;
+        color: #333;
         margin-bottom: 20px;
         font-size: 14px;
-        line-height: 1.5;
-    }
-    .button-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+        line-height: 1.6;
+        font-family: 'Arial', sans-serif;
     }
-    .clear-button {
-        background-color: #ff5c5c;
+    .user-message {
+        background-color: #e0f7fa;
+        padding: 10px;
+        border-radius: 10px;
+        margin-bottom: 8px;
+        max-width: 75%;
     }
-    .clear-button:hover {
-        background-color: #e60000;
+    .ai-message {
+        background-color: #e8f5e9;
+        padding: 10px;
+        border-radius: 10px;
+        margin-bottom: 8px;
+        max-width: 75%;
+        margin-left: auto;
     }
 """) as demo:
     gr.Markdown("## 🤖 **Professional Groq Chatbot**")
@@ -90,7 +98,7 @@ with gr.Blocks(css="""
             interactive=True,
         )
         submit_button = gr.Button("Send")
-        clear_button = gr.Button("Clear Chat", elem_classes=["clear-button"])
+        clear_button = gr.Button("Clear Chat")
 
         chatbot_output = gr.Textbox(
             label="Chat History",