refactor(ui): Modernize chat interface and standardize background

This commit overhauls the chat page UI for a cleaner, more modern aesthetic inspired by popular messaging apps.

Key changes include:
- Redesigned the chat header to display the user's name and role.
- Replaced the message input area with a WhatsApp-style layout.
- Added user avatars to received messages and a person icon to sent messages for clearer identification.
- Swapped custom SVG icons with Bootstrap Icons for consistency and easier maintenance.
- Removed the floating circles background animation from both the chat and login pages to reduce visual clutter and improve focus.

chat-page/script.js

@@ -6,6 +6,23 @@ function addMessage(content, isSent) {
     const message = document.createElement('div');
     message.className = `message ${isSent ? 'sent' : 'received'}`;
     
+// Ambil inisial dari nama di header
+const userName = document.querySelector('.user-details h2').textContent;
+const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1); // Ambil huruf pertama saja
+
+// Tambahkan avatar kecil untuk pesan masuk
+if (!isSent) {
+    const smallAvatar = document.createElement('div');
+    smallAvatar.className = 'small-avatar';
+    smallAvatar.textContent = userInitial; // Gunakan inisial dari nama
+    message.appendChild(smallAvatar);
+} else {
+        // Tambahkan ikon person untuk pesan keluar (dikirim oleh pengguna)
+        const personIcon = document.createElement('i');
+        personIcon.className = 'bi bi-person sent-user-icon';
+        message.appendChild(personIcon);
+    }
+    
     // Tambahkan konten pesan
     const messageContent = document.createElement('div');
     messageContent.className = 'message-content';
@@ -55,30 +72,6 @@ function hideTypingIndicator(indicator) {
     }
 }
 
-// Setup Intersection Observer untuk efek fade-out
-function setupMessageObserver() {
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (!entry.isIntersecting) {
-                // Ketika elemen keluar dari viewport
-                entry.target.style.opacity = '0.3';
-                entry.target.style.transform = 'translateY(10px)';
-            } else {
-                // Ketika elemen masuk ke viewport
-                entry.target.style.opacity = '1';
-                entry.target.style.transform = 'translateY(0)';
-            }
-        });
-    }, {
-        threshold: 0.1 // Trigger ketika 10% elemen masih terlihat
-    });
-
-    // Terapkan observer ke semua pesan
-    document.querySelectorAll('.message').forEach(message => {
-        observer.observe(message);
-    });
-}
-
 // Fungsi untuk mengirim pesan
 function sendMessage() {
     const input = document.querySelector('.message-input');
@@ -87,6 +80,7 @@ function sendMessage() {
     if (message) {
         addMessage(message, true);
         input.value = '';
+        toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
         
         // Simulasikan balasan otomatis setelah 2 detik
         setTimeout(() => {
@@ -101,6 +95,18 @@ function sendMessage() {
     }
 }
 
+// Function to toggle attachment icons visibility
+function toggleAttachmentIcons(show) {
+    const icons = document.querySelector('.attachment-icons');
+    if (show) {
+        icons.style.opacity = '1';
+        icons.style.transform = 'translateY(-50%)';
+    } else {
+        icons.style.opacity = '0';
+        icons.style.transform = 'translateY(-50%) translateX(20px)';
+    }
+}
+
 // Event listener untuk tombol kirim
 document.querySelector('.send-btn').addEventListener('click', sendMessage);
 
@@ -111,6 +117,21 @@ document.querySelector('.message-input').addEventListener('keypress', (e) => {
     }
 });
 
+// Event listener untuk input text
+const messageInput = document.querySelector('.message-input');
+messageInput.addEventListener('input', function() {
+    if (this.value.trim() !== '') {
+        toggleAttachmentIcons(false);
+    } else {
+        toggleAttachmentIcons(true);
+    }
+});
+
+// Initialize attachment icons
+document.addEventListener('DOMContentLoaded', () => {
+    toggleAttachmentIcons(true);
+});
+
 // Inisialisasi chat setelah DOM selesai dimuat
 document.addEventListener('DOMContentLoaded', () => {
     // Tampilkan indikator mengetik saat halaman pertama dimuat
@@ -122,5 +143,13 @@ document.addEventListener('DOMContentLoaded', () => {
         addMessage('Hai, ada yang bisa saya bantu?', false);
     }, 3000);
     
-    setupMessageObserver();
+// Update avatar utama dengan inisial dari nama saat halaman dimuat
+document.addEventListener('DOMContentLoaded', () => {
+    const userName = document.querySelector('.user-details h2').textContent;
+    const userInitial = userName.split(' ').map(n => n[0]).join('').substring(0, 1);
+    document.querySelector('.avatar').textContent = userInitial;
 });
+});
+
+// Pastikan animasi mengetik muncul sebelum pesan sambutan
+// (Sudah diimplementasikan di atas)