diff --git a/assets/css/custom.css b/assets/css/custom.css index d4ac44f..bcd3f03 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,4 +1,3 @@ - html { scroll-behavior: smooth; } @@ -124,3 +123,35 @@ body { margin-right: 0.5rem; } +.typing-indicator { + display: flex; + align-items: center; + padding: 1rem; +} + +.typing-indicator span { + height: 8px; + width: 8px; + background-color: #999; + border-radius: 50%; + display: inline-block; + margin: 0 2px; + animation: bounce 1s infinite; +} + +.typing-indicator span:nth-child(2) { + animation-delay: 0.1s; +} + +.typing-indicator span:nth-child(3) { + animation-delay: 0.2s; +} + +@keyframes bounce { + 0%, 80%, 100% { + transform: scale(0); + } + 40% { + transform: scale(1.0); + } +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index e943f17..ce711df 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -22,6 +22,26 @@ document.addEventListener('DOMContentLoaded', function() { }); } + 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; @@ -38,14 +58,23 @@ document.addEventListener('DOMContentLoaded', function() { // 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 = ''; + 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 = 'Thanks for your message! This is a pre-written response. AI integration is coming soon.'; + botMessage.textContent = botResponse; chatBody.appendChild(botMessage); chatBody.scrollTop = chatBody.scrollHeight; - }, 500); + }, 1000); } if (sendButton) { @@ -59,4 +88,4 @@ document.addEventListener('DOMContentLoaded', function() { } }); } -}); +}); \ No newline at end of file