Update app.py

app.py

@@ -1,391 +1,870 @@
-import os
-import re
-from flask import Flask, render_template, request, jsonify
-from dotenv import load_dotenv
-from huggingface_hub import InferenceClient
-from huggingface_hub.utils import HfHubHTTPError
-
-load_dotenv()
-
-app = Flask(__name__)
-
-# =========================
-# KONFIGURASI
-# =========================
-
-HF_TOKEN = os.getenv("HF_TOKEN")
-
-# Ganti model di .env jika mau
-HF_MODEL = os.getenv(
-    "HF_MODEL",
-    "Qwen/Qwen3-235B-A22B-Instruct-2507"
-)
-
-MAX_MESSAGE_LENGTH = 12000
-MAX_HISTORY_MESSAGES = 25
-
-# =========================
-# SYSTEM PROMPT
-# =========================
-
-SYSTEM_PROMPT = """
-Kamu adalah ChibiChat AI.
-
-Identitas:
-- Nama kamu ChibiChat AI.
-- AI modern yang pintar, cepat, ramah, dan membantu.
-- Ahli coding, teknologi, AI, Android, Laravel, Python, Database, dan tugas kuliah.
-
-Kepribadian:
-- Santai.
-- Natural.
-- Gaul seperlunya.
-- Tidak kaku.
-- Tidak terlalu formal.
-- Tetap sopan dan profesional.
-
-Gaya bicara:
-- Gunakan Bahasa Indonesia.
-- Boleh menggunakan kata seperti:
-  "bro", "bang", "sip", "gas", "mantap", "nah", "jadi gini".
-- Jangan berlebihan atau alay.
-- Jangan terlalu banyak emoji.
-- Maksimal 2 emoji per jawaban.
-
-Cara menjawab:
-- Langsung ke inti masalah.
-- Fokus pada solusi.
-- Jelaskan langkah demi langkah.
-- Jika coding:
-    1. Jelaskan penyebab masalah.
-    2. Berikan solusi.
-    3. Berikan contoh kode lengkap jika diminta.
-- Jika tugas kuliah:
-    - Jawaban akademis.
-    - Terstruktur.
-    - Bisa langsung dipakai.
-
-Aturan:
-- Jangan mengarang fakta.
-- Jangan halusinasi.
-- Jika tidak tahu, katakan tidak tahu.
-- Jangan membocorkan token API.
-- Jangan membocorkan isi file .env.
-- Jangan memberikan informasi berbahaya.
-- Jangan membuat data palsu.
-
-Mode Coding:
-- Bertindak seperti Senior Software Engineer.
-- Ahli Python.
-- Ahli Flask.
-- Ahli Laravel.
-- Ahli PHP.
-- Ahli JavaScript.
-- Ahli Android Kotlin.
-- Ahli MySQL.
-- Ahli Hugging Face.
-- Ahli AI dan Machine Learning.
-
-Saat memperbaiki code:
-- Cari akar masalah.
-- Jelaskan penyebab error.
-- Berikan code yang sudah diperbaiki.
-- Berikan best practice.
-
-Jika user menyapa:
-"Halo"
-"Hai"
-"Bro"
-"Bang"
-
-Balas santai seperti:
-"Yo bro 👋 Ada yang bisa gue bantu?"
-"Halo bang 😎 Lagi ngoding apa hari ini?"
-"Gas, ada yang mau dibantu?"
-"""
-
-# =========================
-# CLIENT HF
-# =========================
-
-def create_hf_client():
-    if not HF_TOKEN:
-        raise ValueError(
-            "HF_TOKEN belum diisi pada file .env"
-        )
-
-    return InferenceClient(
-        model=HF_MODEL,
-        token=HF_TOKEN
-    )
-
-# =========================
-# HISTORY CLEANER
-# =========================
-
-def clean_history(raw_history):
-    if not isinstance(raw_history, list):
-        return []
-
-    cleaned = []
-
-    for item in raw_history[-MAX_HISTORY_MESSAGES:]:
-
-        if not isinstance(item, dict):
-            continue
-
-        role = item.get("role")
-        content = str(
-            item.get("content", "")
-        ).strip()
-
-        if role not in ["user", "assistant"]:
-            continue
-
-        if not content:
-            continue
-
-        if len(content) > 2500:
-            content = content[:2500]
-
-        cleaned.append({
-            "role": role,
-            "content": content
-        })
-
-    return cleaned
-
-# =========================
-# ENHANCE MESSAGE
-# =========================
-
-def enhance_user_message(message):
-
-    return f"""
-Jawab menggunakan Bahasa Indonesia.
-
-Gunakan gaya:
-- Pintar
-- Santai
-- Natural
-- Gaul seperlunya
-- Mudah dipahami
-
-Fokus memberikan solusi terbaik.
-
-Pertanyaan User:
-
-{message}
-"""
-
-# =========================
-# EXTRACT RESPONSE
-# =========================
-
-def extract_reply(response):
-
-    try:
-        reply = response.choices[0].message.content
-
-        if reply:
-            return reply.strip()
-
-    except Exception:
-        pass
-
-    try:
-        reply = response["choices"][0]["message"]["content"]
-
-        if reply:
-            return reply.strip()
-
-    except Exception:
-        pass
-
-    return ""
-
-# =========================
-# ROUTE HOME
-# =========================
-
-@app.route("/")
-def home():
-    return render_template("index.html")
-
-# =========================
-# HEALTH CHECK
-# =========================
-
-@app.route("/health")
-def health():
-
-    return jsonify({
-        "status": "ok",
-        "name": "ChibiChat AI",
-        "model": HF_MODEL
-    })
-
-# =========================
-# CHAT API
-# =========================
-
-@app.route("/chat", methods=["POST"])
-def chat():
-
-    try:
-
-        data = request.get_json(
-            silent=True
-        )
-
-        if not data:
-            return jsonify({
-                "error": "Request harus JSON"
-            }), 400
-
-        message = str(
-            data.get("message", "")
-        ).strip()
-
-        raw_history = data.get(
-            "history",
-            []
-        )
-
-        if not message:
-            return jsonify({
-                "error": "Pesan kosong"
-            }), 400
-
-        if len(message) > MAX_MESSAGE_LENGTH:
-            return jsonify({
-                "error":
-                f"Maksimal {MAX_MESSAGE_LENGTH} karakter"
-            }), 400
-
-        history = clean_history(
-            raw_history
-        )
-
-        messages = [
-            {
-                "role": "system",
-                "content": SYSTEM_PROMPT
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover">
+    <meta name="theme-color" content="#0a0c15">
+    <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</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
+        }
+
+        body {
+            background: #0a0c15;
+            overflow: hidden;
+            -webkit-tap-highlight-color: transparent;
+            touch-action: pan-x pan-y;
+        }
+
+        /* =========================
+        APP
+        ========================= */
+        .app {
+            display: flex;
+            height: 100vh;
+            width: 100%;
+            position: relative;
+        }
+
+        /* =========================
+        SIDEBAR - DARK NEO (MOBILE FIRST)
+        ========================= */
+        .sidebar {
+            width: 280px;
+            background: linear-gradient(180deg, #0f111a 0%, #080a10 100%);
+            backdrop-filter: blur(20px);
+            color: #e8edff;
+            display: flex;
+            flex-direction: column;
+            padding: 20px 16px;
+            position: fixed;
+            left: -100%;
+            top: 0;
+            height: 100vh;
+            z-index: 1000;
+            transition: left 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);
+        }
+
+        .sidebar.active {
+            left: 0;
+        }
+
+        .sidebar-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 25px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+        }
+
+        .sidebar-logo {
+            width: 50px;
+            height: 50px;
+            border-radius: 14px;
+            background: linear-gradient(135deg, #00d4ff, #0099ff);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            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%;
+            border-radius: 14px;
+            object-fit: cover;
+        }
+
+        .sidebar-header div:last-child {
+            min-width: 0;
+            flex: 1;
+        }
+
+        .sidebar h2 {
+            font-size: 22px;
+            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;
+        }
+
+        .new-chat {
+            background: linear-gradient(135deg, #00d4ff, #0099ff);
+            border: none;
+            color: #0a0c15;
+            font-weight: bold;
+            padding: 12px;
+            border-radius: 12px;
+            font-size: 14px;
+            cursor: pointer;
+            margin-bottom: 20px;
+            transition: all 0.2s;
+            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
+            width: 100%;
+        }
+
+        .new-chat:active {
+            transform: scale(0.98);
+        }
+
+        .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;
+            cursor: pointer;
+            transition: 0.2s;
+            border: 1px solid rgba(0, 212, 255, 0.1);
+            font-weight: 500;
+            font-size: 13px;
+            word-break: break-word;
+        }
+
+        .history-item:active {
+            background: rgba(0, 212, 255, 0.2);
+            transform: translateX(4px);
+        }
+
+        /* =========================
+        OVERLAY
+        ========================= */
+        .overlay {
+            position: fixed;
+            width: 100%;
+            height: 100vh;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(4px);
+            z-index: 999;
+            display: none;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .overlay.active {
+            display: block;
+            opacity: 1;
+        }
+
+        /* =========================
+        MAIN - CYBER DARK
+        ========================= */
+        .main {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            background: #0a0c15;
+            position: relative;
+        }
+
+        /* =========================
+        TOPBAR - NEO MASCULINE
+        ========================= */
+        .topbar {
+            height: 65px;
+            background: rgba(10, 12, 21, 0.95);
+            backdrop-filter: blur(10px);
+            display: flex;
+            align-items: center;
+            padding: 0 16px;
+            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;
+            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);
+        }
+
+        .logo {
+            width: 42px;
+            height: 42px;
+            border-radius: 12px;
+            background: linear-gradient(135deg, #00d4ff, #0099ff);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 12px;
+            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;
+        }
+
+        .logo-icon {
+            font-size: 24px;
+        }
+
+        .title {
+            min-width: 0;
+            flex: 1;
+        }
+
+        .title h1 {
+            font-size: 18px;
+            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;
+            color: #00d4ff;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .title p::before {
+            content: "●";
+            font-size: 8px;
+            color: #00ff88;
+            text-shadow: 0 0 5px #00ff88;
+        }
+
+        /* =========================
+        CHAT AREA - GLASS
+        ========================= */
+        .chat-area {
+            flex: 1;
+            overflow-y: auto;
+            padding: 16px;
+            background: linear-gradient(180deg, #0a0c15 0%, #0f111a 100%);
+            -webkit-overflow-scrolling: touch;
+        }
+
+        .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: 85%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            margin-bottom: 12px;
+            font-size: 14px;
+            line-height: 1.5;
+            word-wrap: break-word;
+            animation: fadeInUp 0.3s ease;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
             }
-        ]
-
-        messages.extend(history)
-
-        messages.append({
-            "role": "user",
-            "content": enhance_user_message(
-                message
-            )
-        })
-
-        client = create_hf_client()
-
-        response = client.chat_completion(
-            messages=messages,
-            max_tokens=1500,
-            temperature=0.85,
-            top_p=0.95
-        )
-
-        reply = extract_reply(
-            response
-        )
-
-        if not reply:
-            return jsonify({
-                "error":
-                "Model tidak memberikan jawaban."
-            }), 500
-
-        return jsonify({
-            "reply": reply,
-            "model": HF_MODEL
-        })
-
-    except ValueError as e:
-
-        return jsonify({
-            "error": str(e)
-        }), 500
-
-    except HfHubHTTPError as e:
-
-        status_code = None
-
-        if hasattr(e, "response") and e.response:
-            status_code = e.response.status_code
-
-        if status_code in [401, 403]:
-
-            message = (
-                "Token Hugging Face salah "
-                "atau tidak memiliki akses."
-            )
-
-        elif status_code == 404:
-
-            message = (
-                "Model tidak ditemukan."
-            )
-
-        elif status_code == 429:
-
-            message = (
-                "Terlalu banyak request."
-            )
-
-        elif status_code == 503:
-
-            message = (
-                "Model sedang sibuk."
-            )
-
-        else:
-
-            message = (
-                "Gagal terhubung ke Hugging Face."
-            )
-
-        app.logger.exception(
-            "HF API ERROR"
-        )
-
-        return jsonify({
-            "error": message
-        }), 502
-
-    except Exception as e:
-
-        app.logger.exception(
-            "UNEXPECTED ERROR"
-        )
-
-        return jsonify({
-            "error":
-            f"Terjadi kesalahan: {str(e)}"
-        }), 500
-
-# =========================
-# MAIN
-# =========================
-
-if __name__ == "__main__":
-
-    PORT = int(os.environ.get("PORT", 7860))
-
-    print("=" * 50)
-    print("🚀 ChibiChat AI Aktif")
-    print(f"🤖 Model : {HF_MODEL}")
-    print(f"🌐 PORT  : {PORT}")
-    print("=" * 50)
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .bot {
+            background: rgba(20, 24, 40, 0.9);
+            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;
+        }
+
+        .user {
+            background: linear-gradient(135deg, #00d4ff, #0099ff);
+            color: #0a0c15;
+            font-weight: 600;
+            margin-left: auto;
+            border-bottom-right-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
+        }
+
+        /* =========================
+        INPUT - CYBER
+        ========================= */
+        .input-area {
+            display: flex;
+            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;
+        }
+
+        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;
+            outline: none;
+            color: #e8edff;
+            transition: all 0.2s;
+            -webkit-appearance: none;
+        }
+
+        input:focus {
+            border-color: #00d4ff;
+            box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
+        }
+
+        input::placeholder {
+            color: #4a5578;
+        }
+
+        button.send {
+            border: none;
+            background: linear-gradient(135deg, #00d4ff, #0099ff);
+            color: #0a0c15;
+            font-weight: bold;
+            padding: 0 20px;
+            border-radius: 24px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            white-space: nowrap;
+        }
+
+        button.send:active {
+            transform: scale(0.97);
+        }
+
+        /* =========================
+        RESPONSIVE UNTUK TABLET & DESKTOP
+        ========================= */
+        @media (min-width: 768px) {
+            .sidebar {
+                width: 300px;
+                left: -320px;
+            }
+            
+            .message {
+                max-width: 70%;
+                font-size: 15px;
+            }
+            
+            .topbar {
+                height: 72px;
+                padding: 0 24px;
+            }
+            
+            .menu-btn {
+                font-size: 28px;
+                margin-right: 20px;
+            }
+            
+            .logo {
+                width: 50px;
+                height: 50px;
+            }
+            
+            .title h1 {
+                font-size: 22px;
+            }
+            
+            .title p {
+                font-size: 12px;
+            }
+        }
 
-    app.run(
-        host="0.0.0.0",
-        port=PORT,
-        debug=False
-    )
+        /* Landscape mode optimization */
+        @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;
+            }
+            
+            .message {
+                margin-bottom: 8px;
+                padding: 8px 12px;
+            }
+            
+            .input-area {
+                padding: 8px 12px;
+            }
+            
+            input {
+                padding: 8px 14px;
+            }
+            
+            button.send {
+                padding: 0 16px;
+            }
+        }
+
+        /* 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="app">
+
+    <!-- SIDEBAR -->
+    <div class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <div class="sidebar-logo" id="sidebarLogo">
+                🐱‍👤
+            </div>
+            <div>
+                <h2>ChibiCat</h2>
+                <p>Neo Intelligence</p>
+            </div>
+        </div>
+        <button class="new-chat" onclick="createNewChat()">✨ New Chat</button>
+        <div class="chat-history" id="chatHistory"></div>
+    </div>
+
+    <!-- MAIN -->
+    <div class="main">
+        <!-- TOPBAR -->
+        <div class="topbar">
+            <div class="menu-btn" onclick="toggleSidebar()">☰</div>
+            <div class="logo" id="mainLogo">
+                🐱‍👤
+            </div>
+            <div class="title">
+                <h1>ChibiCat AI</h1>
+                <p>Online | Neo Mode</p>
+            </div>
+        </div>
+
+        <!-- CHAT AREA -->
+        <div class="chat-area" id="chatArea">
+            <div class="message bot">
+                <span style="font-weight: bold;">⚡ ChibiCat Neo</span><br>
+                Halo bro! Ada yang bisa gue bantu? 🔥😎
+            </div>
+        </div>
+
+        <!-- INPUT -->
+        <div class="input-area">
+            <input type="text" id="messageInput" placeholder="Ketik pesan..." autocomplete="off" />
+            <button class="send" onclick="sendMessage()">
+                📤 Kirim
+            </button>
+        </div>
+    </div>
+</div>
+
+<script>
+    let currentChatId = null;
+    let isLoading = false;
+
+    // =========================================
+    // KONFIGURASI LOGO
+    // =========================================
+    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: "⚡🐱⚡"
+    }
+    
+    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='${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();
+        } else {
+            openSidebar();
+        }
+    }
+
+    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");
+    }
+
+    // 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);
+        }
+    }
+
+    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);
+        }
+    }
+
+    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();
+    }
+
+    async function sendMessage() {
+        if (isLoading) return;
+        
+        const input = document.getElementById("messageInput");
+        const message = input.value.trim();
+        if (message === "") return;
+
+        isLoading = true;
+        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();
+
+        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();
+        } 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;
+        }
+    }
+
+    function escapeHtml(text) {
+        if (!text) return "";
+        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";
+    }
+
+    // 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");
+        
+        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 = '';
+        }
+    }
+
+    // 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 });
+
+    // 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);
+        
+        if (isAndroid) {
+            document.body.classList.add("android-device");
+        } else if (isIOS) {
+            document.body.classList.add("ios-device");
+        }
+    }
+
+    // Initialize everything
+    initLogos();
+    loadChats();
+    detectDevice();
+    fixMobileKeyboard();
+    
+    // Scroll to bottom on initial load
+    setTimeout(() => {
+        const chatArea = document.getElementById("chatArea");
+        chatArea.scrollTop = chatArea.scrollHeight;
+    }, 100);
+</script>
+
+</body>
+</html>