Spaces:

enviro-edu-chatbot
/

Chatbot_AI

Runtime error

App Files Files Community

DevouringStars commited on Oct 23, 2025

Commit

e376ddc

0 Parent(s):

Initial commit

Browse files

Files changed (3) hide show

chat.html +73 -0
script.js +195 -0
style.css +304 -0

chat.html ADDED Viewed

	@@ -0,0 +1,73 @@

+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+</head>
+<body>
+    <div class="upgrade-tab">
+        <i class="fa-solid fa-star"></i> Upgrade to Pro
+    </div>
+    <nav class="sidebar">
+        <div class="sidebar-header">
+            <a href="#" class="new-chat-btn" role="button">
+                <i class="fa-solid fa-plus"></i> New chat
+            </a>
+            <button class="search-btn">
+                <i class="fa-solid fa-search"></i>
+            </button>
+        </div>
+        <div class="chat-history">
+            <div class="history-header">
+                <h3>Your conversations</h3>
+                <a href="#" class="clear-all">Clear All</a>
+            </div>
+            <ul id="history-list">
+                </ul>
+        </div>
+        <div class="sidebar-footer">
+            <ul>
+                <li><i class="fa-solid fa-cog"></i> Settings</li>
+                <li>
+                    <div class="avatar">AN</div> Andrew Neilson
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <section class="chat-area">
+        <header class="chat-header">
+            CHAT A.I+
+        </header>
+        <div class="chat-log" id="chat-log-area"> <div class="empty-chat-placeholder">
+                <i class="fa-solid fa-robot"></i>
+                <h2>Hello Name</h2>
+            </div>
+        </div>
+        <footer class="chat-input-area">
+            <div class="input-wrapper">
+                <input type="text" id="chat-input" placeholder="What's in your mind...">
+                <button class="send-btn" id="send-button">
+                    <i class="fa-solid fa-paper-plane"></i>
+                </button>
+            </div>
+        </footer>
+    </section>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,195 @@

+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"
+});

style.css ADDED Viewed

	@@ -0,0 +1,304 @@

+/* Reset CSS dasar */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: #f7f7f8;
+    color: #1f2328;
+    display: flex;
+    height: 100vh;
+    overflow: hidden; /* Mencegah body scroll */
+}
+/* --- 1. Sidebar (Kiri) --- */
+.sidebar {
+    width: 260px;
+    background-color: #ffffff;
+    border-right: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+}
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+.new-chat-btn {
+    flex-grow: 1;
+    padding: 12px;
+    background-color: #4a4aef; /* Biru seperti di gambar */
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.95em;
+    font-weight: 500;
+    cursor: pointer;
+    text-align: left;
+    text-decoration: none; /* Ditambahkan agar link tidak ada garis bawah */
+}
+.new-chat-btn i {
+    margin-right: 8px;
+}
+.search-btn {
+    padding: 10px 12px;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    border-radius: 8px;
+    cursor: pointer;
+}
+.chat-history {
+    flex-grow: 1; /* Membuat history mengisi ruang tersisa */
+    overflow-y: auto; /* Scroll jika history penuh */
+}
+.history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 0 8px;
+}
+.history-header h3 {
+    font-size: 0.8em;
+    color: #6c757d;
+    font-weight: 600;
+}
+.history-header .clear-all {
+    font-size: 0.8em;
+    color: #6c757d;
+    text-decoration: none;
+}
+.chat-history ul {
+    list-style: none;
+}
+.chat-history li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.chat-history li:hover,
+.chat-history li.active {
+    background-color: #f0f0f0;
+}
+.chat-history li i {
+    color: #6c757d;
+}
+.sidebar-footer {
+    border-top: 1px solid #e0e0e0;
+    padding-top: 16px;
+}
+.sidebar-footer ul {
+    list-style: none;
+}
+.sidebar-footer li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+.sidebar-footer li:hover {
+    background-color: #f0f0f0;
+}
+.sidebar-footer .avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #ddd;
+}
+/* --- 2. Chat Area (Kanan) --- */
+.chat-area {
+    flex-grow: 1; /* Mengisi sisa ruang */
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    height: 100vh;
+}
+.chat-header {
+    padding: 20px;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 1.1em;
+    font-weight: 600;
+    flex-shrink: 0; /* Mencegah header mengecil */
+}
+.chat-log {
+    flex-grow: 1; /* Mengisi ruang tengah */
+    overflow-y: auto; /* Ini adalah area chat yang bisa di-scroll */
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px; /* Jarak antar pesan NANTINYA */
+}
+/* --- STYLE UNTUK EMPTY STATE --- */
+.empty-chat-placeholder {
+    flex-grow: 1; /* Memastikan placeholder mengisi ruang chat-log */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: #aaa;
+}
+.empty-chat-placeholder i {
+    font-size: 4em;
+    margin-bottom: 20px;
+    opacity: 0.5;
+}
+.empty-chat-placeholder h2 {
+    font-size: 1.5em;
+    font-weight: 500;
+}
+/* ------------------------------- */
+/* Styling untuk setiap pesan (Disimpan untuk nanti saat Anda tambahkan chat) */
+.chat-message {
+    display: flex;
+    gap: 16px;
+    max-width: 90%; /* Agar tidak terlalu lebar */
+}
+.chat-message .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    flex-shrink: 0;
+}
+.chat-message.user .avatar {
+    background-color: #cce5ff;
+}
+.chat-message.bot .avatar {
+    background-color: #d1e7dd;
+}
+.message-content {
+    padding-top: 8px;
+}
+.message-content strong { /* Untuk nama "CHAT A.I+" */
+    display: block;
+    margin-bottom: 4px;
+    font-size: 1.05em;
+}
+.message-content p,
+.message-content ol {
+    line-height: 1.6;
+}
+.message-content ol {
+    padding-left: 20px; /* Indentasi untuk ordered list */
+    margin-top: 10px;
+}
+.message-content li {
+    margin-bottom: 8px;
+}
+/* Area Input di Bawah */
+.chat-input-area {
+    padding: 24px;
+    border-top: 1px solid #e0e0e0;
+    background-color: #fff;
+    flex-shrink: 0; /* Mencegah input area mengecil */
+}
+.input-wrapper {
+    display: flex;
+    position: relative;
+    max-width: 900px; /* Batasi lebar input */
+    margin: 0 auto; /* tengahkan */
+}
+.chat-input-area input {
+    flex-grow: 1;
+    padding: 16px 50px 16px 20px; /* Beri ruang untuk tombol send */
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 1em;
+}
+.chat-input-area input:focus {
+    outline: none;
+    border-color: #4a4aef;
+    box-shadow: 0 0 0 2px #4a4aef30;
+}
+.send-btn {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: #4a4aef;
+    color: white;
+    border: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%; /* Buat jadi lingkaran */
+    font-size: 1.1em;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+/* Tab "Upgrade" di sisi kanan */
+.upgrade-tab {
+    position: fixed;
+    top: 50%;
+    right: -60px; /* Atur posisi agar sedikit keluar */
+    transform: translateY(-50%) rotate(-90deg);
+    background-color: #4a4aef;
+    color: white;
+    padding: 10px 20px;
+    font-size: 0.9em;
+    font-weight: bold;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    cursor: pointer;
+    z-index: 10;
+}