Update app.py

app.py

@@ -398,60 +398,143 @@ 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
 
+# app.py
+# ... (all other Python code: imports, helper functions, logic functions remain the same) ...
+
 custom_theme = gr.themes.Base(primary_hue="teal", secondary_hue="purple", neutral_hue="zinc", text_size="sm", spacing_size="md", radius_size="sm", font=["System UI", "sans-serif"])
 custom_css = """
 body { background: linear-gradient(to bottom right, #2c3e50, #34495e); color: #ecf0f1; min-height: 100vh; margin:0; padding:0; font-family: 'System UI', 'sans-serif';}
 .gradio-container { background: transparent !important; max-width: 100% !important; padding: 1rem !important; box-sizing: border-box;}
-.gr-block { /* Applied to Sidebar, Column, Group */ background-color: rgba(44, 62, 80, 0.8) !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-bottom: 1rem;}
-.gr-tabs { background-color: rgba(44, 62, 80, 0.8) !important; border-radius: 8px !important; }
-.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-accordion { background-color: rgba(52, 73, 94, 0.7) !important; border-radius: 6px !important; border: 1px solid rgba(189, 195, 199, 0.15) !important; }
-.gr-textbox, .gr-dropdown, .gr-button, .gr-code, .gr-chat-message, .gr-json, .gr-file input[type="file"] { border: 1px solid rgba(189, 195, 199, 0.3) !important; background-color: rgba(52, 73, 94, 0.9) !important; color: #ecf0f1 !important; border-radius: 6px !important;}
-.gr-file { background-color: rgba(52, 73, 94, 0.9) !important; border-radius: 6px !important; padding: 0.5em;}
+
+/* Styling for gr.Group which replaces gr.Box */
+.gr-group { 
+    background-color: rgba(44, 62, 80, 0.8) !important; /* Matched to your .gr-box style */
+    border: 1px solid rgba(189, 195, 199, 0.2) !important; 
+    border-radius: 8px !important; 
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
+    padding: 1em; /* Add padding inside the group */
+    margin-bottom: 1rem; /* Space below groups */
+}
+
+.gr-panel, .gr-tabs, .gr-accordion { /* .gr-panel might be an older class, but keep if it targets something */
+    background-color: rgba(44, 62, 80, 0.85) !important; 
+    border: 1px solid rgba(189, 195, 199, 0.2) !important; 
+    border-radius: 8px !important; 
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+.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;
+    margin-bottom: 5px !important; /* Added from previous for consistency */
+}
+.gr-accordion { 
+    background-color: rgba(52, 73, 94, 0.7) !important; 
+    border-radius: 6px !important; 
+    border: 1px solid rgba(189, 195, 199, 0.15) !important; 
+}
+
+.gr-textbox, .gr-dropdown, .gr-button, .gr-code, .gr-chat-message, .gr-json, .gr-file input[type="file"] { 
+    border: 1px solid rgba(189, 195, 199, 0.3) !important; 
+    background-color: rgba(52, 73, 94, 0.9) !important; 
+    color: #ecf0f1 !important; 
+    border-radius: 6px !important;
+}
+.gr-file { 
+    background-color: rgba(52, 73, 94, 0.9) !important; 
+    border-radius: 6px !important; padding: 0.5em;
+}
 .gr-file > .label-text { color: #bdc3c7 !important;}
 .gr-textarea textarea, .gr-textbox input { color: #ecf0f1 !important; }
+
 .gr-button.gr-button-primary { background-color: #1abc9c !important; color: white !important; border-color: #16a085 !important; }
 .gr-button.gr-button-secondary { background-color: #9b59b6 !important; color: white !important; border-color: #8e44ad !important; }
 .gr-button.gr-button-stop { background-color: #e74c3c !important; color: white !important; border-color: #c0392b !important; }
+
 .gr-markdown { padding: 5px; /* Reduced padding for markdown within styled boxes */ } 
-.gr-markdown h1, .gr-markdown h2, .gr-markdown h3 { color: #1abc9c !important; border-bottom: 1px solid rgba(189, 195, 199, 0.2) !important; padding-bottom: 0.3em; margin-top:0.5em; margin-bottom: 0.5em; }
+.gr-markdown h1, .gr-markdown h2, .gr-markdown h3 { 
+    color: #1abc9c !important; 
+    border-bottom: 1px solid rgba(189, 195, 199, 0.2) !important; 
+    padding-bottom: 0.3em; 
+    margin-top:0.5em; margin-bottom: 0.5em; 
+}
 .gr-markdown p, .gr-markdown li { color: #ecf0f1 !important; }
-.gr-markdown pre code { background-color: rgba(30, 40, 50, 0.95) !important; border: 1px solid rgba(189, 195, 199, 0.3) !important; color: #ecf0f1; border-radius: 4px; padding: 0.8em; }
-.gr-chatbot { background-color: rgba(44, 62, 80, 0.7) !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; }
-.gr-chatbot .message { background-color: rgba(52, 73, 94, 0.9) !important; color: #ecf0f1 !important; border: 1px solid rgba(189, 195, 199, 0.2) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; }
-.gr-chatbot .message.user { background-color: rgba(46, 204, 113, 0.8) !important; color: #2c3e50 !important; }
-.gr-input-label > .label-text, .gr-dropdown-label > .label-text, .gr-checkbox-label > .label-text { color: #bdc3c7 !important; font-size: 0.9rem !important; }
+.gr-markdown pre code { 
+    background-color: rgba(30, 40, 50, 0.95) !important; 
+    border: 1px solid rgba(189, 195, 199, 0.3) !important; 
+    color: #ecf0f1; 
+    border-radius: 4px; padding: 0.8em; 
+}
+
+.gr-chatbot { 
+    background-color: rgba(44, 62, 80, 0.7) !important; 
+    border: 1px solid rgba(189, 195, 199, 0.2) !important; 
+}
+.gr-chatbot .message { 
+    background-color: rgba(52, 73, 94, 0.9) !important; 
+    color: #ecf0f1 !important; 
+    border: 1px solid rgba(189, 195, 199, 0.2) !important; 
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; 
+}
+.gr-chatbot .message.user { 
+    background-color: rgba(46, 204, 113, 0.8) !important; 
+    color: #2c3e50 !important; 
+}
+
+.gr-input-label > .label-text, .gr-dropdown-label > .label-text, .gr-checkbox-label > .label-text { 
+    color: #bdc3c7 !important; 
+    font-size: 0.9rem !important; 
+}
 .gr-info { color: #bdc3c7 !important; font-size: 0.85rem !important; }
-.status-bar { background-color: rgba(44, 62, 80, 0.8) !important; padding: 8px; border-radius: 6px; margin-bottom: 1rem; }
-.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; margin-right: 2px !important; }
-.tabnav button.selected { background-color: rgba(44, 62, 80, 0.95) !important; color: #1abc9c !important; border-bottom: 2px solid #1abc9c !important;}
+
+.status-bar { /* Used with elem_classes="status-bar" on the gr.Row */
+    background-color: rgba(44, 62, 80, 0.8) !important; 
+    padding: 8px; 
+    border-radius: 6px; 
+    margin-bottom: 1rem; 
+}
+
+.tabnav button { /* Style for tab buttons */
+    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;
+    margin-right: 2px !important; 
+}
+.tabnav button.selected { 
+    background-color: rgba(44, 62, 80, 0.95) !important; 
+    color: #1abc9c !important; 
+    border-bottom: 2px solid #1abc9c !important;
+}
 """
 
-with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent v5.3") as demo:
-    gr.Markdown("# 🤖 AI Research Dashboard") # Main title
+with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent v5.4") as demo:
+    gr.Markdown("# 🚀 AI Research Mega Agent Dashboard")
     
     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"): # Use elem_classes for styling
+    with gr.Row(elem_classes="status-bar"):
         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)
         if MEMORY_STORAGE_BACKEND == "SQLITE":
             with gr.Column(scale=2): gr.Textbox(label="SQLite Path", value=f"{MEMORY_SQLITE_PATH}", interactive=False)
         elif MEMORY_STORAGE_BACKEND == "HF_DATASET":
             with gr.Column(scale=2): gr.Textbox(label="HF Repos", value=f"M: {MEMORY_HF_MEM_REPO}, R: {MEMORY_HF_RULES_REPO}", interactive=False)
-
+    
     with gr.Row(equal_height=False): # Main layout row for sidebar and tabs
         with gr.Column(scale=1, min_width=350): # Sidebar for configuration
             gr.Markdown("## ⚙️ Configuration")
-            with gr.Group():
+            with gr.Group(): # This gr.Group now acts like the old gr.Box
                 gr.Markdown("### API & Model")
                 api_key_tb = gr.Textbox(label="AI Provider API Key (Optional Override)", type="password", placeholder="Paste key here or set env var")
                 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():
+            with gr.Group(): # This gr.Group now acts like the old gr.Box
                 gr.Markdown("### System Prompt")
                 sys_prompt_tb = gr.Textbox(label="System Prompt Base", lines=10, value=DEFAULT_SYSTEM_PROMPT, interactive=True)
 
@@ -472,7 +555,7 @@ with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent
                     gr.Markdown("## Manage Stored Knowledge")
                     with gr.Row(equal_height=False):
                         with gr.Column(scale=1):
-                            with gr.Box():
+                            with gr.Group(): # Replaced gr.Box with gr.Group
                                 gr.Markdown("### 📜 Rules (Learned Insights)")
                                 rules_disp_ta = gr.TextArea(label="View/Edit Rules", lines=15, interactive=True, placeholder="Load or type rules here (one per line or '---' separated for multiple).")
                                 with gr.Row():
@@ -484,14 +567,15 @@ with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent
                                     save_faiss_ram_btn_kb = gr.Button("Save FAISS Indices", visible=(MEMORY_STORAGE_BACKEND == "RAM"))
                         
                         with gr.Column(scale=1):
-                            with gr.Box():
+                            with gr.Group(): # Replaced gr.Box with gr.Group
                                 gr.Markdown("### 📚 Memories (Past Interactions)")
-                                mems_disp_json = gr.JSON(label="View Memories (JSON format)", scale=2) 
+                                mems_disp_json = gr.JSON(label="View Memories (JSON format)") # Removed scale=2, as it's not a standard gr.JSON param
                                 with gr.Row(): view_mems_btn = gr.Button("🔄 Load/Refresh Memories")
                                 upload_mems_fobj = gr.File(label="Upload Memories File (.jsonl)", file_types=[".jsonl"])
                                 mems_stat_tb = gr.Textbox(label="Memories Operation Status", interactive=False, lines=2, placeholder="Status...")
                                 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]
@@ -519,7 +603,7 @@ with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent
     upload_rules_fobj.upload(fn=ui_upload_rules_action_fn, inputs=[upload_rules_fobj], outputs=[rules_stat_tb], show_progress="full").then(fn=ui_view_rules_action_fn, outputs=rules_disp_ta)
     clear_rules_btn.click(fn=lambda: "All rules cleared." if clear_all_rules_data_backend() else "Error clearing rules.", outputs=rules_stat_tb).then(fn=ui_view_rules_action_fn, outputs=rules_disp_ta)
     
-    if MEMORY_STORAGE_BACKEND == "RAM" and 'save_faiss_ram_btn_kb' in locals() and save_faiss_ram_btn_kb is not None : # Check if button was created
+    if MEMORY_STORAGE_BACKEND == "RAM" and 'save_faiss_ram_btn_kb' in locals() and save_faiss_ram_btn_kb is not None : 
         def save_faiss_action_with_feedback_fn_kb(): save_faiss_indices_to_disk(); gr.Info("Attempted to save FAISS indices to disk.")
         save_faiss_ram_btn_kb.click(fn=save_faiss_action_with_feedback_fn_kb, inputs=None, outputs=None)
     
@@ -537,8 +621,9 @@ with gr.Blocks(theme=custom_theme, css=custom_css, title="AI Research Mega Agent
 
     demo.load(fn=app_load_fn, inputs=None, outputs=[agent_stat_tb, rules_disp_ta, mems_disp_json])
 
+
 if __name__ == "__main__":
-    logger.info(f"Starting Gradio AI Research Mega Agent (v5.3 - Styled Dashboard, Memory: {MEMORY_STORAGE_BACKEND})...")
+    logger.info(f"Starting Gradio AI Research Mega Agent (v5.4 - UI Fixes, 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}")