Changes in the interface 3

app.py

@@ -59,43 +59,46 @@ def clear_session(session_id):
 
 with gr.Blocks(css="""
 .chatbot .message.user {
-    background-color: #25D366;
+    background-color: #007bff;
     color: white;
-    border-radius: 18px;
-    padding: 10px;
+    padding: 12px;
+    border-radius: 12px;
     max-width: 75%;
-    margin: 5px 0;
+    margin: 6px 0;
     align-self: flex-end;
+    font-size: 15px;
 }
 .chatbot .message.bot {
-    background-color: #f1f0f0;
-    color: black;
-    border-radius: 18px;
-    padding: 10px;
+    background-color: #e9ecef;
+    color: #212529;
+    padding: 12px;
+    border-radius: 12px;
     max-width: 75%;
-    margin: 5px 0;
+    margin: 6px 0;
     align-self: flex-start;
+    font-size: 15px;
 }
 .chatbot {
-    font-family: "Segoe UI", sans-serif;
+    font-family: 'Segoe UI', sans-serif;
     font-size: 16px;
     display: flex;
     flex-direction: column;
 }
 """) as demo:
-    gr.Markdown("## 💬 WhatsApp-style AI Chat (Powered by Groq LLaMA3)")
+
+    gr.Markdown("### 🤖 AI Chat Assistant (Powered by Groq LLaMA3)")
 
     state = gr.State([])
 
     with gr.Row():
-        user_input = gr.Textbox(label="Type your message...", placeholder="Write a message...", lines=1)
-        send_btn = gr.Button("📤 Send", variant="primary")
+        user_input = gr.Textbox(label="Enter your message", placeholder="Ask anything...", lines=1)
+        send_btn = gr.Button("Send")
 
-    chatbot = gr.Chatbot(label="Chat", elem_classes="chatbot")
+    chatbot = gr.Chatbot(label="", elem_classes="chatbot")
 
     with gr.Row():
         session_id = gr.Textbox(label="Session ID", value="gradio_default", interactive=True)
-        clear_btn = gr.Button("🔄 Clear Session")
+        clear_btn = gr.Button("Clear Chat")
 
     send_btn.click(
         fn=chat_interface,