Update app.py

app.py

@@ -20,19 +20,9 @@ def chat_with_groq(user_message, history):
     if not user_message or not user_message.strip():
         return history, ""
 
-    # Add user message
-    history.append({
-        "role": "user",
-        "content": user_message
-    })
-
-    # Add thinking placeholder
-    history.append({
-        "role": "assistant",
-        "content": "⚡ Groq is thinking..."
-    })
-
-    # Prepare messages for Groq
+    history.append({"role": "user", "content": user_message})
+    history.append({"role": "assistant", "content": "⚡ Groq is thinking..."})
+
     messages = [
         {"role": msg["role"], "content": msg["content"]}
         for msg in history[:-1]
@@ -43,12 +33,10 @@ def chat_with_groq(user_message, history):
             model="llama-3.3-70b-versatile",
             messages=messages,
         )
-
         history[-1] = {
             "role": "assistant",
             "content": completion.choices[0].message.content
         }
-
     except Exception as e:
         history[-1] = {
             "role": "assistant",
@@ -64,9 +52,10 @@ def clear_chat():
     return [], ""
 
 # =====================================================
-# CSS (Light + Dark mode safe)
+# CSS (Light/Dark + Gradio 6 UI FIX)
 # =====================================================
 custom_css = """
+/* ---------- Color System ---------- */
 :root {
   --bg: #f9fafb;
   --surface: #ffffff;
@@ -88,6 +77,7 @@ custom_css = """
   }
 }
 
+/* ---------- Base Layout ---------- */
 body {
   background-color: var(--bg);
 }
@@ -96,9 +86,11 @@ body {
   max-width: 1100px !important;
   margin: auto;
   padding: 24px;
+  overflow-x: hidden !important;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
+/* ---------- Typography ---------- */
 h1 {
   color: var(--text);
   text-align: center;
@@ -112,15 +104,18 @@ h1 {
   margin-bottom: 20px;
 }
 
+/* ---------- Chatbot ---------- */
 .chatbot {
   background: var(--surface);
   border-radius: 16px;
   padding: 16px;
   height: 70vh;
-  overflow-y: auto;
+  width: 100% !important;
   border: 1px solid var(--border);
+  overflow-y: auto;
 }
 
+/* ---------- Messages ---------- */
 .message {
   max-width: 72%;
   padding: 12px 14px;
@@ -128,6 +123,7 @@ h1 {
   margin-bottom: 10px;
   line-height: 1.6;
   font-size: 15px;
+  box-sizing: border-box;
 }
 
 .message.user {
@@ -144,6 +140,7 @@ h1 {
   border-bottom-left-radius: 4px;
 }
 
+/* ---------- Input ---------- */
 textarea {
   background: var(--surface) !important;
   color: var(--text) !important;
@@ -157,6 +154,7 @@ textarea::placeholder {
   color: var(--muted);
 }
 
+/* ---------- Buttons ---------- */
 button {
   background: var(--user) !important;
   color: white !important;
@@ -168,13 +166,27 @@ button {
 button:hover {
   opacity: 0.9;
 }
+
+/* ---------- GRADIO 6 FIXES ---------- */
+.chatbot-toolbar,
+.chatbot-actions,
+button[aria-label="Copy"],
+button[aria-label="Share"],
+button[aria-label="Clear"] {
+  display: none !important;
+}
+
+.chatbot .scroll-to-bottom {
+  right: 16px !important;
+  bottom: 80px !important;
+}
 """
 
 # =====================================================
 # Gradio UI
 # =====================================================
-with gr.Blocks(title="GROQ AI CHATBOT") as demo:
-    gr.Markdown("# 🤖 GROQ AI CHATBOT")
+with gr.Blocks(title="GROQ CHATBOT") as demo:
+    gr.Markdown("# 🤖 GROQ CHATBOT")
     gr.Markdown(
         "<div class='subtitle'>Fast, reliable AI powered by Groq & LLaMA-3.3</div>"
     )
@@ -196,7 +208,7 @@ with gr.Blocks(title="GROQ AI CHATBOT") as demo:
     clear.click(clear_chat, outputs=[chatbot, txt], show_progress=False)
 
 # =====================================================
-# Launch (CSS moved here in Gradio 6)
+# Launch (Gradio 6)
 # =====================================================
 if __name__ == "__main__":
     demo.launch(css=custom_css)