Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SupportBot Supreme AI</title> | |
| <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> | |
| <style> | |
| .chat-container { | |
| height: calc(100vh - 160px); | |
| } | |
| .typing { | |
| display: inline-block; | |
| } | |
| .typing-dot { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| margin-right: 3px; | |
| background: #3b82f6; | |
| animation: typingAnimation 1.4s infinite ease-in-out; | |
| } | |
| .typing-dot:nth-child(1) { | |
| animation-delay: 0s; | |
| } | |
| .typing-dot:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-dot:nth-child(3) { | |
| animation-delay: 0.4s; | |
| margin-right: 0; | |
| } | |
| @keyframes typingAnimation { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-5px); } | |
| } | |
| .message-user { | |
| border-radius: 18px 18px 0 18px; | |
| } | |
| .message-bot { | |
| border-radius: 18px 18px 18px 0; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="max-w-4xl mx-auto p-4 h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm rounded-lg p-4 mb-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center"> | |
| <i data-feather="message-circle" class="text-white"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800">SupportBot Supreme</h1> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">AI Assistant</span> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i data-feather="settings" class="text-gray-500"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Chat Container --> | |
| <div class="flex-1 bg-white rounded-lg shadow-sm overflow-hidden flex flex-col"> | |
| <!-- Messages Area --> | |
| <div id="chat-messages" class="chat-container p-4 overflow-y-auto scrollbar-hide space-y-3"> | |
| <!-- Welcome Message --> | |
| <div class="flex justify-start"> | |
| <div class="bg-blue-50 text-blue-800 p-4 message-bot max-w-[80%]"> | |
| <p class="font-medium">Hello! 👋 I'm your AI support assistant. How can I help you today?</p> | |
| <p class="text-sm mt-2 opacity-80">I can answer questions about your account, orders, and more.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t p-4 bg-gray-50"> | |
| <div class="flex items-end space-x-2"> | |
| <div class="flex-1 relative"> | |
| <textarea | |
| id="message-input" | |
| class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" | |
| placeholder="Type your message..." | |
| rows="1" | |
| style="min-height: 44px; max-height: 120px;"></textarea> | |
| <button class="absolute right-3 bottom-3 text-gray-400 hover:text-blue-500"> | |
| <i data-feather="paperclip"></i> | |
| </button> | |
| </div> | |
| <button id="send-button" class="bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-lg transition"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2">SupportBot may make mistakes. Consider checking important information.</p> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="text-center text-xs text-gray-500 mt-4"> | |
| <p>© 2023 SupportBot Supreme AI. All rights reserved.</p> | |
| </footer> | |
| </div> | |
| <!-- Typing Indicator Template --> | |
| <template id="typing-template"> | |
| <div class="flex justify-start" id="typing-indicator"> | |
| <div class="bg-blue-50 text-blue-800 p-4 message-bot"> | |
| <div class="typing"> | |
| <span class="typing-dot"></span> | |
| <span class="typing-dot"></span> | |
| <span class="typing-dot"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| <script> | |
| feather.replace(); | |
| // Chat simulation | |
| const messageInput = document.getElementById('message-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const typingTemplate = document.getElementById('typing-template'); | |
| // Auto-resize textarea | |
| messageInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| // Sample FAQ responses | |
| const faqResponses = { | |
| "password": "To reset your password, click 'Forgot Password' on the login page and follow the instructions sent to your email.", | |
| "hours": "Our support team is available Monday to Friday, 9AM to 6PM (EST).", | |
| "order": "You can track your order in your account dashboard under 'My Orders'.", | |
| "return": "We accept returns within 30 days of purchase. Please visit our Returns Center for more details.", | |
| "contact": "You can reach our support team at support@example.com or call us at (555) 123-4567." | |
| }; | |
| // Keywords for FAQ matching | |
| const faqKeywords = { | |
| "password": ["password", "reset", "forgot", "login"], | |
| "hours": ["hours", "time", "available", "open", "close"], | |
| "order": ["order", "track", "delivery", "ship", "status"], | |
| "return": ["return", "refund", "exchange", "policy"], | |
| "contact": ["contact", "speak", "human", "agent", "phone", "call", "email"] | |
| }; | |
| // Send message function | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message === '') return; | |
| // Add user message to chat | |
| addMessage(message, 'user'); | |
| messageInput.value = ''; | |
| messageInput.style.height = 'auto'; | |
| // Show typing indicator | |
| const typingIndicator = typingTemplate.content.cloneNode(true); | |
| chatMessages.appendChild(typingIndicator); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| // Simulate AI response after delay | |
| setTimeout(() => { | |
| // Remove typing indicator | |
| document.getElementById('typing-indicator')?.remove(); | |
| // Check for escalation keywords | |
| if (message.toLowerCase().includes('human') || | |
| message.toLowerCase().includes('agent') || | |
| message.toLowerCase().includes('representative')) { | |
| addMessage("I'll connect you with a human support agent. Please wait while I transfer you...", 'bot'); | |
| setTimeout(() => { | |
| addMessage("All our agents are currently busy. Your estimated wait time is 5-7 minutes. Would you like to leave a callback request instead?", 'bot'); | |
| }, 2000); | |
| return; | |
| } | |
| // Find matching FAQ | |
| let response = "I'm sorry, I couldn't find information about that. Could you please provide more details?"; | |
| for (const [key, keywords] of Object.entries(faqKeywords)) { | |
| if (keywords.some(keyword => message.toLowerCase().includes(keyword))) { | |
| response = faqResponses[key]; | |
| break; | |
| } | |
| } | |
| // Add bot response | |
| addMessage(response, 'bot'); | |
| }, 1000 + Math.random() * 2000); | |
| } | |
| // Add message to chat | |
| function addMessage(text, sender) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex justify-${sender === 'user' ? 'end' : 'start'}`; | |
| const messageContent = document.createElement('div'); | |
| messageContent.className = sender === 'user' | |
| ? 'bg-blue-500 text-white p-4 message-user max-w-[80%]' | |
| : 'bg-blue-50 text-blue-800 p-4 message-bot max-w-[80%]'; | |
| messageContent.textContent = text; | |
| messageDiv.appendChild(messageContent); | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| // Event listeners | |
| sendButton.addEventListener('click', sendMessage); | |
| messageInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| // Sample messages | |
| setTimeout(() => { | |
| addMessage("Try asking me about password reset, business hours, order tracking, returns policy, or contact information!", 'bot'); | |
| }, 1500); | |
| </script> | |
| </body> | |
| </html> | |