Upload app.py

app.py

@@ -406,6 +406,8 @@ if "attached_file_name" not in st.session_state:
     st.session_state.attached_file_name = None
 if "attached_file_mime" not in st.session_state:
     st.session_state.attached_file_mime = None
+if "show_uploader" not in st.session_state:
+    st.session_state.show_uploader = False
 
 # ════════════════════════════════════════════════════════════════════
 # SUPABASE — Persistent chat history
@@ -2858,156 +2860,74 @@ for i, msg in enumerate(st.session_state.messages):
                 st.code(msg["content"], language=None)
 
 # ════════════════════════════════════════════════════════════════════
-# FILE ATTACH — ChatGPT-style: 📎 button right next to the send bar
-# The file uploader is hidden in the DOM; JS click triggers it.
+# FILE ATTACH — FIXED: real Streamlit button toggle (no JS tricks)
+# Works reliably on HuggingFace Spaces — no iframe/JS issues
 # ════════════════════════════════════════════════════════════════════
 
-# ── Hidden uploader — rendered but invisible, triggered by JS ────
-main_uploader = st.file_uploader(
-    "main_attach",
-    type=["jpg", "jpeg", "png", "webp", "pdf"],
-    label_visibility="collapsed",
-    key="main_uploader"
-)
-if main_uploader:
-    _fkey = f"{main_uploader.size}_{main_uploader.type}"
-    if _fkey != st.session_state.get("last_uploaded_file", ""):
-        st.session_state["last_uploaded_file"] = _fkey
-        st.session_state.pending_file_bytes = main_uploader.read()
-        st.session_state.pending_file_name  = main_uploader.name
-        st.session_state.pending_file_mime  = main_uploader.type or "application/octet-stream"
-        st.rerun()
-
-# ── Status values ─────────────────────────────────────────────────
-_pending = st.session_state.pending_file_bytes is not None
-_memfile = st.session_state.attached_file_name
+_pending  = st.session_state.pending_file_bytes is not None
+_memfile  = st.session_state.attached_file_name
 
+# ── Status bar ───────────────────────────────────────────────────────
 if _pending:
-    _fname   = st.session_state.pending_file_name
-    _status  = f"✅ <b>{_fname}</b> — ready · type your question and press Enter"
-    _bcolor  = "#0d2318"
-    _bborder = "#22c55e"
-    _tcolor  = "#86efac"
-elif _memfile:
-    _status  = f"📎 <b>{_memfile}</b> in memory — ask a follow-up or click 📎 to attach new"
-    _bcolor  = "#0d1a2e"
-    _bborder = "#3b82f6"
-    _tcolor  = "#93c5fd"
-else:
-    _status  = "Click <b>📎</b> below to attach an image or PDF"
-    _bcolor  = "#111827"
-    _bborder = "#2d3748"
-    _tcolor  = "#6b7280"
-
-# ── Fixed bar: [📎 button] [status text] [✕ if file exists] ──────
-st.markdown(
-    f"""
-    <style>
-    /* Hide the Streamlit file-uploader widget — triggered via JS */
-    [data-testid="stFileUploader"] {{
-        visibility: hidden !important;
-        height: 0 !important;
-        min-height: 0 !important;
-        overflow: hidden !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        position: absolute !important;
-        pointer-events: none !important;
-    }}
-    /* Keep the actual <input type=file> reachable by JS */
-    [data-testid="stFileUploaderDropzoneInput"] {{
-        visibility: visible !important;
-        pointer-events: auto !important;
-    }}
-    /* Hide the Streamlit ✕ clear-buttons below — they're fired by JS */
-    div[data-testid="stHorizontalBlock"]:has(button[kind="secondary"]) {{
-        visibility: hidden !important;
-        height: 0 !important;
-        overflow: hidden !important;
-        margin: 0 !important;
-        padding: 0 !important;
-        position: absolute !important;
-    }}
-    </style>
-
-    <script>
-    function saadAttach() {{
-        var inp = document.querySelector('[data-testid="stFileUploaderDropzoneInput"]');
-        if (inp) {{ inp.click(); }}
-    }}
-    function saadClearFile() {{
-        /* Find and click the Streamlit ✕ button by its text content */
-        var btns = document.querySelectorAll('button');
-        for (var b of btns) {{
-            if (b.innerText.trim() === '✕') {{ b.click(); break; }}
-        }}
-    }}
-    </script>
-
-    <!-- Fixed attach bar just above the chat input -->
-    <div style="
-        position: fixed;
-        bottom: 68px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 720px;
-        max-width: 88vw;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        z-index: 9999;
-    ">
-        <!-- 📎 Paperclip button — triggers hidden file input -->
-        <button onclick="saadAttach()" title="Attach image or PDF"
-            style="flex-shrink:0; width:40px; height:36px;
-                   background:#1e293b; border:1.5px solid #334155;
-                   border-radius:9px; cursor:pointer; font-size:17px;
-                   color:#9ca3af; line-height:1; transition:all .15s;"
-            onmouseover="this.style.background='#334155';this.style.borderColor='#60a5fa';this.style.color='#93c5fd';"
-            onmouseout="this.style.background='#1e293b';this.style.borderColor='#334155';this.style.color='#9ca3af';">
-            📎
-        </button>
-        <!-- Status pill -->
-        <div style="flex:1; background:{_bcolor}; border:1px solid {_bborder};
-                    border-radius:9px; padding:6px 14px; font-size:0.79rem;
-                    color:{_tcolor}; white-space:nowrap; overflow:hidden;
-                    text-overflow:ellipsis;">
-            {_status}
-        </div>
-        {"""<!-- ✕ clear button -->
-        <button onclick="saadClearFile()" title="Remove file"
-            style="flex-shrink:0; width:30px; height:30px;
-                   background:transparent; border:1px solid #4b5563;
-                   border-radius:7px; cursor:pointer; font-size:13px;
-                   color:#9ca3af; line-height:1; transition:all .15s;"
-            onmouseover="this.style.borderColor='#f87171';this.style.color='#f87171';"
-            onmouseout="this.style.borderColor='#4b5563';this.style.color='#9ca3af';">
-            ✕
-        </button>""" if (_pending or _memfile) else ""}
-    </div>
-    """,
-    unsafe_allow_html=True
-)
-
-# ── Real Streamlit clear-buttons (hidden by CSS, fired by JS above) ─
-if _pending:
-    col_sp, col_rm = st.columns([11, 1])
-    with col_rm:
-        if st.button("✕", key="remove_pending", help="Remove file"):
+    col_s, col_x = st.columns([9, 1])
+    with col_s:
+        st.markdown(
+            f'<div style="background:#0d2318;border:1px solid #22c55e;border-radius:10px;'
+            f'padding:0.5rem 0.9rem;font-size:0.8rem;color:#86efac;margin-bottom:0.3rem;">'
+            f'✅ <b>{st.session_state.pending_file_name}</b> — ready · type your question and press Enter</div>',
+            unsafe_allow_html=True
+        )
+    with col_x:
+        if st.button("✕", key="rm_pending", help="Remove file"):
             st.session_state.pending_file_bytes = None
             st.session_state.pending_file_name  = None
             st.session_state.pending_file_mime  = None
             st.session_state["last_uploaded_file"] = ""
+            st.session_state.show_uploader = False
             st.rerun()
+
 elif _memfile:
-    col_sp, col_rm = st.columns([11, 1])
-    with col_rm:
-        if st.button("✕", key="clear_memory_file", help="Clear file memory"):
+    col_s, col_x = st.columns([9, 1])
+    with col_s:
+        st.markdown(
+            f'<div style="background:#0d1a2e;border:1px solid #3b82f6;border-radius:10px;'
+            f'padding:0.5rem 0.9rem;font-size:0.8rem;color:#93c5fd;margin-bottom:0.3rem;">'
+            f'📎 <b>{_memfile}</b> in memory — ask a follow-up or click 📎 to attach new</div>',
+            unsafe_allow_html=True
+        )
+    with col_x:
+        if st.button("✕", key="rm_attached", help="Clear file memory"):
             st.session_state.attached_file_bytes = None
             st.session_state.attached_file_name  = None
             st.session_state.attached_file_mime  = None
             st.rerun()
 
+# ── 📎 Attach toggle button ──────────────────────────────────────────
+attach_col, _ = st.columns([1, 8])
+with attach_col:
+    btn_label = "📎 Attached" if (st.session_state.show_uploader or _pending) else "📎 Attach"
+    if st.button(btn_label, key="toggle_uploader", help="Attach image or PDF"):
+        st.session_state.show_uploader = not st.session_state.show_uploader
+        st.rerun()
+
+# ── Real file uploader — only shown when toggled on ──────────────────
+if st.session_state.show_uploader and not _pending:
+    uploaded = st.file_uploader(
+        "Upload image or PDF",
+        type=["jpg", "jpeg", "png", "webp", "pdf"],
+        label_visibility="collapsed",
+        key="main_uploader"
+    )
+    if uploaded is not None:
+        _fkey = f"{uploaded.size}_{uploaded.type}_{uploaded.name}"
+        if _fkey != st.session_state.get("last_uploaded_file", ""):
+            st.session_state["last_uploaded_file"] = _fkey
+            st.session_state.pending_file_bytes = uploaded.read()
+            st.session_state.pending_file_name  = uploaded.name
+            st.session_state.pending_file_mime  = uploaded.type or "application/octet-stream"
+            st.session_state.show_uploader = False
+            st.rerun()
+
 # ═══════════════���════════════════════════════════════════════════════
 # INPUT — ChatGPT-style input bar
 # ════════════════════════════════════════════════════════════════════