53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const chatIcon = document.querySelector('.chat-icon');
|
|
const chatWindow = document.querySelector('.chat-window');
|
|
const closeChat = document.querySelector('.close-chat');
|
|
const chatInput = document.querySelector('.chat-input input');
|
|
const sendButton = document.querySelector('.chat-input button');
|
|
const messageContainer = document.querySelector('.message-container');
|
|
|
|
if (chatIcon) {
|
|
chatIcon.addEventListener('click', () => {
|
|
chatWindow.classList.toggle('show');
|
|
});
|
|
}
|
|
|
|
if (closeChat) {
|
|
closeChat.addEventListener('click', () => {
|
|
chatWindow.classList.remove('show');
|
|
});
|
|
}
|
|
|
|
const sendMessage = () => {
|
|
const messageText = chatInput.value.trim();
|
|
if (messageText === '') return;
|
|
|
|
appendMessage(messageText, 'sent');
|
|
chatInput.value = '';
|
|
|
|
// Simulate a response from the AI
|
|
setTimeout(() => {
|
|
appendMessage('I am a demo bot. I will be able to help you soon.', 'received');
|
|
}, 1000);
|
|
};
|
|
|
|
const appendMessage = (text, type) => {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.classList.add('message', type);
|
|
messageDiv.textContent = text;
|
|
messageContainer.appendChild(messageDiv);
|
|
messageContainer.scrollTop = messageContainer.scrollHeight;
|
|
};
|
|
|
|
if (sendButton) {
|
|
sendButton.addEventListener('click', sendMessage);
|
|
}
|
|
|
|
if (chatInput) {
|
|
chatInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
}
|
|
}); |