Update static/script.js

static/script.js

@@ -1,122 +1,164 @@
-const chatbox = document.getElementById('chatbox');
-const questionInput = document.getElementById('question-input');
-const sendButton = document.getElementById('send-button');
-
-let messageHistory = []; // Pour garder une trace simple
-
-function addMessage(role, text) {
-    const messageDiv = document.createElement('div');
-    messageDiv.classList.add('message', role === 'user' ? 'user-message' : 'assistant-message');
-    // Remplace les sauts de ligne par <br> pour l'affichage HTML
-    messageDiv.innerHTML = text.replace(/\n/g, '<br>');
-    chatbox.appendChild(messageDiv);
-    chatbox.scrollTop = chatbox.scrollHeight; // Auto-scroll
-}
-
-async function askQuestion() {
-    const question = questionInput.value.trim();
-    if (!question) return;
-
-    addMessage('user', question);
-    questionInput.value = '';
-    sendButton.disabled = true; // Désactive pendant la réponse
-
-    // Crée un placeholder pour la réponse de l'assistant
-    const assistantMessageDiv = document.createElement('div');
-    assistantMessageDiv.classList.add('message', 'assistant-message');
-    assistantMessageDiv.innerHTML = "جارٍ التفكير..."; // Indicateur
-    chatbox.appendChild(assistantMessageDiv);
-    chatbox.scrollTop = chatbox.scrollHeight;
-
-    let currentResponse = ""; // Pour accumuler la réponse streamée
-
-    try {
-        // Utilisation de EventSource pour gérer le streaming SSE
-        const eventSource = new EventSource('/ask', {
-             method: 'POST', // EventSource ne supporte que GET, on doit tricher ou utiliser fetch + ReadableStream
-             headers: {
-                 'Content-Type': 'application/json',
-             },
-             body: JSON.stringify({ question: question })
-         });
-
-         // -- Alternative avec Fetch API pour POST et streaming --
-         const response = await fetch('/ask', {
-             method: 'POST',
-             headers: {
-                 'Content-Type': 'application/json',
-                 'Accept': 'text/event-stream' // Indique qu'on attend un stream
-             },
-             body: JSON.stringify({ question: question })
-         });
-
-         if (!response.ok || !response.body) {
-             throw new Error(`Erreur serveur: ${response.statusText}`);
-         }
-
-         const reader = response.body.getReader();
-         const decoder = new TextDecoder();
-
-         while (true) {
-             const { done, value } = await reader.read();
-             if (done) break;
-
-             const chunk = decoder.decode(value, { stream: true });
-             // Traiter les données SSE reçues (peut contenir plusieurs messages)
-             const lines = chunk.split('\n\n');
-             lines.forEach(line => {
-                 if (line.startsWith('data: ')) {
-                     const data = line.substring(6).trim(); // Enlève "data: "
-                     if (data) {
-                        currentResponse += data.replace(/\\n/g,'\n'); // Reconstitue les sauts de ligne si nécessaire
-                        // Met à jour le contenu du div de l'assistant
-                        assistantMessageDiv.innerHTML = currentResponse.replace(/\n/g, '<br>');
-                        chatbox.scrollTop = chatbox.scrollHeight; // Scroll pendant le stream
-                     }
-                 }
-             });
-         }
-         // --- Fin de l'alternative Fetch API ---
-
-
-        // Gestion des événements SSE (si EventSource fonctionnait avec POST)
-        /*
-        eventSource.onmessage = function(event) {
-            currentResponse += event.data + "\n"; // Ajoute les données reçues
-            // Met à jour le contenu du div de l'assistant
-            assistantMessageDiv.innerHTML = currentResponse.replace(/\n/g, '<br>');
-            chatbox.scrollTop = chatbox.scrollHeight; // Scroll pendant le stream
-        };
-
-        eventSource.onerror = function(err) {
-            console.error("Erreur EventSource:", err);
-            assistantMessageDiv.innerHTML += "<br>Erreur de connexion stream.";
-            eventSource.close(); // Ferme la connexion en cas d'erreur
-            sendButton.disabled = false;
-        };
-
-        // On pourrait avoir besoin d'un signal de fin explicite du serveur
-        // eventSource.addEventListener('end', function() {
-        //     eventSource.close();
-        //     sendButton.disabled = false;
-        // });
-        */
-
-
-    } catch (error) {
-        console.error('Erreur lors de la requête:', error);
-        assistantMessageDiv.innerHTML += `<br>Erreur: ${error.message}`;
-    } finally {
-         // Réactive le bouton une fois le stream terminé ou en erreur (nécessite une gestion de fin de stream fiable)
-         // Avec fetch, la fin est détectée par `done` dans la boucle reader.read()
-         sendButton.disabled = false;
-    }
-}
-
-sendButton.addEventListener('click', askQuestion);
-questionInput.addEventListener('keypress', function(e) {
-    if (e.key === 'Enter' && !e.shiftKey) { // Submit avec Entrée (sans Shift)
-        e.preventDefault(); // Empêche le saut de ligne par défaut
-        askQuestion();
-    }
-});
+const chatbox = document.getElementById('chatbox');
+const messageInput = document.getElementById('message-input'); // Renommé pour clarté
+const sendButton = document.getElementById('send-button');
+
+// Fonction pour ajouter un message au chatbox
+function addMessage(role, text) {
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message', role === 'user' ? 'user-message' : 'assistant-message');
+
+    // IMPORTANT: Pour afficher le texte brut et éviter les injections XSS
+    // Utilisez textContent au lieu de innerHTML si vous n'avez pas besoin d'interpréter le HTML reçu
+    // messageDiv.textContent = text;
+
+    // SI vous avez besoin d'interpréter le HTML (ex: <br> pour les sauts de ligne, ou si le LLM génère du HTML/Markdown simple)
+    // Soyez prudent avec le contenu généré par le LLM si vous utilisez innerHTML.
+    // Une bibliothèque de Markdown comme 'marked.js' serait plus sûre pour rendre le Markdown.
+    // Pour une simple substitution de saut de ligne:
+    messageDiv.innerHTML = text.replace(/\n/g, '<br>');
+
+    chatbox.appendChild(messageDiv);
+    // Scroll vers le bas pour voir le nouveau message
+    chatbox.scrollTop = chatbox.scrollHeight;
+}
+
+// Fonction pour envoyer la question via l'API SSE
+async function askQuestion() {
+    const question = messageInput.value.trim();
+    if (!question) return;
+
+    addMessage('user', question);
+    messageInput.value = ''; // Vide la zone de saisie
+    sendButton.disabled = true; // Désactive le bouton pendant l'attente
+    messageInput.style.height = 'auto'; // Réinitialise la hauteur (pour auto-ajustement si implémenté)
+
+
+    // Crée un placeholder pour la réponse de l'assistant
+    const assistantMessageDiv = document.createElement('div');
+    assistantMessageDiv.classList.add('message', 'assistant-message');
+    assistantMessageDiv.innerHTML = '<span class="thinking">...</span>'; // Indicateur visuel simple
+    chatbox.appendChild(assistantMessageDiv);
+    chatbox.scrollTop = chatbox.scrollHeight;
+
+    let currentResponse = ""; // Pour accumuler la réponse streamée
+
+    try {
+        const response = await fetch('/ask', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'text/event-stream'
+            },
+            body: JSON.stringify({ question: question })
+        });
+
+        if (!response.ok || !response.body) {
+            throw new Error(`Erreur serveur: ${response.status} ${response.statusText}`);
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = ''; // Buffer pour gérer les chunks SSE potentiellement fragmentés
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+                 console.log("Stream terminé par le serveur.");
+                 // Traiter le reste du buffer au cas où
+                 processSSEBuffer(buffer, assistantMessageDiv);
+                 break; // Sort de la boucle
+            }
+
+            buffer += decoder.decode(value, { stream: true });
+            // Traite le buffer pour extraire les messages SSE complets
+            buffer = processSSEBuffer(buffer, assistantMessageDiv);
+
+            // Met à jour le contenu du div de l'assistant (déjà fait dans processSSEBuffer)
+            chatbox.scrollTop = chatbox.scrollHeight; // Scroll pendant le stream
+        }
+
+    } catch (error) {
+        console.error('Erreur lors de la requête ou du stream:', error);
+        // Affiche l'erreur dans la bulle de l'assistant
+         if (assistantMessageDiv) {
+             assistantMessageDiv.innerHTML += `<br><br><strong style="color: #ffaaaa;">حدث خطأ: ${error.message}</strong>`;
+         } else {
+             addMessage('assistant', `<strong style="color: #ffaaaa;">حدث خطأ: ${error.message}</strong>`);
+         }
+    } finally {
+        sendButton.disabled = false; // Réactive le bouton à la fin ou en cas d'erreur
+        // Optionnel: redonner le focus à la zone de saisie
+        // messageInput.focus();
+    }
+}
+
+// Fonction pour traiter le buffer SSE et mettre à jour l'UI
+function processSSEBuffer(buffer, targetDiv) {
+    let messages = buffer.split('\n\n');
+    let incomplete = buffer.endsWith('\n\n') ? '' : messages.pop(); // Garde la partie incomplète pour le prochain chunk
+
+    messages.forEach(message => {
+        if (!message.trim()) return; // Ignore les messages vides
+
+        let eventType = 'message'; // Type par défaut
+        let dataLines = [];
+
+        message.split('\n').forEach(line => {
+            if (line.startsWith('event: ')) {
+                eventType = line.substring(7).trim();
+            } else if (line.startsWith('data: ')) {
+                dataLines.push(line.substring(6)); // Ne pas .trim() ici pour préserver les espaces initiaux
+            }
+            // Ignorer les lignes 'id:' ou ':' (commentaires) pour l'instant
+        });
+
+        let data = dataLines.join('\n'); // Rejoint les lignes de données avec des sauts de ligne
+
+         console.log(`SSE Event: ${eventType}, Data: ${data.substring(0, 50)}...`); // Log de débogage
+
+        if (eventType === 'message') {
+             // Si la réponse initiale est l'indicateur '...', la remplace
+             if (targetDiv.querySelector('.thinking')) {
+                 targetDiv.innerHTML = ''; // Efface le "..."
+             }
+             // Ajoute les nouvelles données
+             // Utiliser innerHTML avec précaution, idéalement nettoyer ou utiliser textContent si possible
+             currentResponse += data;
+             targetDiv.innerHTML = currentResponse.replace(/\n/g, '<br>'); // Met à jour avec la réponse accumulée
+
+        } else if (eventType === 'end') {
+             console.log("Fin de stream détectée par événement 'end'");
+             sendButton.disabled = false; // Réactive explicitement le bouton
+        } else if (eventType === 'error') {
+             console.error("Erreur signalée par le serveur via SSE:", data);
+             targetDiv.innerHTML += `<br><strong style="color: #ffaaaa;">خطأ من الخادم: ${data}</strong>`;
+             sendButton.disabled = false;
+        }
+        // Gérer d'autres types d'événements si nécessaire
+    });
+     chatbox.scrollTop = chatbox.scrollHeight; // Scroll après traitement
+    return incomplete; // Retourne la partie non traitée du buffer
+}
+
+// --- Auto-ajustement hauteur Textarea (Optionnel mais recommandé) ---
+function adjustTextareaHeight() {
+    messageInput.style.height = 'auto'; // Réinitialise pour obtenir scrollHeight correct
+    messageInput.style.height = (messageInput.scrollHeight) + 'px'; // Ajuste à la hauteur du contenu
+}
+
+messageInput.addEventListener('input', adjustTextareaHeight);
+
+
+// --- Écouteurs d'événements ---
+sendButton.addEventListener('click', askQuestion);
+
+messageInput.addEventListener('keypress', function(e) {
+    // Envoi avec Entrée (sauf si Shift est pressé pour un saut de ligne)
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault(); // Empêche le saut de ligne dans le textarea
+        askQuestion();
+    }
+});
+
+// Ajuste la hauteur initiale au cas où il y aurait du texte pré-rempli (peu probable ici)
+adjustTextareaHeight();