Update app.py

app.py

@@ -393,8 +393,6 @@ if "supa_loaded" not in st.session_state:
     st.session_state.supa_loaded = False
 if "current_chat_id" not in st.session_state:
     st.session_state.current_chat_id = None
-if "show_uploader" not in st.session_state:
-    st.session_state.show_uploader = False
 if "pending_file_bytes" not in st.session_state:
     st.session_state.pending_file_bytes = None
 if "pending_file_name" not in st.session_state:
@@ -2289,23 +2287,36 @@ def ask_gemini_vision(image_b64: str, mime_type: str, user_note: str) -> str:
             pass  # Conversion failed — fall through to Gemini
 
     prompt = (
-        "You are Saad.AI, a BSc Mathematics assistant built by Saad.\n"
-        "The student has uploaded a file that may contain MULTIPLE math problems.\n\n"
-        "CRITICAL RULES:\n"
-        "- Read the ENTIRE document carefully from top to bottom.\n"
-        "- Extract EVERY question/problem you see — do NOT skip any.\n"
-        "- Do NOT invent or make up questions. ONLY solve what is written in the file.\n"
-        "- If you cannot read part of the text, say so explicitly.\n\n"
-        "FOR EACH PROBLEM FOUND, use this structure:\n"
-        "---\n"
-        "### Question [N]: [restate the exact question from the file]\n"
-        "🔍 **Given:** ...\n"
-        "📌 **Method:** ...\n"
-        "🧮 **Step 1:** ...\n"
-        "✅ **Final Answer:** $$\\boxed{answer}$$\n"
-        "---\n\n"
-        "ALL math must be in LaTeX — never plain text math.\n\n"
-        f"Student's specific instruction: {user_note if user_note else 'Read the full file and solve ALL problems you find.'}"
+        "You are Saad.AI, a helpful AI assistant built by Saad.\n"
+        "You can read and understand ALL types of images and documents.\n\n"
+
+        "STEP 1 — Look at the image carefully from top to bottom.\n"
+        "STEP 2 — Identify what type of content is in the image:\n\n"
+
+        "━━━ CASE A: IMAGE CONTAINS MATH PROBLEMS ━━━\n"
+        "(Equations, exam paper, homework sheet, math diagrams, numbered questions)\n"
+        "→ Read the ENTIRE document. Extract EVERY question — do NOT skip any.\n"
+        "→ Do NOT invent questions. ONLY solve what is actually written.\n"
+        "→ For EACH problem use this structure:\n"
+        "  ---\n"
+        "  ### Question [N]: [restate exact question from file]\n"
+        "  🔍 **Given:** ...\n"
+        "  📌 **Method:** ...\n"
+        "  🧮 **Step 1:** ...\n"
+        "  ✅ **Final Answer:** $$\\boxed{answer}$$\n"
+        "  ---\n"
+        "→ ALL math must be in LaTeX — never plain text math.\n\n"
+
+        "━━━ CASE B: IMAGE IS NOT A MATH PROBLEM ━━━\n"
+        "(Photo, screenshot, diagram, chart, meme, nature, objects, people, text, etc.)\n"
+        "→ Describe the image in detail — what you see, what it shows.\n"
+        "→ Be conversational and helpful like ChatGPT or Claude.\n"
+        "→ Answer the student's specific question about the image.\n"
+        "→ No forced math structure. Just natural, helpful conversation.\n"
+        "→ Point out interesting details, context, or meaning.\n\n"
+
+        f"Student's instruction: {user_note if user_note else 'Look at this image and describe or analyze it.'}\n\n"
+        "Always be helpful, friendly, and clear."
     )
 
     errors = []
@@ -2587,35 +2598,6 @@ with st.sidebar:
 
     st.divider()
 
-    # ── File Attach — always visible in sidebar ───────────────────
-    st.markdown("**📎 Attach File**")
-    st.caption("Image or PDF with math problems")
-    sidebar_file = st.file_uploader(
-        "sidebar_upload",
-        type=["jpg", "jpeg", "png", "webp", "pdf"],
-        label_visibility="collapsed",
-        help="JPG · PNG · WEBP · PDF — max 5 MB",
-        key="sidebar_uploader"
-    )
-    if sidebar_file:
-        file_key = f"{sidebar_file.size}_{sidebar_file.type}"
-        if file_key != st.session_state.get("last_uploaded_file", ""):
-            st.session_state["last_uploaded_file"] = file_key
-            st.session_state.pending_file_bytes = sidebar_file.read()
-            st.session_state.pending_file_name  = sidebar_file.name
-            st.session_state.pending_file_mime  = sidebar_file.type or "application/octet-stream"
-            st.rerun()
-    if st.session_state.pending_file_bytes is not None:
-        st.success(f"✅ **{st.session_state.pending_file_name}**\nType your question in chat ↓")
-        if st.button("✕ Remove file", use_container_width=True, key="sidebar_remove"):
-            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"] = ""  # allow re-uploading the same file
-            st.rerun()
-
-    st.divider()
-
     # ── Chat History ─────────────────────────────────────────────
     if st.session_state.chats:
         st.markdown("**💬 Chat History**")
@@ -2876,30 +2858,93 @@ for i, msg in enumerate(st.session_state.messages):
                 st.code(msg["content"], language=None)
 
 # ════════════════════════════════════════════════════════════════════
-# FILE ATTACH STATUS — fixed bar just above the chat input
-# (uploader lives in the sidebar — always visible, never scrolls away)
+# FILE ATTACH — ChatGPT-style: 📎 button right next to the send bar
+# The file uploader is hidden in the DOM; JS click triggers it.
 # ════════════════════════════════════════════════════════════════════
 
-# ── Always-visible fixed attach bar above the chat input ─────────
-# Shows three states: no file / file pending / file in memory
-_pending_name   = st.session_state.pending_file_bytes is not None
-_memory_name    = st.session_state.attached_file_name
-
-if _pending_name:
-    _bar_color  = "#1a2e1a"
-    _bar_border = "#22c55e"
-    _bar_text   = f"✅ <strong>{st.session_state.pending_file_name}</strong> ready — type your question below and press Enter"
-elif _memory_name:
-    _bar_color  = "#1a1f2e"
-    _bar_border = "#3b82f6"
-    _bar_text   = f"📎 <strong>{_memory_name}</strong> in memory — ask a follow-up or attach a new file via sidebar"
+# ── 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
+
+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:
-    _bar_color  = "#111"
-    _bar_border = "#374151"
-    _bar_text   = "📎 Attach a file: open the <strong>sidebar ←</strong> to upload an image or PDF"
+    _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;
@@ -2907,33 +2952,57 @@ st.markdown(
         transform: translateX(-50%);
         width: 720px;
         max-width: 88vw;
-        background: {_bar_color};
-        border: 1px solid {_bar_border};
-        border-radius: 10px;
-        padding: 7px 16px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
         z-index: 9999;
-        font-size: 0.80rem;
-        color: #d1d5db;
     ">
-        {_bar_text}
+        <!-- 📎 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
 )
 
-# Remove-file buttons (in-page, shown only when file exists)
-if _pending_name:
+# ── 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 pending file"):
+        if st.button("✕", key="remove_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.rerun()
-elif _memory_name:
+elif _memfile:
     col_sp, col_rm = st.columns([11, 1])
     with col_rm:
-        if st.button("✕", key="clear_memory_file", help="Remove file from memory"):
+        if st.button("✕", key="clear_memory_file", 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
@@ -3004,7 +3073,7 @@ if problem and problem != st.session_state.last_submitted:
             st.markdown(f"📎 **{file_name}** — {problem}")
             # Show file preview so user can see what was attached
             if file_mime and file_mime.startswith("image/"):
-                st.image(file_bytes, caption=file_name, use_container_width=True)
+                st.image(file_bytes, caption=file_name, use_column_width=True)
             else:
                 # PDF — try to show first page
                 try:
@@ -3012,7 +3081,7 @@ if problem and problem != st.session_state.last_submitted:
                     doc = fitz.open(stream=file_bytes, filetype="pdf")
                     pix = doc[0].get_pixmap(matrix=fitz.Matrix(1.5, 1.5))
                     doc.close()
-                    st.image(pix.tobytes("png"), caption=f"📄 {file_name} (page 1 preview)", use_container_width=True)
+                    st.image(pix.tobytes("png"), caption=f"📄 {file_name} (page 1 preview)", use_column_width=True)
                 except Exception:
                     st.caption(f"📄 {file_name}")