Update app.py

app.py

@@ -6,9 +6,8 @@ from groq import Groq
 api_key = os.environ.get("GROQ_API_KEY")
 client = Groq(api_key=api_key)
 
-# 2. UI Styling (Purple Theme & Custom Chat Bubbles)
+# 2. UI Styling
 custom_css = """
-/* General Container */
 .gradio-container { 
     max-width: 100% !important; 
     height: 95vh !important; 
@@ -16,7 +15,6 @@ custom_css = """
     padding: 10px 20px !important;
 }
 
-/* Chatbot Window Height & Border */
 #chatbot-window { 
      height: 67vh !important; 
      border-radius: 12px; 
@@ -24,41 +22,26 @@ custom_css = """
      background: white; 
 }
 
-/* --- PURPLE THEME START --- */
-
-/* Primary Buttons (Send Button) */
-.primary-button, .variant-primary {
-    background-color: #8A2BE2 !important; /* BlueViolet Purple */
-    border-color: #8A2BE2 !important;
-    color: white !important;
-}
-
-/* Slider Track/Handle (Temperature) */
-input[type="range"] {
-    accent-color: #8A2BE2 !important;
-}
-
-/* User Message Bubble (Purple) */
-.user.message {
-    background-color: #8A2BE2 !important;
-    color: white !important;
-    border-radius: 15px 15px 2px 15px !important;
+/* Dark Mode Overrides */
+.dark #chatbot-window {
+    background: #1a1a1a !important;
+    border-color: #444 !important;
 }
 
-/* Bot Message Bubble (Stay Default/Light) */
-.bot.message {
-    background-color: #f1f1f1 !important;
-    color: black !important;
-    border-radius: 15px 15px 15px 2px !important;
+#system-prompt-container textarea, .scroll-input textarea {
+    height: 45px !important;
+    max-height: 45px !important;
+    overflow-y: auto !important;
+    resize: none !important;
 }
 
-/* --- PURPLE THEME END --- */
-
-/* Settings Gear Button */
 #settings-btn {
     width: 44px !important;
     height: 44px !important;
     min-width: 44px !important;
+    max-width: 44px !important;
+    padding: 0 !important;
+    margin: 0 !important;
     border-radius: 8px !important;
     background: #f0f0f0 !important;
     border: 1px solid #ddd !important;
@@ -77,10 +60,10 @@ input[type="range"] {
     min-width: 300px !important;
 }
 
-/* Dark Mode Logic */
-.dark #chatbot-window { background: #1a1a1a !important; border-color: #444 !important; }
-.dark .sidebar-panel { background-color: #2d2d2d !important; border-color: #444 !important; }
-.dark .bot.message { background-color: #333 !important; color: white !important; }
+.dark .sidebar-panel {
+    background-color: #2d2d2d !important;
+    border-color: #444 !important;
+}
 """
 
 # 3. Secure Chat Logic
@@ -127,12 +110,14 @@ with gr.Blocks() as demo:
     with gr.Row():
         # Main Chat Area
         with gr.Column(scale=4) as chat_col:
+            # Fixed: Removed type="messages" as it's the default in Gradio 6
             chatbot = gr.Chatbot(elem_id="chatbot-window") 
             with gr.Row():
                 msg_input = gr.Textbox(
                     placeholder="Ask me anything...", 
                     container=False, 
-                    scale=9
+                    scale=9,
+                    elem_classes="scroll-input"
                 )
                 submit_btn = gr.Button("Send", variant="primary", scale=1, min_width=80)
         
@@ -150,31 +135,36 @@ with gr.Blocks() as demo:
             sys_msg = gr.Textbox(
                 value="You are a professional assistant.", 
                 label="System Prompt", 
-                lines=1
+                lines=1,
+                elem_id="system-prompt-container"
             )
 
-            # Support/Developer Links
             gr.HTML("""
             <div style="text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid #ddd;">
                 <p style="font-size: 0.85em; color: #555; margin-bottom: 12px;">Connect with the developer</p>
                 <div style="display: flex; justify-content: center; gap: 15px; align-items: center;">
-                    <a href="https://www.linkedin.com/in/hassan-naseer-web-developer" target="_blank">LinkedIn</a> |
-                    <a href="https://wa.me/923099702809" target="_blank">WhatsApp</a>
+                    <a href="https://www.linkedin.com/in/hassan-naseer-web-developer" target="_blank"><svg width="30" height="30" viewBox="0 0 24 24" fill="#0077b5"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a>
+                    <a href="https://wa.me/923099702809" target="_blank"><svg width="55" height="55" viewBox="0 0 24 24" fill="#25D366"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766 0-3.18-2.587-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793 0-.852.448-1.271.607-1.442.159-.171.348-.214.464-.214.116 0 .232.001.333.006.101.005.237-.038.37.284.144.35.493 1.203.536 1.29.043.087.072.188.014.304-.058.116-.087.188-.174.289-.087.101-.184.225-.261.304-.093.097-.19.202-.082.387.108.185.479.791 1.029 1.282.709.633 1.308.83 1.493.922.185.093.294.077.404-.051.11-.128.471-.548.598-.736.127-.188.253-.159.426-.096.173.063 1.096.516 1.284.609.188.093.312.139.356.215.044.076.044.439-.1.844z"/></svg></a>
+                    <a href="mailto:hk4960498@gmail.com" target="_blank"><svg width="30" height="30" viewBox="0 0 24 24" fill="#555"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg></a>
                 </div>
             </div>
             """)
 
-    # --- Sidebar Toggle ---
+    # Sidebar Toggle Logic
     def toggle_sidebar(current_state):
         new_state = not current_state
         return gr.update(visible=new_state), new_state
 
     settings_btn.click(toggle_sidebar, [sidebar_state], [sidebar_col, sidebar_state])
 
-    # --- Dark Mode ---
-    dark_btn.click(toggle_dark_mode, [dark_state], [dark_btn, dark_state], js=toggle_dark_js)
+    # Dark Mode Logic
+    dark_btn.click(
+        toggle_dark_mode, 
+        inputs=[dark_state], 
+        outputs=[dark_btn, dark_state],
+        js=toggle_dark_js
+    )
 
-    # --- Chat Logic ---
     def user_turn(msg, hist):
         if not msg: return "", hist
         hist.append({"role": "user", "content": msg})
@@ -196,4 +186,5 @@ with gr.Blocks() as demo:
     )
 
 if __name__ == "__main__":
+    # Fixed: Moved css to launch()
     demo.launch(css=custom_css)