Spaces:

Docfile
/

Chatm

Running

App Files Files Community

Docfile commited on Apr 3

Commit

db0d89d

verified ·

1 Parent(s): a91af02

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +385 -479

templates/index.html CHANGED Viewed

@@ -1,507 +1,413 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mariam AI!</title>
-    <!-- Tailwind CSS via CDN (inclut le plugin Forms) -->
-    <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
-    <!-- Favicon (Emoji simple) -->
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
-    <style>
-        /* Styles pour assurer la hauteur complète et le bon fonctionnement du scroll */
-        html, body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            overflow: hidden; /* Empêche le scroll sur le body lui-même */
-        }
-        body {
-            display: flex;
-            flex-direction: column;
-            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-        }
-        #chat-container {
-            display: flex;
-            flex-direction: column;
-            flex-grow: 1; /* Prend l'espace restant */
-            min-height: 0; /* Essentiel pour le scroll dans un conteneur flex */
-        }
-        #chat-messages {
-            flex-grow: 1;
-            overflow-y: auto; /* Active le scroll vertical uniquement sur cette zone */
-            min-height: 0; /* Essentiel pour le scroll dans un conteneur flex */
-        }
-        /* Style personnalisé pour la barre de défilement (optionnel) */
-        ::-webkit-scrollbar {
-           width: 8px;
-         }
-        ::-webkit-scrollbar-track {
-          background: #f1f1f1;
-          border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb {
-           background: #a8a8a8; /* Gris plus doux */
-           border-radius: 10px;
-         }
-        ::-webkit-scrollbar-thumb:hover {
-           background: #7a7a7a; /* Gris plus foncé au survol */
-         }
-         /* Amélioration du rendu Markdown par défaut (via classes Prose de Tailwind principalement) */
-         /* Ciblage plus spécifique pour éviter conflits si prose est utilisé ailleurs */
-         #chat-messages .prose code:not(pre code) { /* Code inline */
-            background-color: #e5e7eb; /* gray-200 */
-            padding: 0.2em 0.4em;
-            font-size: 85%;
-            border-radius: 4px;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-         }
-         #chat-messages .prose pre { /* Bloc de code */
-            background-color: #f3f4f6; /* gray-100 */
-            padding: 0.8em 1em;
-            border-radius: 6px;
-            overflow-x: auto; /* Scroll horizontal si nécessaire */
-            font-size: 0.875rem; /* text-sm */
-         }
-         #chat-messages .prose pre code { /* Code dans un bloc pre */
-            background-color: transparent;
-            padding: 0;
-            font-size: inherit;
-            border-radius: 0;
-            color: inherit;
-         }
-         #chat-messages .prose blockquote {
-             border-left-color: #9ca3af; /* gray-400 */
-             color: #4b5563; /* gray-600 */
-         }
-         #chat-messages .prose strong {
-             color: #1f2937; /* gray-800 */
-         }
-         #chat-messages .prose a {
-            color: #2563eb; /* blue-600 */
-            text-decoration: underline;
-            text-decoration-color: #93c5fd; /* blue-300 */
-            transition: color 0.2s ease;
-         }
-          #chat-messages .prose a:hover {
-             color: #1d4ed8; /* blue-700 */
-             text-decoration-color: #60a5fa; /* blue-400 */
-          }
-         /* Style pour le chargement initial de l'historique */
-        #history-loading {
-             padding: 20px;
-             text-align: center;
-             color: #6b7280; /* gray-500 */
-             font-style: italic;
-        }
-    </style>
 </head>
-<body class="bg-gray-100 flex flex-col h-screen">
-    <!-- En-tête fixe -->
-    <header class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white p-3 sm:p-4 shadow-md flex justify-between items-center sticky top-0 z-10 flex-shrink-0">
-        <h1 class="text-xl sm:text-2xl font-bold">Mariam AI!</h1>
-        <!-- Formulaire pour le bouton "Effacer" (intercepté par JS) -->
-        <form action="/clear" method="POST" id="clear-form">
-             <button type="submit" title="Effacer la conversation actuelle" class="bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-1 px-3 rounded-full transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75">
-                Effacer
-             </button>
-        </form>
-    </header>
-    <!-- Conteneur Principal du Chat -->
-    <div id="chat-container" class="max-w-4xl w-full mx-auto bg-white shadow-xl rounded-b-lg flex flex-col flex-grow">
-        <!-- Zone d'affichage des messages (avec scroll) -->
-        <div id="chat-messages" class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 scroll-smooth">
-            <!-- Indicateur de chargement de l'historique (sera remplacé) -->
-            <div id="history-loading">
-                <div class="flex justify-center items-center space-x-2">
-                    <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                      </svg>
-                      <span>Chargement de l'historique...</span>
-                </div>
-            </div>
-            <!-- Indicateur de chargement pour les NOUVEAUX messages (sera déplacé ici par JS) -->
-            <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
-                <div class="flex justify-center items-center space-x-2">
-                    <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    <span>Mariam réfléchit...</span>
-                </div>
-            </div>
         </div>
-        <!-- Zone d'erreur (cachée par défaut) -->
-        <div id="error-message" class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-2 rounded mx-4 my-2 flex-shrink-0" role="alert" style="display: none;">
-             <p class="font-bold mr-2">Erreur:</p>
-             <p id="error-text">Le message d'erreur détaillé ira ici.</p>
-        </div>
-         <!-- Barre d'options et d'upload -->
-        <div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0">
-             <div class="flex items-center justify-between text-sm">
-                <!-- Toggle Recherche Web -->
-                <label for="web_search_toggle" class="flex items-center space-x-2 cursor-pointer text-gray-600 hover:text-gray-800 select-none" title="Activer/Désactiver la recherche web pour le prochain message">
-                    <input type="checkbox" id="web_search_toggle" name="web_search" value="true" class="form-checkbox h-4 w-4 rounded text-blue-500 focus:ring-blue-400 focus:ring-offset-0 border-gray-300">
-                    <span class="hidden sm:inline">Recherche Web</span>
-                    <span class="sm:hidden">Web</span> <!-- Texte plus court pour mobile -->
-                </label>
-                <!-- Upload Fichier -->
-                <div class="flex items-center space-x-2">
-                    <label for="file_upload" class="cursor-pointer text-blue-500 hover:text-blue-700 font-medium flex items-center" title="Joindre un fichier (txt, pdf, png, jpg)">
-                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-                         </svg>
-                        <span class="hidden sm:inline">Fichier</span>
-                        <input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg">
-                    </label>
-                     <span id="file-name" class="text-gray-500 text-xs truncate max-w-[100px] sm:max-w-[150px]" title=""></span>
-                     <button id="clear-file" class="text-red-500 hover:text-red-700 text-xs p-0.5 rounded focus:outline-none focus:ring-1 focus:ring-red-400" title="Retirer le fichier" style="display: none;">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
-            </div>
         </div>
-        <!-- Formulaire d'entrée du message -->
-        <form id="chat-form" class="bg-gray-100 p-3 sm:p-4 border-t border-gray-200 rounded-b-lg flex-shrink-0">
-            <div class="flex items-center space-x-2 sm:space-x-3">
-                <input type="text" id="prompt" name="prompt" class="flex-grow form-input px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-sm text-sm sm:text-base" placeholder="Posez votre question à Mariam..." autocomplete="off">
-                <button type="submit" id="send-button" title="Envoyer le message" class="bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold p-2 rounded-full transition duration-200 flex items-center justify-center shadow-md w-10 h-10 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
-                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                       <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
-                     </svg>
-                </button>
-            </div>
-        </form>
     </div>
-    <!-- Script JavaScript pour l'interaction -->
-    <script>
     document.addEventListener('DOMContentLoaded', () => {
-        // === Références aux éléments du DOM ===
-        const chatForm = document.getElementById('chat-form');
-        const promptInput = document.getElementById('prompt');
-        const chatMessages = document.getElementById('chat-messages');
-        const loadingIndicator = document.getElementById('loading-indicator'); // Indicateur pour NOUVEAUX messages
-        const historyLoadingIndicator = document.getElementById('history-loading'); // Indicateur pour l'historique
-        const errorMessageDiv = document.getElementById('error-message');
-        const errorTextP = document.getElementById('error-text');
-        const webSearchToggle = document.getElementById('web_search_toggle');
-        const fileUpload = document.getElementById('file_upload');
-        const fileNameSpan = document.getElementById('file-name');
-        const clearFileButton = document.getElementById('clear-file');
-        const sendButton = document.getElementById('send-button');
-        const clearForm = document.getElementById('clear-form');
-        // === Endpoints de l'API Backend ===
-        // Assurez-vous que ces URLs correspondent à votre configuration Flask
-        const API_CHAT_ENDPOINT = '/api/chat';
-        const API_HISTORY_ENDPOINT = '/api/history';
-        const CLEAR_ENDPOINT = '/clear';
-        // === Fonctions Utilitaires ===
-        /** Fait défiler la zone de chat vers le bas */
-        function scrollToBottom() {
-            // Utilise un léger délai pour s'assurer que le DOM est mis à jour
-            setTimeout(() => {
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-            }, 50);
         }
-        /** Affiche/cache l'indicateur de chargement pour les nouveaux messages */
-        function showLoading(show) {
-            const currentlyLoading = loadingIndicator.style.display !== 'none';
-            if (show && !currentlyLoading) {
-                loadingIndicator.style.display = 'block';
-                // S'assurer qu'il est le dernier élément pour être en bas
-                chatMessages.appendChild(loadingIndicator);
-                scrollToBottom();
-            } else if (!show && currentlyLoading) {
-                loadingIndicator.style.display = 'none';
-            }
-            // Désactiver/réactiver les contrôles pendant le chargement
-            sendButton.disabled = show;
-            promptInput.disabled = show;
-            fileUpload.disabled = show;
-            clearFileButton.disabled = show; // Désactiver aussi la suppression de fichier
-        }
-        /** Affiche un message d'erreur dans la zone dédiée */
-        function displayError(message) {
-            errorTextP.textContent = message || "Une erreur inconnue est survenue.";
-            errorMessageDiv.style.display = 'flex'; // Utiliser flex pour aligner l'icône si on en ajoute une
-            // Faire défiler pour voir l'erreur si elle est hors écran
-            errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-            // Optionnel: Cacher l'erreur après un délai (ex: 8 secondes)
-            // setTimeout(() => { errorMessageDiv.style.display = 'none'; }, 8000);
         }
-        /** Ajoute un message (utilisateur ou assistant) à la zone de chat */
-        function addMessageToChat(role, text, isHtml = false) {
-            // Cacher l'erreur si elle était affichée lors de l'ajout d'un nouveau message
-            errorMessageDiv.style.display = 'none';
-            const messageWrapper = document.createElement('div');
-            messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4');
-            const bubbleDiv = document.createElement('div');
-            bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-[85%]', 'sm:max-w-[75%]', 'shadow-md', 'relative'); // Limite la largeur
-             if (role === 'user') {
-                bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
-                const paragraph = document.createElement('p');
-                paragraph.classList.add('text-sm', 'sm:text-base', 'break-words'); // Permet le retour à la ligne
-                paragraph.textContent = text; // Sécurité: toujours textContent pour l'input utilisateur
-                bubbleDiv.appendChild(paragraph);
-            } else { // Assistant
-                bubbleDiv.classList.add('bg-gray-100', 'text-gray-800', 'rounded-bl-none', 'border', 'border-gray-200');
-                const proseDiv = document.createElement('div');
-                // Appliquer les classes Prose pour le rendu Markdown/HTML
-                proseDiv.classList.add('prose', 'prose-sm', 'sm:prose-base', 'max-w-none', 'text-gray-800',
-                                       'prose-headings:font-semibold', 'prose-headings:text-gray-800',
-                                       'prose-a:text-blue-600', 'prose-a:no-underline', 'hover:prose-a:underline',
-                                       'prose-strong:text-gray-800', 'prose-code:text-red-600', 'prose-code:font-mono',
-                                       'prose-blockquote:text-gray-600', 'break-words');
-                if (isHtml) {
-                    // ATTENTION : NECESSITE QUE LE HTML DU BACKEND SOIT NETTOYÉ/SÉCURISÉ
-                    proseDiv.innerHTML = text;
-                } else {
-                    proseDiv.textContent = text;
-                }
-                bubbleDiv.appendChild(proseDiv);
-            }
-            messageWrapper.appendChild(bubbleDiv);
-            // Insérer le nouveau message AVANT l'indicateur de chargement pour qu'il reste en bas
-            chatMessages.insertBefore(messageWrapper, loadingIndicator);
-            // Faire défiler seulement si on n'est pas en train de charger l'historique initial
-             if (historyLoadingIndicator.parentNode !== chatMessages) {
-                scrollToBottom();
-             }
         }
-        /** Charge l'historique de chat depuis le backend */
-        async function loadChatHistory() {
-            console.log("Tentative de chargement de l'historique...");
-            // Garder l'indicateur visible pendant le chargement
-            historyLoadingIndicator.style.display = 'block';
             try {
-                const response = await fetch(API_HISTORY_ENDPOINT);
-                if (!response.ok) {
-                     let errorMsg = `Erreur serveur (${response.status})`;
-                     try { // Tenter de lire un message d'erreur JSON du backend
-                         const errData = await response.json();
-                         errorMsg = errData.error || errorMsg;
-                     } catch (e) { /* Ignorer si pas JSON */ }
-                    throw new Error(errorMsg);
-                }
-                const data = await response.json();
-                if (data.success && Array.isArray(data.history)) {
-                    console.log(`Historique reçu: ${data.history.length} message(s).`);
-                    // Vider les messages actuels (au cas où, et supprime l'indicateur de chargement d'historique)
-                    chatMessages.innerHTML = '';
-                    // Remettre l'indicateur de chargement de NOUVEAU message (caché)
-                    chatMessages.appendChild(loadingIndicator);
-                    loadingIndicator.style.display = 'none'; // S'assurer qu'il est caché
-                    if (data.history.length === 0) {
-                        addMessageToChat('assistant', "Bonjour ! Comment puis-je vous aider aujourd'hui ?");
-                    } else {
-                        data.history.forEach(message => {
-                            const isAssistantHtml = message.role === 'assistant';
-                            addMessageToChat(message.role, message.text, isAssistantHtml);
-                        });
-                    }
-                    // Faire défiler vers le bas après avoir ajouté tous les messages
-                    scrollToBottom();
-                } else {
-                    throw new Error(data.error || "Format de réponse de l'historique invalide.");
-                }
-            } catch (error) {
-                console.error("Erreur lors du chargement de l'historique:", error);
-                // Afficher l'erreur dans la zone de chat à la place de l'indicateur
-                 chatMessages.innerHTML = ''; // Vider
-                 chatMessages.appendChild(loadingIndicator); // Remettre l'indicateur caché
-                 loadingIndicator.style.display = 'none';
-                displayError(`Impossible de charger l'historique: ${error.message}`);
-            } finally {
-                // Cacher l'indicateur de chargement d'historique s'il est toujours là (en cas d'erreur avant de le vider)
-                 if (historyLoadingIndicator.parentNode === chatMessages) {
-                      historyLoadingIndicator.remove();
-                 }
-                // Mettre le focus sur l'input à la fin
-                promptInput.focus();
             }
         }
-        /** Réinitialise l'input fichier */
-        function clearFileInput() {
-            fileUpload.value = ''; // Réinitialise la sélection
-            fileNameSpan.textContent = '';
-            fileNameSpan.title = '';
-            clearFileButton.style.display = 'none'; // Cache le bouton 'X'
         }
-        // === Gestionnaires d'événements ===
-        // Changement sur l'input fichier
-        fileUpload.addEventListener('change', () => {
-            if (fileUpload.files.length > 0) {
-                const file = fileUpload.files[0];
-                const name = file.name;
-                // Tronquer le nom si trop long pour l'affichage
-                fileNameSpan.textContent = name.length > 20 ? name.substring(0, 17) + '...' : name;
-                fileNameSpan.title = name; // Titre complet au survol
-                clearFileButton.style.display = 'inline-block'; // Montre le bouton 'X'
             } else {
-                clearFileInput(); // Appeler la fonction de nettoyage
-            }
-        });
-        // Clic sur le bouton 'X' pour retirer le fichier
-        clearFileButton.addEventListener('click', () => {
-            clearFileInput();
-        });
-        // Soumission du formulaire de chat
-        chatForm.addEventListener('submit', async (e) => {
-            e.preventDefault(); // Empêche le rechargement de page
-            const prompt = promptInput.value.trim();
-            const file = fileUpload.files[0]; // Récupère le fichier s'il y en a un
-            const useWebSearch = webSearchToggle.checked;
-            // Vérifier si un prompt ou un fichier est présent
-            if (!prompt && !file) {
-                displayError("Veuillez entrer un message ou sélectionner un fichier.");
-                promptInput.focus();
-                return;
             }
-            errorMessageDiv.style.display = 'none'; // Cacher les erreurs précédentes
-            // Afficher le message utilisateur immédiatement
-            let userMessageText = prompt;
-            if (file) {
-                 // Préciser le fichier dans le message affiché si les deux sont présents
-                 userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
-            }
-            addMessageToChat('user', userMessageText);
-            // Préparer les données pour l'envoi
-            const formData = new FormData();
-            formData.append('prompt', prompt); // Envoyer même si vide si un fichier est présent
-            formData.append('web_search', useWebSearch); // Envoyer 'true' ou 'false'
-            if (file) {
-                formData.append('file', file);
-            }
-            // Afficher le chargement et vider les champs
-            showLoading(true);
-            promptInput.value = '';
-            clearFileInput(); // Nettoyer l'input fichier après envoi
-            try {
-                // Envoyer les données au backend
-                const response = await fetch(API_CHAT_ENDPOINT, {
-                    method: 'POST',
-                    body: formData,
-                    // Pas besoin de 'Content-Type', FormData le gère
-                });
-                const data = await response.json(); // Tenter de lire la réponse JSON
-                if (!response.ok) {
-                    // Utiliser le message d'erreur du JSON si dispo, sinon statut HTTP
-                    throw new Error(data.error || `Erreur serveur: ${response.status}`);
-                }
-                if (data.success && data.message) {
-                    // Ajouter la réponse de l'assistant (en supposant qu'elle est en HTML sûr)
-                    addMessageToChat('assistant', data.message, true);
-                } else {
-                    // Gérer le cas où success=true mais pas de message, ou success=false
-                    throw new Error(data.error || "Réponse invalide ou vide du serveur.");
-                }
-            } catch (error) {
-                console.error("Erreur lors de l'envoi du message:", error);
-                displayError(error.message);
-                // Optionnel : Supprimer le message utilisateur qui a causé l'erreur ? (Peut être déroutant)
-            } finally {
-                // Arrêter l'indicateur de chargement et réactiver les contrôles
-                showLoading(false);
-                promptInput.focus(); // Remettre le focus sur l'input
-            }
-        });
-        // Soumission du formulaire pour effacer le chat
-         clearForm.addEventListener('submit', async (e) => {
-             e.preventDefault(); // Empêche la soumission classique
-             if (confirm("Êtes-vous sûr de vouloir effacer toute la conversation ?")) {
-                 console.log("Demande d'effacement du chat...");
-                 // Ajouter un indicateur visuel temporaire si souhaité
-                 const originalButtonText = e.target.querySelector('button').textContent;
-                 e.target.querySelector('button').textContent = '...';
-                 e.target.querySelector('button').disabled = true;
-                 try {
-                     const response = await fetch(CLEAR_ENDPOINT, { method: 'POST' });
-                     const data = await response.json(); // Lire la réponse JSON
-                     if (response.ok && data.success) {
-                         console.log("Chat effacé avec succès.");
-                         // Effacer les messages affichés dans le DOM
-                         chatMessages.innerHTML = ''; // Vide complètement
-                         // Remettre l'indicateur de chargement de NOUVEAU message (caché)
-                         chatMessages.appendChild(loadingIndicator);
-                         loadingIndicator.style.display = 'none';
-                         // Ajouter le message d'accueil initial
-                         addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
-                         errorMessageDiv.style.display = 'none'; // Cacher toute erreur précédente
-                     } else {
-                         throw new Error(data.error || "Impossible d'effacer côté serveur.");
-                     }
-                 } catch (error) {
-                     console.error("Erreur lors de l'effacement:", error);
-                     displayError(`Erreur lors de l'effacement du chat: ${error.message}`);
-                 } finally {
-                      // Restaurer le bouton
-                      e.target.querySelector('button').textContent = originalButtonText;
-                      e.target.querySelector('button').disabled = false;
-                      promptInput.focus(); // Remettre le focus
-                 }
-             }
-         });
-        // === Initialisation au chargement de la page ===
-        loadChatHistory(); // Charger l'historique dès que le DOM est prêt
     });
-    </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mariam AI!</title>
+  <!-- Tailwind CSS via CDN (inclut le plugin Forms) -->
+  <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
+  <!-- Favicon (Emoji simple) -->
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
+  <style>
+    /* Assurer la hauteur minimale et permettre le scroll de la page sur mobile */
+    html, body {
+      min-height: 100vh;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      display: flex;
+      flex-direction: column;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    }
+    #chat-container {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: 0;
+    }
+    #chat-messages {
+      flex-grow: 1;
+      overflow-y: auto;
+      min-height: 0;
+    }
+    /* Styles de la scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #a8a8a8;
+      border-radius: 10px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #7a7a7a;
+    }
+    /* Styles pour le rendu Markdown dans le chat */
+    #chat-messages .prose code:not(pre code) {
+      background-color: #e5e7eb;
+      padding: 0.2em 0.4em;
+      font-size: 85%;
+      border-radius: 4px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    #chat-messages .prose pre {
+      background-color: #f3f4f6;
+      padding: 0.8em 1em;
+      border-radius: 6px;
+      overflow-x: auto;
+      font-size: 0.875rem;
+    }
+    #chat-messages .prose pre code {
+      background-color: transparent;
+      padding: 0;
+      font-size: inherit;
+      border-radius: 0;
+      color: inherit;
+    }
+    #chat-messages .prose blockquote {
+      border-left-color: #9ca3af;
+      color: #4b5563;
+    }
+    #chat-messages .prose strong {
+      color: #1f2937;
+    }
+    #chat-messages .prose a {
+      color: #2563eb;
+      text-decoration: underline;
+      text-decoration-color: #93c5fd;
+      transition: color 0.2s ease;
+    }
+    #chat-messages .prose a:hover {
+      color: #1d4ed8;
+      text-decoration-color: #60a5fa;
+    }
+    /* Chargement initial de l'historique */
+    #history-loading {
+      padding: 20px;
+      text-align: center;
+      color: #6b7280;
+      font-style: italic;
+    }
+  </style>
 </head>
+<body class="bg-gray-100 flex flex-col min-h-screen">
+  <!-- En-tête fixe -->
+  <header class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white p-3 sm:p-4 shadow-md flex justify-between items-center sticky top-0 z-10 flex-shrink-0">
+    <h1 class="text-xl sm:text-2xl font-bold">Mariam AI!</h1>
+    <form action="/clear" method="POST" id="clear-form">
+      <button type="submit" title="Effacer la conversation actuelle" class="bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-1 px-3 rounded-full transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75">
+        Effacer
+      </button>
+    </form>
+  </header>
+  <!-- Conteneur Principal du Chat -->
+  <div id="chat-container" class="max-w-4xl w-full mx-auto bg-white shadow-xl rounded-b-lg flex flex-col flex-grow">
+    <!-- Zone d'affichage des messages -->
+    <div id="chat-messages" class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 scroll-smooth">
+      <div id="history-loading">
+        <div class="flex justify-center items-center space-x-2">
+          <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <span>Chargement de l'historique...</span>
         </div>
+      </div>
+      <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
+        <div class="flex justify-center items-center space-x-2">
+          <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <span>Mariam réfléchit...</span>
         </div>
+      </div>
+    </div>
+    <!-- Zone d'erreur -->
+    <div id="error-message" class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-2 rounded mx-4 my-2 flex-shrink-0" role="alert" style="display: none;">
+      <p class="font-bold mr-2">Erreur:</p>
+      <p id="error-text">Le message d'erreur détaillé ira ici.</p>
+    </div>
+    <!-- Barre d'options et d'upload -->
+    <div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0">
+      <div class="flex items-center justify-between text-sm">
+        <label for="web_search_toggle" class="flex items-center space-x-2 cursor-pointer text-gray-600 hover:text-gray-800 select-none" title="Activer/Désactiver la recherche web pour le prochain message">
+          <input type="checkbox" id="web_search_toggle" name="web_search" value="true" class="form-checkbox h-4 w-4 rounded text-blue-500 focus:ring-blue-400 focus:ring-offset-0 border-gray-300">
+          <span class="hidden sm:inline">Recherche Web</span>
+          <span class="sm:hidden">Web</span>
+        </label>
+        <div class="flex items-center space-x-2">
+          <label for="file_upload" class="cursor-pointer text-blue-500 hover:text-blue-700 font-medium flex items-center" title="Joindre un fichier (txt, pdf, png, jpg)">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+            </svg>
+            <span class="hidden sm:inline">Fichier</span>
+            <input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg">
+          </label>
+          <span id="file-name" class="text-gray-500 text-xs truncate max-w-[150px]" title=""></span>
+          <button id="clear-file" class="text-red-500 hover:text-red-700 text-xs p-0.5 rounded focus:outline-none focus:ring-1 focus:ring-red-400" title="Retirer le fichier" style="display: none;">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
     </div>
+    <!-- Formulaire d'entrée du message -->
+    <form id="chat-form" class="bg-gray-100 p-3 sm:p-4 border-t border-gray-200 rounded-b-lg flex-shrink-0">
+      <div class="flex items-center space-x-2 sm:space-x-3">
+        <input type="text" id="prompt" name="prompt" class="flex-grow form-input px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-sm text-sm sm:text-base" placeholder="Posez votre question à Mariam..." autocomplete="off">
+        <button type="submit" id="send-button" title="Envoyer le message" class="bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold p-2 rounded-full transition duration-200 flex items-center justify-center shadow-md w-10 h-10 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+          </svg>
+        </button>
+      </div>
+    </form>
+  </div>
+  <!-- Script JavaScript pour l'interaction -->
+  <script>
     document.addEventListener('DOMContentLoaded', () => {
+      // Références aux éléments du DOM
+      const chatForm = document.getElementById('chat-form');
+      const promptInput = document.getElementById('prompt');
+      const chatMessages = document.getElementById('chat-messages');
+      const loadingIndicator = document.getElementById('loading-indicator');
+      const historyLoadingIndicator = document.getElementById('history-loading');
+      const errorMessageDiv = document.getElementById('error-message');
+      const errorTextP = document.getElementById('error-text');
+      const webSearchToggle = document.getElementById('web_search_toggle');
+      const fileUpload = document.getElementById('file_upload');
+      const fileNameSpan = document.getElementById('file-name');
+      const clearFileButton = document.getElementById('clear-file');
+      const sendButton = document.getElementById('send-button');
+      const clearForm = document.getElementById('clear-form');
+      // Endpoints de l'API Backend
+      const API_CHAT_ENDPOINT = '/api/chat';
+      const API_HISTORY_ENDPOINT = '/api/history';
+      const CLEAR_ENDPOINT = '/clear';
+      function scrollToBottom() {
+        setTimeout(() => {
+          chatMessages.scrollTop = chatMessages.scrollHeight;
+        }, 50);
+      }
+      function showLoading(show) {
+        const currentlyLoading = loadingIndicator.style.display !== 'none';
+        if (show && !currentlyLoading) {
+          loadingIndicator.style.display = 'block';
+          chatMessages.appendChild(loadingIndicator);
+          scrollToBottom();
+        } else if (!show && currentlyLoading) {
+          loadingIndicator.style.display = 'none';
         }
+        sendButton.disabled = show;
+        promptInput.disabled = show;
+        fileUpload.disabled = show;
+        clearFileButton.disabled = show;
+      }
+      function displayError(message) {
+        errorTextP.textContent = message || "Une erreur inconnue est survenue.";
+        errorMessageDiv.style.display = 'flex';
+        errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+      function addMessageToChat(role, text, isHtml = false) {
+        errorMessageDiv.style.display = 'none';
+        const messageWrapper = document.createElement('div');
+        messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4');
+        const bubbleDiv = document.createElement('div');
+        bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-[85%]', 'sm:max-w-[75%]', 'shadow-md', 'relative');
+        if (role === 'user') {
+          bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
+          const paragraph = document.createElement('p');
+          paragraph.classList.add('text-sm', 'sm:text-base', 'break-words');
+          paragraph.textContent = text;
+          bubbleDiv.appendChild(paragraph);
+        } else {
+          bubbleDiv.classList.add('bg-gray-100', 'text-gray-800', 'rounded-bl-none', 'border', 'border-gray-200');
+          const proseDiv = document.createElement('div');
+          proseDiv.classList.add('prose', 'prose-sm', 'sm:prose-base', 'max-w-none', 'text-gray-800', 'prose-headings:font-semibold', 'prose-headings:text-gray-800', 'prose-a:text-blue-600', 'prose-a:no-underline', 'hover:prose-a:underline', 'prose-strong:text-gray-800', 'prose-code:text-red-600', 'prose-code:font-mono', 'prose-blockquote:text-gray-600', 'break-words');
+          if (isHtml) {
+            proseDiv.innerHTML = text;
+          } else {
+            proseDiv.textContent = text;
+          }
+          bubbleDiv.appendChild(proseDiv);
         }
+        messageWrapper.appendChild(bubbleDiv);
+        chatMessages.insertBefore(messageWrapper, loadingIndicator);
+        if (historyLoadingIndicator.parentNode !== chatMessages) {
+          scrollToBottom();
         }
+      }
+      async function loadChatHistory() {
+        historyLoadingIndicator.style.display = 'block';
+        try {
+          const response = await fetch(API_HISTORY_ENDPOINT);
+          if (!response.ok) {
+            let errorMsg = `Erreur serveur (${response.status})`;
             try {
+              const errData = await response.json();
+              errorMsg = errData.error || errorMsg;
+            } catch (e) { }
+            throw new Error(errorMsg);
+          }
+          const data = await response.json();
+          if (data.success && Array.isArray(data.history)) {
+            chatMessages.innerHTML = '';
+            chatMessages.appendChild(loadingIndicator);
+            loadingIndicator.style.display = 'none';
+            if (data.history.length === 0) {
+              addMessageToChat('assistant', "Bonjour ! Comment puis-je vous aider aujourd'hui ?");
+            } else {
+              data.history.forEach(message => {
+                const isAssistantHtml = message.role === 'assistant';
+                addMessageToChat(message.role, message.text, isAssistantHtml);
+              });
             }
+            scrollToBottom();
+          } else {
+            throw new Error(data.error || "Format de réponse de l'historique invalide.");
+          }
+        } catch (error) {
+          chatMessages.innerHTML = '';
+          chatMessages.appendChild(loadingIndicator);
+          loadingIndicator.style.display = 'none';
+          displayError(`Impossible de charger l'historique: ${error.message}`);
+        } finally {
+          if (historyLoadingIndicator.parentNode === chatMessages) {
+            historyLoadingIndicator.remove();
+          }
+          promptInput.focus();
+        }
+      }
+      function clearFileInput() {
+        fileUpload.value = '';
+        fileNameSpan.textContent = '';
+        fileNameSpan.title = '';
+        clearFileButton.style.display = 'none';
+      }
+      fileUpload.addEventListener('change', () => {
+        if (fileUpload.files.length > 0) {
+          const file = fileUpload.files[0];
+          const name = file.name;
+          fileNameSpan.textContent = name.length > 20 ? name.substring(0, 17) + '...' : name;
+          fileNameSpan.title = name;
+          clearFileButton.style.display = 'inline-block';
+        } else {
+          clearFileInput();
+        }
+      });
+      clearFileButton.addEventListener('click', () => {
+        clearFileInput();
+      });
+      chatForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const prompt = promptInput.value.trim();
+        const file = fileUpload.files[0];
+        const useWebSearch = webSearchToggle.checked;
+        if (!prompt && !file) {
+          displayError("Veuillez entrer un message ou sélectionner un fichier.");
+          promptInput.focus();
+          return;
         }
+        errorMessageDiv.style.display = 'none';
+        let userMessageText = prompt;
+        if (file) {
+          userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
         }
+        addMessageToChat('user', userMessageText);
+        const formData = new FormData();
+        formData.append('prompt', prompt);
+        formData.append('web_search', useWebSearch);
+        if (file) {
+          formData.append('file', file);
+        }
+        showLoading(true);
+        promptInput.value = '';
+        clearFileInput();
+        try {
+          const response = await fetch(API_CHAT_ENDPOINT, {
+            method: 'POST',
+            body: formData,
+          });
+          const data = await response.json();
+          if (!response.ok) {
+            throw new Error(data.error || `Erreur serveur: ${response.status}`);
+          }
+          if (data.success && data.message) {
+            addMessageToChat('assistant', data.message, true);
+          } else {
+            throw new Error(data.error || "Réponse invalide ou vide du serveur.");
+          }
+        } catch (error) {
+          displayError(error.message);
+        } finally {
+          showLoading(false);
+          promptInput.focus();
+        }
+      });
+      clearForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        if (confirm("Êtes-vous sûr de vouloir effacer toute la conversation ?")) {
+          const originalButtonText = e.target.querySelector('button').textContent;
+          e.target.querySelector('button').textContent = '...';
+          e.target.querySelector('button').disabled = true;
+          try {
+            const response = await fetch(CLEAR_ENDPOINT, { method: 'POST' });
+            const data = await response.json();
+            if (response.ok && data.success) {
+              chatMessages.innerHTML = '';
+              chatMessages.appendChild(loadingIndicator);
+              loadingIndicator.style.display = 'none';
+              addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
+              errorMessageDiv.style.display = 'none';
             } else {
+              throw new Error(data.error || "Impossible d'effacer côté serveur.");
             }
+          } catch (error) {
+            displayError(`Erreur lors de l'effacement du chat: ${error.message}`);
+          } finally {
+            e.target.querySelector('button').textContent = originalButtonText;
+            e.target.querySelector('button').disabled = false;
+            promptInput.focus();
+          }
+        }
+      });
+      loadChatHistory();
     });
+  </script>
 </body>
+</html>