Update app.py

app.py

@@ -19,6 +19,7 @@
         body {
             background: #0a0c15;
             overflow: hidden;
+            /* TAMBAHAN UNTUK ANDROID */
             -webkit-tap-highlight-color: transparent;
             touch-action: pan-x pan-y;
         }
@@ -30,26 +31,25 @@
             display: flex;
             height: 100vh;
             width: 100%;
-            position: relative;
         }
 
         /* =========================
-        SIDEBAR - DARK NEO (MOBILE FIRST)
+        SIDEBAR - DARK NEO
         ========================= */
         .sidebar {
-            width: 280px;
+            width: 300px;
             background: linear-gradient(180deg, #0f111a 0%, #080a10 100%);
-            backdrop-filter: blur(20px);
+            backdrop-filter: blur(10px);
             color: #e8edff;
             display: flex;
             flex-direction: column;
-            padding: 20px 16px;
+            padding: 24px 20px;
             position: fixed;
-            left: -100%;
+            left: -320px;
             top: 0;
             height: 100vh;
-            z-index: 1000;
-            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 999;
+            transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             border-right: 1px solid rgba(0, 255, 255, 0.15);
             box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
         }
@@ -61,52 +61,44 @@
         .sidebar-header {
             display: flex;
             align-items: center;
-            margin-bottom: 25px;
-            padding-bottom: 15px;
+            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: 100%;
-            height: 100%;
-            border-radius: 14px;
+            width: 55px;
+            height: 55px;
+            border-radius: 16px;
             object-fit: cover;
         }
 
-        .sidebar-header div:last-child {
-            min-width: 0;
-            flex: 1;
-        }
-
         .sidebar h2 {
-            font-size: 22px;
+            font-size: 26px;
             letter-spacing: -0.5px;
             background: linear-gradient(135deg, #00d4ff, #4d9eff);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
         }
 
         .sidebar p {
             color: #6c7a9e;
-            font-size: 11px;
+            font-size: 13px;
         }
 
         .new-chat {
@@ -114,43 +106,42 @@
             border: none;
             color: #0a0c15;
             font-weight: bold;
-            padding: 12px;
-            border-radius: 12px;
-            font-size: 14px;
+            padding: 14px;
+            border-radius: 14px;
+            font-size: 16px;
             cursor: pointer;
-            margin-bottom: 20px;
+            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.98);
+        .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.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.2);
-            transform: translateX(4px);
+        .history-item:hover {
+            background: rgba(0, 212, 255, 0.15);
+            border-color: rgba(0, 212, 255, 0.4);
+            transform: translateX(5px);
         }
 
         /* =========================
@@ -160,17 +151,14 @@
             position: fixed;
             width: 100%;
             height: 100vh;
-            background: rgba(0, 0, 0, 0.7);
-            backdrop-filter: blur(4px);
-            z-index: 999;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(3px);
+            z-index: 998;
             display: none;
-            opacity: 0;
-            transition: opacity 0.3s ease;
         }
 
         .overlay.active {
             display: block;
-            opacity: 1;
         }
 
         /* =========================
@@ -181,95 +169,82 @@
             flex-direction: column;
             width: 100%;
             background: #0a0c15;
-            position: relative;
         }
 
         /* =========================
         TOPBAR - NEO MASCULINE
         ========================= */
         .topbar {
-            height: 65px;
+            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);
-            position: sticky;
-            top: 0;
-            z-index: 10;
         }
 
         .menu-btn {
-            font-size: 24px;
-            margin-right: 12px;
+            font-size: 28px;
+            margin-right: 20px;
             cursor: pointer;
             transition: 0.2s;
             color: #00d4ff;
-            padding: 8px;
-            border-radius: 8px;
         }
 
-        .menu-btn:active {
-            background: rgba(0, 212, 255, 0.1);
-            transform: scale(0.95);
+        .menu-btn:hover {
+            transform: scale(1.1);
+            text-shadow: 0 0 8px #00d4ff;
         }
 
+        /* LOGO AREA - DENGAN GAMBAR */
         .logo {
-            width: 42px;
-            height: 42px;
-            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;
+            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;
-        }
-
-        .title {
-            min-width: 0;
-            flex: 1;
+            font-size: 28px;
         }
 
         .title h1 {
-            font-size: 18px;
+            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;
-            overflow: hidden;
-            text-overflow: ellipsis;
         }
 
         .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;
         }
@@ -280,31 +255,30 @@
         .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;
             border-radius: 10px;
         }
-        
         .chat-area::-webkit-scrollbar-thumb {
             background: #00d4ff;
             border-radius: 10px;
         }
 
         .message {
-            max-width: 85%;
-            padding: 12px 16px;
-            border-radius: 18px;
-            margin-bottom: 12px;
-            font-size: 14px;
+            max-width: 75%;
+            padding: 14px 20px;
+            border-radius: 20px;
+            margin-bottom: 20px;
+            font-size: 16px;
             line-height: 1.5;
             word-wrap: break-word;
             animation: fadeInUp 0.3s ease;
@@ -326,9 +300,8 @@
             backdrop-filter: blur(10px);
             border: 1px solid rgba(0, 212, 255, 0.2);
             color: #d0d9ff;
-            border-bottom-left-radius: 4px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-            margin-right: auto;
+            border-bottom-left-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }
 
         .user {
@@ -336,8 +309,8 @@
             color: #0a0c15;
             font-weight: 600;
             margin-left: auto;
-            border-bottom-right-radius: 4px;
-            box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
+            border-bottom-right-radius: 6px;
+            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
         }
 
         /* =========================
@@ -345,26 +318,23 @@
         ========================= */
         .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);
-            position: sticky;
-            bottom: 0;
         }
 
         input {
             flex: 1;
             border: 1px solid rgba(0, 212, 255, 0.3);
             background: rgba(18, 22, 40, 0.8);
-            border-radius: 24px;
-            padding: 12px 18px;
-            font-size: 14px;
+            border-radius: 18px;
+            padding: 16px 22px;
+            font-size: 16px;
             outline: none;
             color: #e8edff;
             transition: all 0.2s;
-            -webkit-appearance: none;
         }
 
         input:focus {
@@ -381,150 +351,131 @@
             background: linear-gradient(135deg, #00d4ff, #0099ff);
             color: #0a0c15;
             font-weight: bold;
-            padding: 0 20px;
-            border-radius: 24px;
-            font-size: 14px;
+            padding: 0 32px;
+            border-radius: 18px;
+            font-size: 16px;
             cursor: pointer;
             transition: 0.2s;
             display: flex;
             align-items: center;
-            gap: 6px;
-            white-space: nowrap;
+            gap: 8px;
         }
 
-        button.send:active {
-            transform: scale(0.97);
+        button.send:hover {
+            transform: scale(1.02);
+            box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
         }
 
         /* =========================
-        RESPONSIVE UNTUK TABLET & DESKTOP
+        RESPONSIVE UNTUK ANDROID
         ========================= */
-        @media (min-width: 768px) {
+        @media (max-width: 768px) {
             .sidebar {
-                width: 300px;
-                left: -320px;
+                width: 85%;
             }
-            
             .message {
-                max-width: 70%;
+                max-width: 90%;
                 font-size: 15px;
             }
-            
             .topbar {
-                height: 72px;
+                padding: 0 20px;
+            }
+            .input-area {
+                padding: 15px 20px;
+            }
+            button.send {
                 padding: 0 24px;
             }
-            
+        }
+
+        /* TAMBAHAN KHUSUS UNTUK ANDROID */
+        @media (max-width: 480px) {
+            .topbar {
+                height: 65px;
+                padding: 0 15px;
+            }
             .menu-btn {
-                font-size: 28px;
-                margin-right: 20px;
+                font-size: 24px;
+                margin-right: 12px;
             }
-            
             .logo {
-                width: 50px;
-                height: 50px;
+                width: 40px;
+                height: 40px;
             }
-            
             .title h1 {
-                font-size: 22px;
+                font-size: 18px;
             }
-            
             .title p {
-                font-size: 12px;
+                font-size: 10px;
+            }
+            .chat-area {
+                padding: 15px;
+            }
+            .message {
+                padding: 10px 14px;
+                font-size: 14px;
+                max-width: 95%;
+            }
+            .input-area {
+                padding: 10px 15px;
+                gap: 10px;
+            }
+            input {
+                padding: 12px 16px;
+                font-size: 14px;
+            }
+            button.send {
+                padding: 0 18px;
+                font-size: 14px;
+            }
+            .sidebar {
+                width: 80%;
+                padding: 20px 15px;
+            }
+            .sidebar-logo {
+                width: 45px;
+                height: 45px;
+                font-size: 24px;
+            }
+            .sidebar h2 {
+                font-size: 22px;
+            }
+            .new-chat {
+                padding: 12px;
+                font-size: 14px;
+            }
+            .history-item {
+                padding: 12px 15px;
+                font-size: 13px;
             }
         }
 
-        /* Landscape mode optimization */
+        /* TAMBAHAN UNTUK LANDSCAPE MODE ANDROID */
         @media (max-width: 900px) and (orientation: landscape) {
-            .sidebar {
-                width: 260px;
-            }
-            
             .topbar {
                 height: 55px;
             }
-            
-            .logo {
-                width: 36px;
-                height: 36px;
-            }
-            
-            .title h1 {
-                font-size: 16px;
-            }
-            
             .chat-area {
-                padding: 10px;
+                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 16px;
+                padding: 0 20px;
             }
         }
-
-        /* Loading animation */
-        .loading-dots {
-            display: inline-flex;
-            gap: 4px;
-            align-items: center;
-        }
-        
-        .loading-dots span {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: #00d4ff;
-            animation: bounce 1.4s infinite ease-in-out both;
-        }
-        
-        .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
-        .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
-        
-        @keyframes bounce {
-            0%, 80%, 100% { transform: scale(0); }
-            40% { transform: scale(1); }
-        }
-        
-        /* Toast notification */
-        .toast {
-            position: fixed;
-            bottom: 80px;
-            left: 50%;
-            transform: translateX(-50%) translateY(100px);
-            background: rgba(0, 212, 255, 0.9);
-            color: #0a0c15;
-            padding: 10px 20px;
-            border-radius: 30px;
-            font-size: 13px;
-            font-weight: bold;
-            z-index: 1001;
-            transition: transform 0.3s ease;
-            white-space: nowrap;
-            pointer-events: none;
-        }
-        
-        .toast.show {
-            transform: translateX(-50%) translateY(0);
-        }
     </style>
 </head>
 <body>
 
-<div class="overlay" id="overlay"></div>
-<div class="toast" id="toast"></div>
+<div class="overlay" id="overlay" onclick="closeSidebar()"></div>
 
 <div class="app">
 
@@ -532,6 +483,7 @@
     <div class="sidebar" id="sidebar">
         <div class="sidebar-header">
             <div class="sidebar-logo" id="sidebarLogo">
+                <!-- Logo akan diisi JS -->
                 🐱‍👤
             </div>
             <div>
@@ -539,7 +491,7 @@
                 <p>Neo Intelligence</p>
             </div>
         </div>
-        <button class="new-chat" onclick="createNewChat()">✨ New Chat</button>
+        <button class="new-chat" onclick="createNewChat()">+ New Chat</button>
         <div class="chat-history" id="chatHistory"></div>
     </div>
 
@@ -547,8 +499,9 @@
     <div class="main">
         <!-- TOPBAR -->
         <div class="topbar">
-            <div class="menu-btn" onclick="toggleSidebar()">☰</div>
+            <div class="menu-btn" onclick="openSidebar()">☰</div>
             <div class="logo" id="mainLogo">
+                <!-- Logo akan diisi JS -->
                 🐱‍👤
             </div>
             <div class="title">
@@ -567,303 +520,210 @@
 
         <!-- INPUT -->
         <div class="input-area">
-            <input type="text" id="messageInput" placeholder="Ketik pesan..." autocomplete="off" />
+            <input type="text" id="messageInput" placeholder="Ketik pesan bro..." />
             <button class="send" onclick="sendMessage()">
-                📤 Kirim
+                <span></span> Kirim
             </button>
         </div>
     </div>
 </div>
 
 <script>
-    let currentChatId = null;
-    let isLoading = false;
+    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
+    
     const LOGO_CONFIG = {
-        mode: "emoji",  // "emoji", "image", atau "svg"
-        emoji: "🐱‍🚀",
-        imageUrl: "/static/logo.png",
-        imageUrl2: "https://cdn-icons-png.flaticon.com/512/1998/1998592.png",
-        svgIcon: "⚡🐱⚡"
+        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 initLogos() {
-        const sidebarLogo = document.getElementById("sidebarLogo");
-        const mainLogo = document.getElementById("mainLogo");
+        const sidebarLogo = document.getElementById("sidebarLogo")
+        const mainLogo = document.getElementById("mainLogo")
         
         if (LOGO_CONFIG.mode === "emoji") {
-            sidebarLogo.innerHTML = LOGO_CONFIG.emoji;
-            sidebarLogo.style.fontSize = "28px";
-            sidebarLogo.style.background = "linear-gradient(135deg, #00d4ff, #0099ff)";
-            mainLogo.innerHTML = LOGO_CONFIG.emoji;
-            mainLogo.style.fontSize = "24px";
-            mainLogo.style.background = "linear-gradient(135deg, #00d4ff, #0099ff)";
+            // 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") {
-            sidebarLogo.innerHTML = `<img src="${LOGO_CONFIG.imageUrl}" class="sidebar-logo-img" onerror="this.src='${LOGO_CONFIG.imageUrl2}'">`;
-            sidebarLogo.style.background = "transparent";
-            mainLogo.innerHTML = `<img src="${LOGO_CONFIG.imageUrl}" class="logo-img" onerror="this.src='${LOGO_CONFIG.imageUrl2}'">`;
-            mainLogo.style.background = "transparent";
-        } else {
-            sidebarLogo.innerHTML = LOGO_CONFIG.svgIcon;
-            sidebarLogo.style.fontSize = "26px";
-            mainLogo.innerHTML = LOGO_CONFIG.svgIcon;
-            mainLogo.style.fontSize = "22px";
-        }
-    }
-
-    function showToast(message, isError = false) {
-        const toast = document.getElementById("toast");
-        toast.textContent = message;
-        toast.style.background = isError ? "rgba(255, 68, 68, 0.95)" : "rgba(0, 212, 255, 0.95)";
-        toast.classList.add("show");
-        setTimeout(() => {
-            toast.classList.remove("show");
-        }, 2000);
-    }
-
-    function toggleSidebar() {
-        const sidebar = document.getElementById("sidebar");
-        const overlay = document.getElementById("overlay");
-        
-        if (sidebar.classList.contains("active")) {
-            closeSidebar();
+            // 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 {
-            openSidebar();
+            // 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 openSidebar() {
-        document.getElementById("sidebar").classList.add("active");
-        document.getElementById("overlay").classList.add("active");
+        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");
+        document.getElementById("sidebar").classList.remove("active")
+        document.getElementById("overlay").classList.remove("active")
     }
 
-    // Close sidebar when clicking overlay
-    document.getElementById("overlay").addEventListener("click", closeSidebar);
-
     async function createNewChat() {
-        try {
-            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>
-            `;
-            await loadChats();
-            closeSidebar();
-            showToast("Chat baru dibuat!");
-        } catch (error) {
-            console.error("Error creating new chat:", error);
-            showToast("Gagal membuat chat baru", true);
-        }
+        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()
     }
 
     async function loadChats() {
-        try {
-            const response = await fetch("/get_chats");
-            const chats = await response.json();
-            const history = document.getElementById("chatHistory");
-            
-            if (chats.length === 0) {
-                history.innerHTML = `<div style="text-align: center; color: #6c7a9e; padding: 20px;">Belum ada chat</div>`;
-                return;
-            }
-            
-            history.innerHTML = "";
-            chats.forEach(chat => {
-                const div = document.createElement("div");
-                div.className = "history-item";
-                div.innerHTML = `💬 ${escapeHtml(chat.title)}`;
-                div.onclick = () => loadChat(chat.chat_id);
-                history.appendChild(div);
-            });
-        } catch (error) {
-            console.error("Error loading chats:", error);
-        }
+        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>
+            `
+        })
     }
 
     async function loadChat(chatId) {
-        try {
-            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}">${escapeHtml(msg.content)}</div>`;
-            });
-            chatArea.scrollTop = chatArea.scrollHeight;
-            closeSidebar();
-        } catch (error) {
-            console.error("Error loading chat:", error);
-            showToast("Gagal memuat chat", true);
-        }
-    }
-
-    function addLoadingIndicator() {
-        const chatArea = document.getElementById("chatArea");
-        const loadingDiv = document.createElement("div");
-        loadingDiv.className = "message bot";
-        loadingDiv.id = "loadingIndicator";
-        loadingDiv.innerHTML = `<span style="font-weight: bold;">⚡ ChibiCat Neo</span><br><div class="loading-dots"><span></span><span></span><span></span></div>`;
-        chatArea.appendChild(loadingDiv);
-        chatArea.scrollTop = chatArea.scrollHeight;
-    }
-
-    function removeLoadingIndicator() {
-        const indicator = document.getElementById("loadingIndicator");
-        if (indicator) indicator.remove();
+        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() {
-        if (isLoading) return;
-        
-        const input = document.getElementById("messageInput");
-        const message = input.value.trim();
-        if (message === "") return;
+        const input = document.getElementById("messageInput")
+        const message = input.value.trim()
+        if (message === "") return
 
-        isLoading = true;
-        const chatArea = document.getElementById("chatArea");
+        const chatArea = document.getElementById("chatArea")
 
-        // Add user message
-        chatArea.innerHTML += `<div class="message user">${escapeHtml(message)}</div>`;
-        input.value = "";
-        chatArea.scrollTop = chatArea.scrollHeight;
-        
-        // Add loading indicator
-        addLoadingIndicator();
+        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 })
-            });
-            
-            if (!response.ok) throw new Error("Network response was not ok");
-            
-            const data = await response.json();
-            removeLoadingIndicator();
-            chatArea.innerHTML += `<div class="message bot">${escapeHtml(data.reply)}</div>`;
-            chatArea.scrollTop = chatArea.scrollHeight;
-            await loadChats();
+            })
+            const data = await response.json()
+            chatArea.innerHTML += `<div class="message bot">${escapeHtml(data.reply)}</div>`
+            chatArea.scrollTop = chatArea.scrollHeight
+            loadChats()
         } catch (error) {
-            console.error("Error sending message:", error);
-            removeLoadingIndicator();
-            chatArea.innerHTML += `<div class="message bot">⚠️ Server error, coba lagi nanti bro 😭</div>`;
-            chatArea.scrollTop = chatArea.scrollHeight;
-            showToast("Gagal mengirim pesan", true);
-        } finally {
-            isLoading = false;
+            chatArea.innerHTML += `<div class="message bot">⚠️ Server error, coba lagi bro 😭</div>`
         }
     }
 
+    // TAMBAHAN: Fungsi untuk menghindari XSS dan support emoji di Android
     function escapeHtml(text) {
-        if (!text) return "";
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
+        const div = document.createElement('div')
+        div.textContent = text
+        return div.innerHTML
     }
 
-    // Fix untuk keyboard di mobile
-    function fixMobileKeyboard() {
-        const input = document.getElementById("messageInput");
-        const chatArea = document.querySelector('.chat-area');
-        
-        input.addEventListener("focus", () => {
-            setTimeout(() => {
-                chatArea.scrollTop = chatArea.scrollHeight;
-            }, 300);
-        });
-        
-        // Prevent zoom on input focus (iOS)
-        input.style.fontSize = "16px";
+    // 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)
+            })
+        }
     }
 
-    // Swipe gesture untuk Android
-    let touchStartX = 0;
-    let touchEndX = 0;
-    
-    document.addEventListener('touchstart', (e) => {
-        touchStartX = e.changedTouches[0].screenX;
-    }, { passive: true });
-    
-    document.addEventListener('touchend', (e) => {
-        touchEndX = e.changedTouches[0].screenX;
-        const swipeDistance = touchEndX - touchStartX;
-        const sidebar = document.getElementById("sidebar");
+    // TAMBAHAN: Deteksi Android dan tambah kelas khusus
+    function detectAndroid() {
+        const userAgent = navigator.userAgent.toLowerCase()
+        const isAndroid = userAgent.indexOf("android") > -1
         
-        if (swipeDistance > 50 && touchStartX < 50 && !sidebar.classList.contains("active")) {
-            openSidebar();
-        } else if (swipeDistance < -50 && sidebar.classList.contains("active")) {
-            closeSidebar();
-        }
-    }, { passive: true });
-
-    // Enter to send
-    document.getElementById("messageInput").addEventListener("keypress", (e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            sendMessage();
-        }
-    });
-
-    // Prevent body scroll when sidebar is open
-    function preventBodyScroll(shouldPrevent) {
-        if (shouldPrevent) {
-            document.body.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = '';
+        if (isAndroid) {
+            document.body.classList.add("android-device")
+            console.log("✅ Android device detected - optimized layout")
         }
     }
 
-    // Observer for sidebar state
-    const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            if (mutation.attributeName === 'class') {
-                const sidebar = document.getElementById("sidebar");
-                preventBodyScroll(sidebar.classList.contains("active"));
-            }
-        });
-    });
-    
-    observer.observe(document.getElementById("sidebar"), { attributes: true });
+    document.getElementById("messageInput").addEventListener("keypress", function(e) {
+        if (e.key === "Enter") sendMessage()
+    })
 
-    // Detect device and add appropriate classes
-    function detectDevice() {
-        const ua = navigator.userAgent.toLowerCase();
-        const isAndroid = ua.includes("android");
-        const isIOS = /iphone|ipad|ipod/.test(ua);
+    // TAMBAHAN: Swipe gesture untuk Android (geser kanan buka sidebar)
+    let touchStartX = 0
+    let touchEndX = 0
+    
+    document.addEventListener('touchstart', function(e) {
+        touchStartX = e.changedTouches[0].screenX
+    }, false)
+    
+    document.addEventListener('touchend', function(e) {
+        touchEndX = e.changedTouches[0].screenX
+        const swipeDistance = touchEndX - touchStartX
         
-        if (isAndroid) {
-            document.body.classList.add("android-device");
-        } else if (isIOS) {
-            document.body.classList.add("ios-device");
+        // 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)
 
-    // Initialize everything
-    initLogos();
-    loadChats();
-    detectDevice();
-    fixMobileKeyboard();
-    
-    // Scroll to bottom on initial load
-    setTimeout(() => {
-        const chatArea = document.getElementById("chatArea");
-        chatArea.scrollTop = chatArea.scrollHeight;
-    }, 100);
+    // Inisialisasi logo saat halaman load
+    initLogos()
+    loadChats()
+    detectAndroid()
+    fixAndroidKeyboard()
 </script>
 
 </body>