Spaces:

abdelhak66
/

customer-support

Running

App Files Files Community

abdelhak66 commited on Apr 2, 2025

Commit

ddbad68

verified ·

1 Parent(s): 6fe7465

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Customer Support
-emoji: 📚
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: customer-support
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 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,589 @@
-<!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>24/7 Multilingual Customer Support</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: 500px;
+            transition: all 0.3s ease;
+        }
+        .message {
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .user-message {
+            background-color: #3b82f6;
+            color: white;
+            border-radius: 18px 18px 0 18px;
+        }
+        .bot-message {
+            background-color: #f3f4f6;
+            color: #1f2937;
+            border-radius: 18px 18px 18px 0;
+        }
+        .typing-indicator::after {
+            content: "...";
+            animation: typing 1.5s infinite;
+        }
+        @keyframes typing {
+            0% { content: "."; }
+            33% { content: ".."; }
+            66% { content: "..."; }
+        }
+        .language-flag {
+            width: 24px;
+            height: 16px;
+            display: inline-block;
+            margin-right: 5px;
+            background-size: cover;
+            border-radius: 2px;
+        }
+        .calendly-badge {
+            background-color: #006bff;
+            color: white;
+            padding: 8px 12px;
+            border-radius: 4px;
+            display: inline-block;
+            margin-top: 8px;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body class="bg-gray-100">
+    <div class="container mx-auto max-w-4xl py-8 px-4">
+        <div class="bg-white rounded-xl shadow-xl overflow-hidden">
+            <!-- Header -->
+            <div class="bg-blue-600 text-white p-6 flex items-center justify-between">
+                <div class="flex items-center">
+                    <div class="bg-white rounded-full p-2 mr-4">
+                        <i class="fas fa-headset text-blue-600 text-2xl"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-2xl font-bold">24/7 Customer Support</h1>
+                        <p class="text-blue-100">Hi there! How can I help you today?</p>
+                    </div>
+                </div>
+                <div class="flex space-x-2">
+                    <button id="lang-en" class="lang-btn bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm flex items-center" data-lang="en">
+                        <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/gb.png')"></span> EN
+                    </button>
+                    <button id="lang-es" class="lang-btn bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm flex items-center" data-lang="es">
+                        <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/es.png')"></span> ES
+                    </button>
+                    <button id="lang-fr" class="lang-btn bg-blue-500 hover:bg-blue-700 text-white px-3 py-1 rounded-full text-sm flex items-center" data-lang="fr">
+                        <span class="language-flag" style="background-image: url('https://flagcdn.com/w20/fr.png')"></span> FR
+                    </button>
+                </div>
+            </div>
+            <!-- Chat Container -->
+            <div class="chat-container p-4 overflow-y-auto bg-gray-50" id="chat-container">
+                <div class="flex mb-4 justify-start">
+                    <div class="message bot-message p-4">
+                        <p>Hello! I'm your 24/7 multilingual customer support assistant. How can I help you today?</p>
+                        <div class="mt-2 flex flex-wrap gap-2">
+                            <button class="quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50">Pricing</button>
+                            <button class="quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50">Business Hours</button>
+                            <button class="quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50">Services</button>
+                            <button class="quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50">Return Policy</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Input Area -->
+            <div class="p-4 border-t border-gray-200 bg-white">
+                <div class="flex items-center">
+                    <input type="text" id="user-input" placeholder="Type your message here..." class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <button id="send-btn" class="ml-2 bg-blue-600 text-white rounded-full p-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+                <div class="mt-2 text-xs text-gray-500">
+                    <p>By using this chat, you agree to our <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Current language (default English)
+        let currentLang = 'en';
+        // Translation dictionary
+        const translations = {
+            en: {
+                greeting: "Hello! I'm your 24/7 multilingual customer support assistant. How can I help you today?",
+                quickReplies: ["Pricing", "Business Hours", "Services", "Return Policy"],
+                inputPlaceholder: "Type your message here...",
+                privacyText: "By using this chat, you agree to our Privacy Policy",
+                faqResponses: {
+                    "Pricing": "Our pricing varies depending on the service. For detailed pricing information, please visit our <a href='/pricing' class='text-blue-600 hover:underline'>pricing page</a>. Would you like me to check pricing for a specific service?",
+                    "Business Hours": "Our customer support is available 24/7. Our physical locations are open Monday to Friday from 9 AM to 6 PM.",
+                    "Services": "We offer a wide range of services including [list services]. Which service are you interested in?",
+                    "Return Policy": "Our return policy allows returns within 30 days of purchase with a receipt. For more details, please see our <a href='/returns' class='text-blue-600 hover:underline'>return policy page</a>."
+                },
+                leadQuestions: [
+                    "What service do you need?",
+                    "What's your timeline for this service?",
+                    "How can we contact you for follow-up? (Email/Phone)"
+                ],
+                schedulePrompt: "Would you like to schedule an appointment? Here's our real-time availability:",
+                confirmation: "I've sent a confirmation to your email/SMS. Is there anything else I can help with?",
+                escalation: "I'm connecting you with a human agent now. Please hold..."
+            },
+            es: {
+                greeting: "¡Hola! Soy tu asistente de servicio al cliente multilingüe 24/7. ¿Cómo puedo ayudarte hoy?",
+                quickReplies: ["Precios", "Horario", "Servicios", "Política de devolución"],
+                inputPlaceholder: "Escribe tu mensaje aquí...",
+                privacyText: "Al usar este chat, aceptas nuestra Política de privacidad",
+                faqResponses: {
+                    "Precios": "Nuestros precios varían según el servicio. Para información detallada, visita nuestra <a href='/pricing' class='text-blue-600 hover:underline'>página de precios</a>. ¿Te gustaría que revise el precio de un servicio específico?",
+                    "Horario": "Nuestro servicio al cliente está disponible 24/7. Nuestras ubicaciones físicas están abiertas de lunes a viernes de 9 AM a 6 PM.",
+                    "Servicios": "Ofrecemos una amplia gama de servicios que incluyen [lista de servicios]. ¿Qué servicio te interesa?",
+                    "Política de devolución": "Nuestra política de devolución permite devoluciones dentro de los 30 días posteriores a la compra con recibo. Para más detalles, consulta nuestra <a href='/returns' class='text-blue-600 hover:underline'>página de política de devolución</a>."
+                },
+                leadQuestions: [
+                    "¿Qué servicio necesitas?",
+                    "¿Cuál es tu plazo para este servicio?",
+                    "¿Cómo podemos contactarte para seguimiento? (Correo electrónico/Teléfono)"
+                ],
+                schedulePrompt: "¿Te gustaría programar una cita? Aquí está nuestra disponibilidad en tiempo real:",
+                confirmation: "He enviado una confirmación a tu correo electrónico/SMS. ¿Hay algo más en lo que pueda ayudar?",
+                escalation: "Te estoy conectando con un agente humano ahora. Por favor espera..."
+            },
+            fr: {
+                greeting: "Bonjour ! Je suis votre assistant de service client multilingue 24/7. Comment puis-je vous aider aujourd'hui ?",
+                quickReplies: ["Tarifs", "Heures d'ouverture", "Services", "Politique de retour"],
+                inputPlaceholder: "Tapez votre message ici...",
+                privacyText: "En utilisant ce chat, vous acceptez notre Politique de confidentialité",
+                faqResponses: {
+                    "Tarifs": "Nos tarifs varient selon le service. Pour des informations tarifaires détaillées, veuillez visiter notre <a href='/pricing' class='text-blue-600 hover:underline'>page de tarification</a>. Souhaitez-vous que je vérifie le tarif d'un service spécifique ?",
+                    "Heures d'ouverture": "Notre service client est disponible 24h/24 et 7j/7. Nos emplacements physiques sont ouverts du lundi au vendredi de 9h à 18h.",
+                    "Services": "Nous proposons une large gamme de services incluant [liste des services]. Quel service vous intéresse ?",
+                    "Politique de retour": "Notre politique de retour autorise les retours dans les 30 jours suivant l'achat avec un reçu. Pour plus de détails, veuillez consulter notre <a href='/returns' class='text-blue-600 hover:underline'>page de politique de retour</a>."
+                },
+                leadQuestions: [
+                    "De quel service avez-vous besoin ?",
+                    "Quel est votre délai pour ce service ?",
+                    "Comment pouvons-nous vous contacter pour un suivi ? (Email/Téléphone)"
+                ],
+                schedulePrompt: "Souhaitez-vous prendre rendez-vous ? Voici notre disponibilité en temps réel :",
+                confirmation: "J'ai envoyé une confirmation à votre email/SMS. Puis-je vous aider avec autre chose ?",
+                escalation: "Je vous connecte avec un agent humain maintenant. Veuillez patienter..."
+            }
+        };
+        // Chat state
+        let chatState = {
+            isQualifyingLead: false,
+            leadQuestionsAsked: 0,
+            leadAnswers: [],
+            unresolvedQuestions: 0,
+            waitingForAppointment: false,
+            currentLeadData: null
+        };
+        // DOM elements
+        const chatContainer = document.getElementById('chat-container');
+        const userInput = document.getElementById('user-input');
+        const sendBtn = document.getElementById('send-btn');
+        const langButtons = document.querySelectorAll('.lang-btn');
+        const quickReplyButtons = document.querySelectorAll('.quick-reply');
+        // Initialize chat
+        function initChat() {
+            // Set language buttons active state
+            langButtons.forEach(btn => {
+                if (btn.dataset.lang === currentLang) {
+                    btn.classList.add('bg-blue-700');
+                } else {
+                    btn.classList.remove('bg-blue-700');
+                }
+            });
+            // Update UI elements with translations
+            userInput.placeholder = translations[currentLang].inputPlaceholder;
+        }
+        // Add message to chat
+        function addMessage(text, isUser = false) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex mb-4 ${isUser ? 'justify-end' : 'justify-start'}`;
+            const messageContent = document.createElement('div');
+            messageContent.className = `message ${isUser ? 'user-message' : 'bot-message'} p-4`;
+            messageContent.innerHTML = text;
+            messageDiv.appendChild(messageContent);
+            chatContainer.appendChild(messageDiv);
+            // Scroll to bottom
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+        // Show typing indicator
+        function showTypingIndicator() {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'flex mb-4 justify-start';
+            const typingContent = document.createElement('div');
+            typingContent.className = 'message bot-message p-4';
+            typingContent.innerHTML = '<span class="typing-indicator"></span>';
+            typingDiv.appendChild(typingContent);
+            chatContainer.appendChild(typingDiv);
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            return typingDiv;
+        }
+        // Hide typing indicator
+        function hideTypingIndicator(typingDiv) {
+            if (typingDiv && typingDiv.parentNode) {
+                typingDiv.parentNode.removeChild(typingDiv);
+            }
+        }
+        // Process user input
+        function processInput() {
+            const inputText = userInput.value.trim();
+            if (!inputText) return;
+            // Add user message to chat
+            addMessage(inputText, true);
+            userInput.value = '';
+            // Check for escalation triggers
+            if (inputText.toLowerCase().includes('agent') ||
+                chatState.unresolvedQuestions >= 3 ||
+                inputText.toLowerCase().includes('payment issue')) {
+                escalateToHuman();
+                return;
+            }
+            // Process based on current state
+            if (chatState.isQualifyingLead) {
+                processLeadQualification(inputText);
+            } else if (chatState.waitingForAppointment) {
+                processAppointmentConfirmation(inputText);
+            } else {
+                processGeneralInquiry(inputText);
+            }
+        }
+        // Process general inquiry
+        function processGeneralInquiry(inputText) {
+            const typingDiv = showTypingIndicator();
+            // Simulate processing delay
+            setTimeout(() => {
+                hideTypingIndicator(typingDiv);
+                // Check if this is a FAQ
+                let isFAQ = false;
+                for (const [key, value] of Object.entries(translations[currentLang].faqResponses)) {
+                    if (inputText.toLowerCase().includes(key.toLowerCase())) {
+                        addMessage(value);
+                        isFAQ = true;
+                        // If it's a service question, start lead qualification
+                        if (key === 'Services' || key === 'Servicios' || key === 'Services') {
+                            setTimeout(() => startLeadQualification(), 1000);
+                        }
+                        break;
+                    }
+                }
+                if (!isFAQ) {
+                    // Check if this might be a service request
+                    if (inputText.toLowerCase().includes('service') ||
+                        inputText.toLowerCase().includes('servicio') ||
+                        inputText.toLowerCase().includes('service')) {
+                        addMessage(translations[currentLang].faqResponses['Services']);
+                        setTimeout(() => startLeadQualification(), 1000);
+                    } else {
+                        addMessage("I'm not sure I understand. Could you please rephrase your question or choose from these options?");
+                        chatState.unresolvedQuestions++;
+                        // Show quick replies
+                        const quickRepliesDiv = document.createElement('div');
+                        quickRepliesDiv.className = 'mt-2 flex flex-wrap gap-2';
+                        translations[currentLang].quickReplies.forEach(reply => {
+                            const btn = document.createElement('button');
+                            btn.className = 'quick-reply bg-white text-blue-600 px-3 py-1 rounded-full text-sm border border-blue-200 hover:bg-blue-50';
+                            btn.textContent = reply;
+                            btn.addEventListener('click', () => {
+                                addMessage(reply, true);
+                                processGeneralInquiry(reply);
+                            });
+                            quickRepliesDiv.appendChild(btn);
+                        });
+                        const lastMessage = chatContainer.lastChild.querySelector('.message');
+                        lastMessage.appendChild(quickRepliesDiv);
+                    }
+                }
+            }, 1000);
+        }
+        // Start lead qualification process
+        function startLeadQualification() {
+            chatState.isQualifyingLead = true;
+            chatState.leadQuestionsAsked = 0;
+            chatState.leadAnswers = [];
+            const typingDiv = showTypingIndicator();
+            setTimeout(() => {
+                hideTypingIndicator(typingDiv);
+                addMessage(translations[currentLang].leadQuestions[0]);
+            }, 1000);
+        }
+        // Process lead qualification answers
+        function processLeadQualification(answer) {
+            chatState.leadAnswers.push(answer);
+            chatState.leadQuestionsAsked++;
+            if (chatState.leadQuestionsAsked < translations[currentLang].leadQuestions.length) {
+                // Ask next question
+                const typingDiv = showTypingIndicator();
+                setTimeout(() => {
+                    hideTypingIndicator(typingDiv);
+                    addMessage(translations[currentLang].leadQuestions[chatState.leadQuestionsAsked]);
+                }, 1000);
+            } else {
+                // All questions answered - qualify lead
+                qualifyLead();
+            }
+        }
+        // Qualify lead based on answers
+        function qualifyLead() {
+            const typingDiv = showTypingIndicator();
+            setTimeout(() => {
+                hideTypingIndicator(typingDiv);
+                // Simple qualification logic
+                let leadScore = 0;
+                if (chatState.leadAnswers[1].toLowerCase().includes('soon') ||
+                    chatState.leadAnswers[1].toLowerCase().includes('urgent') ||
+                    chatState.leadAnswers[1].toLowerCase().includes('pronto') ||
+                    chatState.leadAnswers[1].toLowerCase().includes('urgente') ||
+                    chatState.leadAnswers[1].toLowerCase().includes('rapide') ||
+                    chatState.leadAnswers[1].toLowerCase().includes('urgence')) {
+                    leadScore = 10;
+                } else if (chatState.leadAnswers[1].toLowerCase().includes('next month') ||
+                          chatState.leadAnswers[1].toLowerCase().includes('proximo mes') ||
+                          chatState.leadAnswers[1].toLowerCase().includes('le mois prochain')) {
+                    leadScore = 5;
+                }
+                // Create JSON for Lovable.dev
+                const leadData = {
+                    service: chatState.leadAnswers[0],
+                    timeline: chatState.leadAnswers[1],
+                    contact: chatState.leadAnswers[2],
+                    score: leadScore,
+                    timestamp: new Date().toISOString(),
+                    language: currentLang
+                };
+                // Store lead data for potential scheduling
+                chatState.currentLeadData = leadData;
+                // Simulate sending to Lovable.dev webhook
+                simulateLovableWebhook(leadData);
+                // Inform user
+                let responseText = `Thank you for the information! `;
+                if (leadScore >= 8) {
+                    responseText += "This sounds urgent! ";
+                } else if (leadScore >= 3) {
+                    responseText += "We'll follow up with you soon. ";
+                }
+                responseText += translations[currentLang].schedulePrompt;
+                addMessage(responseText);
+                // Show calendar integration (simulated)
+                const calendarDiv = document.createElement('div');
+                calendarDiv.className = 'mt-4 p-4 bg-white border border-gray-200 rounded-lg';
+                calendarDiv.innerHTML = `
+                    <h3 class="font-bold mb-2">Available Time Slots</h3>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button class="time-slot bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded">Tomorrow 10 AM</button>
+                        <button class="time-slot bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded">Tomorrow 2 PM</button>
+                        <button class="time-slot bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded">Friday 11 AM</button>
+                        <button class="time-slot bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-3 rounded">Friday 3 PM</button>
+                    </div>
+                    <div class="calendly-badge mt-3">
+                        <i class="fas fa-calendar-alt mr-2"></i>Powered by Calendly
+                    </div>
+                `;
+                const lastMessage = chatContainer.lastChild.querySelector('.message');
+                lastMessage.appendChild(calendarDiv);
+                // Add click handlers to time slots
+                document.querySelectorAll('.time-slot').forEach(slot => {
+                    slot.addEventListener('click', () => {
+                        const selectedTime = slot.textContent;
+                        addMessage(selectedTime, true);
+                        confirmAppointment(selectedTime);
+                    });
+                });
+                chatState.isQualifyingLead = false;
+                chatState.waitingForAppointment = true;
+            }, 1000);
+        }
+        // Simulate Lovable.dev webhook call
+        function simulateLovableWebhook(leadData) {
+            console.log('Sending to Lovable.dev webhook:', leadData);
+            // In a real implementation, you would use:
+            // fetch('https://your-lovable-dev-webhook-url', {
+            //     method: 'POST',
+            //     headers: {
+            //         'Content-Type': 'application/json',
+            //     },
+            //     body: JSON.stringify(leadData)
+            // })
+            // For demo purposes, we'll just log it
+            const response = {
+                status: 'success',
+                message: 'Lead processed',
+                data: leadData
+            };
+            console.log('Lovable.dev response:', response);
+        }
+        // Confirm appointment
+        function confirmAppointment(time) {
+            const typingDiv = showTypingIndicator();
+            setTimeout(() => {
+                hideTypingIndicator(typingDiv);
+                // Add appointment time to lead data
+                chatState.currentLeadData.appointmentTime = time;
+                // Simulate sending SMS confirmation
+                if (chatState.currentLeadData.contact) {
+                    simulateSMSConfirmation(chatState.currentLeadData.contact, time);
+                }
+                addMessage(`Great! I've scheduled your appointment for ${time}. ${translations[currentLang].confirmation}`);
+                chatState.waitingForAppointment = false;
+            }, 1000);
+        }
+        // Simulate SMS confirmation
+        function simulateSMSConfirmation(contact, time) {
+            console.log('Sending SMS to:', contact);
+            console.log('Message:', `Your appointment is scheduled for ${time}. Reply STOP to unsubscribe.`);
+            // In a real implementation, you would use Twilio:
+            // fetch('https://api.twilio.com/2010-04-01/Accounts/YOUR_TWILIO_SID/Messages.json', {
+            //     method: 'POST',
+            //     headers: {
+            //         'Authorization': 'Basic ' + btoa('YOUR_TWILIO_SID:YOUR_TWILIO_TOKEN'),
+            //         'Content-Type': 'application/x-www-form-urlencoded',
+            //     },
+            //     body: new URLSearchParams({
+            //         'To': contact,
+            //         'From': '+1234567890',
+            //         'Body': `Your appointment is scheduled for ${time}. Reply STOP to unsubscribe.`
+            //     })
+            // })
+        }
+        // Process appointment confirmation response
+        function processAppointmentConfirmation(inputText) {
+            const typingDiv = showTypingIndicator();
+            setTimeout(() => {
+                hideTypingIndicator(typingDiv);
+                if (inputText.toLowerCase().includes('yes') ||
+                    inputText.toLowerCase().includes('sí') ||
+                    inputText.toLowerCase().includes('oui')) {
+                    addMessage("What else can I help you with?");
+                } else {
+                    addMessage("Thank you for chatting with us! Have a great day!");
+                }
+                chatState.waitingForAppointment = false;
+            }, 1000);
+        }
+        // Escalate to human agent
+        function escalateToHuman() {
+            const typingDiv = showTypingIndicator();
+            setTimeout(() => {
+                hideTypingIndicator(typingDiv);
+                addMessage(translations[currentLang].escalation);
+                // Simulate transfer
+                console.log('Transferring to human agent...');
+            }, 1500);
+        }
+        // Change language
+        function changeLanguage(lang) {
+            currentLang = lang;
+            initChat();
+            // Add language change message
+            const typingDiv = showTypingIndicator();
+            setTimeout(() => {
+                hideTypingIndicator(typingDiv);
+                let langName = '';
+                if (lang === 'en') langName = 'English';
+                if (lang === 'es') langName = 'Spanish';
+                if (lang === 'fr') langName = 'French';
+                addMessage(`Language changed to ${langName}. How can I help you?`);
+            }, 1000);
+        }
+        // Event listeners
+        sendBtn.addEventListener('click', processInput);
+        userInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') processInput();
+        });
+        langButtons.forEach(btn => {
+            btn.addEventListener('click', () => changeLanguage(btn.dataset.lang));
+        });
+        quickReplyButtons.forEach(btn => {
+            btn.addEventListener('click', () => {
+                addMessage(btn.textContent, true);
+                processGeneralInquiry(btn.textContent);
+            });
+        });
+        // Initialize chat
+        initChat();
+    </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=abdelhak66/customer-support" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>