Changes in the interface 2

app.py

@@ -48,32 +48,54 @@ def chat_logic(session_id: str, user_input: str):
     print(f"[Session: {session_id}] AI Response: {ai_response}")
     return ai_response
 
-# UI logic for message display
 def chat_interface(user_input, chat_history, session_id):
     ai_reply = chat_logic(session_id, user_input)
     chat_history.append((user_input, ai_reply))
     return chat_history, ""
 
-# Clear session memory
 def clear_session(session_id):
     session_memory_dict.pop(session_id, None)
     return [], "gradio_default"
 
 with gr.Blocks(css="""
-.chatbot .message.user { background-color: #dcf8c6 !important; color: #000; }
-.chatbot .message.bot { background-color: #ececec !important; color: #000; }
+.chatbot .message.user {
+    background-color: #25D366;
+    color: white;
+    border-radius: 18px;
+    padding: 10px;
+    max-width: 75%;
+    margin: 5px 0;
+    align-self: flex-end;
+}
+.chatbot .message.bot {
+    background-color: #f1f0f0;
+    color: black;
+    border-radius: 18px;
+    padding: 10px;
+    max-width: 75%;
+    margin: 5px 0;
+    align-self: flex-start;
+}
+.chatbot {
+    font-family: "Segoe UI", sans-serif;
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+}
 """) as demo:
-    gr.Markdown("### 🤖 WhatsApp-style Chatbot powered by Groq LLaMA3")
-    
+    gr.Markdown("## 💬 WhatsApp-style AI Chat (Powered by Groq LLaMA3)")
+
+    state = gr.State([])
+
     with gr.Row():
-        session_id = gr.Textbox(label="Session ID", value="gradio_default", interactive=True)
-        clear_btn = gr.Button("🔄 Clear Session")
+        user_input = gr.Textbox(label="Type your message...", placeholder="Write a message...", lines=1)
+        send_btn = gr.Button("📤 Send", variant="primary")
 
-    chatbot = gr.Chatbot(label="Chat with AI", elem_classes="chatbot")
-    user_input = gr.Textbox(label="Type your message...", placeholder="Message...", lines=1)
-    send_btn = gr.Button("Send", variant="primary")
+    chatbot = gr.Chatbot(label="Chat", elem_classes="chatbot")
 
-    state = gr.State([])
+    with gr.Row():
+        session_id = gr.Textbox(label="Session ID", value="gradio_default", interactive=True)
+        clear_btn = gr.Button("🔄 Clear Session")
 
     send_btn.click(
         fn=chat_interface,