Update app.py

app.py

@@ -217,21 +217,29 @@ body {
 """
 
 # Interface Gradio
-def toggle_bar(is_visible):
-    if is_visible:
-        cover_html = """
-            <div style="position: fixed; top: 0; left: 0; right: 0; height: 90px; 
-                background: white; z-index: 41; 
-                border-bottom: 1px solid rgb(243 244 246);
-                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-                background-image: linear-gradient(to top, white, white);">
-            </div>
+# Interface Gradio
+def toggle_visibility(is_hidden):
+    if is_hidden:
+        # CSS para mostrar a barra
+        css = """
+        <style>
+        header.from-gray-50-to-white.relative.z-40.border-b.border-gray-100.bg-gradient-to-t.via-white.pt-0\\.5.dark\\:via-gray-950 {
+            display: flex !important;
+        }
+        </style>
         """
-        btn_text = "Mostrar Barra"
-    else:
-        cover_html = ""
         btn_text = "Ocultar Barra"
-    return cover_html, btn_text, not is_visible
+    else:
+        # CSS para ocultar a barra
+        css = """
+        <style>
+        header.from-gray-50-to-white.relative.z-40.border-b.border-gray-100.bg-gradient-to-t.via-white.pt-0\\.5.dark\\:via-gray-950 {
+            display: none !important;
+        }
+        </style>
+        """
+        btn_text = "Mostrar Barra"
+    return css, btn_text, not is_hidden
 
 def demo():
     custom_css = """
@@ -241,15 +249,11 @@ def demo():
         footer {
             display: none !important;
         }
-        .gradio-container {
-            margin-top: 0 !important;
-        }
-        /* Estilo do botão */
         .cover-button {
             position: fixed !important;
             top: 10px !important;
             right: 10px !important;
-            z-index: 42 !important;
+            z-index: 9999 !important;
             font-size: 14px !important;
             padding: 8px 16px !important;
             background-color: #2563eb !important;
@@ -265,13 +269,20 @@ def demo():
     """
 
     with gr.Blocks(theme=gr.themes.Default(primary_hue="blue", secondary_hue="gray"), css=custom_css) as demo:
-        # Componentes para controle da barra
         with gr.Row():
-            cover_html = gr.HTML("")
+            css_html = gr.HTML("")  # Para injetar o CSS dinamicamente
             toggle_btn = gr.Button("Ocultar Barra", elem_classes="cover-button")
-            is_visible = gr.State(False)
-        
-        # Estados do sistema
+            is_hidden = gr.State(False)
+            
+        # Conectar o evento do botão
+        toggle_btn.click(
+            fn=toggle_visibility,
+            inputs=[is_hidden],
+            outputs=[css_html, toggle_btn, is_hidden],
+            show_progress=False
+        )
+
+        # Estado do sistema
         vector_db = gr.State()
         qa_chain = gr.State()
         collection_name = gr.State()