Update app.py

app.py

@@ -6,25 +6,24 @@ from groq import Groq
 api_key = os.environ.get("GROQ_API_KEY")
 client = Groq(api_key=api_key)
 
-# 2. UI Styling for Full-Screen & Sidebar Toggle
+# 2. UI Styling for ChatGPT-like Full-Screen
 custom_css = """
-/* Full-screen container setup */
 .gradio-container { 
     max-width: 100% !important; 
     height: 100vh !important; 
     margin: 0 !important;
     padding: 10px 20px !important;
+    overflow-y: auto !important;
 }
 
-/* Chat window fills remaining height */
 #chatbot-window { 
-     height: 75vh !important; 
+     height: 70vh !important; 
      border-radius: 12px; 
      border: 1px solid #e0e0e0; 
      background: white; 
 }
 
-/* Scrolling fixes for inputs */
+/* One-line scroll for inputs */
 #system-prompt-container textarea, .scroll-input textarea {
     height: 45px !important;
     max-height: 45px !important;
@@ -32,12 +31,12 @@ custom_css = """
     resize: none !important;
 }
 
-/* Sidebar panel styling */
 .sidebar-panel { 
     background-color: #f9f9f9; 
     padding: 15px !important; 
     border-radius: 12px;
-    border-left: 1px solid #ddd;
+    border: 1px solid #ddd;
+    min-width: 300px !important;
 }
 """
 
@@ -65,14 +64,17 @@ def chat_with_groq(message, history, model, temperature, system_prompt):
 
 # 4. Interface Setup
 with gr.Blocks(css=custom_css) as demo:
+    # State to track sidebar visibility
+    sidebar_state = gr.State(False)
+
     with gr.Row():
         gr.Markdown("# 🌿🤖 SageBot")
-        # Toggle Button placed at top right
+        # Settings Toggle Button
         settings_btn = gr.Button("⚙️ Settings", scale=0, min_width=120)
     
     with gr.Row():
-        # Main Interaction Area (Starts full width)
-        with gr.Column(scale=4, elem_id="main-chat-area") as chat_col:
+        # Main Interaction Area
+        with gr.Column(scale=4) as chat_col:
             chatbot = gr.Chatbot(elem_id="chatbot-window") 
             with gr.Row():
                 msg_input = gr.Textbox(
@@ -84,7 +86,7 @@ with gr.Blocks(css=custom_css) as demo:
                 submit_btn = gr.Button("Send", variant="primary", scale=1, min_width=80)
         
         # Sidebar Area (Hidden by default)
-        with gr.Column(scale=1, variant="panel", visible=False, elem_classes="sidebar-panel") as sidebar_col:
+        with gr.Column(scale=1, visible=False, elem_classes="sidebar-panel") as sidebar_col:
             gr.Markdown("### ⚙️ Global Settings")
             model_choice = gr.Dropdown(
                 choices=["llama-3.3-70b-versatile", "llama-3.1-8b-instant"],
@@ -102,17 +104,23 @@ with gr.Blocks(css=custom_css) as demo:
             # LinkedIn Support
             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: 10px;">Connect with the developer</p>
                 <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>
             </div>
             """)
 
-    # --- Sidebar Toggle Logic ---
-    def toggle_sidebar(visible):
-        return gr.update(visible=not visible)
+    # --- FIXED 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_col], [sidebar_col])
+    settings_btn.click(
+        toggle_sidebar, 
+        inputs=[sidebar_state], 
+        outputs=[sidebar_col, sidebar_state]
+    )
 
     # --- UI Event Flow ---
     def user_turn(msg, hist):