feat: Add full Python backend with Flask, RAG, Mongo, and Chroma

.gitignore

@@ -0,0 +1,12 @@
+# Folder library Python (wajib)
+venv/
+
+# Database ChromaDB lokal (wajib)
+my_chroma_db/
+
+# File rahasia API keys (wajib)
+.env
+
+# Cache Python
+__pycache__/
+*.pyc

app.py

@@ -0,0 +1,185 @@
+import os
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
+from pymongo import MongoClient, ReturnDocument
+from pymongo.errors import PyMongoError
+from chromadb import HttpClient
+from sentence_transformers import SentenceTransformer
+from huggingface_hub import InferenceClient
+from dotenv import load_dotenv
+from bson.objectid import ObjectId
+from datetime import datetime
+
+# --- 1. Muat .env dan Inisialisasi ---
+load_dotenv()
+app = Flask(__name__)
+CORS(app) 
+
+# --- 2. Inisialisasi Klien (Global) ---
+hf_token = os.getenv("HF_TOKEN")
+hf_client = InferenceClient(
+    "meta-llama/Meta-Llama-3-8B-Instruct",
+    token=hf_token
+)
+
+mongo_url = os.getenv("MONGO_URL")
+mongo_client = MongoClient(mongo_url)
+db = mongo_client.get_database("chatbot_db")
+chat_history_collection = db.get_collection("conversations")
+print("✅ Berhasil terkoneksi ke MongoDB Atlas.")
+
+print("Memuat model embedding (ini mungkin butuh waktu)...")
+embedding_model = SentenceTransformer('all-MiniLM-L6-v2')
+print("✅ Model embedding ('all-MiniLM-L6-v2') berhasil dimuat.")
+
+try:
+    chroma_client = HttpClient(host='localhost', port=8000)
+    knowledge_collection = chroma_client.get_collection(
+        name="website_knowledge"
+    )
+    print("✅ Berhasil terkoneksi ke ChromaDB (localhost:8000).")
+except Exception as e:
+    print(f"❌ GAGAL terhubung ke ChromaDB. Pastikan server chroma run... berjalan. Error: {e}")
+
+# --- 3. Endpoint Frontend ---
+@app.route("/")
+def home():
+    return render_template("chat.html")
+
+# --- 4. Endpoint API - Ambil SEMUA History (untuk F5) ---
+@app.route("/api/conversations", methods=["GET"])
+def get_conversations():
+    user_id = request.args.get("userId")
+    if not user_id:
+        return jsonify({"error": "userId dibutuhkan"}), 400
+    
+    try:
+        convos = list(chat_history_collection.find(
+            {"userId": user_id}
+        ).sort("updatedAt", -1))
+        
+        conversations_list = []
+        for convo in convos:
+            conversations_list.append({
+                "id": str(convo.get('_id')),
+                "title": convo.get("title", "Obrolan Baru"),
+                "messages": convo.get("messages", []),
+                "createdAt": convo.get("createdAt")
+            })
+        return jsonify(conversations_list)
+    except Exception as e:
+        print(f"Error di /api/conversations GET: {e}")
+        return jsonify({"error": "Gagal mengambil percakapan"}), 500
+
+# --- 5. ENDPOINT API BARU (UNTUK "CLEAR ALL") ---
+@app.route("/api/conversations", methods=["DELETE"])
+def clear_conversations():
+    """
+    Menghapus SEMUA percakapan untuk satu userId.
+    """
+    data = request.json
+    user_id = data.get("userId")
+    if not user_id:
+        return jsonify({"error": "userId dibutuhkan"}), 400
+
+    try:
+        # Hapus semua dokumen di MongoDB yang cocok dengan userId
+        result = chat_history_collection.delete_many({"userId": user_id})
+        
+        print(f"Berhasil menghapus {result.deleted_count} percakapan untuk userId {user_id}.")
+        return jsonify({
+            "message": "History berhasil dihapus", 
+            "deleted_count": result.deleted_count
+        })
+
+    except Exception as e:
+        print(f"Error di /api/conversations DELETE: {e}")
+        return jsonify({"error": "Gagal menghapus history"}), 500
+
+# --- 6. Endpoint API Chat (Utama) ---
+@app.route("/api/chat", methods = ["POST"])
+def handle_chat():
+    try:
+        data = request.json
+        user_message = data.get("message")
+        user_id = data.get("userId")
+        conversation_id = data.get("conversationId") # ID chat yang aktif, bisa null
+
+        if not user_message or not user_id:
+            return jsonify({"error": "Parameter 'message' dan 'userId' dibutuhkan."}), 400
+        
+        history = []
+        user_message_doc = {"role": "user", "content": user_message, "timestamp": datetime.now()}
+
+        # --- 1. (CRUD) Ambil/Buat Percakapan ---
+        if conversation_id:
+            # Ini adalah obrolan yang sudah ada
+            current_convo = chat_history_collection.find_one({
+                "_id": ObjectId(conversation_id),
+                "userId": user_id
+            })
+            if current_convo:
+                history = current_convo.get("messages", [])[-6:]
+        
+        # --- 2. (RAG) - Lakukan RAG (Sama seperti sebelumnya) ---
+        print(f"Mencari konteks untuk: \"{user_message}\"")
+        query_embedding = embedding_model.encode(user_message).tolist()
+        results = knowledge_collection.query(
+            query_embeddings=[query_embedding],
+            n_results=1 # <-- Anda bisa ganti ini ke 1 nanti
+        )
+        context = "\n\n".join(results['documents'][0])
+        print("Konteks ditemukan.")
+        
+        # --- 3. (RAG) Buat prompt ---
+        # <-- Anda bisa perketat prompt ini nanti
+        system_prompt = """You are a precise assistant. Answer *strictly* and *only* based on the context provided. 
+                        Do not add any information, pollutants, or applications that are not *explicitly* mentioned in the text. 
+                        If the context provides conflicting information (like for different products), only use the information from the *single most relevant* chunk."""
+        formatted_history = "\n".join([f"{msg['role']}: {msg['content']}" for msg in history])
+        user_prompt = f"Context:\n{context}\n\nChat History:\n{formatted_history}\n\nQuestion:\n{user_message}"
+        messages = [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": user_prompt}
+        ]
+        
+        # --- 4. (RAG) Panggil API Llama 3 ---
+        print("Memanggil Hugging Face API...")
+        response = hf_client.chat_completion(messages=messages, max_tokens=250, temperature=0.1)
+        ai_response = response.choices[0].message.content
+        
+        # --- 5. (CRUD) Simpan balasan AI ke MongoDB ---
+        ai_message_doc = {"role": "assistant", "content": ai_response, "timestamp": datetime.now()}
+        
+        if conversation_id: # Obrolan lama
+            chat_history_collection.update_one(
+                {"_id": ObjectId(conversation_id)},
+                {
+                    "$push": {"messages": {"$each": [user_message_doc, ai_message_doc]}},
+                    "$set": {"updatedAt": datetime.now()}
+                }
+            )
+        else: # Obrolan baru
+            title = user_message[:30] + "..." if len(user_message) > 30 else user_message
+            new_convo_doc = {
+                "userId": user_id,
+                "title": title,
+                "messages": [user_message_doc, ai_message_doc], # Langsung tambahkan user & AI
+                "createdAt": datetime.now(),
+                "updatedAt": datetime.now()
+            }
+            insert_result = chat_history_collection.insert_one(new_convo_doc)
+            conversation_id = insert_result.inserted_id # Ambil _id baru
+            
+        print("Percakapan berhasil disimpan ke MongoDB.")
+
+        # --- 6. Kirim balasan ---
+        return jsonify({"answer": ai_response, "conversationId": str(conversation_id)})
+
+    except Exception as e:
+        print(f"Error di /api/chat: {e}")
+        return jsonify({"error": "Terjadi kesalahan di server"}), 500
+
+# --- 7. Jalankan Server ---
+if __name__ == "__main__":
+    app.run(port=3001, debug=True)

contoh_struktur.json

@@ -0,0 +1,24 @@
+{
+  "_id": "67f89abf8b4d... (MongoDB ID)",
+  "userId": "anon-uuid-12345-abcde", // Anonymous User ID Anda
+  "createdAt": "2025-10-28T12:00:00Z",
+  "updatedAt": "2025-10-28T12:05:00Z",
+  "title": "Percakapan tentang Air Quality", // (Opsional)
+  "messages": [
+    {
+      "role": "user",
+      "content": "Can you describe about the Air Quality Tester?",
+      "timestamp": "2025-10-28T12:00:00Z"
+    },
+    {
+      "role": "assistant",
+      "content": "Our Air Quality Tester is a compact, lightweight device...",
+      "timestamp": "2025-10-28T12:01:00Z"
+    },
+    {
+      "role": "user",
+      "content": "Does it work with Google Sheets?",
+      "timestamp": "2025-10-28T12:04:00Z"
+    }
+  ]
+}

load_data.py

@@ -0,0 +1,64 @@
+import pandas as pd
+from sentence_transformers import SentenceTransformer
+from chromadb import HttpClient
+import sys
+
+# --- 1. Inisialisasi Klien & Model ---
+print("Menghubungkan ke ChromaDB di localhost:8000...")
+try:
+    # Kita terhubung ke server yang sama dengan app.py
+    client = HttpClient(host='localhost', port=8000)
+    collection = client.get_or_create_collection(name="website_knowledge")
+    print("✅ Berhasil terhubung ke ChromaDB.")
+except Exception as e:
+    print(f"❌ GAGAL terhubung ke ChromaDB. Pastikan server ChromaDB berjalan.")
+    print(f"Error: {e}")
+    sys.exit(1)
+
+print("Memuat model embedding 'all-MiniLM-L6-v2' (ini mungkin butuh waktu)...")
+model = SentenceTransformer('all-MiniLM-L6-v2')
+print("✅ Model embedding berhasil dimuat.")
+
+# --- 2. Baca File CSV ---
+file_path = "knowledge_base_FINAL_COMBINED.csv" # Pastikan nama file ini benar
+try:
+    df = pd.read_csv(file_path)
+    df = df.fillna('')
+    print(f"✅ Berhasil memuat {len(df)} chunk dari {file_path}.")
+except FileNotFoundError:
+    print(f"❌ Error: File {file_path} tidak ditemukan.")
+    sys.exit(1)
+
+# --- 3. Siapkan Data ---
+documents = df['chunk_text'].tolist()
+metadatas = df[['main_topic', 'chunk_title', 'src_url']].to_dict('records')
+ids = df['chunk_id'].tolist()
+
+# --- 4. BUAT EMBEDDING (Bagian Paling Penting) ---
+# app.py membuat embedding 'on-the-fly' untuk 1 pertanyaan
+# Script ini membuat embedding untuk SEMUA dokumen sekaligus
+print(f"Memulai proses embedding untuk {len(documents)} dokumen...")
+embeddings = model.encode(documents, show_progress_bar=True)
+print("✅ Embedding selesai.")
+
+# --- 5. Tambahkan ke ChromaDB ---
+# Hapus data lama (jika ada) agar tidak duplikat
+try:
+    collection.delete(ids=ids)
+    print("Data lama di collection berhasil dihapus.")
+except Exception as e:
+    print("Tidak ada data lama untuk dihapus, melanjutkan...")
+
+print("Menambahkan data baru ke ChromaDB (dalam batch)...")
+batch_size = 100
+for i in range(0, len(ids), batch_size):
+    print(f"  Menambahkan batch {i//batch_size + 1}...")
+    
+    collection.add(
+        embeddings=embeddings[i:i+batch_size].tolist(),
+        documents=documents[i:i+batch_size],
+        metadatas=metadatas[i:i+batch_size],
+        ids=ids[i:i+batch_size]
+    )
+
+print(f"🎉 SEMUA SELESAI! {collection.count()} dokumen berhasil disimpan di ChromaDB.")

requirements.txt

@@ -0,0 +1,8 @@
+flask
+flask-cors
+chromadb
+sentence-transformers
+huggingface_hub
+pymongo
+python-dotenv
+pandas

script.js

@@ -1,195 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-    // === 1. MENANGKAP ELEMEN DOM ===
-    const sendButton = document.getElementById("send-button");
-    const chatInput = document.getElementById("chat-input");
-    const historyList = document.getElementById("history-list");
-    const chatLog = document.getElementById("chat-log-area");
-    const newChatButton = document.querySelector(".new-chat-btn");
-
-    // Simpan HTML untuk placeholder "chat kosong"
-    const emptyChatPlaceholder = `
-        <div class="empty-chat-placeholder">
-            <i class="fa-solid fa-robot"></i>
-            <h2>Hello Name</h2>
-        </div>
-    `;
-
-    // === 2. DATA UTAMA APLIKASI (STATE) ===
-    let conversations = []; // Menyimpan SEMUA percakapan
-    let currentConversationId = null; // Melacak chat mana yang sedang AKTIF
-
-    // === 3. EVENT LISTENERS ===
-
-    // Klik tombol "New Chat"
-    newChatButton.addEventListener("click", (e) => {
-        e.preventDefault(); // Mencegah link <a> me-refresh halaman
-        startNewChat();
-    });
-
-    // Klik tombol "Send"
-    sendButton.addEventListener("click", sendMessage);
-
-    // Tekan "Enter" di input
-    chatInput.addEventListener("keydown", (event) => {
-        if (event.key === "Enter") {
-            sendMessage();
-        }
-    });
-
-    // Klik salah satu item di history
-    historyList.addEventListener("click", (e) => {
-        const clickedLi = e.target.closest("li"); // Dapatkan elemen <li> yang diklik
-        if (clickedLi) {
-            const id = Number(clickedLi.dataset.id); // Ambil ID dari data-attribute
-            switchConversation(id);
-        }
-    });
-
-    // === 4. FUNGSI-FUNGSI UTAMA ===
-
-    /**
-     * Memulai chat baru (membersihkan area chat)
-     */
-    function startNewChat() {
-        currentConversationId = null; // Set ID chat aktif ke null
-        chatInput.value = ""; // Kosongkan input
-        renderChatLog(); // Tampilkan placeholder
-        renderHistory(); // Perbarui history (untuk hapus highlight 'active')
-    }
-
-    /**
-     * Mengirim pesan
-     */
-    function sendMessage() {
-        const messageText = chatInput.value.trim();
-        if (messageText === "") return;
-
-        let activeConversation;
-
-        if (currentConversationId === null) {
-            // Ini adalah chat BARU
-            const newId = Date.now(); // Buat ID unik berdasarkan waktu
-            activeConversation = {
-                id: newId,
-                title: messageText.length > 28 ? messageText.substring(0, 28) + "..." : messageText,
-                messages: [] // Array pesan untuk chat ini
-            };
-            conversations.unshift(activeConversation); // Tambahkan ke awal array
-            currentConversationId = newId; // Set sebagai chat aktif
-            renderHistory(); // Gambar ulang seluruh history list
-        } else {
-            // Ini adalah chat LAMA
-            activeConversation = conversations.find(c => c.id === currentConversationId);
-        }
-
-        // Tambahkan pesan user ke data
-        activeConversation.messages.push({ sender: "user", text: messageText });
-
-        // Tampilkan pesan di layar
-        renderChatLog();
-        chatInput.value = ""; // Kosongkan input
-
-        // Simulasikan balasan bot
-        simulateBotReply(activeConversation.id, messageText);
-    }
-
-    /**
-     * Mengganti percakapan yang aktif
-     * @param {number} id - ID percakapan yang ingin dibuka
-     */
-    function switchConversation(id) {
-        if (currentConversationId === id) return; // Jangan lakukan apa-apa jika chat sudah aktif
-
-        currentConversationId = id;
-        renderChatLog();
-        renderHistory();
-    }
-
-    /**
-     * Menggambar ulang (me-render) seluruh daftar history di sidebar
-     */
-    function renderHistory() {
-        historyList.innerHTML = ""; // Kosongkan list
-        conversations.forEach(convo => {
-            const li = document.createElement("li");
-            li.dataset.id = convo.id; // Simpan ID di data-attribute
-            li.innerHTML = `<i class="fa-regular fa-comment-dots"></i> ${convo.title}`;
-            
-            if (convo.id === currentConversationId) {
-                li.classList.add("active"); // Beri highlight jika ini chat aktif
-            }
-            historyList.appendChild(li);
-        });
-    }
-
-    /**
-     * Menggambar ulang (me-render) seluruh log chat di area kanan
-     */
-    function renderChatLog() {
-        if (currentConversationId === null) {
-            // Jika tidak ada chat aktif, tampilkan placeholder
-            chatLog.innerHTML = emptyChatPlaceholder;
-            return;
-        }
-
-        // Cari data percakapan yang aktif
-        const activeConversation = conversations.find(c => c.id === currentConversationId);
-        if (!activeConversation) {
-            // Jika tidak ketemu (seharusnya tidak terjadi), kembali ke state awal
-            startNewChat();
-            return;
-        }
-
-        chatLog.innerHTML = ""; // Kosongkan area chat
-
-        // Loop melalui setiap pesan di percakapan aktif dan buat HTML-nya
-        activeConversation.messages.forEach(message => {
-            const messageDiv = document.createElement("div");
-            messageDiv.classList.add("chat-message", message.sender);
-
-            let avatar = message.sender === "user" ? "AN" : '<i class="fa-solid fa-robot"></i>';
-            let name = message.sender === "user" ? "" : "<strong>CHAT A.I+</strong>";
-
-            messageDiv.innerHTML = `
-                <div class="avatar">${avatar}</div>
-                <div class="message-content">
-                    ${name}
-                    <p>${message.text}</p>
-                </div>
-            `;
-            chatLog.appendChild(messageDiv);
-        });
-
-        // Auto-scroll ke pesan terbaru
-        chatLog.scrollTop = chatLog.scrollHeight;
-    }
-
-    /**
-     * Simulasi balasan bot
-     * @param {number} convoId - ID chat mana yang harus dibalas
-     * @param {string} userMessage - Pesan dari user (untuk logika balasan)
-     */
-    function simulateBotReply(convoId, userMessage) {
-        let botText = "Maaf, saya tidak mengerti."; // Balasan default
-
-        if (userMessage.toLowerCase().includes("halo")) {
-            botText = "Halo juga! Ada yang bisa saya bantu?";
-        }
-
-        setTimeout(() => {
-            // Cari percakapan yang benar (bisa jadi user sudah pindah chat)
-            const conversationToReply = conversations.find(c => c.id === convoId);
-            if (conversationToReply) {
-                conversationToReply.messages.push({ sender: "bot", text: botText });
-
-                // HANYA render ulang jika chat yang dibalas masih aktif
-                if (currentConversationId === convoId) {
-                    renderChatLog();
-                }
-            }
-        }, 1000); // Balas setelah 1 detik
-    }
-
-    // --- Inisialisasi Aplikasi ---
-    startNewChat(); // Mulai aplikasi dalam keadaan "New Chat"
-});

static/script.js

@@ -0,0 +1,254 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // === 1. MENANGKAP ELEMEN DOM ===
+    const sendButton = document.getElementById("send-button");
+    const chatInput = document.getElementById("chat-input");
+    const historyList = document.getElementById("history-list");
+    const chatLog = document.getElementById("chat-log-area");
+    const newChatButton = document.querySelector(".new-chat-btn");
+    const clearAllButton = document.querySelector(".clear-all"); // <-- TAMBAHAN BARU
+
+    const emptyChatPlaceholder = `
+        <div class="empty-chat-placeholder">
+            <i class="fa-solid fa-robot"></i>
+            <h2>Hello Name</h2>
+        </div>
+    `;
+
+    // === 2. DATA UTAMA APLIKASI (STATE) ===
+    let conversations = {};
+    let currentConversationId = null;
+    let currentUserId = getOrCreateUserId();
+
+    // === 3. EVENT LISTENERS ===
+    newChatButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        startNewChat();
+    });
+    sendButton.addEventListener("click", sendMessage);
+    chatInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            sendMessage();
+        }
+    });
+    historyList.addEventListener("click", (e) => {
+        const clickedLi = e.target.closest("li");
+        if (clickedLi) {
+            const id = clickedLi.dataset.id;
+            switchConversation(id);
+        }
+    });
+    
+    // <-- LISTENER BARU UNTUK "CLEAR ALL" ---
+    clearAllButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        clearAllConversations();
+    });
+
+    // === 4. FUNGSI-FUNGSI UTAMA ===
+
+    /**
+     * FUNGSI BARU: Menghapus semua percakapan
+     */
+    async function clearAllConversations() {
+        if (!confirm("Apakah Anda yakin ingin menghapus semua percakapan? Tindakan ini tidak bisa dibatalkan.")) {
+            return;
+        }
+
+        try {
+            const response = await fetch("http://localhost:3001/api/conversations", {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ userId: currentUserId }) // Kirim userId untuk dihapus
+            });
+
+            if (!response.ok) {
+                throw new Error("Gagal menghapus history di server.");
+            }
+            
+            // Jika server berhasil, bersihkan state frontend
+            conversations = {};
+            startNewChat(); // Ini akan membersihkan UI (merender history & chat log)
+            
+            console.log("Semua percakapan berhasil dihapus.");
+
+        } catch (error) {
+            console.error("Error clearing conversations:", error);
+            alert("Terjadi kesalahan saat menghapus history.");
+        }
+    }
+    
+    // ... (Fungsi getOrCreateUserId, startNewChat, sendMessage, dll. tetap sama persis) ...
+    
+    function getOrCreateUserId() {
+        let userId = localStorage.getItem('anonymousUserId');
+        if (!userId) {
+            userId = 'anon-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
+            localStorage.setItem('anonymousUserId', userId);
+        }
+        return userId;
+    }
+
+    function startNewChat() {
+        currentConversationId = null;
+        chatInput.value = "";
+        renderChatLog();
+        renderHistory();
+    }
+
+    async function sendMessage() {
+        const messageText = chatInput.value.trim();
+        if (messageText === "") return;
+
+        let conversationIdToSend = currentConversationId; 
+        let tempId = null;
+        let activeConversation;
+
+        if (currentConversationId === null) {
+            const title = messageText.length > 28 ? messageText.substring(0, 28) + "..." : messageText;
+            tempId = "temp-" + Date.now();
+            activeConversation = {
+                id: tempId,
+                title: title,
+                messages: []
+            };
+            conversations[tempId] = activeConversation;
+            currentConversationId = tempId;
+        } else {
+            activeConversation = conversations[currentConversationId];
+        }
+
+        activeConversation.messages.push({ role: "user", content: messageText });
+        renderChatLog();
+        renderHistory();
+        chatInput.value = "";
+        
+        const loadingDiv = addMessageToLog("assistant", "...");
+        chatLog.scrollTop = chatLog.scrollHeight;
+        
+        try {
+            const response = await fetch("http://localhost:3001/api/chat", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    message: messageText,
+                    userId: currentUserId,
+                    conversationId: conversationIdToSend
+                })
+            });
+
+            if (!response.ok) throw new Error("Network response was not ok.");
+            const data = await response.json();
+            if (data.error) throw new Error(data.error);
+
+            const botText = data.answer;
+            const realConversationId = data.conversationId;
+
+            activeConversation.messages.push({ role: "assistant", content: botText });
+            const p = loadingDiv.querySelector(".message-content p");
+            p.textContent = botText;
+
+            if (currentConversationId === tempId) {
+                activeConversation.id = realConversationId;
+                conversations[realConversationId] = activeConversation;
+                delete conversations[tempId];
+                currentConversationId = realConversationId;
+                renderHistory();
+            }
+            
+        } catch (error) {
+            console.error("Error sending message:", error);
+            const p = loadingDiv.querySelector(".message-content p");
+            p.textContent = "Maaf, terjadi kesalahan. Coba lagi.";
+        }
+        
+        chatLog.scrollTop = chatLog.scrollHeight;
+    }
+
+    function switchConversation(id) {
+        if (currentConversationId === id) return; 
+        currentConversationId = id;
+        renderChatLog();
+        renderHistory();
+    }
+    
+    function renderHistory() {
+        historyList.innerHTML = "";
+        
+        const sortedConversations = Object.values(conversations).sort((a, b) => {
+             const lastMsgA = a.messages[a.messages.length - 1]?.timestamp || a.id;
+             const lastMsgB = b.messages[b.messages.length - 1]?.timestamp || b.id;
+             return new Date(lastMsgB) - new Date(lastMsgA);
+        });
+
+        sortedConversations.forEach(convo => {
+            const li = document.createElement("li");
+            li.dataset.id = convo.id;
+            li.innerHTML = `<i class="fa-regular fa-comment-dots"></i> ${convo.title}`;
+            if (convo.id === currentConversationId) {
+                li.classList.add("active");
+            }
+            historyList.appendChild(li);
+        });
+    }
+
+    function renderChatLog() {
+        if (currentConversationId === null) {
+            chatLog.innerHTML = emptyChatPlaceholder;
+            return;
+        }
+
+        const activeConversation = conversations[currentConversationId];
+        if (!activeConversation) {
+            startNewChat();
+            return;
+        }
+
+        chatLog.innerHTML = "";
+        activeConversation.messages.forEach(message => {
+            addMessageToLog(message.role, message.content); 
+        });
+        chatLog.scrollTop = chatLog.scrollHeight;
+    }
+    
+    function addMessageToLog(role, text) {
+        const messageDiv = document.createElement("div");
+        messageDiv.classList.add("chat-message", role);
+
+        let avatar = role === "user" ? "AN" : '<i class="fa-solid fa-robot"></i>';
+        let name = role === "user" ? "" : "<strong>CHAT A.I+</strong>";
+
+        messageDiv.innerHTML = `
+            <div class="avatar">${avatar}</div>
+            <div class="message-content">
+                ${name}
+                <p>${text}</p>
+            </div>
+        `;
+        chatLog.appendChild(messageDiv);
+        return messageDiv;
+    }
+
+    // --- Inisialisasi Aplikasi ---
+    async function initializeApp() {
+        if (!currentUserId) return;
+        try {
+            const response = await fetch(`http://localhost:3001/api/conversations?userId=${currentUserId}`);
+            if (!response.ok) {
+                throw new Error("Gagal memuat history");
+            }
+            const data = await response.json(); 
+            conversations = {};
+            data.forEach(convo => {
+                conversations[convo.id] = convo;
+            });
+            renderHistory();
+            startNewChat();
+        } catch (error) {
+            console.error("Error initializing app:", error);
+            startNewChat();
+        }
+    }
+
+    initializeApp();
+});

chat.html → templates/chat.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatbot UI</title>
     
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
 </head>
 <body>
@@ -68,6 +68,6 @@
 
     </section>
 
-    <script src="script.js"></script>
+    <script src="/static/script.js"></script>
 </body>
 </html>