Spaces:
Running
Running
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chatty McBotface - AI Chatbot</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366f1', | |
| }, | |
| secondary: { | |
| 500: '#8b5cf6', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-100 h-full flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="flex-1 container mx-auto px-4 py-8"> | |
| <div id="chat-container" class="bg-white rounded-lg shadow-lg h-[70vh] overflow-hidden flex flex-col relative"> | |
| <div class="bg-gradient-to-r from-primary-500 to-secondary-500 p-4 text-white"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center"> | |
| <i data-feather="message-square"></i> | |
| </div> | |
| <h2 class="text-xl font-bold">Chatty McBotface</h2> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 left-0 w-full z-10 bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-4 py-2 flex justify-between items-center"> | |
| <button id="history-btn" class="flex items-center gap-2 hover:bg-white/10 px-3 py-1 rounded transition"> | |
| <i data-feather="clock"></i> | |
| <span>History</span> | |
| </button> | |
| <div id="history-dropdown" class="hidden absolute top-full left-0 mt-1 w-64 bg-white rounded-lg shadow-lg z-20"> | |
| <div class="p-3 border-b border-gray-200 font-medium text-gray-700">Conversation History</div> | |
| <div id="history-list" class="max-h-60 overflow-y-auto"> | |
| <!-- History items will be added here --> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4 mt-12"> | |
| <!-- Messages will be inserted here --> | |
| <div class="w-full flex justify-center"> | |
| <div class="bg-gray-100 rounded-lg p-4 max-w-[80%] text-center"> | |
| <p class="text-gray-600">Hi there! I'm your friendly AI assistant. How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <form id="chat-form" class="flex gap-2"> | |
| <input | |
| type="text" | |
| id="user-input" | |
| placeholder="Type your message here..." | |
| class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" | |
| autocomplete="off" | |
| > | |
| <button | |
| type="submit" | |
| class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2" | |
| > | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| <span>Send</span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Chat history functionality | |
| const historyBtn = document.getElementById('history-btn'); | |
| const historyDropdown = document.getElementById('history-dropdown'); | |
| const historyList = document.getElementById('history-list'); | |
| // Toggle history dropdown | |
| historyBtn.addEventListener('click', () => { | |
| historyDropdown.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!historyBtn.contains(e.target) && !historyDropdown.contains(e.target)) { | |
| historyDropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Load saved conversations | |
| function loadChatHistory() { | |
| const history = JSON.parse(localStorage.getItem('chatHistory') || '[]'); | |
| historyList.innerHTML = ''; | |
| if (history.length === 0) { | |
| historyList.innerHTML = '<div class="p-3 text-gray-500 text-center">No previous conversations</div>'; | |
| return; | |
| } | |
| history.forEach((conv, index) => { | |
| const historyItem = document.createElement('div'); | |
| historyItem.className = 'p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer'; | |
| historyItem.innerHTML = ` | |
| <div class="font-medium text-gray-800 truncate">${conv.preview || 'Conversation'}</div> | |
| <div class="text-xs text-gray-500">${new Date(conv.timestamp).toLocaleString()}</div> | |
| `; | |
| historyItem.addEventListener('click', () => { | |
| loadConversation(index); | |
| historyDropdown.classList.add('hidden'); | |
| }); | |
| historyList.appendChild(historyItem); | |
| }); | |
| } | |
| // Save current conversation | |
| function saveConversation() { | |
| const messages = document.getElementById('chat-messages'); | |
| const preview = messages.lastElementChild?.textContent?.trim().substring(0, 50) || 'New conversation'; | |
| const history = JSON.parse(localStorage.getItem('chatHistory') || '[]'); | |
| history.unshift({ | |
| messages: Array.from(messages.children).map(el => ({ | |
| text: el.querySelector('p')?.textContent, | |
| sender: el.classList.contains('justify-end') ? 'user' : 'bot' | |
| })), | |
| preview, | |
| timestamp: new Date().toISOString() | |
| }); | |
| // Keep only last 10 conversations | |
| localStorage.setItem('chatHistory', JSON.stringify(history.slice(0, 10))); | |
| loadChatHistory(); | |
| } | |
| // Load a specific conversation | |
| function loadConversation(index) { | |
| const history = JSON.parse(localStorage.getItem('chatHistory') || '[]'); | |
| const conv = history[index]; | |
| if (!conv) return; | |
| const messagesContainer = document.getElementById('chat-messages'); | |
| messagesContainer.innerHTML = ''; | |
| conv.messages.forEach(msg => { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `w-full flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`; | |
| const bubbleClass = msg.sender === 'user' | |
| ? 'bg-primary-500 text-white rounded-br-none' | |
| : 'bg-gray-100 text-gray-800 rounded-bl-none'; | |
| messageDiv.innerHTML = ` | |
| <div class="max-w-[80%] rounded-lg p-4 ${bubbleClass}"> | |
| <p>${msg.text}</p> | |
| </div> | |
| `; | |
| messagesContainer.appendChild(messageDiv); | |
| }); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| // Initialize chat history | |
| loadChatHistory(); | |
| // Simple chatbot logic | |
| document.getElementById('chat-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const input = document.getElementById('user-input'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| // Add user message | |
| addMessage(message, 'user'); | |
| input.value = ''; | |
| // Simulate bot thinking | |
| setTimeout(() => { | |
| const responses = [ | |
| "I understand what you're asking about!", | |
| "That's an interesting question!", | |
| "Let me think about that for a moment...", | |
| "I've processed your request and here's what I found:", | |
| "According to my knowledge base:" | |
| ]; | |
| const botResponse = responses[Math.floor(Math.random() * responses.length)] + | |
| " This is a simulated response. In a real implementation, this would connect to an AI API like OpenAI."; | |
| addMessage(botResponse, 'bot'); | |
| saveConversation(); | |
| }, 1000); | |
| } | |
| }); | |
| // Save conversation when leaving page | |
| window.addEventListener('beforeunload', saveConversation); | |
| function addMessage(text, sender) { | |
| const messagesContainer = document.getElementById('chat-messages'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `w-full flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`; | |
| const bubbleClass = sender === 'user' | |
| ? 'bg-primary-500 text-white rounded-br-none' | |
| : 'bg-gray-100 text-gray-800 rounded-bl-none'; | |
| messageDiv.innerHTML = ` | |
| <div class="max-w-[80%] rounded-lg p-4 ${bubbleClass}"> | |
| <p>${text}</p> | |
| </div> | |
| `; | |
| messagesContainer.appendChild(messageDiv); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |