Spaces:
Running
Running
File size: 5,018 Bytes
46a630d 003030c 46a630d 003030c 46a630d | 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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | document.addEventListener('DOMContentLoaded', () => {
const chatContainer = document.getElementById('chatContainer');
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');
// Function to add a message to the chat
function addMessage(text, isUser) {
const messageDiv = document.createElement('div');
messageDiv.className = isUser ? 'user-message mb-4' : 'bot-message mb-4';
const messageContent = `
<div class="flex items-start gap-3 ${isUser ? 'justify-end' : ''}">
${!isUser ? `
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
<i data-feather="cpu"></i>
</div>
` : ''}
<div class="${isUser ? 'bg-purple-600 text-white' : 'bg-purple-100'} rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg">
<p>${text}</p>
</div>
${isUser ? `
<div class="w-8 h-8 rounded-full bg-gray-400 flex items-center justify-center text-white">
<i data-feather="user"></i>
</div>
` : ''}
</div>
`;
messageDiv.innerHTML = messageContent;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
feather.replace();
}
// Function to simulate bot response
function getBotResponse(userMessage) {
// Simple response logic (replace with API call in real implementation)
const responses = [
"I'm not sure I understand. Could you elaborate?",
"Interesting point! What else would you like to know?",
"I can help with that. Here's what I found...",
"Thanks for sharing that with me!",
"Let me think about that for a moment..."
];
return responses[Math.floor(Math.random() * responses.length)];
}
// Get modal elements
const modal = document.getElementById('createModal');
const createBtn = document.getElementById('createBtn');
const modifyBtn = document.getElementById('modifyBtn');
const cancelBtn = document.getElementById('cancelBtn');
// Function to close modal
function closeModal() {
modal.style.display = 'none';
}
// Modal button event listeners
createBtn.addEventListener('click', () => {
addMessage("Creating new content...", false);
closeModal();
});
modifyBtn.addEventListener('click', () => {
addMessage("Modifying existing content...", false);
closeModal();
});
cancelBtn.addEventListener('click', closeModal);
// Close modal when clicking outside
window.addEventListener('click', (e) => {
if (e.target === modal) {
closeModal();
}
});
// Send message when button is clicked
sendButton.addEventListener('click', () => {
const message = userInput.value.trim();
if (message) {
addMessage(message, true);
userInput.value = '';
// Show modal if user typed 'create'
if (message.toLowerCase() === 'create') {
modal.style.display = 'flex';
return;
}
// Simulate typing indicator
const typingIndicator = document.createElement('div');
typingIndicator.className = 'bot-message mb-4';
typingIndicator.innerHTML = `
<div class="flex items-start gap-3">
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
<i data-feather="cpu"></i>
</div>
<div class="bg-purple-100 rounded-lg p-3 w-24">
<div class="flex gap-1">
<div class="w-2 h-2 rounded-full bg-purple-400 animate-bounce"></div>
<div class="w-2 h-2 rounded-full bg-purple-400 animate-bounce" style="animation-delay: 0.2s"></div>
<div class="w-2 h-2 rounded-full bg-purple-400 animate-bounce" style="animation-delay: 0.4s"></div>
</div>
</div>
</div>
`;
chatContainer.appendChild(typingIndicator);
chatContainer.scrollTop = chatContainer.scrollHeight;
feather.replace();
// Simulate bot response after delay
setTimeout(() => {
chatContainer.removeChild(typingIndicator);
const botResponse = getBotResponse(message);
addMessage(botResponse, false);
}, 1500);
}
});
// Send message when Enter is pressed
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendButton.click();
}
});
}); |