Update templates/index.html

templates/index.html

@@ -23,30 +23,33 @@
             touch-action: pan-x pan-y;
         }
 
-        /* APP LAYOUT */
+        /* =========================
+        APP
+        ========================= */
         .app {
             display: flex;
             height: 100vh;
             width: 100%;
-            position: relative;
         }
 
-        /* SIDEBAR MODERN */
+        /* =========================
+        SIDEBAR - DARK NEO
+        ========================= */
         .sidebar {
-            position: fixed;
-            left: -100%;
-            top: 0;
-            width: 85%;
-            max-width: 320px;
-            height: 100vh;
+            width: 280px;
             background: linear-gradient(180deg, #0f111a 0%, #080a10 100%);
-            backdrop-filter: blur(20px);
-            z-index: 1000;
-            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            padding: 20px 16px;
+            backdrop-filter: blur(10px);
+            color: #e8edff;
             display: flex;
             flex-direction: column;
-            border-right: 1px solid rgba(0, 255, 255, 0.2);
+            padding: 20px 16px;
+            position: fixed;
+            left: -300px;
+            top: 0;
+            height: 100vh;
+            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);
         }
 
@@ -57,9 +60,8 @@
         .sidebar-header {
             display: flex;
             align-items: center;
-            gap: 12px;
-            margin-bottom: 30px;
-            padding-bottom: 20px;
+            margin-bottom: 25px;
+            padding-bottom: 16px;
             border-bottom: 1px solid rgba(0, 212, 255, 0.2);
         }
 
@@ -71,28 +73,31 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            overflow: hidden;
+            font-size: 28px;
+            margin-right: 12px;
+            box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
             flex-shrink: 0;
         }
 
         .sidebar-logo-img {
-            width: 100%;
-            height: 100%;
+            width: 50px;
+            height: 50px;
+            border-radius: 14px;
             object-fit: cover;
         }
 
-        .sidebar-header h2 {
+        .sidebar h2 {
             font-size: 22px;
+            letter-spacing: -0.5px;
             background: linear-gradient(135deg, #00d4ff, #4d9eff);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
         }
 
-        .sidebar-header p {
+        .sidebar p {
             color: #6c7a9e;
             font-size: 11px;
-            margin-top: 2px;
         }
 
         .new-chat {
@@ -100,9 +105,9 @@
             border: none;
             color: #0a0c15;
             font-weight: bold;
-            padding: 14px;
+            padding: 12px;
             border-radius: 14px;
-            font-size: 15px;
+            font-size: 14px;
             cursor: pointer;
             margin-bottom: 25px;
             transition: all 0.2s;
@@ -111,105 +116,102 @@
         }
 
         .new-chat:active {
-            transform: scale(0.98);
+            transform: scale(0.97);
         }
 
         .chat-history {
             flex: 1;
             overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
+            -webkit-overflow-scrolling: touch;
         }
 
         .history-item {
             background: rgba(18, 22, 40, 0.7);
             backdrop-filter: blur(5px);
-            padding: 12px 16px;
+            padding: 12px 14px;
             border-radius: 12px;
+            margin-bottom: 10px;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: 0.15s;
             border: 1px solid rgba(0, 212, 255, 0.1);
-            font-size: 13px;
             font-weight: 500;
-            color: #e8edff;
+            font-size: 13px;
+            word-break: break-word;
         }
 
         .history-item:active {
-            background: rgba(0, 212, 255, 0.2);
-            transform: translateX(5px);
+            background: rgba(0, 212, 255, 0.25);
+            transform: translateX(4px);
         }
 
-        /* OVERLAY */
+        /* =========================
+        OVERLAY
+        ========================= */
         .overlay {
             position: fixed;
-            top: 0;
-            left: 0;
             width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            backdrop-filter: blur(4px);
-            z-index: 999;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(3px);
+            z-index: 998;
             display: none;
-            transition: all 0.3s;
+            transition: 0.2s;
         }
 
         .overlay.active {
             display: block;
         }
 
-        /* MAIN AREA */
+        /* =========================
+        MAIN - CYBER DARK
+        ========================= */
         .main {
-            flex: 1;
             display: flex;
             flex-direction: column;
             width: 100%;
             background: #0a0c15;
         }
 
-        /* TOPBAR */
+        /* =========================
+        TOPBAR - MOBILE FRIENDLY
+        ========================= */
         .topbar {
-            height: 65px;
+            height: 64px;
             background: rgba(10, 12, 21, 0.95);
             backdrop-filter: blur(10px);
             display: flex;
             align-items: center;
             padding: 0 16px;
-            gap: 12px;
+            color: #e8edff;
             border-bottom: 1px solid rgba(0, 212, 255, 0.3);
-            position: sticky;
-            top: 0;
-            z-index: 10;
+            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
+            flex-shrink: 0;
         }
 
         .menu-btn {
             font-size: 26px;
+            margin-right: 12px;
             cursor: pointer;
+            transition: 0.15s;
             color: #00d4ff;
-            transition: 0.2s;
-            padding: 8px;
-            -webkit-tap-highlight-color: transparent;
+            padding: 8px 4px;
+            touch-action: manipulation;
         }
 
         .menu-btn:active {
-            transform: scale(0.9);
-        }
-
-        .logo-area {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            flex: 1;
+            transform: scale(0.92);
         }
 
         .logo {
-            width: 42px;
-            height: 42px;
+            width: 44px;
+            height: 44px;
             border-radius: 12px;
             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);
             overflow: hidden;
             flex-shrink: 0;
         }
@@ -218,14 +220,21 @@
             width: 100%;
             height: 100%;
             object-fit: cover;
+            border-radius: 12px;
+        }
+
+        .logo-icon {
+            font-size: 24px;
         }
 
         .title h1 {
             font-size: 18px;
+            letter-spacing: -0.3px;
             background: linear-gradient(135deg, #e8edff, #00d4ff);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
+            white-space: nowrap;
         }
 
         .title p {
@@ -240,13 +249,16 @@
             content: "●";
             font-size: 8px;
             color: #00ff88;
+            text-shadow: 0 0 5px #00ff88;
         }
 
-        /* CHAT AREA */
+        /* =========================
+        CHAT AREA - OPTIMIZED SCROLL
+        ========================= */
         .chat-area {
             flex: 1;
             overflow-y: auto;
-            padding: 20px 16px;
+            padding: 16px;
             background: linear-gradient(180deg, #0a0c15 0%, #0f111a 100%);
             -webkit-overflow-scrolling: touch;
         }
@@ -254,31 +266,30 @@
         .chat-area::-webkit-scrollbar {
             width: 4px;
         }
-
         .chat-area::-webkit-scrollbar-track {
             background: #1a1f2e;
+            border-radius: 10px;
         }
-
         .chat-area::-webkit-scrollbar-thumb {
             background: #00d4ff;
             border-radius: 10px;
         }
 
         .message {
-            max-width: 90%;
+            max-width: 85%;
             padding: 12px 16px;
             border-radius: 20px;
-            margin-bottom: 16px;
-            font-size: 14px;
-            line-height: 1.5;
+            margin-bottom: 14px;
+            font-size: 15px;
+            line-height: 1.45;
             word-wrap: break-word;
-            animation: fadeInUp 0.3s ease;
+            animation: fadeInUp 0.25s ease;
         }
 
         @keyframes fadeInUp {
             from {
                 opacity: 0;
-                transform: translateY(10px);
+                transform: translateY(8px);
             }
             to {
                 opacity: 1;
@@ -292,7 +303,7 @@
             border: 1px solid rgba(0, 212, 255, 0.2);
             color: #d0d9ff;
             border-bottom-left-radius: 6px;
-            align-self: flex-start;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
         }
 
         .user {
@@ -301,28 +312,29 @@
             font-weight: 600;
             margin-left: auto;
             border-bottom-right-radius: 6px;
-            align-self: flex-end;
+            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.25);
         }
 
-        /* INPUT AREA */
+        /* =========================
+        INPUT AREA - LANDING THUMB
+        ========================= */
         .input-area {
             display: flex;
-            gap: 10px;
             padding: 12px 16px;
+            gap: 10px;
             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;
+            flex-shrink: 0;
         }
 
         input {
             flex: 1;
             border: 1px solid rgba(0, 212, 255, 0.3);
             background: rgba(18, 22, 40, 0.8);
-            border-radius: 25px;
+            border-radius: 30px;
             padding: 12px 18px;
-            font-size: 14px;
+            font-size: 15px;
             outline: none;
             color: #e8edff;
             transition: all 0.2s;
@@ -343,139 +355,144 @@
             color: #0a0c15;
             font-weight: bold;
             padding: 0 20px;
-            border-radius: 25px;
+            border-radius: 30px;
             font-size: 14px;
             cursor: pointer;
-            transition: all 0.2s;
-            white-space: nowrap;
+            transition: 0.15s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            touch-action: manipulation;
         }
 
         button.send:active {
             transform: scale(0.96);
         }
 
-        /* RESPONSIVE BREAKPOINTS */
-        @media (min-width: 768px) {
+        /* =========================
+        RESPONSIVE BREAKPOINTS - ANDROID FIRST
+        ========================= */
+        @media (max-width: 600px) {
             .sidebar {
-                width: 300px;
-                left: -320px;
+                width: 85%;
+                max-width: 280px;
             }
-            
             .message {
-                max-width: 75%;
-                font-size: 15px;
+                max-width: 92%;
+                font-size: 14px;
+                padding: 10px 14px;
+            }
+            .chat-area {
+                padding: 12px;
             }
-            
             .topbar {
-                padding: 0 24px;
+                height: 58px;
             }
-            
-            .chat-area {
-                padding: 24px;
+            .title h1 {
+                font-size: 16px;
+            }
+            .logo {
+                width: 38px;
+                height: 38px;
             }
         }
 
         @media (max-width: 480px) {
-            .message {
-                max-width: 95%;
-                padding: 10px 14px;
-                font-size: 13px;
-            }
-            
             .topbar {
-                height: 60px;
+                height: 56px;
                 padding: 0 12px;
             }
-            
             .menu-btn {
                 font-size: 24px;
+                margin-right: 8px;
             }
-            
             .logo {
-                width: 38px;
-                height: 38px;
+                width: 36px;
+                height: 36px;
+                margin-right: 8px;
             }
-            
             .title h1 {
-                font-size: 16px;
+                font-size: 15px;
+            }
+            .title p {
+                font-size: 9px;
+            }
+            .chat-area {
+                padding: 10px;
+            }
+            .message {
+                padding: 9px 12px;
+                font-size: 13.5px;
+                max-width: 95%;
+                margin-bottom: 12px;
             }
-            
             .input-area {
                 padding: 10px 12px;
                 gap: 8px;
             }
-            
             input {
                 padding: 10px 14px;
-                font-size: 13px;
+                font-size: 14px;
             }
-            
             button.send {
                 padding: 0 16px;
                 font-size: 13px;
             }
+            .sidebar {
+                width: 85%;
+                padding: 16px 12px;
+            }
+            .sidebar-logo {
+                width: 44px;
+                height: 44px;
+                font-size: 24px;
+            }
+            .sidebar h2 {
+                font-size: 20px;
+            }
+            .new-chat {
+                padding: 10px;
+                font-size: 13px;
+            }
+            .history-item {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
         }
 
-        /* Landscape mode */
+        /* Landscape mode Android */
         @media (max-width: 900px) and (orientation: landscape) {
             .topbar {
-                height: 50px;
+                height: 52px;
             }
-            
             .chat-area {
-                padding: 12px;
+                padding: 8px 12px;
             }
-            
             .message {
-                margin-bottom: 10px;
+                margin-bottom: 8px;
+                padding: 8px 12px;
             }
-            
             .input-area {
                 padding: 8px 12px;
             }
-            
             input {
-                padding: 8px 12px;
+                padding: 8px 14px;
             }
-        }
-
-        /* Loading animation */
-        .typing-indicator {
-            display: flex;
-            gap: 4px;
-            padding: 12px 16px;
-            background: rgba(20, 24, 40, 0.9);
-            border-radius: 20px;
-            border-bottom-left-radius: 6px;
-            width: fit-content;
-            margin-bottom: 16px;
-        }
-        
-        .typing-indicator span {
-            width: 8px;
-            height: 8px;
-            background: #00d4ff;
-            border-radius: 50%;
-            animation: typing 1.4s infinite;
-        }
-        
-        .typing-indicator span:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-        
-        .typing-indicator span:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-        
-        @keyframes typing {
-            0%, 60%, 100% {
-                transform: translateY(0);
-                opacity: 0.4;
+            button.send {
+                padding: 0 18px;
             }
-            30% {
-                transform: translateY(-10px);
-                opacity: 1;
+            .sidebar {
+                padding: 12px;
             }
+            .chat-history {
+                max-height: 60vh;
+            }
+        }
+
+        /* smooth scrolling */
+        html, body {
+            height: 100%;
+            overflow: hidden;
         }
     </style>
 </head>
@@ -495,272 +512,322 @@
                 <p>Neo Intelligence</p>
             </div>
         </div>
-        <button class="new-chat" onclick="createNewChat()">✨ New Chat</button>
-        <div class="chat-history" id="chatHistory">
-            <div style="text-align: center; color: #6c7a9e; padding: 20px;">
-                Belum ada chat
-            </div>
-        </div>
+        <button class="new-chat" id="newChatBtn">+ New Chat</button>
+        <div class="chat-history" id="chatHistory"></div>
     </div>
 
     <!-- MAIN CONTENT -->
     <div class="main">
         <div class="topbar">
-            <div class="menu-btn" onclick="openSidebar()">☰</div>
-            <div class="logo-area">
-                <div class="logo" id="mainLogo">
-                    🐱‍👤
-                </div>
-                <div class="title">
-                    <h1>ChibiCat AI</h1>
-                    <p>Online | Neo Mode</p>
-                </div>
+            <div class="menu-btn" id="menuBtn">☰</div>
+            <div class="logo" id="mainLogo">
+                🐱‍👤
+            </div>
+            <div class="title">
+                <h1>ChibiCat AI</h1>
+                <p>Online | Neo Mode</p>
             </div>
         </div>
 
         <div class="chat-area" id="chatArea">
             <div class="message bot">
-                <strong>⚡ ChibiCat Neo</strong><br>
+                <span style="font-weight: bold;">⚡ ChibiCat Neo</span><br>
                 Halo bro! Ada yang bisa gue bantu? 🔥😎
             </div>
         </div>
 
         <div class="input-area">
-            <input type="text" id="messageInput" placeholder="Ketik pesan..." />
-            <button class="send" onclick="sendMessage()">Kirim</button>
+            <input type="text" id="messageInput" placeholder="Ketik pesan bro..." autocomplete="off" />
+            <button class="send" id="sendBtn">
+                <span>➤</span> Kirim
+            </button>
         </div>
     </div>
 </div>
 
 <script>
-    let currentChatId = null;
-    let isTyping = false;
-
-    // Konfigurasi logo
+    // ========== LOGO CONFIGURATION ==========
     const LOGO_CONFIG = {
-        mode: "emoji",
+        mode: "image",  // "emoji", "image"
         emoji: "🐱‍🚀",
         imageUrl: "https://cdn-icons-png.flaticon.com/512/1998/1998592.png",
-        svgIcon: "⚡🐱⚡"
+        fallbackIcon: "🐱‍👤"
     };
     
-    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 = "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)";
-        } else if (LOGO_CONFIG.mode === "image") {
-            sidebarLogo.innerHTML = `<img src="${LOGO_CONFIG.imageUrl}" class="sidebar-logo-img" onerror="this.src='https://cdn-icons-png.flaticon.com/512/1998/1998592.png'">`;
-            sidebarLogo.style.background = "transparent";
-            mainLogo.innerHTML = `<img src="${LOGO_CONFIG.imageUrl}" class="logo-img" onerror="this.src='https://cdn-icons-png.flaticon.com/512/1998/1998592.png'">`;
-            mainLogo.style.background = "transparent";
-        } else {
-            sidebarLogo.innerHTML = LOGO_CONFIG.svgIcon;
-            sidebarLogo.style.fontSize = "24px";
-            mainLogo.innerHTML = LOGO_CONFIG.svgIcon;
-            mainLogo.style.fontSize = "20px";
+    // 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();
         }
     }
-
-    function openSidebar() {
-        document.getElementById("sidebar").classList.add("active");
-        document.getElementById("overlay").classList.add("active");
-        document.body.style.overflow = "hidden";
+    
+    function saveStorage() {
+        localStorage.setItem("chibicat_chats", JSON.stringify({
+            chats: chatStorage.chats,
+            currentChatId: chatStorage.currentChatId
+        }));
     }
-
-    function closeSidebar() {
-        document.getElementById("sidebar").classList.remove("active");
-        document.getElementById("overlay").classList.remove("active");
-        document.body.style.overflow = "";
+    
+    function getCurrentChat() {
+        return chatStorage.chats.find(c => c.chat_id === chatStorage.currentChatId);
     }
-
-    function showTypingIndicator() {
+    
+    function updateCurrentChat(messages) {
+        const idx = chatStorage.chats.findIndex(c => c.chat_id === chatStorage.currentChatId);
+        if (idx !== -1) {
+            chatStorage.chats[idx].messages = messages;
+            saveStorage();
+        }
+    }
+    
+    // Render chat area
+    function renderChat() {
         const chatArea = document.getElementById("chatArea");
-        const typingDiv = document.createElement("div");
-        typingDiv.className = "typing-indicator";
-        typingDiv.id = "typingIndicator";
-        typingDiv.innerHTML = "<span></span><span></span><span></span>";
-        chatArea.appendChild(typingDiv);
+        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;
-        isTyping = true;
-    }
-
-    function hideTypingIndicator() {
-        const indicator = document.getElementById("typingIndicator");
-        if (indicator) indicator.remove();
-        isTyping = false;
     }
-
-    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">
-                    <strong>⚡ ChibiCat Neo</strong><br>
-                    Halo bro! Ada yang bisa gue bantu? 🔥😎
+    
+    // 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)}
                 </div>
             `;
-            await loadChats();
-            closeSidebar();
-        } catch (error) {
-            console.error("Error creating new chat:", error);
-        }
+        });
+        // attach event listeners
+        document.querySelectorAll('.history-item').forEach(el => {
+            el.addEventListener('click', (e) => {
+                const chatId = el.getAttribute('data-chatid');
+                loadChatById(chatId);
+                closeSidebar();
+            });
+        });
     }
-
-    async function loadChats() {
-        try {
-            const response = await fetch("/get_chats");
-            const chats = await response.json();
-            const history = document.getElementById("chatHistory");
-            
-            if (!chats || chats.length === 0) {
-                history.innerHTML = '<div style="text-align: center; color: #6c7a9e; padding: 20px;">Belum ada chat</div>';
-                return;
-            }
-            
-            history.innerHTML = chats.map(chat => `
-                <div class="history-item" onclick="loadChat('${chat.chat_id}')">
-                    💬 ${escapeHtml(chat.title)}
-                </div>
-            `).join("");
-        } catch (error) {
-            console.error("Error loading chats:", error);
+    
+    function loadChatById(chatId) {
+        const chat = chatStorage.chats.find(c => c.chat_id === chatId);
+        if (chat) {
+            chatStorage.currentChatId = chatId;
+            saveStorage();
+            renderChat();
         }
     }
-
-    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.map(msg => 
-                `<div class="message ${msg.role === "user" ? "user" : "bot"}">${escapeHtml(msg.content)}</div>`
-            ).join("");
-            closeSidebar();
-            chatArea.scrollTop = chatArea.scrollHeight;
-        } catch (error) {
-            console.error("Error loading chat:", error);
-        }
+    
+    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 sendMessage() {
         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>`;
+        
+        const currentChat = getCurrentChat();
+        if (!currentChat) return;
+        
+        // tambah pesan user
+        const newMessages = [...currentChat.messages, { role: "user", content: escapeHtml(message) }];
+        updateCurrentChat(newMessages);
+        renderChat();
         input.value = "";
-        chatArea.scrollTop = chatArea.scrollHeight;
-
-        showTypingIndicator();
-
-        try {
-            const response = await fetch("/chat", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ message: message, chat_id: currentChatId })
-            });
-            
-            const data = await response.json();
-            hideTypingIndicator();
-            chatArea.innerHTML += `<div class="message bot">${escapeHtml(data.reply)}</div>`;
-            chatArea.scrollTop = chatArea.scrollHeight;
-            await loadChats();
-        } catch (error) {
-            hideTypingIndicator();
-            chatArea.innerHTML += `<div class="message bot">⚠️ Server error, coba lagi bro 😭</div>`;
-            chatArea.scrollTop = chatArea.scrollHeight;
-            console.error("Error sending message:", error);
+        
+        // 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();
+        }
+        
+        // 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
     function escapeHtml(text) {
         const div = document.createElement('div');
         div.textContent = text;
         return div.innerHTML;
     }
-
-    // Keyboard handling untuk Android
-    function handleAndroidKeyboard() {
+    
+    // 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;
+    }
+    function handleTouchEnd(e) {
+        touchEnd = e.changedTouches[0].screenX;
+        const diff = touchEnd - touchStart;
+        if (diff > 60 && touchStart < 40) {
+            openSidebar();
+        } else if (diff < -50) {
+            closeSidebar();
+        }
+    }
+    
+    // fix keyboard Android dan scroll otomatis saat fokus
+    function fixAndroidUX() {
         const input = document.getElementById("messageInput");
-        const chatArea = document.querySelector('.chat-area');
-        
         input.addEventListener("focus", () => {
             setTimeout(() => {
+                const chatArea = document.getElementById("chatArea");
                 chatArea.scrollTop = chatArea.scrollHeight;
-            }, 300);
+            }, 200);
         });
         
-        input.addEventListener("keypress", (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                sendMessage();
-            }
+        // 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;
         });
     }
-
-    // Swipe gesture untuk mobile
-    let touchStartX = 0;
-    let touchEndX = 0;
     
-    document.addEventListener('touchstart', (e) => {
-        touchStartX = e.changedTouches[0].screenX;
-    }, false);
-    
-    document.addEventListener('touchend', (e) => {
-        touchEndX = e.changedTouches[0].screenX;
-        const swipeDistance = touchEndX - touchStartX;
-        
-        if (swipeDistance > 50 && touchStartX < 50) {
-            openSidebar();
-        }
-        
-        if (swipeDistance < -50) {
-            closeSidebar();
-        }
-    }, false);
-
-    // Detect dan optimize untuk Android
-    function optimizeForAndroid() {
-        const ua = navigator.userAgent.toLowerCase();
-        const isAndroid = ua.includes("android");
-        
+    // Detect Android
+    function detectAndroidAndOptimize() {
+        const isAndroid = /android/i.test(navigator.userAgent);
         if (isAndroid) {
-            document.body.style.touchAction = "pan-y";
-            const viewport = document.querySelector('meta[name="viewport"]');
-            if (viewport) {
-                viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, viewport-fit=cover');
-            }
+            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);
         }
     }
-
-    // Inisialisasi
-    initLogos();
-    loadChats();
-    handleAndroidKeyboard();
-    optimizeForAndroid();
     
-    // Auto scroll saat chat area berubah
-    const observer = new MutationObserver(() => {
-        const chatArea = document.getElementById("chatArea");
-        if (chatArea) chatArea.scrollTop = chatArea.scrollHeight;
-    });
+    // 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);
+    }
     
-    observer.observe(document.getElementById("chatArea"), { 
-        childList: true, 
-        subtree: true 
-    });
+    // Saat dokumen siap
+    document.addEventListener("DOMContentLoaded", init);
 </script>
-
 </body>
 </html>