Remove chat page and update color palette
This commit removes the chat page feature, including its HTML, JavaScript, and CSS files. The color palette documentation has also been updated. The chat page was deemed unnecessary for the current scope of the project.
This commit is contained in:
255
form-page/chat-page/script.js
Normal file
255
form-page/chat-page/script.js
Normal file
@@ -0,0 +1,255 @@
|
||||
// Check if leadData exists in localStorage
|
||||
if (!localStorage.getItem('leadData')) {
|
||||
window.location.href = '../index.html'; // Redirect to form page
|
||||
}
|
||||
|
||||
// Fungsi untuk menambahkan pesan baru ke area chat
|
||||
function addMessage(content, isSent) {
|
||||
const chatArea = document.querySelector('.chat-area');
|
||||
|
||||
// Buat elemen pesan
|
||||
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';
|
||||
messageContent.textContent = content;
|
||||
|
||||
// Tambahkan waktu pesan
|
||||
const now = new Date();
|
||||
const time = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
const messageTime = document.createElement('div');
|
||||
messageTime.className = 'message-time';
|
||||
messageTime.textContent = time;
|
||||
|
||||
// Gabungkan semua elemen
|
||||
message.appendChild(messageContent);
|
||||
message.appendChild(messageTime);
|
||||
|
||||
// Tambahkan ke area chat dengan animasi
|
||||
chatArea.appendChild(message);
|
||||
|
||||
// Scroll ke bawah untuk melihat pesan terbaru
|
||||
chatArea.scrollTop = chatArea.scrollHeight;
|
||||
}
|
||||
|
||||
// Fungsi untuk menampilkan indikator mengetik
|
||||
function showTypingIndicator() {
|
||||
const chatArea = document.querySelector('.chat-area');
|
||||
const typingIndicator = document.createElement('div');
|
||||
typingIndicator.className = 'typing-indicator';
|
||||
typingIndicator.innerHTML = `
|
||||
<div class="typing-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
`;
|
||||
chatArea.appendChild(typingIndicator);
|
||||
chatArea.scrollTop = chatArea.scrollHeight;
|
||||
return typingIndicator;
|
||||
}
|
||||
|
||||
// Fungsi untuk menyembunyikan indikator mengetik
|
||||
function hideTypingIndicator(indicator) {
|
||||
if (indicator) {
|
||||
indicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Generate unique session ID
|
||||
function generateSessionId() {
|
||||
return 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
|
||||
}
|
||||
|
||||
// Fungsi untuk mengirim pesan
|
||||
async function sendMessage() {
|
||||
const input = document.querySelector('.message-input');
|
||||
const message = input.value.trim();
|
||||
|
||||
if (message) {
|
||||
addMessage(message, true);
|
||||
input.value = '';
|
||||
toggleAttachmentIcons(true); // Tampilkan kembali ikon setelah mengirim
|
||||
|
||||
const typingIndicator = showTypingIndicator();
|
||||
|
||||
try {
|
||||
// Get or create session ID
|
||||
let sessionId = localStorage.getItem('chatSessionId');
|
||||
if (!sessionId) {
|
||||
sessionId = generateSessionId();
|
||||
localStorage.setItem('chatSessionId', sessionId);
|
||||
}
|
||||
|
||||
// Retrieve bidangBisnis from localStorage
|
||||
const leadData = localStorage.getItem('leadData');
|
||||
let bidangBisnis = '';
|
||||
if (leadData) {
|
||||
const data = JSON.parse(leadData);
|
||||
bidangBisnis = data.bidangBisnis;
|
||||
}
|
||||
|
||||
const response = await fetch('https://bot.kediritechnopark.com/webhook/e4559efb-e624-478b-8d40-c287c7c203e7', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
text: message,
|
||||
sessionId: sessionId,
|
||||
bidangBisnis: bidangBisnis
|
||||
})
|
||||
});
|
||||
|
||||
hideTypingIndicator(typingIndicator);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Cek apakah ada balasan dari bot
|
||||
if (data && data.output) {
|
||||
addMessage(data.output, false);
|
||||
} else {
|
||||
addMessage('Maaf, terjadi kesalahan saat memproses balasan.', false);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
hideTypingIndicator(typingIndicator);
|
||||
console.error('Error sending message:', error);
|
||||
addMessage('Maaf, tidak dapat terhubung ke server. Silakan coba lagi nanti.', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
// Event listener untuk tombol Enter
|
||||
document.querySelector('.message-input').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
// Event listener untuk input text
|
||||
const messageInput = document.querySelector('.message-input');
|
||||
messageInput.addEventListener('input', function() {
|
||||
if (this.value.trim() !== '') {
|
||||
toggleAttachmentIcons(false);
|
||||
} else {
|
||||
toggleAttachmentIcons(true);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle virtual keyboard on mobile
|
||||
messageInput.addEventListener('focus', function() {
|
||||
// Scroll input into view
|
||||
setTimeout(() => {
|
||||
this.scrollIntoView({behavior: 'smooth', block: 'end'});
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Initialize attachment icons
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
toggleAttachmentIcons(true);
|
||||
|
||||
// Handle initial scroll position
|
||||
const chatArea = document.querySelector('.chat-area');
|
||||
chatArea.scrollTop = chatArea.scrollHeight;
|
||||
});
|
||||
|
||||
// Inisialisasi chat setelah DOM selesai dimuat
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Simulate explanatory demo conversation
|
||||
const simulateConversation = async () => {
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
addMessage('Halo, saya tertarik dengan layanan Mayagen. Bisa jelaskan apa saja fiturnya?', true);
|
||||
|
||||
let typingIndicator = showTypingIndicator();
|
||||
await new Promise(resolve => setTimeout(resolve, 2500));
|
||||
hideTypingIndicator(typingIndicator);
|
||||
addMessage('Tentu! Senang Anda tertarik. Mayagen adalah asisten AI yang dirancang untuk mengotomatisasi interaksi pelanggan dan meningkatkan efisiensi bisnis Anda 24/7.', false);
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 2500));
|
||||
addMessage('Sangat menarik. Apakah Mayagen hanya berfungsi di webchat seperti yang saya gunakan sekarang?', true);
|
||||
|
||||
typingIndicator = showTypingIndicator();
|
||||
await new Promise(resolve => setTimeout(resolve, 3500));
|
||||
hideTypingIndicator(typingIndicator);
|
||||
addMessage('Pertanyaan yang sangat bagus! Webchat ini hanyalah salah satu contoh platform yang bisa saya layani. Kekuatan utama Mayagen adalah kemampuan untuk menjawab pesan secara otomatis di berbagai channel populer secara terpisah.', false);
|
||||
|
||||
typingIndicator = showTypingIndicator();
|
||||
await new Promise(resolve => setTimeout(resolve, 3500));
|
||||
hideTypingIndicator(typingIndicator);
|
||||
addMessage('Saya bisa membalas DM di Instagram, merespons chat di WhatsApp, dan berinteraksi dengan pelanggan Anda di Telegram. Semua fitur ini berjalan independen di masing-masing platform, memberikan pengalaman terbaik bagi pelanggan Anda.', false);
|
||||
|
||||
typingIndicator = showTypingIndicator();
|
||||
await new Promise(resolve => setTimeout(resolve, 2500));
|
||||
hideTypingIndicator(typingIndicator);
|
||||
|
||||
// Retrieve bidangBisnis from localStorage
|
||||
const leadData = localStorage.getItem('leadData');
|
||||
let bidangBisnis = '';
|
||||
if (leadData) {
|
||||
const data = JSON.parse(leadData);
|
||||
bidangBisnis = data.bidangBisnis;
|
||||
}
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
addMessage(`Silakan gunakan demo ini untuk bertanya mengenai persoalan bisnis ${bidangBisnis} yang Anda pilih.`, false);
|
||||
};
|
||||
|
||||
simulateConversation();
|
||||
|
||||
// Handle viewport height for mobile browsers
|
||||
const setVh = () => {
|
||||
const vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
};
|
||||
setVh();
|
||||
window.addEventListener('resize', setVh);
|
||||
window.addEventListener('load', setVh);
|
||||
|
||||
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)
|
||||
Reference in New Issue
Block a user