Update app.py

app.py

@@ -142,22 +142,38 @@ HTML_TEMPLATE = """
         }
         * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
         
+        /* --- FIX 4: PREVENT HORIZONTAL SCROLL --- */
         body, html { 
-            margin: 0; padding: 0; height: 100dvh; width: 100%; 
+            margin: 0; padding: 0; height: 100dvh; width: 100%; max-width: 100%;
             background: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; 
-            overflow: hidden; 
+            overflow: hidden; /* Locks the page */
             font-size: 17px;
-            -webkit-user-select: none; user-select: none;
+            
+            /* --- FIX 2: DISABLE SELECT GLOBALLY --- */
+            -webkit-user-select: none; 
+            -moz-user-select: none; 
+            -ms-user-select: none; 
+            user-select: none;
+        }
+
+        /* Allow typing in inputs only */
+        textarea, input {
+            -webkit-user-select: text !important; 
+            user-select: text !important;
         }
 
-        textarea, input, .user-content, .ai-content, code {
-            -webkit-user-select: text !important; user-select: text !important;
+        /* Make sure content is NOT selectable via long press */
+        .user-content, .ai-content, code, pre, p, h1, h2, span, div {
+            -webkit-user-select: none !important;
+            user-select: none !important;
         }
 
         #app-container { 
             display: flex; flex-direction: column; 
             height: 100dvh; 
+            width: 100%;
             position: relative; 
+            overflow-x: hidden; /* Extra safety */
         }
 
         header {
@@ -260,12 +276,16 @@ HTML_TEMPLATE = """
         }
         .ai-content strong { color: #fff; font-weight: 700; }
         .ai-content h1, .ai-content h2 { margin-top: 20px; color: #fff; font-weight: 700; }
+        
+        /* FIX 3: STYLE FOR IMAGES TO BE CLICKABLE */
+        .ai-content img, .user-content img { cursor: pointer; transition: 0.2s; }
+        .ai-content img:active, .user-content img:active { transform: scale(0.98); }
 
-        pre { background: #1e1e1e !important; border-radius: 12px; padding: 15px; overflow-x: auto; margin: 15px 0; border: 1px solid #333; }
+        pre { background: #1e1e1e !important; border-radius: 12px; padding: 15px; overflow-x: auto; margin: 15px 0; border: 1px solid #333; max-width: 100%; }
         code { font-family: 'JetBrains Mono', monospace; font-size: 14px; }
         
-        .mjx-chtml { background: #18181b; padding: 10px; border-radius: 8px; border: 1px solid #333; overflow-x: auto; margin: 10px 0; text-align: center; }
-        .mermaid { background: #111; padding: 15px; border-radius: 10px; text-align: center; margin: 15px 0; }
+        .mjx-chtml { background: #18181b; padding: 10px; border-radius: 8px; border: 1px solid #333; overflow-x: auto; margin: 10px 0; text-align: center; max-width: 100%; }
+        .mermaid { background: #111; padding: 15px; border-radius: 10px; text-align: center; margin: 15px 0; overflow-x: auto; }
 
         .msg-actions { margin-top: 10px; opacity: 0; transition: opacity 0.2s; display: flex; gap: 20px; align-items: center; }
         .user-msg .msg-actions { justify-content: flex-end; }
@@ -293,6 +313,19 @@ HTML_TEMPLATE = """
 
         #login-overlay { position: fixed; inset: 0; background: #000; z-index: 2000; display: flex; align-items: center; justify-content: center; }
         .login-box { width: 90%; max-width: 350px; text-align: center; padding: 40px; border: 1px solid var(--border); border-radius: 20px; background: #0a0a0a; }
+
+        /* --- FIX 3: LIGHTBOX (IMAGE PREVIEW) CSS --- */
+        #image-modal {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.9); z-index: 3000;
+            display: none; align-items: center; justify-content: center;
+            opacity: 0; transition: opacity 0.3s;
+        }
+        #image-modal img {
+            max-width: 95%; max-height: 90%; border-radius: 8px;
+            box-shadow: 0 0 20px rgba(0,0,0,0.8);
+        }
+        #image-modal.active { opacity: 1; }
     </style>
 </head>
 <body>
@@ -305,6 +338,10 @@ HTML_TEMPLATE = """
         </div>
     </div>
 
+    <div id="image-modal" onclick="closeImagePreview()">
+        <img id="modal-img" src="" alt="Preview">
+    </div>
+
     <div id="sidebar">
         <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
             <div class="user-info"><span id="display-name">User</span></div>
@@ -353,8 +390,13 @@ HTML_TEMPLATE = """
         let currentChatId = null;
         let currentAttachment = { type: null, data: null, name: null };
         let longPressTimer;
+        
+        // --- HELPER FOR INTRO TEXT ---
+        function getIntroHtml(name) {
+            return `<div class="msg ai-msg"><div class="ai-content"><h1>Hi ${name},</h1><p>Ready to master your studies today?</p></div></div>`;
+        }
 
-        // --- AUTH LOGIC (FIXED) ---
+        // --- AUTH LOGIC ---
         function checkLogin() {
             const stored = localStorage.getItem("student_ai_user");
             if (stored) { currentUser = stored; showApp(); }
@@ -380,8 +422,8 @@ HTML_TEMPLATE = """
             if(!currentChatId) {
                 const box = document.getElementById("chat-box");
                 if(box.innerHTML === "") {
-                    // --- INTRO TEXT ---
-                    box.innerHTML = `<div class="msg ai-msg"><div class="ai-content"><h1>Hi ${currentUser},</h1><p>Ready to master your studies today?</p></div></div>`;
+                    // FIX 1: USE FUNCTION FOR CONSISTENT INTRO
+                    box.innerHTML = getIntroHtml(currentUser);
                 }
             }
         }
@@ -498,6 +540,23 @@ HTML_TEMPLATE = """
         }
         function editMessage(oldText) { document.getElementById('input').value = oldText; document.getElementById('input').focus(); }
         function regenerate(text) { document.getElementById('input').value = text; send(); }
+        
+        // --- FIX 3: LIGHTBOX LOGIC ---
+        // Open Image Logic
+        document.getElementById('chat-box').addEventListener('click', function(e) {
+            if(e.target.tagName === 'IMG') {
+                const modal = document.getElementById('image-modal');
+                const modalImg = document.getElementById('modal-img');
+                modalImg.src = e.target.src;
+                modal.style.display = 'flex';
+                setTimeout(() => modal.classList.add('active'), 10);
+            }
+        });
+        function closeImagePreview() {
+            const modal = document.getElementById('image-modal');
+            modal.classList.remove('active');
+            setTimeout(() => modal.style.display = 'none', 300);
+        }
 
         // --- HISTORY LOGIC ---
         function handleHistoryTouchStart(e, cid, title) {
@@ -555,11 +614,13 @@ HTML_TEMPLATE = """
 
         function toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); }
         async function newChat() {
-            currentChatId = null; document.getElementById('chat-box').innerHTML = "";
+            currentChatId = null; 
+            // FIX 1: SET INTRO TEXT FOR EVERY NEW CHAT
+            document.getElementById('chat-box').innerHTML = getIntroHtml(currentUser);
+            
             const r = await fetch('/new_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser})});
             const d = await r.json(); currentChatId = d.chat_id; loadHistory();
             document.getElementById('sidebar').classList.remove('open');
-            showApp();
         }
         async function loadChat(cid) {
             currentChatId = cid; const res = await fetch('/get_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser, chat_id:cid})});