Changed something

app.py

@@ -4,7 +4,6 @@ from groq import Groq
 import gradio as gr
 
 load_dotenv()
-
 client = Groq()
 session_memory_dict = {}
 
@@ -48,62 +47,91 @@ def clear_session(session_id):
     return [], "gradio_default"
 
 with gr.Blocks(css="""
+body {
+  background-color: #121212;
+  color: #E0E0E0;
+  font-family: 'Segoe UI', sans-serif;
+}
+.header {
+  text-align: center;
+  font-size: 1.8rem;
+  padding: 1rem;
+  background-color: #1F1F1F;
+  color: #ffffff;
+  border-bottom: 1px solid #333;
+}
 .chatbot {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  height: 70vh;
+  height: 65vh;
   overflow-y: auto;
-  padding: 10px;
+  padding: 1rem;
+  background-color: #1E1E1E;
+  border-radius: 12px;
+  margin-bottom: 1rem;
 }
 .chatbot .message {
   width: fit-content;
-  max-width: 70%;
-  padding: 12px 16px;
-  margin: 6px 0;
-  border-radius: 12px;
+  max-width: 75%;
+  padding: 12px 18px;
+  margin: 8px 0;
+  border-radius: 16px;
   line-height: 1.5;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  word-break: break-word;
 }
 .chatbot .message.user {
-  background-color: #0069D9;
-  color: #fff;
+  background-color: #2979FF;
+  color: white;
   align-self: flex-end;
 }
 .chatbot .message.bot {
-  background-color: #f8f9fa;
-  color: #212529;
+  background-color: #2C2C2C;
+  color: #E0E0E0;
   align-self: flex-start;
 }
-.chat-container {
-  display: flex; flex-direction: column; height: 100%;
-}
-.input-row, .session-row {
-  display: flex; gap: 8px; align-items: center;
+.input-section {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-top: auto;
 }
 input, button {
   font-size: 1rem;
 }
+.send-button {
+  background-color: #2979FF;
+  color: white;
+  border: none;
+  padding: 10px 16px;
+  border-radius: 12px;
+  cursor: pointer;
+}
+.send-button:hover {
+  background-color: #5393FF;
+}
+.session-controls {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 1rem;
+}
 """) as demo:
 
-    gr.Markdown("### 🤖 AI Chat Assistant (Clean & Responsive UI)")
+    gr.Markdown("## 🤖 Smart Assistant Chat", elem_classes="header")
 
     state = gr.State([])
-    # Input at top
-    with gr.Row(elem_classes="input-row"):
-        user_input = gr.Textbox(
-            label="", placeholder="Type your message here...", lines=1, interactive=True
-        )
-        send_btn = gr.Button("Send", variant="primary")
-
-    # Chat area
+
     chatbot = gr.Chatbot(elem_classes="chatbot")
 
-    # Session controls at bottom
-    with gr.Row(elem_classes="session-row"):
+    with gr.Row(elem_classes="input-section"):
+        user_input = gr.Textbox(placeholder="Type your message...", lines=1, label="")
+        send_btn = gr.Button("Send", elem_classes="send-button")
+
+    with gr.Row(elem_classes="session-controls"):
         session_id = gr.Textbox(label="Session ID", value="gradio_default", interactive=True)
         clear_btn = gr.Button("Clear Chat")
 
-    # Interaction wiring
     send_btn.click(fn=chat_interface, inputs=[user_input, state, session_id], outputs=[chatbot, user_input])
     user_input.submit(fn=chat_interface, inputs=[user_input, state, session_id], outputs=[chatbot, user_input])
     clear_btn.click(fn=clear_session, inputs=[session_id], outputs=[chatbot, session_id])