Hugging Face's logo

Spaces:
Houdo12
/
ia
Running

App Files Community
ia / index.html
Houdo12's picture
Houdo12
Add 3 files
5028a61 verified
Raw
History Blame Contribute Delete
13.3 kB
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Assistance Client - Chatbot</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>
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
.message {
 animation: fadeIn 0.3s ease-out;
 }
.chat-container {
 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 transition: all 0.3s ease;
 }
.typing-indicator span {
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background-color: #4b5563;
 margin: 0 2px;
 }
.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); }
 50% { transform: translateY(-5px); }
 }
.chat-toggle {
 transition: all 0.3s ease;
 }
.chat-toggle:hover {
 transform: scale(1.1);
 }
 </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
 <!-- Bouton de bascule pour ouvrir le chat -->
 <div class="fixed bottom-8 right-8 z-50">
 <button id="chatToggle" class="chat-toggle bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 focus:outline-none">
 <i class="fas fa-comment-dots text-2xl"></i>
 </button>
 </div>
<!-- Conteneur du chat -->
 <div id="chatContainer" class="chat-container fixed bottom-24 right-8 w-96 bg-white rounded-xl overflow-hidden hidden flex flex-col z-40">
 <!-- En-tête du chat -->
 <div class="bg-blue-600 text-white p-4 flex items-center justify-between">
 <div class="flex items-center space-x-3">
 <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
 <i class="fas fa-robot text-xl"></i>
 </div>
 <div>
 <h3 class="font-semibold">Assistant Virtuel</h3>
 <p class="text-xs opacity-80">En ligne</p>
 </div>
 </div>
 <button id="closeChat" class="text-white hover:text-blue-200 focus:outline-none">
 <i class="fas fa-times"></i>
 </button>
 </div>
<!-- Corps du chat -->
 <div id="chatBody" class="flex-1 p-4 overflow-y-auto bg-gray-50" style="height: 400px;">
 <!-- Message de bienvenue -->
 <div class="message mb-4 flex">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="bg-blue-100 text-blue-900 rounded-xl p-3 max-w-xs">
 <p>Bonjour ! 👋 Je suis votre assistant virtuel. Comment puis-je vous aider aujourd'hui ?</p>
 <p class="text-xs text-blue-600 mt-1">10:42</p>
 </div>
 </div>
<!-- Suggestions rapides -->
 <div class="message mb-4">
 <div class="flex space-x-2">
 <button class="quick-reply-btn bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm px-3 py-1 rounded-full transition">
 Problème de connexion
 </button>
 <button class="quick-reply-btn bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm px-3 py-1 rounded-full transition">
 Commande en retard
 </button>
 <button class="quick-reply-btn bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm px-3 py-1 rounded-full transition">
 Question sur un produit
 </button>
 </div>
 </div>
 </div>
<!-- Indicateur de saisie -->
 <div id="typingIndicator" class="typing-indicator bg-gray-50 px-4 py-2 hidden">
 <div class="flex items-center">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="flex space-x-1">
 <span></span>
 <span></span>
 <span></span>
 </div>
 </div>
 </div>
<!-- Zone de saisie -->
 <div class="bg-white border-t border-gray-200 p-4">
 <div class="flex items-center space-x-2">
 <input id="userInput" type="text" placeholder="Tapez votre message..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
 <button id="sendButton" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700 focus:outline-none">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 <p class="text-xs text-gray-500 mt-2">En cliquant sur envoyer, vous acceptez nos <a href="#" class="text-blue-600 hover:underline">conditions d'utilisation</a></p>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 const chatToggle = document.getElementById('chatToggle');
 const chatContainer = document.getElementById('chatContainer');
 const closeChat = document.getElementById('closeChat');
 const chatBody = document.getElementById('chatBody');
 const userInput = document.getElementById('userInput');
 const sendButton = document.getElementById('sendButton');
 const typingIndicator = document.getElementById('typingIndicator');
 const quickReplyButtons = document.querySelectorAll('.quick-reply-btn');
// Réponses prédéfinies du chatbot
 const botResponses = {
 "bonjour": "Bonjour ! Comment puis-je vous aider aujourd'hui ? 😊",
 "problème de connexion": "Je suis désolé que vous rencontriez des problèmes de connexion. Pouvez-vous me dire si vous recevez un message d'erreur particulier ?",
 "commande en retard": "Je comprends votre inquiétude concernant votre commande. Pouvez-vous me fournir votre numéro de commande pour que je puisse vérifier son statut ?",
 "question sur un produit": "Avec plaisir ! De quel produit souhaitez-vous obtenir des informations ?",
 "merci": "Je vous en prie ! N'hésitez pas si vous avez d'autres questions. 😊",
 "au revoir": "Au revoir ! N'hésitez pas à revenir si vous avez d'autres questions. À bientôt ! 👋"
 };
// Ouvrir/fermer le chat
 chatToggle.addEventListener('click', function() {
 chatContainer.classList.toggle('hidden');
 chatContainer.classList.toggle('flex');
 });
closeChat.addEventListener('click', function() {
 chatContainer.classList.add('hidden');
 chatContainer.classList.remove('flex');
 });
// Envoyer un message
 function sendMessage() {
 const message = userInput.value.trim();
 if (message === '') return;
// Ajouter le message de l'utilisateur
 addUserMessage(message);
 userInput.value = '';
// Simuler une réponse du bot après un délai
 setTimeout(() => {
 typingIndicator.classList.remove('hidden');
setTimeout(() => {
 typingIndicator.classList.add('hidden');
 addBotMessage(getBotResponse(message));
 }, 1500);
 }, 500);
 }
// Gestion des boutons de réponse rapide
 quickReplyButtons.forEach(button => {
 button.addEventListener('click', function() {
 const message = this.textContent.trim();
 userInput.value = message;
 sendMessage();
 });
 });
// Envoyer avec le bouton ou la touche Entrée
 sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
 sendMessage();
 }
 });
// Ajouter un message utilisateur
 function addUserMessage(message) {
 const messageDiv = document.createElement('div');
 messageDiv.className = 'message mb-4 flex justify-end';
 messageDiv.innerHTML = `
 <div class="bg-blue-600 text-white rounded-xl p-3 max-w-xs">
 <p>${message}</p>
 <p class="text-xs text-blue-200 mt-1">${getCurrentTime()}</p>
 </div>
 <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center ml-3 flex-shrink-0">
 <i class="fas fa-user"></i>
 </div>
 `;
 chatBody.appendChild(messageDiv);
 scrollToBottom();
 }
// Ajouter un message du bot
 function addBotMessage(message) {
 const messageDiv = document.createElement('div');
 messageDiv.className = 'message mb-4 flex';
 messageDiv.innerHTML = `
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
 <i class="fas fa-robot text-blue-600"></i>
 </div>
 <div class="bg-blue-100 text-blue-900 rounded-xl p-3 max-w-xs">
 <p>${message}</p>
 <p class="text-xs text-blue-600 mt-1">${getCurrentTime()}</p>
 </div>
 `;
 chatBody.appendChild(messageDiv);
 scrollToBottom();
 }
// Obtenir une réponse appropriée du bot
 function getBotResponse(message) {
 message = message.toLowerCase();
// Vérifier les correspondances exactes
 for (const key in botResponses) {
 if (message.includes(key.toLowerCase())) {
 return botResponses[key];
 }
 }
// Réponse par défaut
 return "Je ne suis pas sûr de comprendre votre demande. Pouvez-vous reformuler ou choisir parmi ces options ?\n1. Problème technique\n2. Question sur une commande\n3. Information sur un produit";
 }
// Obtenir l'heure actuelle formatée
 function getCurrentTime() {
 const now = new Date();
 return `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
 }
// Faire défiler vers le bas
 function scrollToBottom() {
 chatBody.scrollTop = chatBody.scrollHeight;
 }
// Animation d'ouverture du chat
 if (chatContainer) {
 setTimeout(() => {
 chatContainer.style.opacity = '0';
 chatContainer.style.transform = 'translateY(20px)';
 }, 10);
 }
 });
 </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=Houdo12/ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>