Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SupportBot - Customer Assistance</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> | |
| .chat-container { | |
| height: calc(100vh - 180px); | |
| } | |
| @media (max-width: 640px) { | |
| .chat-container { | |
| height: calc(100vh - 160px); | |
| } | |
| } | |
| .message { | |
| max-width: 80%; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .typing-indicator { | |
| display: inline-block; | |
| } | |
| .typing-indicator span { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #4b5563; | |
| margin: 0 2px; | |
| opacity: 0.4; | |
| } | |
| .typing-indicator span:nth-child(1) { | |
| animation: bounce 1s infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation: bounce 1s infinite 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation: bounce 1s infinite 0.4s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); opacity: 0.4; } | |
| 50% { transform: translateY(-5px); opacity: 1; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .send-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto max-w-4xl p-4"> | |
| <!-- Header --> | |
| <header class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800">SupportBot</h1> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| <span id="current-time"></span> | |
| </div> | |
| </header> | |
| <!-- Chat Container --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Chat Header --> | |
| <div class="bg-blue-600 text-white p-4 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-headset text-white"></i> | |
| </div> | |
| <div> | |
| <h2 class="font-semibold">Customer Support</h2> | |
| <p class="text-xs opacity-80" id="status-indicator">Online</p> | |
| </div> | |
| </div> | |
| <!-- Messages Area --> | |
| <div class="chat-container p-4 overflow-y-auto" id="chat-messages"> | |
| <!-- Messages will be inserted here by JavaScript --> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t border-gray-200 p-4 bg-gray-50"> | |
| <div class="flex items-center space-x-2"> | |
| <input | |
| type="text" | |
| id="user-input" | |
| placeholder="Type your message here..." | |
| class="flex-1 px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" | |
| autocomplete="off" | |
| > | |
| <button | |
| id="send-btn" | |
| class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 transition-colors send-btn" | |
| disabled | |
| > | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 text-center"> | |
| Try asking: "What are your hours?", "How do I contact support?", or "What services do you offer?" | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Update current time | |
| function updateTime() { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| document.getElementById('current-time').textContent = timeString; | |
| } | |
| updateTime(); | |
| setInterval(updateTime, 1000); | |
| // DOM elements | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const statusIndicator = document.getElementById('status-indicator'); | |
| // Initial greeting | |
| setTimeout(() => { | |
| addBotMessage("Hello! I'm SupportBot, your virtual assistant. How can I help you today?"); | |
| }, 500); | |
| // Enable/disable send button based on input | |
| userInput.addEventListener('input', function() { | |
| sendBtn.disabled = this.value.trim() === ''; | |
| }); | |
| // Send message on Enter key or button click | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' && !sendBtn.disabled) { | |
| sendMessage(); | |
| } | |
| }); | |
| sendBtn.addEventListener('click', sendMessage); | |
| // Chatbot responses | |
| const responses = { | |
| greetings: ["Hello!", "Hi there!", "Greetings! How can I assist you today?"], | |
| farewells: ["Goodbye! Have a great day!", "See you later!", "Thanks for chatting!"], | |
| hours: "Our operating hours are Monday to Friday, 9:00 AM to 5:00 PM.", | |
| contact: "You can contact our support team at support@example.com or call us at (123) 456-7890.", | |
| location: "We're located at 123 Business Street, Suite 100, Tech City, TC 12345.", | |
| services: "We offer a range of services including web development, digital marketing, and IT consulting.", | |
| help: "I can help with questions about our hours, location, services, and more. What do you need?", | |
| returnPolicy: "Our return policy allows returns within 30 days of purchase with a receipt.", | |
| default: "I'm not sure I understand. Could you try asking differently? Here are some things I can help with: hours, contact info, location, services, or return policy." | |
| }; | |
| // Pattern matching for user input | |
| function getResponse(userMessage) { | |
| const lowerMsg = userMessage.toLowerCase(); | |
| if (/(hello|hi|hey|greetings)/i.test(lowerMsg)) { | |
| return randomResponse(responses.greetings); | |
| } | |
| if (/(bye|goodbye|see ya|farewell)/i.test(lowerMsg)) { | |
| return randomResponse(responses.farewells); | |
| } | |
| if (/(hour|time|open|close|when)/i.test(lowerMsg)) { | |
| return responses.hours; | |
| } | |
| if (/(contact|email|phone|call|number)/i.test(lowerMsg)) { | |
| return responses.contact; | |
| } | |
| if (/(where|location|address|place)/i.test(lowerMsg)) { | |
| return responses.location; | |
| } | |
| if (/(service|offer|provide|do)/i.test(lowerMsg)) { | |
| return responses.services; | |
| } | |
| if (/(help|support|assist)/i.test(lowerMsg)) { | |
| return responses.help; | |
| } | |
| if (/(return|refund|exchange|policy)/i.test(lowerMsg)) { | |
| return responses.returnPolicy; | |
| } | |
| if (/(thank|thanks|appreciate)/i.test(lowerMsg)) { | |
| return "You're welcome! Is there anything else I can help with?"; | |
| } | |
| return responses.default; | |
| } | |
| function randomResponse(responsesArray) { | |
| return responsesArray[Math.floor(Math.random() * responsesArray.length)]; | |
| } | |
| // Add a user message to the chat | |
| function addUserMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'message ml-auto bg-blue-600 text-white p-3 rounded-t-xl rounded-bl-xl mb-3'; | |
| messageDiv.innerHTML = `<p>${message}</p>`; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Add a bot message to the chat | |
| function addBotMessage(message) { | |
| // Show typing indicator | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'message mb-3'; | |
| typingDiv.innerHTML = ` | |
| <div class="bg-gray-200 text-gray-800 p-3 rounded-t-xl rounded-br-xl inline-block"> | |
| <div class="typing-indicator"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(typingDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Simulate typing delay | |
| setTimeout(() => { | |
| chatMessages.removeChild(typingDiv); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'message bg-gray-200 text-gray-800 p-3 rounded-t-xl rounded-br-xl mb-3'; | |
| messageDiv.innerHTML = `<p>${message}</p>`; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| }, 1000 + Math.random() * 1000); | |
| } | |
| // Send message function | |
| function sendMessage() { | |
| const message = userInput.value.trim(); | |
| if (message === '') return; | |
| addUserMessage(message); | |
| userInput.value = ''; | |
| sendBtn.disabled = true; | |
| // Simulate processing | |
| statusIndicator.textContent = "Typing..."; | |
| statusIndicator.style.opacity = "0.8"; | |
| setTimeout(() => { | |
| const response = getResponse(message); | |
| addBotMessage(response); | |
| statusIndicator.textContent = "Online"; | |
| statusIndicator.style.opacity = "1"; | |
| }, 500); | |
| } | |
| // Handle inactivity | |
| let inactivityTimer; | |
| function resetInactivityTimer() { | |
| clearTimeout(inactivityTimer); | |
| inactivityTimer = setTimeout(() => { | |
| addBotMessage("Are you still there? Type something if you need help!"); | |
| }, 30000); // 30 seconds of inactivity | |
| } | |
| // Reset timer on any user interaction | |
| userInput.addEventListener('focus', resetInactivityTimer); | |
| userInput.addEventListener('keypress', resetInactivityTimer); | |
| sendBtn.addEventListener('click', resetInactivityTimer); | |
| resetInactivityTimer(); | |
| }); | |
| </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=Mishak/supportbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |