Update app.py

app.py

@@ -6,7 +6,7 @@ from groq import Groq
 api_key = os.environ.get("GROQ_API_KEY")
 client = Groq(api_key=api_key)
 
-# 2. UI Styling
+# 2. UI Styling (Added .dark mode support)
 custom_css = """
 .gradio-container { 
     max-width: 100% !important; 
@@ -22,6 +22,12 @@ custom_css = """
      background: white; 
 }
 
+/* Dark Mode Overrides */
+.dark #chatbot-window {
+    background: #1a1a1a !important;
+    border-color: #444 !important;
+}
+
 #system-prompt-container textarea, .scroll-input textarea {
     height: 45px !important;
     max-height: 45px !important;
@@ -53,9 +59,15 @@ custom_css = """
     border: 1px solid #ddd;
     min-width: 300px !important;
 }
+
+/* Ensure sidebar looks good in dark mode */
+.dark .sidebar-panel {
+    background-color: #2d2d2d !important;
+    border-color: #444 !important;
+}
 """
 
-# 3. Secure Chat Logic
+# 3. Logic Functions
 def chat_with_groq(message, history, model, temperature, system_prompt):
     cleaned_messages = [{"role": "system", "content": system_prompt}]
     for msg in history:
@@ -77,9 +89,18 @@ def chat_with_groq(message, history, model, temperature, system_prompt):
     except Exception as e:
         yield f"⚠️ API Error: {str(e)}"
 
+# --- DARK MODE TOGGLE LOGIC ---
+def toggle_dark_mode(current_is_dark):
+    new_state = not current_is_dark
+    new_label = "☀️ Light Mode" if new_state else "🌙 Dark Mode"
+    return new_label, new_state
+
+toggle_dark_js = """() => { document.body.classList.toggle('dark'); }"""
+
 # 4. Interface Setup
-with gr.Blocks() as demo:
+with gr.Blocks(css=custom_css) as demo:
     sidebar_state = gr.State(False)
+    dark_state = gr.State(False) # Track dark mode state
 
     # Header Section
     with gr.Row():
@@ -88,12 +109,10 @@ with gr.Blocks() as demo:
         with gr.Column(scale=1, min_width=50):
             settings_btn = gr.Button("⚙️", elem_id="settings-btn")
     
-    
-    
     with gr.Row():
         # Main Chat Area
         with gr.Column(scale=4) as chat_col:
-            chatbot = gr.Chatbot(elem_id="chatbot-window") 
+            chatbot = gr.Chatbot(elem_id="chatbot-window", type="messages") 
             with gr.Row():
                 msg_input = gr.Textbox(
                     placeholder="Ask me anything...", 
@@ -106,6 +125,10 @@ with gr.Blocks() as demo:
         # Sidebar Area
         with gr.Column(scale=1, visible=False, elem_classes="sidebar-panel") as sidebar_col:
             gr.Markdown("### ⚙️ Global Settings")
+            
+            # --- THE DARK MODE BUTTON ---
+            dark_btn = gr.Button("🌙 Dark Mode", variant="secondary")
+            
             model_choice = gr.Dropdown(
                 choices=["llama-3.3-70b-versatile", "llama-3.1-8b-instant"],
                 value="llama-3.3-70b-versatile", label="Select Model"
@@ -118,43 +141,35 @@ with gr.Blocks() as demo:
                 elem_id="system-prompt-container"
             )
 
-            # Updated Support Section with LinkedIn & Email
-            # Support Section with LinkedIn, Email, and WhatsApp
+            # Support Section
             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" style="text-decoration: none;">
-                        <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" style="text-decoration: none;">
-                        <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" title="Email: hk4960498@gmail.com" style="text-decoration: none; cursor: pointer;">
-                        <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>
-
+                    <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 Logic
+    # --- UI Event Flow ---
+    
+    # Sidebar Toggle
     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])
 
-    # --- UI Event Flow ---
+    # Dark Mode Click
+    dark_btn.click(
+        toggle_dark_mode, 
+        inputs=[dark_state], 
+        outputs=[dark_btn, dark_state],
+        js=toggle_dark_js
+    )
+
     def user_turn(msg, hist):
         if not msg: return "", hist
         hist.append({"role": "user", "content": msg})
@@ -178,4 +193,4 @@ with gr.Blocks() as demo:
 
 # Final Launch
 if __name__ == "__main__":
-    demo.launch(css=custom_css)
+    demo.launch()