64 lines
2.5 KiB
JavaScript
64 lines
2.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const sendBtn = document.getElementById('chat-send-btn');
|
|
const chatInput = document.getElementById('chat-input');
|
|
const chatBody = document.getElementById('chat-body');
|
|
const chatGreeting = document.querySelector('.chat-greeting');
|
|
|
|
const appendMessage = (text, sender) => {
|
|
// Remove greeting if it exists
|
|
if (chatGreeting && chatGreeting.parentElement === chatBody) {
|
|
chatBody.removeChild(chatGreeting);
|
|
}
|
|
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.classList.add('chat-message', `message-${sender}`);
|
|
|
|
const avatarDiv = document.createElement('div');
|
|
avatarDiv.classList.add('avatar');
|
|
|
|
if (sender === 'bot') {
|
|
// Simple bot icon
|
|
avatarDiv.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8.5 12.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM12 16c-2.33 0-4.32-1.45-5.12-3.5h10.24c-.8 2.05-2.79 3.5-5.12 3.5z"/></svg>';
|
|
} else {
|
|
avatarDiv.textContent = 'U'; // Simple text avatar for user
|
|
}
|
|
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.classList.add('message-content');
|
|
contentDiv.textContent = text;
|
|
|
|
messageDiv.appendChild(avatarDiv);
|
|
messageDiv.appendChild(contentDiv);
|
|
|
|
chatBody.appendChild(messageDiv);
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
};
|
|
|
|
const handleUserMessage = () => {
|
|
const messageText = chatInput.value.trim();
|
|
if (messageText === '') return;
|
|
|
|
appendMessage(messageText, 'user');
|
|
chatInput.value = '';
|
|
|
|
// Simulate bot response
|
|
setTimeout(() => {
|
|
appendMessage('...', 'bot');
|
|
}, 500);
|
|
|
|
setTimeout(() => {
|
|
// remove the ... message
|
|
if(chatBody.lastChild.textContent.includes('...')){
|
|
chatBody.lastChild.remove();
|
|
}
|
|
appendMessage('This is a placeholder response. The backend is not yet connected.', 'bot');
|
|
}, 1500);
|
|
};
|
|
|
|
sendBtn.addEventListener('click', handleUserMessage);
|
|
chatInput.addEventListener('keypress', function (e) {
|
|
if (e.key === 'Enter') {
|
|
handleUserMessage();
|
|
}
|
|
});
|
|
}); |