Spaces:
Running
Running
| 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(); | |
| } | |
| }); | |
| }); |