Spaces:
Running
Running
File size: 3,902 Bytes
08f580f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | document.addEventListener('DOMContentLoaded', function() {
const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
function addMessage(role, content) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${role} ${role === 'user' ? 'bg-gray-700 rounded-xl p-4 border-l-4 border-neon-500' : 'bg-gray-700 bg-opacity-50 rounded-xl p-4 border-l-4 border-quantum-500'}`;
const messageContent = `
<div class="flex items-start space-x-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full ${role === 'user' ? 'bg-neon-600' : 'bg-quantum-600'} flex items-center justify-center">
<i data-feather="${role === 'user' ? 'user' : 'cpu'}" class="text-white w-4 h-4"></i>
</div>
<div class="text-neon-100">
<p>${content}</p>
</div>
</div>
`;
messageDiv.innerHTML = messageContent;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
feather.replace();
}
function simulateTyping() {
const typingDiv = document.createElement('div');
typingDiv.className = 'message bot bg-gray-700 bg-opacity-50 rounded-xl p-4 border-l-4 border-quantum-500';
const typingContent = `
<div class="flex items-start space-x-3">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-quantum-600 flex items-center justify-center">
<i data-feather="cpu" class="text-white w-4 h-4"></i>
</div>
<div class="text-neon-100">
<div class="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
`;
typingDiv.innerHTML = typingContent;
chatMessages.appendChild(typingDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
feather.replace();
return typingDiv;
}
function removeTypingIndicator(typingElement) {
if (typingElement && typingElement.parentNode) {
typingElement.remove();
}
}
sendButton.addEventListener('click', function() {
const message = userInput.value.trim();
if (message) {
addMessage('user', message);
userInput.value = '';
const typingElement = simulateTyping();
// Simulate AI response after a delay
setTimeout(() => {
removeTypingIndicator(typingElement);
// Generate a mock response (in a real app, this would be from an API)
const responses = [
"I've processed your quantum query and found interesting patterns in the data.",
"The neural network suggests several possible interpretations of your request.",
"Analyzing temporal dimensions... your input resonates with 87.3% probability.",
"The quantum algorithm has converged on this response after evaluating multiple possibilities.",
"Fascinating perspective! My cognitive modules are processing the implications."
];
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
addMessage('bot', randomResponse);
}, 1500 + Math.random() * 2000);
}
});
userInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendButton.click();
}
});
}); |