Update app.py

app.py

@@ -2,7 +2,6 @@ import os
 import uuid
 import time
 import json
-import markdown
 from flask import Flask, request, jsonify, render_template_string
 import google.generativeai as genai
 
@@ -12,11 +11,6 @@ import google.generativeai as genai
 keys_string = os.environ.get("API_KEYS", "")
 API_KEYS = [k.strip() for k in keys_string.replace(',', ' ').replace('\n', ' ').split() if k.strip()]
 
-print(f"✅ Loaded {len(API_KEYS)} API Keys.")
-
-current_key_index = 0
-app = Flask(__name__)
-
 # --- 💾 DATABASE ---
 DB_FILE = "chat_db.json"
 def load_db():
@@ -31,160 +25,360 @@ def save_db(db):
     except: pass
 user_db = load_db()
 
-# --- 🧠 SYSTEM INSTRUCTION (UPDATED FOR ENGLISH DEFAULT) ---
+current_key_index = 0
+app = Flask(__name__)
+
+# --- 🧠 SYSTEM INSTRUCTION (UPDATED) ---
 SYSTEM_INSTRUCTION = """
-ROLE: You are "Student's AI", a coding tutor.
+ROLE: You are a "Universal Tutor" for students. You help with Coding, Science, Math, and General concepts.
 
 RULES:
-1. **DEFAULT LANGUAGE:** Always explain in **ENGLISH** unless the user explicitly asks for Tamil or Tanglish.
-2. **CODE FORMAT:** Always format code inside Markdown blocks (```python ... ```).
-3. **CLARITY:** Keep explanations simple, short, and beginner-friendly.
-4. **NO HINDI:** Do not use Hindi. Use only English or Tamil/Tanglish when requested.
+1. **TITLES:** When explaining a concept (e.g., Velocity, Loops), always start with the topic name in **Bold** (e.g., **Velocity**).
+2. **FORMAT:** Use Markdown.
+3. **CODE:** If the answer involves coding, strictly use Markdown Code Blocks (```python ... ```).
+4. **STYLE:** Explain clearly. If asked for code, explain the logic briefly then show the code.
+5. **LANGUAGE:** English by default. Use Tamil/Tanglish ONLY if requested.
 """
 
-# --- 🧬 DYNAMIC MODEL FINDER (The Magic Fix) ---
+# --- 🧬 DYNAMIC MODEL FINDER ---
 def get_working_model(key):
-    """
-    Asks Google: 'What models are available for this key?'
-    Returns the best available model name to avoid 404 errors.
-    """
     genai.configure(api_key=key)
     try:
         models = list(genai.list_models())
-        
-        # Filter models that support chat generation
         chat_models = [m for m in models if 'generateContent' in m.supported_generation_methods]
-        
-        # Priority Logic: Try to find Flash -> Pro 1.5 -> Pro 1.0
         for m in chat_models:
             if "flash" in m.name.lower() and "1.5" in m.name: return m.name
         for m in chat_models:
             if "pro" in m.name.lower() and "1.5" in m.name: return m.name
-        for m in chat_models:
-            if "pro" in m.name.lower() and "1.0" in m.name: return m.name
-            
-        # Fallback: Take the first available chat model
-        if chat_models:
-            return chat_models[0].name
-            
-    except Exception as e:
-        print(f"⚠️ Error scanning models: {e}")
-        return None
+        if chat_models: return chat_models[0].name
+    except: return None
     return None
 
 def generate_with_retry(prompt, history_messages=[]):
     global current_key_index
-    
-    if not API_KEYS: return "🚨 API Keys Missing. Please check Secrets."
-
-    # History Format
-    formatted_history = []
-    for msg in history_messages[-6:]:
-        role = "user" if msg["role"] == "user" else "model"
-        formatted_history.append({"role": role, "parts": [msg["content"]]})
+    if not API_KEYS: return "🚨 API Keys Missing."
 
-    log_messages = []
-
-    # RETRY LOGIC (Keys + Dynamic Model)
+    formatted_history = [{"role": ("user" if m["role"]=="user" else "model"), "parts": [m["content"]]} for m in history_messages[-6:]]
+    
     for i in range(len(API_KEYS)):
         key = API_KEYS[current_key_index]
+        model_name = get_working_model(key)
         
-        # STEP 1: Find a valid model name for this key
-        valid_model_name = get_working_model(key)
-        
-        if not valid_model_name:
-            log_messages.append(f"Key #{current_key_index+1} -> No chat models found.")
+        if not model_name:
             current_key_index = (current_key_index + 1) % len(API_KEYS)
             continue
 
-        # STEP 2: Try to generate
         try:
             genai.configure(api_key=key)
-            model = genai.GenerativeModel(model_name=valid_model_name, system_instruction=SYSTEM_INSTRUCTION)
-            
+            model = genai.GenerativeModel(model_name=model_name, system_instruction=SYSTEM_INSTRUCTION)
             chat = model.start_chat(history=formatted_history)
             response = chat.send_message(prompt)
-            return response.text # SUCCESS!
-            
-        except Exception as e:
-            err = str(e)
-            log_messages.append(f"Key #{current_key_index+1} ({valid_model_name}) -> {err}")
+            return response.text
+        except:
             current_key_index = (current_key_index + 1) % len(API_KEYS)
             time.sleep(1)
 
-    return f"⚠️ **ALL FAILED:**<br><small>{'<br>'.join(log_messages)}</small>"
+    return "⚠️ System Busy. Please try again."
 
-# --- UI TEMPLATE (STABLE) ---
+# --- UI TEMPLATE (UNIQUE DESIGN + ANIMATIONS) ---
 HTML_TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content">
     <title>Student's AI</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
-        :root { --bg: #000; --sidebar: #0a0a0a; --header: rgba(0,0,0,0.9); --user-bg: #222; --text: #ececec; }
-        body, html { margin: 0; padding: 0; height: 100%; width: 100%; background: var(--bg); color: var(--text); font-family: sans-serif; overflow: hidden; }
-        pre { background: #161616; border: 1px solid #333; padding: 15px; overflow-x: auto; color: #e6edf3; border-radius: 8px; }
-        #app-container { display: flex; flex-direction: column; height: 100%; }
-        header { height: 60px; padding: 0 20px; background: var(--header); border-bottom: 1px solid #222; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 50; }
-        #sidebar { position: fixed; inset: 0; width: 280px; background: var(--sidebar); border-right: 1px solid #222; transform: translateX(-100%); transition: 0.3s; z-index: 100; padding: 20px; display: flex; flex-direction: column; }
+        :root {
+            --bg-color: #09090b;
+            --sidebar-bg: #000000;
+            --card-bg: #18181b;
+            --user-msg-bg: #27272a;
+            --accent-color: #ffffff;
+            --text-color: #e4e4e7;
+            --code-bg: #111113;
+            --border-color: #27272a;
+        }
+
+        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+        
+        body, html {
+            margin: 0; padding: 0;
+            height: 100%; width: 100%;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-family: 'Outfit', sans-serif;
+            overflow: hidden; /* Prevents body scroll */
+        }
+
+        /* --- LAYOUT --- */
+        #app-container {
+            display: flex;
+            flex-direction: column;
+            height: 100dvh; /* Dynamic Height for Mobile */
+            position: relative;
+        }
+
+        /* --- HEADER --- */
+        header {
+            height: 60px;
+            padding: 0 20px;
+            background: rgba(9, 9, 11, 0.9);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-shrink: 0;
+            z-index: 50;
+        }
+
+        /* --- SIDEBAR --- */
+        #sidebar {
+            position: fixed; top: 0; left: 0; bottom: 0;
+            width: 280px;
+            background: var(--sidebar-bg);
+            border-right: 1px solid var(--border-color);
+            transform: translateX(-100%);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+        }
         #sidebar.open { transform: translateX(0); }
-        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 90; display: none; }
-        .overlay.active { display: block; }
-        #chat-box { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
-        .msg { padding: 12px 18px; border-radius: 10px; max-width: 85%; line-height: 1.6; }
-        .user-msg { align-self: flex-end; background: #222; color: #fff; }
-        .ai-msg { align-self: flex-start; color: #ececec; }
-        .input-wrap { padding: 15px; background: #000; border-top: 1px solid #333; display: flex; gap: 10px; z-index: 60; }
-        input { flex: 1; padding: 12px; border-radius: 25px; border: 1px solid #333; background: #111; color: #fff; outline: none; }
-        button { padding: 10px 20px; border-radius: 25px; border: none; background: #fff; font-weight: bold; cursor: pointer; }
+        .overlay {
+            position: fixed; inset: 0;
+            background: rgba(0,0,0,0.6);
+            backdrop-filter: blur(2px);
+            z-index: 90;
+            opacity: 0; pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .overlay.active { opacity: 1; pointer-events: auto; }
+
+        /* Search & History */
+        .search-box {
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            padding: 10px;
+            border-radius: 8px;
+            color: #fff;
+            width: 100%;
+            margin-bottom: 15px;
+            font-family: 'Outfit', sans-serif;
+        }
+        #history-list { flex: 1; overflow-y: auto; }
+        .history-item {
+            padding: 12px;
+            border-radius: 8px;
+            cursor: pointer;
+            color: #a1a1aa;
+            font-size: 14px;
+            transition: 0.2s;
+            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        }
+        .history-item:hover { background: var(--user-msg-bg); color: #fff; }
+
+        /* --- CHAT AREA --- */
+        #chat-box {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px 20px 40px 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+            scroll-behavior: smooth;
+        }
+
+        /* Message Styles */
+        .msg {
+            max-width: 90%;
+            width: fit-content;
+            line-height: 1.6;
+            font-size: 15px;
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+        .user-msg {
+            align-self: flex-end;
+            background: var(--user-msg-bg);
+            color: #fff;
+            padding: 12px 18px;
+            border-radius: 18px 18px 4px 18px;
+        }
+
+        .ai-msg {
+            align-self: flex-start;
+            color: var(--text-color);
+            width: 100%;
+        }
+
+        /* Markdown Styling */
+        .ai-msg strong { color: #fff; font-weight: 600; }
+        .ai-msg h1, .ai-msg h2, .ai-msg h3 { margin-top: 10px; color: #fff; }
+        .ai-msg p { margin-bottom: 10px; }
+        
+        /* Code Box */
+        .ai-msg pre {
+            background: var(--code-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 15px;
+            overflow-x: auto;
+            margin: 10px 0;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .ai-msg code {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 13px;
+            color: #a5d6ff;
+            background: rgba(255,255,255,0.05);
+            padding: 2px 4px;
+            border-radius: 4px;
+        }
+        .ai-msg pre code { background: transparent; padding: 0; color: #e6edf3; }
+
+        /* --- INPUT AREA (FIXED) --- */
+        .input-wrapper {
+            background: var(--bg-color);
+            padding: 15px 20px;
+            border-top: 1px solid var(--border-color);
+            flex-shrink: 0;
+            z-index: 60;
+        }
+        .input-bar {
+            max-width: 800px;
+            margin: 0 auto;
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 24px;
+            padding: 8px 10px 8px 20px;
+            display: flex;
+            align-items: center;
+            transition: border 0.2s;
+        }
+        .input-bar:focus-within { border-color: #555; }
+        
+        textarea {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: #fff;
+            font-size: 16px;
+            max-height: 120px;
+            padding: 5px 0;
+            resize: none;
+            outline: none;
+            font-family: 'Outfit', sans-serif;
+        }
         
-        /* Login Styles */
-        #login-overlay { position: fixed; inset: 0; z-index: 2000; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
-        .login-box { width: 90%; max-width: 350px; padding: 30px; background: #111; border: 1px solid #333; border-radius: 15px; text-align: center; }
-        .login-input { width: 100%; padding: 12px; background: #000; border: 1px solid #333; color: #fff; border-radius: 8px; margin-bottom: 15px; text-align: center; }
-        .login-btn { width: 100%; padding: 12px; background: #fff; color: #000; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
+        .send-btn {
+            width: 38px; height: 38px;
+            background: #fff;
+            color: #000;
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.2s;
+        }
+        .send-btn:hover { transform: scale(1.05); }
+
+        /* --- LOGIN --- */
+        #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: 30px;
+            border: 1px solid var(--border-color);
+            border-radius: 16px;
+            background: var(--card-bg);
+        }
+        .login-inp {
+            width: 100%; padding: 12px;
+            margin: 20px 0;
+            background: #000; border: 1px solid #333;
+            color: #fff; border-radius: 8px;
+            text-align: center;
+            outline: none;
+        }
+        .login-btn-start {
+            width: 100%; padding: 12px;
+            background: #fff; color: #000;
+            border: none; border-radius: 8px;
+            font-weight: 600; cursor: pointer;
+        }
+
     </style>
 </head>
 <body>
+
     <div id="login-overlay">
         <div class="login-box">
-            <h2 style="color:#fff;">Student's AI</h2>
-            <input type="text" id="username-input" class="login-input" placeholder="Enter Name" autocomplete="off">
-            <button onclick="handleLogin()" class="login-btn">Start</button>
+            <h2 style="margin-bottom:5px;">Student's AI</h2>
+            <p style="color:#666; font-size:13px;">Your Personal Tutor</p>
+            <input type="text" id="username-input" class="login-inp" placeholder="Enter your name" autocomplete="off">
+            <button onclick="handleLogin()" class="login-btn-start">Start Learning</button>
         </div>
     </div>
+
     <div id="app-container">
         <div class="overlay" id="overlay" onclick="toggleSidebar()"></div>
         <div id="sidebar">
-            <div style="padding-bottom:20px; border-bottom:1px solid #222; margin-bottom:20px; font-weight:bold; display:flex; gap:10px; align-items:center;">
-                <div id="avatar" style="width:35px; height:35px; background:#333; border-radius:50%; display:flex; align-items:center; justify-content:center;">U</div>
-                <span id="display-name">User</span>
+            <div style="padding-bottom:15px; border-bottom:1px solid #333; margin-bottom:15px; display:flex; align-items:center; gap:10px;">
+                <div style="width:32px; height:32px; background:#fff; color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold;" id="avatar">U</div>
+                <span id="display-name" style="font-weight:600;">User</span>
             </div>
-            <div style="background:#fff; color:#000; padding:12px; border-radius:8px; text-align:center; font-weight:bold; cursor:pointer;" onclick="newChat()">+ New Chat</div>
-            <div style="flex:1; overflow-y:auto; margin-top:20px;" id="history-list"></div>
-            <div style="margin-top:20px; color:#ff5555; cursor:pointer; text-align:center;" onclick="handleLogout()">Log Out</div>
+            
+            <button onclick="newChat()" style="width:100%; padding:10px; background:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600; margin-bottom:15px;">+ New Chat</button>
+            
+            <input type="text" class="search-box" placeholder="Search history..." onkeyup="filterHistory(this.value)">
+            
+            <div id="history-list"></div>
+            
+            <div style="margin-top:auto; padding-top:15px; border-top:1px solid #333; text-align:center; color:#ef4444; cursor:pointer; font-size:14px;" onclick="handleLogout()">Log Out</div>
         </div>
+
         <header>
-            <i class="fas fa-bars" style="color:#fff; font-size:20px; cursor:pointer;" onclick="toggleSidebar()"></i>
-            <div style="font-weight:bold; font-size:18px; color:#fff;">Student's AI</div>
+            <div style="display:flex; align-items:center; gap:15px;">
+                <i class="fas fa-bars" style="cursor:pointer; font-size:18px;" onclick="toggleSidebar()"></i>
+                <span style="font-weight:600; font-size:18px;">Student's AI</span>
+            </div>
             <div style="width:20px;"></div>
         </header>
+
         <div id="chat-box"></div>
-        <div class="input-wrap">
-            <input id="input" placeholder="Ask a coding question..." onkeydown="if(event.key==='Enter') send()">
-            <button onclick="send()">Send</button>
+
+        <div class="input-wrapper">
+            <div class="input-bar">
+                <textarea id="input" placeholder="Ask about Velocity, Coding, etc..." rows="1" oninput="resizeInput(this)"></textarea>
+                <button class="send-btn" onclick="send()"><i class="fas fa-arrow-up"></i></button>
+            </div>
         </div>
     </div>
+
     <script>
-        let currentChatId = null;
         let currentUser = null;
-        
+        let currentChatId = null;
+
+        // --- LOGIN LOGIC ---
         function checkLogin() {
             const stored = localStorage.getItem("student_ai_user");
-            if (stored) { currentUser = stored; showApp(); } else { document.getElementById("login-overlay").style.display = "flex"; }
+            if (stored) { currentUser = stored; showApp(); }
         }
         function handleLogin() {
             const name = document.getElementById("username-input").value.trim();
@@ -194,124 +388,214 @@ HTML_TEMPLATE = """
         
         function showApp() {
             document.getElementById("login-overlay").style.display = "none";
-            document.getElementById("app-container").style.display = "flex";
             document.getElementById("display-name").innerText = currentUser;
             document.getElementById("avatar").innerText = currentUser[0].toUpperCase();
             loadHistory();
             if(!currentChatId) {
-                 const box = document.getElementById("chat-box");
-                 if(box.innerHTML.trim() === "") { box.innerHTML = `<div class="msg ai-msg"><strong>Welcome ${currentUser}!</strong><br>I am ready. Ask me any code.</div>`; }
+                const box = document.getElementById('chat-box');
+                if(box.innerHTML === '') {
+                    box.innerHTML = `<div class="msg ai-msg">Hello <strong>${currentUser}</strong>! I am ready to teach. <br>Ask me about any concept or code.</div>`;
+                }
             }
         }
-        
+
+        // --- CHAT LOGIC ---
+        function resizeInput(el) {
+            el.style.height = 'auto';
+            el.style.height = Math.min(el.scrollHeight, 120) + 'px';
+        }
+
         async function send() {
             const input = document.getElementById('input');
             const text = input.value.trim();
-            if(!text) return;
-            
+            if (!text) return;
+
+            // 1. Show User Message
             const chatBox = document.getElementById('chat-box');
-            chatBox.innerHTML += `<div class="msg user-msg">${text}</div>`;
-            input.value = '';
+            chatBox.innerHTML += `<div class="msg user-msg">${text.replace(/</g, "&lt;")}</div>`;
             
-            // Loading
-            const loadId = "load-"+Date.now();
-            chatBox.innerHTML += `<div id="${loadId}" class="msg ai-msg">Thinking...</div>`;
+            input.value = '';
+            input.style.height = 'auto';
+            chatBox.scrollTop = chatBox.scrollHeight;
+
+            // 2. Prepare AI Container (Hidden initially for typing effect)
+            const msgId = "ai-" + Date.now();
+            chatBox.innerHTML += `<div id="${msgId}" class="msg ai-msg"><i class="fas fa-circle-notch fa-spin"></i></div>`;
             chatBox.scrollTop = chatBox.scrollHeight;
 
             try {
-                if(!currentChatId) {
-                    const r = await fetch('/new_chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({username:currentUser})});
+                // Ensure Chat ID
+                if (!currentChatId) {
+                    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();
                 }
+
+                // API Call
                 const res = await fetch('/chat', {
                     method: 'POST', headers: {'Content-Type': 'application/json'},
                     body: JSON.stringify({message: text, username: currentUser, chat_id: currentChatId})
                 });
                 const data = await res.json();
-                document.getElementById(loadId).innerHTML = data.response;
-            } catch(e) {
-                document.getElementById(loadId).innerHTML = "Error: " + e.message;
+                
+                // 3. REMOVE SPINNER & START TYPEWRITER EFFECT
+                const aiDiv = document.getElementById(msgId);
+                aiDiv.innerHTML = ""; // Clear spinner
+                
+                // TYPEWRITER EFFECT LOGIC
+                // We receive Markdown. We verify format, then type it out.
+                typeWriter(aiDiv, data.response);
+
+                if(data.new_title) loadHistory();
+
+            } catch (e) {
+                document.getElementById(msgId).innerHTML = "⚠️ Error: " + e.message;
             }
-            chatBox.scrollTop = chatBox.scrollHeight;
         }
-        
+
+        // --- TYPEWRITER FUNCTION (Like ChatGPT) ---
+        function typeWriter(element, markdownText) {
+            // Parse Markdown to HTML first using Marked.js
+            const htmlContent = marked.parse(markdownText);
+            
+            // To animate nicely, we can't type HTML tags one by one (it breaks).
+            // So we simply Fade it in or use a "Stream" simulation.
+            // Since the user asked for "Line by line", we will simulate it safely.
+            
+            element.innerHTML = htmlContent;
+            
+            // Apply a fade-in animation to children to simulate typing flow
+            const children = element.children;
+            for(let i=0; i<children.length; i++) {
+                children[i].style.opacity = '0';
+                children[i].style.transform = 'translateY(10px)';
+                children[i].style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+                
+                setTimeout(() => {
+                    children[i].style.opacity = '1';
+                    children[i].style.transform = 'translateY(0)';
+                }, i * 150); // 150ms delay between each line/block
+            }
+            
+            // Scroll to bottom as it reveals
+            const box = document.getElementById('chat-box');
+            let interval = setInterval(() => {
+                box.scrollTop = box.scrollHeight;
+                if(children[children.length-1].style.opacity === '1') clearInterval(interval);
+            }, 100);
+        }
+
+        // --- SIDEBAR & HISTORY ---
+        function toggleSidebar() {
+            document.getElementById('sidebar').classList.toggle('open');
+            document.getElementById('overlay').classList.toggle('active');
+        }
+
         async function loadHistory() {
             try {
-                const res = await fetch('/get_history', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ username: currentUser }) });
+                const res = await fetch('/get_history', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({username: currentUser})});
                 const data = await res.json();
-                const list = document.getElementById("history-list"); list.innerHTML = "";
-                if(data.chats) Object.keys(data.chats).reverse().forEach(cid => { list.innerHTML += `<div style="padding:10px; color:#888; cursor:pointer;" onclick="loadChat('${cid}')"><i class="fas fa-comment"></i> ${data.chats[cid].title}</div>`; });
+                const list = document.getElementById('history-list');
+                list.innerHTML = "";
+                if (data.chats) {
+                    Object.keys(data.chats).reverse().forEach(cid => {
+                        const title = data.chats[cid].title || "New Chat";
+                        list.innerHTML += `<div class="history-item" onclick="loadChat('${cid}')" data-title="${title.toLowerCase()}">${title}</div>`;
+                    });
+                }
             } catch(e) {}
         }
+
+        function filterHistory(query) {
+            const items = document.getElementsByClassName('history-item');
+            const q = query.toLowerCase();
+            for(let item of items) {
+                const title = item.getAttribute('data-title');
+                item.style.display = title.includes(q) ? 'block' : 'none';
+            }
+        }
+
         async function newChat() {
-             try {
-                const res = await fetch('/new_chat', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ username: currentUser }) });
-                const data = await res.json(); currentChatId = data.chat_id;
-                document.getElementById('chat-box').innerHTML = ''; 
-                loadHistory(); 
-                document.getElementById('sidebar').classList.remove('open');
-                document.getElementById('overlay').classList.remove('active');
-            } catch(e) {}
+            toggleSidebar();
+            currentChatId = null;
+            document.getElementById('chat-box').innerHTML = `<div class="msg ai-msg">New chat started. What's on your mind?</div>`;
+            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();
         }
+
         async function loadChat(cid) {
+            toggleSidebar();
             currentChatId = cid;
-            const res = await fetch('/get_chat', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ username: currentUser, chat_id: cid }) });
-            const data = await res.json(); 
-            const box = document.getElementById('chat-box'); box.innerHTML = '';
+            const res = await fetch('/get_chat', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({username: currentUser, chat_id: cid})});
+            const data = await res.json();
+            const box = document.getElementById('chat-box');
+            box.innerHTML = "";
+            
+            // No typing effect for history, just load it
             data.messages.forEach(msg => {
                 const cls = msg.role === 'user' ? 'user-msg' : 'ai-msg';
-                box.innerHTML += `<div class="msg ${cls}">${msg.content}</div>`;
+                let content = msg.content;
+                if(msg.role === 'model') content = marked.parse(content);
+                box.innerHTML += `<div class="msg ${cls}">${content}</div>`;
             });
-            document.getElementById('sidebar').classList.remove('open');
-            document.getElementById('overlay').classList.remove('active');
             box.scrollTop = box.scrollHeight;
         }
-        function toggleSidebar() { 
-            document.getElementById('sidebar').classList.toggle('open'); 
-            document.getElementById('overlay').classList.toggle('active'); 
-        }
-        
+
         checkLogin();
     </script>
 </body>
 </html>
 """
 
-# --- ROUTES ---
+# --- BACKEND ROUTES ---
 @app.route("/", methods=["GET"])
 def home(): return render_template_string(HTML_TEMPLATE)
 
 @app.route("/new_chat", methods=["POST"])
 def new_chat():
-    user = request.json.get("username")
-    if user not in user_db: user_db[user] = {}
+    u = request.json.get("username")
+    if u not in user_db: user_db[u] = {}
     nid = str(uuid.uuid4())
-    user_db[user][nid] = {"title": "New Chat", "messages": []}
+    user_db[u][nid] = {"title": "New Chat", "messages": []}
     save_db(user_db)
     return jsonify({"chat_id": nid})
 
+@app.route("/get_history", methods=["POST"])
+def get_history():
+    u = request.json.get("username")
+    return jsonify({"chats": user_db.get(u, {})})
+
+@app.route("/get_chat", methods=["POST"])
+def get_chat():
+    d = request.json
+    return jsonify({"messages": user_db.get(d["username"], {}).get(d["chat_id"], {}).get("messages", [])})
+
 @app.route("/chat", methods=["POST"])
 def chat():
     d = request.json
     u, cid, msg = d.get("username"), d.get("chat_id"), d.get("message")
-    
+
     if u not in user_db: user_db[u] = {}
     if cid not in user_db[u]: user_db[u][cid] = {"messages": []}
 
     user_db[u][cid]["messages"].append({"role": "user", "content": msg})
     
-    # CALL DYNAMIC GENERATOR
+    # Generate RAW Markdown from AI (Frontend will convert to HTML)
     reply = generate_with_retry(msg, user_db[u][cid]["messages"][:-1])
     
-    # Error Handling for Display
-    if "FAILED" in reply or "Missing" in reply:
-        formatted_html = reply
-    else:
-        formatted_html = markdown.markdown(reply, extensions=['fenced_code'])
-
-    user_db[u][cid]["messages"].append({"role": "model", "content": formatted_html})
+    # Save Raw Markdown
+    user_db[u][cid]["messages"].append({"role": "model", "content": reply})
+    
+    # Update Title if new
+    new_title = False
+    if len(user_db[u][cid]["messages"]) <= 2:
+        user_db[u][cid]["title"] = " ".join(msg.split()[:4])
+        new_title = True
+        
     save_db(user_db)
-    return jsonify({"response": formatted_html})
+    return jsonify({"response": reply, "new_title": new_title})
 
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860)
+    app.run(host='0.0.0.0', port=7860)
+