Spaces:

Mishak
/

supportbot

Running

App Files Files Community

Mishak commited on Apr 4, 2025

Commit

ffe67ad

verified ·

1 Parent(s): 045683a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +279 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Supportbot
-emoji: 🔥
-colorFrom: red
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: supportbot
+emoji: 🐳
+colorFrom: gray
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,279 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>