Update templates/index.html

templates/index.html

@@ -7,7 +7,7 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <title>ChibiCat AI - Neo Mobile</title>
+    <title>ChibiCat AI - Neo</title>
     <style>
         * {
             margin: 0;
@@ -19,6 +19,7 @@
         body {
             background: #0a0c15;
             overflow: hidden;
+            /* TAMBAHAN UNTUK ANDROID */
             -webkit-tap-highlight-color: transparent;
             touch-action: pan-x pan-y;
         }
@@ -36,15 +37,15 @@
         SIDEBAR - DARK NEO
         ========================= */
         .sidebar {
-            width: 280px;
+            width: 300px;
             background: linear-gradient(180deg, #0f111a 0%, #080a10 100%);
             backdrop-filter: blur(10px);
             color: #e8edff;
             display: flex;
             flex-direction: column;
-            padding: 20px 16px;
+            padding: 24px 20px;
             position: fixed;
-            left: -300px;
+            left: -320px;
             top: 0;
             height: 100vh;
             z-index: 999;
@@ -60,34 +61,34 @@
         .sidebar-header {
             display: flex;
             align-items: center;
-            margin-bottom: 25px;
-            padding-bottom: 16px;
+            margin-bottom: 35px;
+            padding-bottom: 20px;
             border-bottom: 1px solid rgba(0, 212, 255, 0.2);
         }
 
         .sidebar-logo {
-            width: 50px;
-            height: 50px;
-            border-radius: 14px;
+            width: 55px;
+            height: 55px;
+            border-radius: 16px;
             background: linear-gradient(135deg, #00d4ff, #0099ff);
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 28px;
-            margin-right: 12px;
+            font-size: 32px;
+            margin-right: 15px;
             box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
-            flex-shrink: 0;
         }
 
+        /* GAMBAR LOGO UNTUK SIDEBAR */
         .sidebar-logo-img {
-            width: 50px;
-            height: 50px;
-            border-radius: 14px;
+            width: 55px;
+            height: 55px;
+            border-radius: 16px;
             object-fit: cover;
         }
 
         .sidebar h2 {
-            font-size: 22px;
+            font-size: 26px;
             letter-spacing: -0.5px;
             background: linear-gradient(135deg, #00d4ff, #4d9eff);
             -webkit-background-clip: text;
@@ -97,7 +98,7 @@
 
         .sidebar p {
             color: #6c7a9e;
-            font-size: 11px;
+            font-size: 13px;
         }
 
         .new-chat {
@@ -105,43 +106,42 @@
             border: none;
             color: #0a0c15;
             font-weight: bold;
-            padding: 12px;
+            padding: 14px;
             border-radius: 14px;
-            font-size: 14px;
+            font-size: 16px;
             cursor: pointer;
-            margin-bottom: 25px;
+            margin-bottom: 30px;
             transition: all 0.2s;
             box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
-            width: 100%;
         }
 
-        .new-chat:active {
-            transform: scale(0.97);
+        .new-chat:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
         }
 
         .chat-history {
             flex: 1;
             overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
         }
 
         .history-item {
             background: rgba(18, 22, 40, 0.7);
             backdrop-filter: blur(5px);
-            padding: 12px 14px;
-            border-radius: 12px;
-            margin-bottom: 10px;
+            padding: 14px 18px;
+            border-radius: 14px;
+            margin-bottom: 12px;
             cursor: pointer;
-            transition: 0.15s;
+            transition: 0.2s;
             border: 1px solid rgba(0, 212, 255, 0.1);
             font-weight: 500;
-            font-size: 13px;
-            word-break: break-word;
+            font-size: 14px;
         }
 
-        .history-item:active {
-            background: rgba(0, 212, 255, 0.25);
-            transform: translateX(4px);
+        .history-item:hover {
+            background: rgba(0, 212, 255, 0.15);
+            border-color: rgba(0, 212, 255, 0.4);
+            transform: translateX(5px);
         }
 
         /* =========================
@@ -155,7 +155,6 @@
             backdrop-filter: blur(3px);
             z-index: 998;
             display: none;
-            transition: 0.2s;
         }
 
         .overlay.active {
@@ -173,98 +172,97 @@
         }
 
         /* =========================
-        TOPBAR - MOBILE FRIENDLY
+        TOPBAR - NEO MASCULINE
         ========================= */
         .topbar {
-            height: 64px;
+            height: 80px;
             background: rgba(10, 12, 21, 0.95);
             backdrop-filter: blur(10px);
             display: flex;
             align-items: center;
-            padding: 0 16px;
+            padding: 0 30px;
             color: #e8edff;
             border-bottom: 1px solid rgba(0, 212, 255, 0.3);
             box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
-            flex-shrink: 0;
         }
 
         .menu-btn {
-            font-size: 26px;
-            margin-right: 12px;
+            font-size: 28px;
+            margin-right: 20px;
             cursor: pointer;
-            transition: 0.15s;
+            transition: 0.2s;
             color: #00d4ff;
-            padding: 8px 4px;
-            touch-action: manipulation;
         }
 
-        .menu-btn:active {
-            transform: scale(0.92);
+        .menu-btn:hover {
+            transform: scale(1.1);
+            text-shadow: 0 0 8px #00d4ff;
         }
 
+        /* LOGO AREA - DENGAN GAMBAR */
         .logo {
-            width: 44px;
-            height: 44px;
-            border-radius: 12px;
+            width: 50px;
+            height: 50px;
+            border-radius: 14px;
             background: linear-gradient(135deg, #00d4ff, #0099ff);
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-right: 12px;
-            box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+            margin-right: 15px;
+            box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
             overflow: hidden;
-            flex-shrink: 0;
         }
 
         .logo-img {
             width: 100%;
             height: 100%;
             object-fit: cover;
-            border-radius: 12px;
+            border-radius: 14px;
         }
 
+        /* Fallback jika gambar tidak ada - pake icon keren */
         .logo-icon {
-            font-size: 24px;
+            font-size: 28px;
         }
 
         .title h1 {
-            font-size: 18px;
-            letter-spacing: -0.3px;
+            font-size: 24px;
+            letter-spacing: -0.5px;
             background: linear-gradient(135deg, #e8edff, #00d4ff);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
-            white-space: nowrap;
         }
 
         .title p {
-            font-size: 10px;
+            font-size: 13px;
             color: #00d4ff;
             display: flex;
             align-items: center;
-            gap: 4px;
+            gap: 6px;
         }
 
         .title p::before {
             content: "●";
-            font-size: 8px;
+            font-size: 10px;
             color: #00ff88;
             text-shadow: 0 0 5px #00ff88;
         }
 
         /* =========================
-        CHAT AREA - OPTIMIZED SCROLL
+        CHAT AREA - GLASS
         ========================= */
         .chat-area {
             flex: 1;
             overflow-y: auto;
-            padding: 16px;
+            padding: 30px;
             background: linear-gradient(180deg, #0a0c15 0%, #0f111a 100%);
+            /* TAMBAHAN UNTUK ANDROID */
             -webkit-overflow-scrolling: touch;
         }
 
         .chat-area::-webkit-scrollbar {
-            width: 4px;
+            width: 6px;
         }
         .chat-area::-webkit-scrollbar-track {
             background: #1a1f2e;
@@ -276,20 +274,20 @@
         }
 
         .message {
-            max-width: 85%;
-            padding: 12px 16px;
+            max-width: 75%;
+            padding: 14px 20px;
             border-radius: 20px;
-            margin-bottom: 14px;
-            font-size: 15px;
-            line-height: 1.45;
+            margin-bottom: 20px;
+            font-size: 16px;
+            line-height: 1.5;
             word-wrap: break-word;
-            animation: fadeInUp 0.25s ease;
+            animation: fadeInUp 0.3s ease;
         }
 
         @keyframes fadeInUp {
             from {
                 opacity: 0;
-                transform: translateY(8px);
+                transform: translateY(10px);
             }
             to {
                 opacity: 1;
@@ -303,7 +301,7 @@
             border: 1px solid rgba(0, 212, 255, 0.2);
             color: #d0d9ff;
             border-bottom-left-radius: 6px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }
 
         .user {
@@ -312,29 +310,28 @@
             font-weight: 600;
             margin-left: auto;
             border-bottom-right-radius: 6px;
-            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.25);
+            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
         }
 
         /* =========================
-        INPUT AREA - LANDING THUMB
+        INPUT - CYBER
         ========================= */
         .input-area {
             display: flex;
-            padding: 12px 16px;
-            gap: 10px;
+            padding: 20px 30px;
+            gap: 15px;
             background: rgba(10, 12, 21, 0.95);
             backdrop-filter: blur(10px);
             border-top: 1px solid rgba(0, 212, 255, 0.2);
-            flex-shrink: 0;
         }
 
         input {
             flex: 1;
             border: 1px solid rgba(0, 212, 255, 0.3);
             background: rgba(18, 22, 40, 0.8);
-            border-radius: 30px;
-            padding: 12px 18px;
-            font-size: 15px;
+            border-radius: 18px;
+            padding: 16px 22px;
+            font-size: 16px;
             outline: none;
             color: #e8edff;
             transition: all 0.2s;
@@ -342,7 +339,7 @@
 
         input:focus {
             border-color: #00d4ff;
-            box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
+            box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
         }
 
         input::placeholder {
@@ -354,145 +351,125 @@
             background: linear-gradient(135deg, #00d4ff, #0099ff);
             color: #0a0c15;
             font-weight: bold;
-            padding: 0 20px;
-            border-radius: 30px;
-            font-size: 14px;
+            padding: 0 32px;
+            border-radius: 18px;
+            font-size: 16px;
             cursor: pointer;
-            transition: 0.15s;
+            transition: 0.2s;
             display: flex;
             align-items: center;
-            gap: 6px;
-            touch-action: manipulation;
+            gap: 8px;
         }
 
-        button.send:active {
-            transform: scale(0.96);
+        button.send:hover {
+            transform: scale(1.02);
+            box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
         }
 
         /* =========================
-        RESPONSIVE BREAKPOINTS - ANDROID FIRST
+        RESPONSIVE UNTUK ANDROID
         ========================= */
-        @media (max-width: 600px) {
+        @media (max-width: 768px) {
             .sidebar {
                 width: 85%;
-                max-width: 280px;
             }
             .message {
-                max-width: 92%;
-                font-size: 14px;
-                padding: 10px 14px;
-            }
-            .chat-area {
-                padding: 12px;
+                max-width: 90%;
+                font-size: 15px;
             }
             .topbar {
-                height: 58px;
+                padding: 0 20px;
             }
-            .title h1 {
-                font-size: 16px;
+            .input-area {
+                padding: 15px 20px;
             }
-            .logo {
-                width: 38px;
-                height: 38px;
+            button.send {
+                padding: 0 24px;
             }
         }
 
+        /* TAMBAHAN KHUSUS UNTUK ANDROID */
         @media (max-width: 480px) {
             .topbar {
-                height: 56px;
-                padding: 0 12px;
+                height: 65px;
+                padding: 0 15px;
             }
             .menu-btn {
                 font-size: 24px;
-                margin-right: 8px;
+                margin-right: 12px;
             }
             .logo {
-                width: 36px;
-                height: 36px;
-                margin-right: 8px;
+                width: 40px;
+                height: 40px;
             }
             .title h1 {
-                font-size: 15px;
+                font-size: 18px;
             }
             .title p {
-                font-size: 9px;
+                font-size: 10px;
             }
             .chat-area {
-                padding: 10px;
+                padding: 15px;
             }
             .message {
-                padding: 9px 12px;
-                font-size: 13.5px;
+                padding: 10px 14px;
+                font-size: 14px;
                 max-width: 95%;
-                margin-bottom: 12px;
             }
             .input-area {
-                padding: 10px 12px;
-                gap: 8px;
+                padding: 10px 15px;
+                gap: 10px;
             }
             input {
-                padding: 10px 14px;
+                padding: 12px 16px;
                 font-size: 14px;
             }
             button.send {
-                padding: 0 16px;
-                font-size: 13px;
+                padding: 0 18px;
+                font-size: 14px;
             }
             .sidebar {
-                width: 85%;
-                padding: 16px 12px;
+                width: 80%;
+                padding: 20px 15px;
             }
             .sidebar-logo {
-                width: 44px;
-                height: 44px;
+                width: 45px;
+                height: 45px;
                 font-size: 24px;
             }
             .sidebar h2 {
-                font-size: 20px;
+                font-size: 22px;
             }
             .new-chat {
-                padding: 10px;
-                font-size: 13px;
+                padding: 12px;
+                font-size: 14px;
             }
             .history-item {
-                padding: 10px 12px;
-                font-size: 12px;
+                padding: 12px 15px;
+                font-size: 13px;
             }
         }
 
-        /* Landscape mode Android */
+        /* TAMBAHAN UNTUK LANDSCAPE MODE ANDROID */
         @media (max-width: 900px) and (orientation: landscape) {
             .topbar {
-                height: 52px;
+                height: 55px;
             }
             .chat-area {
-                padding: 8px 12px;
+                padding: 10px 20px;
             }
             .message {
-                margin-bottom: 8px;
-                padding: 8px 12px;
+                margin-bottom: 10px;
             }
             .input-area {
-                padding: 8px 12px;
+                padding: 8px 15px;
             }
             input {
-                padding: 8px 14px;
+                padding: 10px 16px;
             }
             button.send {
-                padding: 0 18px;
+                padding: 0 20px;
             }
-            .sidebar {
-                padding: 12px;
-            }
-            .chat-history {
-                max-height: 60vh;
-            }
-        }
-
-        /* smooth scrolling */
-        html, body {
-            height: 100%;
-            overflow: hidden;
         }
     </style>
 </head>
@@ -501,10 +478,12 @@
 <div class="overlay" id="overlay" onclick="closeSidebar()"></div>
 
 <div class="app">
+
     <!-- SIDEBAR -->
     <div class="sidebar" id="sidebar">
         <div class="sidebar-header">
             <div class="sidebar-logo" id="sidebarLogo">
+                <!-- Logo akan diisi JS -->
                 🐱‍👤
             </div>
             <div>
@@ -512,15 +491,17 @@
                 <p>Neo Intelligence</p>
             </div>
         </div>
-        <button class="new-chat" id="newChatBtn">+ New Chat</button>
+        <button class="new-chat" onclick="createNewChat()">+ New Chat</button>
         <div class="chat-history" id="chatHistory"></div>
     </div>
 
-    <!-- MAIN CONTENT -->
+    <!-- MAIN -->
     <div class="main">
+        <!-- TOPBAR -->
         <div class="topbar">
-            <div class="menu-btn" id="menuBtn">☰</div>
+            <div class="menu-btn" onclick="openSidebar()">☰</div>
             <div class="logo" id="mainLogo">
+                <!-- Logo akan diisi JS -->
                 🐱‍👤
             </div>
             <div class="title">
@@ -529,6 +510,7 @@
             </div>
         </div>
 
+        <!-- CHAT AREA -->
         <div class="chat-area" id="chatArea">
             <div class="message bot">
                 <span style="font-weight: bold;">⚡ ChibiCat Neo</span><br>
@@ -536,298 +518,213 @@
             </div>
         </div>
 
+        <!-- INPUT -->
         <div class="input-area">
-            <input type="text" id="messageInput" placeholder="Ketik pesan bro..." autocomplete="off" />
-            <button class="send" id="sendBtn">
-                <span>➤</span> Kirim
+            <input type="text" id="messageInput" placeholder="Ketik pesan bro..." />
+            <button class="send" onclick="sendMessage()">
+                <span></span> Kirim
             </button>
         </div>
     </div>
 </div>
 
 <script>
-    // ========== LOGO CONFIGURATION ==========
-    const LOGO_CONFIG = {
-        mode: "image",  // "emoji", "image"
-        emoji: "🐱‍🚀",
-        imageUrl: "https://cdn-icons-png.flaticon.com/512/1998/1998592.png",
-        fallbackIcon: "🐱‍👤"
-    };
+    let currentChatId = null
+
+    // =========================================
+    // KONFIGURASI LOGO
+    // =========================================
+    // Pilih salah satu mode logo:
+    // mode: "emoji" = pake emoji keren
+    // mode: "image" = pake gambar dari URL
+    // mode: "svg" = pake karakter ASCII keren
     
-    // Storage sementara (simulasi backend) - FULL RESPONSIF TANPA BACKEND NYATA
-    // Tapi kita buat agar fungsional seperti chat history lokal (menggunakan localStorage)
-    let chatStorage = {
-        chats: [],
-        currentChatId: null
-    };
-    
-    // Fungsi inisialisasi storage lokal
-    function loadStorage() {
-        const stored = localStorage.getItem("chibicat_chats");
-        if (stored) {
-            try {
-                const data = JSON.parse(stored);
-                chatStorage.chats = data.chats || [];
-                chatStorage.currentChatId = data.currentChatId || null;
-            } catch(e) { console.log(e); }
-        }
-        if (!chatStorage.chats.length) {
-            // buat default chat
-            const defaultId = Date.now().toString();
-            chatStorage.chats = [{
-                chat_id: defaultId,
-                title: "Chat Awal",
-                messages: [
-                    { role: "bot", content: "⚡ ChibiCat Neo<br>Halo bro! Ada yang bisa gue bantu? 🔥😎" }
-                ]
-            }];
-            chatStorage.currentChatId = defaultId;
-            saveStorage();
-        }
+    const LOGO_CONFIG = {
+        mode: "image",  // "emoji", "image", atau "svg"
+        emoji: "🐱‍🚀",  // emoji untuk mode emoji
+        imageUrl: "/static/logo.png", // cyber cat image
+        imageUrl2: "https://cdn-icons-png.flaticon.com/512/1998/1998592.png", // alternative robot cat
+        svgIcon: "⚡🐱⚡" // untuk mode svg/ascii
     }
     
-    function saveStorage() {
-        localStorage.setItem("chibicat_chats", JSON.stringify({
-            chats: chatStorage.chats,
-            currentChatId: chatStorage.currentChatId
-        }));
+    function initLogos() {
+        const sidebarLogo = document.getElementById("sidebarLogo")
+        const mainLogo = document.getElementById("mainLogo")
+        
+        if (LOGO_CONFIG.mode === "emoji") {
+            // Mode Emoji - simple tapi keren
+            sidebarLogo.innerHTML = LOGO_CONFIG.emoji
+            sidebarLogo.style.fontSize = "32px"
+            sidebarLogo.style.background = "linear-gradient(135deg, #00d4ff, #0099ff)"
+            
+            mainLogo.innerHTML = LOGO_CONFIG.emoji
+            mainLogo.style.fontSize = "28px"
+            mainLogo.style.background = "linear-gradient(135deg, #00d4ff, #0099ff)"
+            
+        } else if (LOGO_CONFIG.mode === "image") {
+            // Mode Gambar - lebih profesional
+            sidebarLogo.innerHTML = `<img src="${LOGO_CONFIG.imageUrl}" class="sidebar-logo-img" style="width:100%;height:100%;border-radius:16px;object-fit:cover;" onerror="this.src='${LOGO_CONFIG.imageUrl2}'">`
+            sidebarLogo.style.background = "transparent"
+            sidebarLogo.style.padding = "0"
+            sidebarLogo.style.boxShadow = "0 0 15px rgba(0,212,255,0.4)"
+            
+            mainLogo.innerHTML = `<img src="${LOGO_CONFIG.imageUrl}" class="logo-img" style="width:100%;height:100%;border-radius:14px;object-fit:cover;" onerror="this.src='${LOGO_CONFIG.imageUrl2}'">`
+            mainLogo.style.background = "transparent"
+            mainLogo.style.padding = "0"
+            
+        } else {
+            // Mode SVG/ASCII - modern tech look
+            sidebarLogo.innerHTML = LOGO_CONFIG.svgIcon
+            sidebarLogo.style.fontSize = "28px"
+            sidebarLogo.style.fontWeight = "bold"
+            sidebarLogo.style.letterSpacing = "2px"
+            
+            mainLogo.innerHTML = LOGO_CONFIG.svgIcon
+            mainLogo.style.fontSize = "24px"
+            mainLogo.style.fontWeight = "bold"
+        }
     }
-    
-    function getCurrentChat() {
-        return chatStorage.chats.find(c => c.chat_id === chatStorage.currentChatId);
+
+    function openSidebar() {
+        document.getElementById("sidebar").classList.add("active")
+        document.getElementById("overlay").classList.add("active")
     }
-    
-    function updateCurrentChat(messages) {
-        const idx = chatStorage.chats.findIndex(c => c.chat_id === chatStorage.currentChatId);
-        if (idx !== -1) {
-            chatStorage.chats[idx].messages = messages;
-            saveStorage();
-        }
+
+    function closeSidebar() {
+        document.getElementById("sidebar").classList.remove("active")
+        document.getElementById("overlay").classList.remove("active")
     }
-    
-    // Render chat area
-    function renderChat() {
-        const chatArea = document.getElementById("chatArea");
-        const current = getCurrentChat();
-        if (!current) return;
-        chatArea.innerHTML = "";
-        current.messages.forEach(msg => {
-            const role = msg.role === "user" ? "user" : "bot";
-            chatArea.innerHTML += `<div class="message ${role}">${msg.content}</div>`;
-        });
-        chatArea.scrollTop = chatArea.scrollHeight;
+
+    async function createNewChat() {
+        const response = await fetch("/new_chat", { method: "POST" })
+        const data = await response.json()
+        currentChatId = data.chat_id
+        document.getElementById("chatArea").innerHTML = `
+            <div class="message bot">
+                <span style="font-weight: bold;">⚡ ChibiCat Neo</span><br>
+                Halo bro! Ada yang bisa gue bantu? 🔥😎
+            </div>
+        `
+        loadChats()
+        closeSidebar()
     }
-    
-    // Load history sidebar
-    function renderHistory() {
-        const historyDiv = document.getElementById("chatHistory");
-        historyDiv.innerHTML = "";
-        chatStorage.chats.forEach(chat => {
-            historyDiv.innerHTML += `
-                <div class="history-item" data-chatid="${chat.chat_id}">
-                    💬 ${escapeHtml(chat.title.length > 20 ? chat.title.substring(0,18)+"..." : chat.title)}
+
+    async function loadChats() {
+        const response = await fetch("/get_chats")
+        const chats = await response.json()
+        const history = document.getElementById("chatHistory")
+        history.innerHTML = ""
+        chats.forEach(chat => {
+            history.innerHTML += `
+                <div class="history-item" onclick="loadChat('${chat.chat_id}')">
+                    💬 ${chat.title}
                 </div>
-            `;
-        });
-        // attach event listeners
-        document.querySelectorAll('.history-item').forEach(el => {
-            el.addEventListener('click', (e) => {
-                const chatId = el.getAttribute('data-chatid');
-                loadChatById(chatId);
-                closeSidebar();
-            });
-        });
-    }
-    
-    function loadChatById(chatId) {
-        const chat = chatStorage.chats.find(c => c.chat_id === chatId);
-        if (chat) {
-            chatStorage.currentChatId = chatId;
-            saveStorage();
-            renderChat();
-        }
+            `
+        })
     }
-    
-    function createNewChat() {
-        const newId = Date.now().toString();
-        const newChat = {
-            chat_id: newId,
-            title: `Chat Baru ${new Date().toLocaleTimeString()}`,
-            messages: [
-                { role: "bot", content: "⚡ ChibiCat Neo<br>Halo bro! Ada yang bisa gue bantu? 🔥😎" }
-            ]
-        };
-        chatStorage.chats.unshift(newChat);
-        chatStorage.currentChatId = newId;
-        saveStorage();
-        renderChat();
-        renderHistory();
-        closeSidebar();
+
+    async function loadChat(chatId) {
+        currentChatId = chatId
+        const response = await fetch(`/load_chat/${chatId}`)
+        const messages = await response.json()
+        const chatArea = document.getElementById("chatArea")
+        chatArea.innerHTML = ""
+        messages.forEach(msg => {
+            const role = msg.role === "user" ? "user" : "bot"
+            chatArea.innerHTML += `<div class="message ${role}">${msg.content}</div>`
+        })
+        closeSidebar()
     }
-    
+
     async function sendMessage() {
-        const input = document.getElementById("messageInput");
-        const message = input.value.trim();
-        if (message === "") return;
-        
-        const currentChat = getCurrentChat();
-        if (!currentChat) return;
-        
-        // tambah pesan user
-        const newMessages = [...currentChat.messages, { role: "user", content: escapeHtml(message) }];
-        updateCurrentChat(newMessages);
-        renderChat();
-        input.value = "";
-        
-        // update title jika ini pesan pertama setelah welcome
-        if (currentChat.messages.length === 1 && currentChat.title === "Chat Awal" || currentChat.title.startsWith("Chat Baru")) {
-            const shortTitle = message.length > 20 ? message.substring(0,18)+"..." : message;
-            currentChat.title = shortTitle;
-            saveStorage();
-            renderHistory();
+        const input = document.getElementById("messageInput")
+        const message = input.value.trim()
+        if (message === "") return
+
+        const chatArea = document.getElementById("chatArea")
+
+        chatArea.innerHTML += `<div class="message user">${escapeHtml(message)}</div>`
+        input.value = ""
+        chatArea.scrollTop = chatArea.scrollHeight
+
+        try {
+            const response = await fetch("/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ message: message })
+            })
+            const data = await response.json()
+            chatArea.innerHTML += `<div class="message bot">${escapeHtml(data.reply)}</div>`
+            chatArea.scrollTop = chatArea.scrollHeight
+            loadChats()
+        } catch (error) {
+            chatArea.innerHTML += `<div class="message bot">⚠️ Server error, coba lagi bro 😭</div>`
         }
-        
-        // Simulasi AI reply (dengan efek neo)
-        let botReply = `🤖 **ChibiCat Neo** : ${message.length > 0 ? "Wah keren bro! " + message : "Hmm?"} 😼\n\n🔥 Pertanyaan keren! Ini jawaban neo-ku: *Tetap semangat dan explore tech!* 🚀`;
-        if (message.toLowerCase().includes("halo") || message.toLowerCase().includes("hai")) {
-            botReply = "Halo juga bro! Ada yang bisa gue bantu? ChibiCat siap membantumu! 🐱‍👤✨";
-        } else if (message.toLowerCase().includes("siapa")) {
-            botReply = "Aku ChibiCat Neo, asisten AI masa depan dengan gaya keren dan cepat! 🔥";
-        } else if (message.toLowerCase().includes("cuaca")) {
-            botReply = "Sekarang cuaca sedang cerah berawan dikit, tapi di duniamu pasti selalu keren! ☁️😎";
-        }
-        
-        // delay biar ada efek loading tipis
-        await new Promise(resolve => setTimeout(resolve, 300));
-        const updated = [...newMessages, { role: "bot", content: botReply }];
-        updateCurrentChat(updated);
-        renderChat();
     }
-    
-    // Helper
+
+    // TAMBAHAN: Fungsi untuk menghindari XSS dan support emoji di Android
     function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    
-    // Logo init with gambar
-    function initLogos() {
-        const sidebarLogo = document.getElementById("sidebarLogo");
-        const mainLogo = document.getElementById("mainLogo");
-        if (LOGO_CONFIG.mode === "emoji") {
-            sidebarLogo.innerHTML = LOGO_CONFIG.emoji;
-            sidebarLogo.style.fontSize = "32px";
-            sidebarLogo.style.background = "linear-gradient(135deg, #00d4ff, #0099ff)";
-            mainLogo.innerHTML = LOGO_CONFIG.emoji;
-            mainLogo.style.fontSize = "26px";
-            mainLogo.style.background = "linear-gradient(135deg, #00d4ff, #0099ff)";
-        } else {
-            // image mode
-            sidebarLogo.innerHTML = `<img src="${LOGO_CONFIG.imageUrl}" class="sidebar-logo-img" style="width:100%;height:100%;border-radius:14px;object-fit:cover;" onerror="this.onerror=null;this.parentElement.innerHTML='🐱‍👤';">`;
-            sidebarLogo.style.background = "transparent";
-            sidebarLogo.style.padding = "0";
-            mainLogo.innerHTML = `<img src="${LOGO_CONFIG.imageUrl}" class="logo-img" style="width:100%;height:100%;border-radius:12px;object-fit:cover;" onerror="this.onerror=null;this.parentElement.innerHTML='🐱‍👤';">`;
-            mainLogo.style.background = "transparent";
-        }
-    }
-    
-    // Sidebar control
-    function openSidebar() {
-        document.getElementById("sidebar").classList.add("active");
-        document.getElementById("overlay").classList.add("active");
-    }
-    function closeSidebar() {
-        document.getElementById("sidebar").classList.remove("active");
-        document.getElementById("overlay").classList.remove("active");
-    }
-    
-    // Gesture Swipe untuk Android
-    let touchStart = 0;
-    let touchEnd = 0;
-    function handleTouchStart(e) {
-        touchStart = e.changedTouches[0].screenX;
+        const div = document.createElement('div')
+        div.textContent = text
+        return div.innerHTML
     }
-    function handleTouchEnd(e) {
-        touchEnd = e.changedTouches[0].screenX;
-        const diff = touchEnd - touchStart;
-        if (diff > 60 && touchStart < 40) {
-            openSidebar();
-        } else if (diff < -50) {
-            closeSidebar();
+
+    // TAMBAHAN: Fix untuk keyboard Android
+    function fixAndroidKeyboard() {
+        const input = document.getElementById("messageInput")
+        if (input) {
+            input.addEventListener("focus", function() {
+                setTimeout(() => {
+                    document.querySelector('.chat-area').scrollTop = document.querySelector('.chat-area').scrollHeight
+                }, 300)
+            })
         }
     }
-    
-    // fix keyboard Android dan scroll otomatis saat fokus
-    function fixAndroidUX() {
-        const input = document.getElementById("messageInput");
-        input.addEventListener("focus", () => {
-            setTimeout(() => {
-                const chatArea = document.getElementById("chatArea");
-                chatArea.scrollTop = chatArea.scrollHeight;
-            }, 200);
-        });
+
+    // TAMBAHAN: Deteksi Android dan tambah kelas khusus
+    function detectAndroid() {
+        const userAgent = navigator.userAgent.toLowerCase()
+        const isAndroid = userAgent.indexOf("android") > -1
         
-        // resize viewport handling
-        let vh = window.innerHeight * 0.01;
-        document.documentElement.style.setProperty('--vh', `${vh}px`);
-        window.addEventListener('resize', () => {
-            let newVh = window.innerHeight * 0.01;
-            document.documentElement.style.setProperty('--vh', `${newVh}px`);
-            const chatArea = document.getElementById("chatArea");
-            if (chatArea) chatArea.scrollTop = chatArea.scrollHeight;
-        });
-    }
-    
-    // Detect Android
-    function detectAndroidAndOptimize() {
-        const isAndroid = /android/i.test(navigator.userAgent);
         if (isAndroid) {
-            document.body.classList.add("android");
-            // Tambah CSS inline untuk meningkatkan touch response
-            const style = document.createElement('style');
-            style.textContent = `
-                .history-item, .new-chat, .menu-btn, button.send {
-                    cursor: pointer;
-                    touch-action: manipulation;
-                }
-                input {
-                    font-size: 16px !important; /* prevent zoom on focus iOS/Android */
-                }
-            `;
-            document.head.appendChild(style);
+            document.body.classList.add("android-device")
+            console.log("✅ Android device detected - optimized layout")
         }
     }
+
+    document.getElementById("messageInput").addEventListener("keypress", function(e) {
+        if (e.key === "Enter") sendMessage()
+    })
+
+    // TAMBAHAN: Swipe gesture untuk Android (geser kanan buka sidebar)
+    let touchStartX = 0
+    let touchEndX = 0
     
-    // Event binding
-    function bindEvents() {
-        document.getElementById("menuBtn").addEventListener("click", openSidebar);
-        document.getElementById("overlay").addEventListener("click", closeSidebar);
-        document.getElementById("newChatBtn").addEventListener("click", () => createNewChat());
-        document.getElementById("sendBtn").addEventListener("click", () => sendMessage());
-        document.getElementById("messageInput").addEventListener("keypress", (e) => {
-            if (e.key === "Enter") sendMessage();
-        });
-        document.addEventListener('touchstart', handleTouchStart, false);
-        document.addEventListener('touchend', handleTouchEnd, false);
-    }
-    
-    // Inisialisasi menyeluruh
-    function init() {
-        loadStorage();
-        initLogos();
-        renderChat();
-        renderHistory();
-        bindEvents();
-        detectAndroidAndOptimize();
-        fixAndroidUX();
-        // pastikan sidebar bisa close dengan overlay
-        const overlay = document.getElementById("overlay");
-        if(overlay) overlay.addEventListener('touchstart', closeSidebar);
-    }
+    document.addEventListener('touchstart', function(e) {
+        touchStartX = e.changedTouches[0].screenX
+    }, false)
     
-    // Saat dokumen siap
-    document.addEventListener("DOMContentLoaded", init);
+    document.addEventListener('touchend', function(e) {
+        touchEndX = e.changedTouches[0].screenX
+        const swipeDistance = touchEndX - touchStartX
+        
+        // Geser kanan lebih dari 50px untuk buka sidebar
+        if (swipeDistance > 50 && touchStartX < 50) {
+            openSidebar()
+        }
+        
+        // Geser kiri lebih dari 50px untuk tutup sidebar
+        if (swipeDistance < -50) {
+            closeSidebar()
+        }
+    }, false)
+
+    // Inisialisasi logo saat halaman load
+    initLogos()
+    loadChats()
+    detectAndroid()
+    fixAndroidKeyboard()
 </script>
+
 </body>
 </html>