Update app.py

app.py

@@ -142,19 +142,23 @@ HTML_TEMPLATE = """
         }
         * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
         
-        body, html, .msg, .user-content, .ai-content, code, pre { 
-            margin: 0; padding: 0; height: 100%; width: 100%; 
+        body, html { 
+            margin: 0; padding: 0; height: 100dvh; width: 100%; 
             background: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; 
             overflow: hidden; 
             font-size: 17px;
-            -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
+            -webkit-user-select: none; user-select: none;
         }
 
-        textarea, input {
-            -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important;
+        textarea, input, .user-content, .ai-content, code {
+            -webkit-user-select: text !important; user-select: text !important;
         }
 
-        #app-container { display: flex; flex-direction: column; height: 100dvh; position: relative; }
+        #app-container { 
+            display: flex; flex-direction: column; 
+            height: 100dvh; /* Critical Fix for Full Screen */
+            position: relative; 
+        }
 
         header {
             height: 70px; padding: 0 20px; 
@@ -189,7 +193,6 @@ HTML_TEMPLATE = """
         
         .history-label { color: var(--dim); font-size: 13px; font-weight: 600; margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }
         
-        /* --- UPDATED HISTORY STYLES --- */
         #history-list { 
             flex: 1; overflow-y: auto; padding: 10px 0;
         }
@@ -201,7 +204,6 @@ HTML_TEMPLATE = """
         }
         .history-item:last-child { margin-bottom: 0; }
         .history-item:active { background: #222; color: #fff; border-color: #444; }
-        /* --------------------------- */
 
         .h-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
         .h-actions { display: none; gap: 15px; }
@@ -212,22 +214,53 @@ HTML_TEMPLATE = """
         .brand-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12px; color: var(--dim); letter-spacing: 2px; margin-bottom: 10px; opacity: 0.6; }
         .logout-btn { color: #ef4444; cursor: pointer; font-size: 15px; font-weight: 600; padding: 10px; }
 
+        /* --- CHAT BOX FIXES --- */
         #chat-box {
-            flex: 1; overflow-y: auto; padding: 20px 5%; 
-            display: flex; flex-direction: column; gap: 30px;
-            -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
+            flex: 1; 
+            overflow-y: auto; 
+            padding: 20px 5%;
+            padding-bottom: 120px; /* EXTRA SPACE FOR SCROLLING */
+            display: flex; 
+            flex-direction: column; 
+            gap: 25px;
+            -webkit-overflow-scrolling: touch; 
+            overscroll-behavior-y: contain;
+            min-height: 0; /* Important for Flexbox scrolling */
         }
         
-        .msg { width: 100%; line-height: 1.7; font-size: 17px; opacity: 0; animation: fadeInstant 0.3s forwards; }
+        .msg { 
+            width: 100%; 
+            line-height: 1.7; 
+            font-size: 17px; 
+            opacity: 0; 
+            animation: fadeInstant 0.3s forwards;
+            /* REMOVED height: 100% to fix big box issue */
+            display: flex;
+            flex-direction: column;
+        }
         @keyframes fadeInstant { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
-        .user-msg { text-align: right; }
-        /* --- UPDATED USER MESSAGE STYLE --- */
-        .user-content { display: inline-block; background: var(--user-msg); padding: 10px 16px; border-radius: 18px 18px 4px 18px; text-align: left; max-width: 80%; color: #fff; }
-        /* ---------------------------------- */
+        .user-msg { align-items: flex-end; }
+        
+        /* --- FIXED USER CONTENT BOX SIZE --- */
+        .user-content { 
+            display: inline-block; 
+            width: fit-content; /* THIS FIXES THE HUGE BOX */
+            max-width: 85%;
+            background: var(--user-msg); 
+            padding: 10px 16px; 
+            border-radius: 18px 18px 4px 18px; 
+            text-align: left; 
+            color: #fff; 
+            word-wrap: break-word;
+        }
         
-        .ai-msg { text-align: left; }
-        .ai-content { color: #d4d4d8; }
+        .ai-msg { align-items: flex-start; }
+        .ai-content { 
+            width: 100%;
+            color: #d4d4d8; 
+            word-wrap: break-word;
+        }
         .ai-content strong { color: #fff; font-weight: 700; }
         .ai-content h1, .ai-content h2 { margin-top: 20px; color: #fff; font-weight: 700; }
 
@@ -376,7 +409,10 @@ HTML_TEMPLATE = """
 
         function scrollToBottom() {
             const box = document.getElementById('chat-box');
-            box.scrollTo({ top: box.scrollHeight, behavior: 'smooth' });
+            // Timeout ensures scroll happens AFTER content renders
+            setTimeout(() => {
+                box.scrollTo({ top: box.scrollHeight, behavior: 'smooth' });
+            }, 100);
         }
 
         async function send() {
@@ -505,7 +541,10 @@ HTML_TEMPLATE = """
                  window.mermaid.init(undefined, element.querySelectorAll('.mermaid'));
             }
             element.style.opacity = 0; element.style.transition = 'opacity 0.4s';
-            setTimeout(() => element.style.opacity = 1, 50);
+            setTimeout(() => {
+                element.style.opacity = 1;
+                scrollToBottom(); // Scroll fix after render
+            }, 50);
         }
 
         function toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); }
@@ -536,6 +575,10 @@ HTML_TEMPLATE = """
             box.scrollTop = box.scrollHeight;
         }
 
+        // --- MANIFEST FOR APP LOGO (Remember to replace link) ---
+        // Neenga upload panna logo link inga varanum
+        // Example: "src": "https://huggingface.co/..."
+
         checkLogin();
     </script>
 </body>
@@ -605,7 +648,6 @@ def chat():
     save_db(user_db)
     return jsonify({"response": reply, "new_title": new_title})
 
-# --- MANIFEST FOR APP LOGO ---
 @app.route('/manifest.json')
 def manifest():
     data = {
@@ -618,12 +660,12 @@ def manifest():
         "theme_color": "#09090b",
         "icons": [
             {
-                "src": "https://huggingface.co/spaces/Shirpi/Student-s_AI/resolve/main/1000177401.png", 
+                "src": "https://cdn-icons-png.flaticon.com/512/4712/4712035.png", 
                 "sizes": "192x192",
                 "type": "image/png"
             },
             {
-                "src": "https://huggingface.co/spaces/Shirpi/Student-s_AI/resolve/main/1000177401.png",
+                "src": "https://cdn-icons-png.flaticon.com/512/4712/4712035.png",
                 "sizes": "512x512",
                 "type": "image/png"
             }
@@ -633,3 +675,4 @@ def manifest():
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)
+