Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChatBot with Sidebar</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Animation for messages */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .message { | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| /* Mobile sidebar toggle */ | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| .overlay { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| z-index: 10; | |
| } | |
| .overlay.active { | |
| display: block; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 h-screen overflow-hidden"> | |
| <div class="flex h-full"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-900 text-white w-64 md:w-72 flex-shrink-0 flex flex-col z-20"> | |
| <!-- Sidebar Header --> | |
| <div class="p-4 border-b border-indigo-800 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-700 flex items-center justify-center"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h2 class="text-xl font-semibold">ChatBot</h2> | |
| </div> | |
| <button id="closeSidebar" class="md:hidden text-gray-300 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Sidebar Content --> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <div> | |
| <h3 class="text-sm uppercase text-indigo-300 mb-2">Recent Chats</h3> | |
| <div class="space-y-1"> | |
| <div class="p-2 rounded-lg bg-indigo-800 cursor-pointer hover:bg-indigo-700 transition"> | |
| <p class="font-medium">Today's Chat</p> | |
| <p class="text-xs text-indigo-300">Just now</p> | |
| </div> | |
| <div class="p-2 rounded-lg cursor-pointer hover:bg-indigo-800 transition"> | |
| <p class="font-medium">Product Questions</p> | |
| <p class="text-xs text-indigo-300">Yesterday</p> | |
| </div> | |
| <div class="p-2 rounded-lg cursor-pointer hover:bg-indigo-800 transition"> | |
| <p class="font-medium">Technical Support</p> | |
| <p class="text-xs text-indigo-300">2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm uppercase text-indigo-300 mb-2">Quick Actions</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full flex items-center space-x-2 p-2 rounded-lg hover:bg-indigo-800 transition"> | |
| <i class="fas fa-question-circle"></i> | |
| <span>Help Center</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 rounded-lg hover:bg-indigo-800 transition"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-2 p-2 rounded-lg hover:bg-indigo-800 transition"> | |
| <i class="fas fa-history"></i> | |
| <span>History</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm uppercase text-indigo-300 mb-2">Suggested Prompts</h3> | |
| <div class="space-y-2"> | |
| <button class="prompt-btn w-full text-left p-2 bg-indigo-800 rounded-lg hover:bg-indigo-700 transition"> | |
| "How do I reset my password?" | |
| </button> | |
| <button class="prompt-btn w-full text-left p-2 bg-indigo-800 rounded-lg hover:bg-indigo-700 transition"> | |
| "What are your business hours?" | |
| </button> | |
| <button class="prompt-btn w-full text-left p-2 bg-indigo-800 rounded-lg hover:bg-indigo-700 transition"> | |
| "Tell me about your pricing" | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar Footer --> | |
| <div class="p-4 border-t border-indigo-800"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-700 flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">John Doe</p> | |
| <p class="text-xs text-indigo-300">Free Plan</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile overlay --> | |
| <div id="overlay" class="overlay"></div> | |
| <!-- Main Chat Area --> | |
| <div class="flex-1 flex flex-col h-full overflow-hidden"> | |
| <!-- Chat Header --> | |
| <div class="bg-white border-b p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <button id="toggleSidebar" class="md:hidden text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <h2 class="font-semibold">Assistant</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages Container --> | |
| <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50"> | |
| <!-- Bot welcome message --> | |
| <div class="message flex space-x-2"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-[80%]"> | |
| <div class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm"> | |
| <p>Hello! I'm your AI assistant. How can I help you today?</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-white border-t p-4"> | |
| <form id="chatForm" class="flex items-center space-x-2"> | |
| <button type="button" class="w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition"> | |
| <i class="fas fa-plus text-gray-600"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <input | |
| id="messageInput" | |
| type="text" | |
| placeholder="Type your message..." | |
| class="w-full p-3 pr-12 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:bg-white transition" | |
| > | |
| <button type="button" class="absolute right-3 top-3 text-gray-500 hover:text-indigo-600"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| </div> | |
| <button type="submit" class="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-700 flex items-center justify-center text-white transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| <p class="text-xs text-gray-500 mt-2 text-center">AI Assistant may produce inaccurate information</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatForm = document.getElementById('chatForm'); | |
| const messageInput = document.getElementById('messageInput'); | |
| const messagesContainer = document.getElementById('messages'); | |
| const toggleSidebar = document.getElementById('toggleSidebar'); | |
| const closeSidebar = document.getElementById('closeSidebar'); | |
| const sidebar = document.querySelector('.sidebar'); | |
| const overlay = document.getElementById('overlay'); | |
| const promptButtons = document.querySelectorAll('.prompt-btn'); | |
| // Toggle sidebar on mobile | |
| toggleSidebar.addEventListener('click', () => { | |
| sidebar.classList.add('active'); | |
| overlay.classList.add('active'); | |
| }); | |
| closeSidebar.addEventListener('click', () => { | |
| sidebar.classList.remove('active'); | |
| overlay.classList.remove('active'); | |
| }); | |
| overlay.addEventListener('click', () => { | |
| sidebar.classList.remove('active'); | |
| overlay.classList.remove('active'); | |
| }); | |
| // Handle form submission | |
| chatForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const message = messageInput.value.trim(); | |
| if (message) { | |
| addMessage(message, 'user'); | |
| messageInput.value = ''; | |
| // Simulate bot response after a short delay | |
| setTimeout(() => { | |
| const botResponses = [ | |
| "I understand your question about '" + message + "'. Let me look that up for you.", | |
| "That's an interesting question! Here's what I found...", | |
| "I can help with that. " + message + " is related to...", | |
| "Thanks for asking! The answer to '" + message + "' is..." | |
| ]; | |
| const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)]; | |
| addMessage(randomResponse, 'bot'); | |
| }, 1000 + Math.random() * 2000); // Random delay between 1-3 seconds | |
| } | |
| }); | |
| // Add click handlers for prompt buttons | |
| promptButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const prompt = this.textContent.trim().replace(/"/g, ''); | |
| messageInput.value = prompt; | |
| messageInput.focus(); | |
| }); | |
| }); | |
| // Function to add a new message to the chat | |
| function addMessage(text, sender) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message flex space-x-2 ${sender === 'user' ? 'justify-end' : ''}`; | |
| if (sender === 'user') { | |
| messageDiv.innerHTML = ` | |
| <div class="max-w-[80%]"> | |
| <div class="bg-indigo-600 text-white p-3 rounded-lg rounded-tr-none shadow-sm"> | |
| <p>${text}</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1 text-right">Just now</p> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.innerHTML = ` | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| </div> | |
| <div class="max-w-[80%]"> | |
| <div class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm"> | |
| <p>${text}</p> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| `; | |
| } | |
| messagesContainer.appendChild(messageDiv); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| // Allow pressing Enter to send message (but Shift+Enter for new line) | |
| messageInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| chatForm.dispatchEvent(new Event('submit')); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=axanto/chatbot-try" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |