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