136 lines
5.0 KiB
JavaScript
136 lines
5.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const chatWidget = document.querySelector('.chat-widget');
|
|
const chatWindow = document.querySelector('.chat-window');
|
|
const closeButton = document.querySelector('.chat-header .btn-close');
|
|
const sendButton = document.querySelector('.chat-footer .btn-primary');
|
|
const messageInput = document.querySelector('.chat-footer .form-control');
|
|
const chatBody = document.querySelector('.chat-body');
|
|
|
|
if (chatWidget) {
|
|
chatWidget.addEventListener('click', function() {
|
|
if (chatWindow.style.display === 'flex') {
|
|
chatWindow.style.display = 'none';
|
|
} else {
|
|
chatWindow.style.display = 'flex';
|
|
}
|
|
});
|
|
}
|
|
|
|
if (closeButton) {
|
|
closeButton.addEventListener('click', function() {
|
|
chatWindow.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
function getBotResponse(message) {
|
|
const lowerMessage = message.toLowerCase();
|
|
if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) {
|
|
return 'Hello there! How can I assist you today?';
|
|
}
|
|
if (lowerMessage.includes('help')) {
|
|
return 'I can help with a variety of topics. What do you need assistance with? You can ask me about images or voice control.';
|
|
}
|
|
if (lowerMessage.includes('image')) {
|
|
return 'I can generate images, but that feature is not implemented yet. Stay tuned!';
|
|
}
|
|
if (lowerMessage.includes('voice')) {
|
|
return 'I can handle voice commands, but that feature is not implemented yet. Stay tuned!';
|
|
}
|
|
if (lowerMessage.includes('bye')) {
|
|
return 'Goodbye! Have a great day!';
|
|
}
|
|
return 'Thanks for your message! I am a simple bot. More advanced AI features are coming soon.';
|
|
}
|
|
|
|
function sendMessage() {
|
|
const messageText = messageInput.value.trim();
|
|
if (messageText === '') return;
|
|
|
|
// Add user message to chat body
|
|
const userMessage = document.createElement('div');
|
|
userMessage.classList.add('message', 'user-message');
|
|
userMessage.textContent = messageText;
|
|
chatBody.appendChild(userMessage);
|
|
|
|
// Clear input
|
|
messageInput.value = '';
|
|
|
|
// Scroll to bottom
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
|
|
// Show typing indicator
|
|
const typingIndicator = document.createElement('div');
|
|
typingIndicator.classList.add('message', 'bot-message', 'typing-indicator');
|
|
typingIndicator.innerHTML = '<span></span><span></span><span></span>';
|
|
chatBody.appendChild(typingIndicator);
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
|
|
// Bot reply
|
|
setTimeout(() => {
|
|
const botResponse = getBotResponse(messageText);
|
|
typingIndicator.remove();
|
|
const botMessage = document.createElement('div');
|
|
botMessage.classList.add('message', 'bot-message');
|
|
botMessage.textContent = botResponse;
|
|
chatBody.appendChild(botMessage);
|
|
chatBody.scrollTop = chatBody.scrollHeight;
|
|
}, 1000);
|
|
}
|
|
|
|
if (sendButton) {
|
|
sendButton.addEventListener('click', sendMessage);
|
|
}
|
|
|
|
if (messageInput) {
|
|
messageInput.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
sendMessage();
|
|
}
|
|
});
|
|
}
|
|
|
|
const speechToTextButton = document.getElementById('speech-to-text-btn');
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
|
|
if (SpeechRecognition) {
|
|
const recognition = new SpeechRecognition();
|
|
recognition.continuous = false;
|
|
recognition.lang = 'en-US';
|
|
recognition.interimResults = false;
|
|
recognition.maxAlternatives = 1;
|
|
|
|
speechToTextButton.addEventListener('click', () => {
|
|
recognition.start();
|
|
speechToTextButton.classList.add('listening');
|
|
speechToTextButton.disabled = true;
|
|
});
|
|
|
|
recognition.onresult = (event) => {
|
|
const transcript = event.results[0][0].transcript;
|
|
messageInput.value = transcript;
|
|
};
|
|
|
|
recognition.onspeechend = () => {
|
|
recognition.stop();
|
|
};
|
|
|
|
recognition.onend = () => {
|
|
speechToTextButton.classList.remove('listening');
|
|
speechToTextButton.disabled = false;
|
|
};
|
|
|
|
recognition.onerror = (event) => {
|
|
console.error('Speech recognition error:', event.error);
|
|
alert(`Error occurred in speech recognition: ${event.error}`);
|
|
speechToTextButton.classList.remove('listening');
|
|
speechToTextButton.disabled = false;
|
|
};
|
|
} else {
|
|
if (speechToTextButton) {
|
|
speechToTextButton.style.display = 'none';
|
|
}
|
|
console.log('Speech Recognition not supported in this browser.');
|
|
alert('Speech Recognition not supported in this browser.');
|
|
}
|
|
});
|