Update app.py

app.py

@@ -15,12 +15,12 @@ HF_HOME = str(HOME / ".cache" / "huggingface")
 HF_HUB_CACHE = str(HOME / ".cache" / "huggingface" / "hub")
 HF_TRANSFORMERS = str(HOME / ".cache" / "huggingface" / "transformers")
 ST_HOME = str(HOME / ".cache" / "sentence-transformers")
-GRADIO_TMP = str(HOME / "app" / "gradio")  # you can switch to "/tmp/gradio" if preferred
+GRADIO_TMP = str(HOME / "app" / "gradio")  # or "/tmp/gradio"
 GRADIO_CACHE = GRADIO_TMP
 
 os.environ.setdefault("HF_HOME", HF_HOME)
 os.environ.setdefault("HF_HUB_CACHE", HF_HUB_CACHE)
-os.environ.setdefault("TRANSFORMERS_CACHE", HF_TRANSFORMERS)  # deprecated warning is harmless
+os.environ.setdefault("TRANSFORMERS_CACHE", HF_TRANSFORMERS)  # warning is fine
 os.environ.setdefault("SENTENCE_TRANSFORMERS_HOME", ST_HOME)
 os.environ.setdefault("GRADIO_TEMP_DIR", GRADIO_TMP)
 os.environ.setdefault("GRADIO_CACHE_DIR", GRADIO_CACHE)
@@ -376,14 +376,21 @@ h1 { color: var(--brand-text); font-weight: 700; font-size: 28px !important; }
 .message.user, .message.bot { background: var(--brand-accent) !important; color: var(--brand-text-light) !important; border-radius: 12px !important; padding: 8px 12px !important; }
 textarea, input, .gr-input { border-radius: 12px !important; }
 
-/* Centered handshake overlay */
+/* Centered handshake overlay INSIDE the chat area */
+#chat-container { position: relative; }  /* anchor for absolute overlay */
+
 #handshake-overlay {
   position: absolute;
+  inset: 8px;                  /* fill the chatbot panel with a small margin */
   z-index: 50;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(13, 148, 136, 0.92);
+  display: grid;
+  place-items: center;
+  pointer-events: none;         /* do not block uploads/inputs below */
+}
+
+#handshake-overlay .panel {
+  pointer-events: auto;         /* clickable if needed */
+  background: rgba(13, 148, 136, 0.96);
   color: #fff;
   padding: 18px 22px;
   border-radius: 14px;
@@ -392,8 +399,12 @@ textarea, input, .gr-input { border-radius: 12px !important; }
   text-align: center;
   box-shadow: 0 10px 24px rgba(0,0,0,0.2);
 }
+
 #handshake-overlay.hidden { display: none; }
-#chat-container { position: relative; }
+
+@media (max-height: 700px) {
+  #handshake-overlay .panel { font-size: 14px; padding: 14px 16px; max-width: 90vw; }
+}
 """
 
 # ---------- UI ----------
@@ -401,9 +412,14 @@ with gr.Blocks(theme=theme, css=custom_css, analytics_enabled=False) as demo:
     gr.Markdown("# ClarityOps Augmented Decision AI")
 
     with gr.Column(elem_id="chat-container"):
-        chat = gr.Chatbot(label="", show_label=False, height=700)
+        chat = gr.Chatbot(label="", show_label=False, height=720)
         handshake = gr.HTML(
-            value='<div id="handshake-overlay">ClarityOps loaded. Paste your scenario and attach files. I’ll ask up to 5 clarifications, then produce the structured analysis</div>'
+            value=(
+                '<div id="handshake-overlay">'
+                '<div class="panel">ClarityOps loaded. Paste your scenario and attach files. '
+                'I’ll ask up to 5 clarifications, then produce the structured analysis</div>'
+                '</div>'
+            )
         )
 
     with gr.Row():
@@ -426,29 +442,33 @@ with gr.Blocks(theme=theme, css=custom_css, analytics_enabled=False) as demo:
     state_uploaded = gr.State(value=[])
     state_awaiting = gr.State(value=False)  # False -> Phase 1 next; True -> awaiting answers for Phase 2
 
-    def _store_uploads(files, current):
+    def _store_uploads_and_hide(files, current):
         paths = []
         for f in (files or []):
             paths.append(getattr(f, "name", None) or f)
-        return (current or []) + paths
+        # Also hide banner when the first action is file upload
+        overlay_hidden = gr.update(value='<div id="handshake-overlay" class="hidden"></div>')
+        return (current or []) + paths, overlay_hidden
 
-    uploads.change(fn=_store_uploads, inputs=[uploads, state_uploaded], outputs=state_uploaded)
+    uploads.change(fn=_store_uploads_and_hide,
+                   inputs=[uploads, state_uploaded],
+                   outputs=[state_uploaded, handshake])
 
     def _on_send(user_msg, history, up_paths, awaiting):
-        hide_overlay_js = gr.update(value='<div id="handshake-overlay" class="hidden"></div>')
+        hide_overlay = gr.update(value='<div id="handshake-overlay" class="hidden"></div>')
         try:
             if not user_msg or not user_msg.strip():
-                return history, "", history, awaiting, hide_overlay_js
+                return history, "", history, awaiting, hide_overlay
             new_history, new_awaiting = clarityops_reply(
                 user_msg.strip(), history or [], None, up_paths or [], awaiting_answers=awaiting
             )
-            return new_history, "", new_history, new_awaiting, hide_overlay_js
+            return new_history, "", new_history, new_awaiting, hide_overlay
         except Exception as e:
             err = f"Error: {e}"
             try: traceback.print_exc()
             except Exception: pass
             new_hist = (history or []) + [(user_msg or "", err)]
-            return new_hist, "", new_hist, awaiting, hide_overlay_js
+            return new_hist, "", new_hist, awaiting, hide_overlay
 
     send.click(_on_send, inputs=[msg, state_history, state_uploaded, state_awaiting],
                outputs=[chat, msg, state_history, state_awaiting, handshake],
@@ -459,7 +479,13 @@ with gr.Blocks(theme=theme, css=custom_css, analytics_enabled=False) as demo:
                concurrency_limit=2, queue=True)
 
     def _on_clear():
-        return [], "", [], False, '<div id="handshake-overlay">ClarityOps loaded. Paste your scenario and attach files. I’ll ask up to 5 clarifications, then produce the structured analysis</div>'
+        # Reset everything, show handshake again
+        return [], "", [], False, (
+            '<div id="handshake-overlay"><div class="panel">'
+            'ClarityOps loaded. Paste your scenario and attach files. '
+            'I’ll ask up to 5 clarifications, then produce the structured analysis'
+            '</div></div>'
+        )
 
     clear.click(_on_clear, None, [chat, msg, state_history, state_awaiting, handshake])
 
@@ -468,3 +494,4 @@ if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", server_port=port, show_api=False, max_threads=8)
 
 
+