Update app.py

app.py

@@ -390,23 +390,76 @@ def ui_upload_memories_action_fn(uploaded_file_obj, progress=gr.Progress()):
     msg = f"Memories Upload: Processed {total_to_process}. Added: {added_count}, Format Errors: {format_error_count}, Save Errors: {save_error_count}."
     logger.info(msg); return msg
 
-# --- UI Definition ---
-# Using the CSS inspired by the "AI Code & Space Generator" example
+
 custom_theme = gr.themes.Base(
     primary_hue="teal",
     secondary_hue="purple",
     neutral_hue="zinc",
-    text_size="sm",
-    spacing_size="md",
+    text_size="sm", 
+    spacing_size="md", 
     radius_size="sm",
-    font=["System UI", "sans-serif"]
+    font=[gr.themes.GoogleFont("Inter"), "System UI", "sans-serif"]
 )
 
 custom_css = """
-body { background: linear-gradient(to bottom right, #2c3e50, #34495e); color: #ecf0f1; margin:0; padding:0; font-family: 'System UI', sans-serif; overflow-x: hidden;}
-.gradio-container { background: transparent !important; padding: 0 !important; /* Remove padding from the outermost container */ }
-.main-interface-wrapper { max-width: 100%; padding: 1rem; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column;} /* New wrapper */
-.gr-block.gr-group, .gr-tabs, .gr-accordion { background-color: rgba(44, 62, 80, 0.8) !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; border-radius: 8px !important; padding: 1em; margin-bottom: 1em;}
+body, html { 
+    margin: 0 !important; 
+    padding: 0 !important; 
+    height: 100%; 
+    overflow-x: hidden; /* Prevent horizontal scroll on body */ 
+    background: linear-gradient(to bottom right, #2c3e50, #34495e); 
+    color: #ecf0f1; 
+    font-family: 'Inter', 'System UI', sans-serif;
+}
+
+.gradio-container { 
+    background: transparent !important; 
+    max-width: 100% !important; 
+    padding: 0 !important; /* Container itself has no padding */
+    box-sizing: border-box;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden !important; /* Container does not scroll */
+}
+
+/* NEW: Attempt to override the problematic gap on main layout rows/columns */
+.gradio-container > .main-interface-wrapper > .gr-row.svelte-vt1mxs, /* Target first main Row if it has the svelte class */
+.gradio-container > .main-interface-wrapper > .gr-column.svelte-vt1mxs, /* Target first main Column if it has the svelte class */
+.gradio-container > .main-interface-wrapper > div > .gr-row.svelte-vt1mxs, /* Deeper nesting if Gradio adds a div */
+.gradio-container > .main-interface-wrapper > div > .gr-column.svelte-vt1mxs {
+    gap: 0 !important; /* Override the --layout-gap */
+    padding-top: 0 !important; /* Also ensure no top padding here */
+    margin-top: 0 !important; /* And no top margin */
+}
+/* More general override for any top-level block that might get this svelte class */
+.gradio-container > .main-interface-wrapper > .gap.svelte-vt1mxs:first-child {
+    gap: 0 !important;
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+}
+
+
+.main-interface-wrapper { 
+    width: 100%; /* Ensure wrapper takes full width */
+    padding: 1rem; /* Overall padding for the content inside the wrapper */
+    box-sizing: border-box; 
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto; /* This is the main scrollable area */
+    flex-grow: 1;
+}
+
+.gr-block.gr-group, .gr-tabs, .gr-accordion { 
+    background-color: rgba(44, 62, 80, 0.8) !important; 
+    border: 1px solid rgba(189, 195, 199, 0.2) !important; 
+    border-radius: 8px !important; 
+    padding: 1em; 
+    margin-bottom: 1em;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
+}
+/* ... rest of your existing CSS from the last version ... */
 .gr-tabitem { background-color: rgba(52, 73, 94, 0.75) !important; border-radius: 6px !important; padding: 1em !important; border: 1px solid rgba(189, 195, 199, 0.1) !important;}
 .gr-textbox, .gr-dropdown, .gr-button, .gr-code, .gr-chat-message, .gr-json, .gr-file input[type="file"], .gr-file button { border-color: rgba(189, 195, 199, 0.3) !important; background-color: rgba(52, 73, 94, 0.9) !important; color: #ecf0f1 !important; border-radius: 6px !important;}
 .gr-textarea textarea, .gr-textbox input { color: #ecf0f1 !important; }
@@ -424,36 +477,38 @@ body { background: linear-gradient(to bottom right, #2c3e50, #34495e); color: #e
 .gr-chatbot .message.user { background-color: rgba(46, 204, 113, 0.9) !important; color: black !important; }
 .gr-input-label > .label-text, .gr-dropdown-label > .label-text { color: #bdc3c7 !important; }
 .status-bar { padding: 0.5rem 1rem; border-radius: 6px; margin-bottom: 1rem; background-color: rgba(44, 62, 80, 0.8) !important; }
-.tabnav button { background-color: rgba(52, 73, 94, 0.8) !important; color: #ecf0f1 !important; border-bottom: 2px solid transparent !important;}
+.tabnav button { background-color: rgba(52, 73, 94, 0.8) !important; color: #ecf0f1 !important; border-bottom: 2px solid transparent !important; border-top-left-radius: 6px !important; border-top-right-radius: 6px !important;}
 .tabnav button.selected { background-color: rgba(44, 62, 80, 0.95) !important; color: #1abc9c !important; border-bottom: 2px solid #1abc9c !important;}
-.app-title-area { padding: 0.5rem 0; text-align: center;} /* Area for title and subtitle */
+.app-title-area { padding: 0.5rem 0 0 0; text-align: center; margin-bottom: 0.5rem;} 
+#app-title { margin-bottom: 0.1rem !important; color: #ecf0f1 !important; font-size: 1.8rem !important;}
+#app-subtitle { color: #bdc3c7; font-size: 0.9rem; margin-bottom: 1rem !important; }
+.sidebar-column { /* No max-height, let it take natural height or be constrained by row */ overflow-y: visible; /* Let main wrapper scroll */ padding-right: 1em; }
+.main-content-column { /* No max-height, let it take natural height or be constrained by row */ overflow-y: visible; }
 """
 
-with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Agent v5.8") as demo:
-    # Removed gr.HTML("<style>" + custom_css + "</style>") as css is passed to gr.Blocks
-
-    with gr.Column(elem_classes="main-interface-wrapper"): # New overall wrapper for content
-        with gr.Row(elem_classes="app-title-area"):
-            gr.Markdown("# 🤖 AI Research Agent") 
-            # Removed subtitle from here, can be added in description of Space if hosted on HF
+with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Agent v5.9") as demo:
+    with gr.Column(elem_classes="main-interface-wrapper"): # This is the main scrollable wrapper
+        with gr.Column(elem_classes="app-title-area"): # Contains title and subtitle
+            gr.Markdown("# 🤖 AI Research Agent", elem_id="app-title")
+            gr.Markdown("Configure AI, chat for research, and manage its knowledge base.", elem_id="app-subtitle")
 
         avail_provs = get_available_providers()
         def_prov = avail_provs[0] if avail_provs else None
         def_models = get_model_display_names_for_provider(def_prov) if def_prov else []
         def_model_disp = get_default_model_display_name_for_provider(def_prov) if def_prov else None
         
-        with gr.Row(elem_classes="status-bar"):
+        with gr.Row(elem_classes="status-bar"): # Status bar below titles
             with gr.Column(scale=3): agent_stat_tb = gr.Textbox(label="Agent Status", interactive=False, lines=1, value="Initializing systems...")
             with gr.Column(scale=1): memory_backend_info_tb = gr.Textbox(label="Memory Backend", value=f"{MEMORY_STORAGE_BACKEND}", interactive=False)
-            sqlite_path_display = gr.Textbox(label="SQLite Path", value=f"{MEMORY_SQLITE_PATH}", interactive=False, visible=(MEMORY_STORAGE_BACKEND == "SQLITE"), scale=2) # Use visible
-            hf_repos_display = gr.Textbox(label="HF Repos", value=f"M: {MEMORY_HF_MEM_REPO}, R: {MEMORY_HF_RULES_REPO}", interactive=False, visible=(MEMORY_STORAGE_BACKEND == "HF_DATASET"), scale=2) # Use visible
+            sqlite_path_display = gr.Textbox(label="SQLite Path", value=f"{MEMORY_SQLITE_PATH}", interactive=False, visible=(MEMORY_STORAGE_BACKEND == "SQLITE"), scale=2)
+            hf_repos_display = gr.Textbox(label="HF Repos", value=f"M: {MEMORY_HF_MEM_REPO}, R: {MEMORY_HF_RULES_REPO}", interactive=False, visible=(MEMORY_STORAGE_BACKEND == "HF_DATASET"), scale=2)
 
-        with gr.Row(equal_height=False): 
-            with gr.Sidebar(): # Using Gradio's explicit Sidebar component
+        with gr.Row(equal_height=False): # Main layout: Sidebar + Content
+            with gr.Column(scale=1, min_width=360, elem_classes="sidebar-column"): # Explicit Sidebar Column
                 gr.Markdown("## ⚙️ Configuration")
                 with gr.Group():
                     gr.Markdown("### AI Model Settings")
-                    api_key_tb = gr.Textbox(label="AI Provider API Key (Override)", type="password", placeholder="Uses .env if blank")
+                    api_key_tb = gr.Textbox(label="AI Provider API Key (Optional Override)", type="password", placeholder="Paste key or use .env")
                     prov_sel_dd = gr.Dropdown(label="AI Provider", choices=avail_provs, value=def_prov, interactive=True)
                     model_sel_dd = gr.Dropdown(label="AI Model", choices=def_models, value=def_model_disp, interactive=True)
                 with gr.Group():
@@ -462,39 +517,40 @@ with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Agent v5.8
                 if MEMORY_STORAGE_BACKEND == "RAM":
                     save_faiss_sidebar_btn = gr.Button("Save FAISS Indices", variant="secondary")
 
-            with gr.Column(scale=3): # Main content area to the right of sidebar
+            with gr.Column(scale=2, elem_classes="main-content-column"): # Main Content Area
                 with gr.Tabs():
                     with gr.TabItem("💬 AI Chat & Research Output"):
-                        gr.Markdown("### AI Chat Interface") # Using H3 for section titles within tabs
+                        gr.Markdown("### AI Chat Interface")
                         main_chat_disp = gr.Chatbot(label="AI Research Chat", height=500, bubble_full_width=False, avatar_images=(None, "https://raw.githubusercontent.com/huggingface/brand-assets/main/hf-logo-with-title.png"), show_copy_button=True, render_markdown=True, sanitize_html=True)
                         with gr.Row():
                             user_msg_tb = gr.Textbox(show_label=False, placeholder="Ask your research question...", scale=7, lines=1, max_lines=5, autofocus=True)
                             send_btn = gr.Button("Send", variant="primary", scale=1, min_width=100)
-                        with gr.Accordion("📝 Full Response / Details", open=False):
+                        with gr.Accordion("📝 Full Response / Details", open=True):
                             fmt_report_tb = gr.Textbox(label="Full AI Response", lines=10, interactive=True, show_copy_button=True)
                             dl_report_btn = gr.DownloadButton("Download Report", interactive=False, visible=False) 
                         detect_out_md = gr.Markdown()
 
                     with gr.TabItem("🧠 Knowledge Base Management"):
-                        gr.Markdown("### Manage Stored Knowledge")
+                        gr.Markdown("## Manage Stored Knowledge") # Use H2 for tab sections
                         with gr.Row():
                             with gr.Column():
                                 with gr.Group():
-                                    gr.Markdown("#### 📜 Rules (Insights)")
+                                    gr.Markdown("### 📜 Rules (Insights)") # Use H3 for subsections
                                     rules_disp_ta = gr.TextArea(label="View/Edit Rules", lines=15, interactive=True, placeholder="Load rules or type new ones...")
                                     with gr.Row(): view_rules_btn = gr.Button("🔄 Load"); save_edited_rules_btn = gr.Button("💾 Save Edits", variant="primary")
-                                    upload_rules_fobj = gr.File(label="Upload Rules File", file_types=[".txt", ".jsonl"])
+                                    upload_rules_fobj = gr.File(label="Upload Rules File (.txt/.jsonl)", file_types=[".txt", ".jsonl"])
                                     rules_stat_tb = gr.Textbox(label="Rules Status", interactive=False, lines=2)
                                     clear_rules_btn = gr.Button("⚠️ Clear All Rules", variant="stop")
                             with gr.Column():
                                 with gr.Group():
-                                    gr.Markdown("#### 📚 Memories")
+                                    gr.Markdown("### 📚 Memories")
                                     mems_disp_json = gr.JSON(label="View Memories") 
                                     view_mems_btn = gr.Button("🔄 Load Memories")
-                                    upload_mems_fobj = gr.File(label="Upload Memories File", file_types=[".jsonl"])
+                                    upload_mems_fobj = gr.File(label="Upload Memories File (.jsonl)", file_types=[".jsonl"])
                                     mems_stat_tb = gr.Textbox(label="Memories Status", interactive=False, lines=2)
                                     clear_mems_btn = gr.Button("⚠️ Clear All Memories", variant="stop")
-        
+    
+    # --- Event Handlers (remain the same as your last correct version) ---
     def dyn_upd_model_dd(sel_prov_dyn:str): models_dyn, def_model_dyn = get_model_display_names_for_provider(sel_prov_dyn), get_default_model_display_name_for_provider(sel_prov_dyn); return gr.Dropdown(choices=models_dyn, value=def_model_dyn, interactive=True)
     prov_sel_dd.change(fn=dyn_upd_model_dd, inputs=prov_sel_dd, outputs=model_sel_dd)
     chat_ins = [user_msg_tb, main_chat_disp, prov_sel_dd, model_sel_dd, api_key_tb, sys_prompt_tb]
@@ -531,15 +587,13 @@ with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Agent v5.8
         backend_status = f"AI Systems Initialized. Ready."
         rules_on_load = ui_view_rules_action_fn()
         mems_on_load = ui_view_memories_action_fn()
-        # Initial visibility for conditional Textboxes based on backend
         vis_sqlite = MEMORY_STORAGE_BACKEND == "SQLITE"
         vis_hf = MEMORY_STORAGE_BACKEND == "HF_DATASET"
         return backend_status, rules_on_load, mems_on_load, gr.update(visible=vis_sqlite), gr.update(visible=vis_hf)
-
     demo.load(fn=app_load_fn, inputs=None, outputs=[agent_stat_tb, rules_disp_ta, mems_disp_json, sqlite_path_display, hf_repos_display])
 
 if __name__ == "__main__":
-    logger.info(f"Starting Gradio AI Research Mega Agent (v5.8 - UI Style/Layout Update, Memory: {MEMORY_STORAGE_BACKEND})...")
+    logger.info(f"Starting Gradio AI Research Mega Agent (v5.9 - UI Layout/Scroll Fix, Memory: {MEMORY_STORAGE_BACKEND})...")
     app_port, app_server = int(os.getenv("GRADIO_PORT", 7860)), os.getenv("GRADIO_SERVER_NAME", "127.0.0.1")
     app_debug, app_share = os.getenv("GRADIO_DEBUG", "False").lower()=="true", os.getenv("GRADIO_SHARE", "False").lower()=="true"
     logger.info(f"Launching Gradio server: http://{app_server}:{app_port}. Debug: {app_debug}, Share: {app_share}")