Update static/script.js

static/script.js

@@ -24,120 +24,89 @@ function addMessage(role, text) {
 
 // Fonction pour envoyer la question via l'API SSE
 async function askQuestion() {
-    const question = messageInput.value.trim();
-    if (!question) return;
+    // ... (début de la fonction inchangé) ...
 
-    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
+    let currentResponse = ""; // Déclaration initiale ICI
 
     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
+        // ... (fetch et initialisation reader/decoder) ...
+        let buffer = '';
 
         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
+                console.log("Stream terminé par le serveur.");
+                // Traiter le reste du buffer
+                const result = processSSEBuffer(buffer, assistantMessageDiv, currentResponse); // Passe currentResponse
+                currentResponse = result.updatedResponse; // Met à jour currentResponse
+                break;
             }
 
             buffer += decoder.decode(value, { stream: true });
-            // Traite le buffer pour extraire les messages SSE complets
-            buffer = processSSEBuffer(buffer, assistantMessageDiv);
+            // Traite le buffer et met à jour currentResponse
+            const result = processSSEBuffer(buffer, assistantMessageDiv, currentResponse); // Passe currentResponse
+            currentResponse = result.updatedResponse; // Met à jour currentResponse
+            buffer = result.incomplete; // Met à jour le buffer
 
-            // Met à jour le contenu du div de l'assistant (déjà fait dans processSSEBuffer)
-            chatbox.scrollTop = chatbox.scrollHeight; // Scroll pendant le stream
+            // Scroll (déjà fait dans processSSEBuffer)
+            // chatbox.scrollTop = chatbox.scrollHeight;
         }
 
     } 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>`);
-         }
+        // ... (gestion d'erreur inchangée) ...
     } 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();
+        sendButton.disabled = false;
     }
 }
 
 // Fonction pour traiter le buffer SSE et mettre à jour l'UI
-function processSSEBuffer(buffer, targetDiv) {
+// Accepte la réponse actuelle et le div cible, retourne la nouvelle réponse accumulée
+function processSSEBuffer(buffer, targetDiv, currentResponseAccumulated) {
     let messages = buffer.split('\n\n');
-    let incomplete = buffer.endsWith('\n\n') ? '' : messages.pop(); // Garde la partie incomplète pour le prochain chunk
+    let incomplete = buffer.endsWith('\n\n') ? '' : messages.pop();
+
+    let newResponsePart = ''; // Pour accumuler les NOUVELLES données de ce buffer
 
     messages.forEach(message => {
-        if (!message.trim()) return; // Ignore les messages vides
+        if (!message.trim()) return;
 
-        let eventType = 'message'; // Type par défaut
+        let eventType = 'message';
         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
+                dataLines.push(line.substring(6));
             }
-            // 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
+        let data = dataLines.join('\n');
+        console.log(`SSE Event: ${eventType}, Data: ${data.substring(0, 50)}...`); // Log
 
         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
+            if (targetDiv.querySelector('.thinking')) {
+                targetDiv.innerHTML = ''; // Efface le "..."
+            }
+            newResponsePart += data; // Accumule seulement la nouvelle partie
 
         } else if (eventType === 'end') {
-             console.log("Fin de stream détectée par événement 'end'");
-             sendButton.disabled = false; // Réactive explicitement le bouton
+            console.log("Fin de stream détectée par événement 'end'");
+            sendButton.disabled = false;
         } 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;
+            console.error("Erreur signalée par le serveur via SSE:", data);
+             // Ajoute l'erreur à la fin de la réponse actuelle
+             currentResponseAccumulated += `<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
+
+    // Met à jour l'UI avec la réponse complète (ancienne + nouvelle)
+    const updatedResponse = currentResponseAccumulated + newResponsePart;
+    targetDiv.innerHTML = updatedResponse.replace(/\n/g, '<br>');
+
+    chatbox.scrollTop = chatbox.scrollHeight;
+    return { incomplete: incomplete, updatedResponse: updatedResponse }; // Retourne la partie non traitée et la réponse mise à jour
 }
 
 // --- Auto-ajustement hauteur Textarea (Optionnel mais recommandé) ---