Update static/script.js

static/script.js

@@ -1,15 +1,15 @@
-const chatbox = document.getElementById('chatbox');
-const messageInput = document.getElementById('message-input');
-const sendButton = document.getElementById('send-button');
-
-// --- addMessage function (inchangée) ---
-function addMessage(role, text) {
-    const messageDiv = document.createElement('div');
-    messageDiv.classList.add('message', role === 'user' ? 'user-message' : 'assistant-message');
-    messageDiv.innerHTML = text.replace(/\n/g, '<br>');
-    chatbox.appendChild(messageDiv);
-    chatbox.scrollTop = chatbox.scrollHeight;
-}
+// const chatbox = document.getElementById('chatbox');
+// const messageInput = document.getElementById('message-input');
+// const sendButton = document.getElementById('send-button');
+
+// // --- addMessage function (inchangée) ---
+// function addMessage(role, text) {
+//     const messageDiv = document.createElement('div');
+//     messageDiv.classList.add('message', role === 'user' ? 'user-message' : 'assistant-message');
+//     messageDiv.innerHTML = text.replace(/\n/g, '<br>');
+//     chatbox.appendChild(messageDiv);
+//     chatbox.scrollTop = chatbox.scrollHeight;
+// }
 
 // // --- processSSEBuffer function (inchangée - version Méthode 1) ---
 // function processSSEBuffer(buffer, targetDiv, currentResponseAccumulated) {
@@ -171,59 +171,85 @@ function addMessage(role, text) {
 
 // console.log("Chat script loaded and listeners attached."); // LOG AJOUTÉ
 
-// --- processSSEBuffer (simplifié pour retourner juste la NOUVELLE partie de texte) ---
-function processSSEBuffer(buffer) {
-    console.log("Processing buffer:", buffer);
+
+
+const chatbox = document.getElementById('chatbox');
+const messageInput = document.getElementById('message-input');
+const sendButton = document.getElementById('send-button');
+
+// --- addMessage function (inchangée) ---
+function addMessage(role, text) {
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message', role === 'user' ? 'user-message' : 'assistant-message');
+    // Remplacer les sauts de ligne pour l'affichage HTML
+    messageDiv.innerHTML = text.replace(/\n/g, '<br>');
+    chatbox.appendChild(messageDiv);
+    chatbox.scrollTop = chatbox.scrollHeight;
+}
+
+// --- Fonction pour parser les événements SSE (simplifiée) ---
+// Retourne les événements trouvés et le buffer restant
+function parseSSEEvents(buffer) {
+    const events = [];
     let messages = buffer.split('\n\n');
-    let incomplete = buffer.endsWith('\n\n') ? '' : messages.pop();
-    let responseParts = []; // Stocke les parties de données reçues dans ce buffer
-    let streamEnded = false;
-    let streamError = null;
+    let incomplete = buffer.endsWith('\n\n') ? '' : messages.pop(); // Garde la partie incomplète
 
     messages.forEach(message => {
         if (!message.trim()) return;
-        let eventType = 'message';
+        let eventType = 'message'; // Type par défaut
+        let data = ''; // Données associées à l'événement (peut être multi-lignes)
         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));
+                dataLines.push(line.substring(6)); // Stocke les lignes de données
             }
+            // Ignorer les lignes id: et : (commentaires)
         });
-        let data = dataLines.join('\n');
-        console.log(`--> SSE Event Parsed: ${eventType}, Data: ${data.substring(0, 100)}...`);
-
-        if (eventType === 'message') {
-             responseParts.push(data); // Ajoute la donnée reçue
-        } else if (eventType === 'end') {
-            console.log("Fin de stream détectée (event: end)");
-            streamEnded = true;
-        } else if (eventType === 'error') {
-            console.error("Erreur SSE du serveur:", data);
-            streamError = data; // Stocke le message d'erreur
+
+        data = dataLines.join('\n'); // Reconstitue les données multi-lignes
+
+        // On ne stocke QUE les événements spéciaux ici (pas 'message')
+        if (eventType !== 'message') {
+             console.log(`--> Parsed Special SSE Event: ${eventType}, Data: ${data.substring(0, 100)}...`);
+             events.push({ type: eventType, data: data });
+        } else {
+             // On pourrait logger les messages data ici si besoin de débogage
+             // console.log(`--> Parsed SSE Data Message (ignored by event processor): ${data.substring(0,100)}...`);
         }
     });
 
-    // Retourne les nouvelles parties de texte, le statut de fin/erreur, et le buffer restant
-    return {
-         newParts: responseParts.join(''), // Concatène toutes les parties reçues dans cet appel
-         ended: streamEnded,
-         error: streamError,
-         incomplete: incomplete
-      };
+    return { events: events, incomplete: incomplete };
 }
 
-// --- askQuestion (modifié pour gérer le rendu) ---
+
+// --- adjustTextareaHeight function (inchangée) ---
+function adjustTextareaHeight() {
+    messageInput.style.height = 'auto'; // Réinitialise pour obtenir scrollHeight correct
+    messageInput.style.height = (messageInput.scrollHeight) + 'px'; // Ajuste à la hauteur du contenu
+}
+
+// --- askQuestion function (MODIFIÉE pour le streaming UI direct) ---
 async function askQuestion() {
     console.log("askQuestion called");
     const question = messageInput.value.trim();
-    // ... (vérification question vide, ajout message user, désactivation bouton) ...
+    if (!question) {
+        console.log("Question is empty, aborting.");
+        return;
+    }
 
-    // Crée un placeholder
+    addMessage('user', question);
+    messageInput.value = '';
+    sendButton.disabled = true;
+    adjustTextareaHeight(); // Réajuste après vidage
+    console.log("User message added, button disabled.");
+
+    // Crée un placeholder pour la réponse de l'assistant
     const assistantMessageDiv = document.createElement('div');
     assistantMessageDiv.classList.add('message', 'assistant-message');
-    // On pourrait utiliser textContent ici pour l'indicateur, plus sûr
+    // Utiliser textContent pour l'indicateur est plus sûr
     const thinkingSpan = document.createElement('span');
     thinkingSpan.className = 'thinking';
     thinkingSpan.textContent = '...';
@@ -232,98 +258,118 @@ async function askQuestion() {
     chatbox.scrollTop = chatbox.scrollHeight;
     console.log("Assistant placeholder added.");
 
-    let buffer = '';
+    let buffer = '';        // Buffer pour détecter les événements SSE spéciaux
     const decoder = new TextDecoder();
-    let isFirstChunk = true; // Pour remplacer le "..."
-    let finalHTMLContent = ""; // Accumule le contenu HTML final
+    let isFirstChunk = true; // Pour savoir quand remplacer le "..."
 
     try {
         console.log("Initiating fetch to /ask");
-        const response = await fetch('/ask', { /* ... headers, body ... */ });
+        const response = await fetch('/ask', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
+            body: JSON.stringify({ question: question })
+        });
         console.log(`Fetch response received. Status: ${response.status}, OK: ${response.ok}`);
 
         if (!response.ok || !response.body) {
-            // ... (gestion erreur fetch) ...
-            throw new Error(`Erreur serveur: ${response.status} ${response.statusText}.`);
+             let errorBody = "N/A"; try { errorBody = await response.text(); } catch (e) {}
+            throw new Error(`Erreur serveur: ${response.status} ${response.statusText}. Body: ${errorBody}`);
         }
 
         const reader = response.body.getReader();
         console.log("ReadableStream reader obtained. Starting read loop.");
 
+        // Boucle principale de lecture du stream
         while (true) {
             const { done, value } = await reader.read();
 
-            if (done) {
-                console.log("Reader finished (done=true). Processing remaining buffer.");
-                const result = processSSEBuffer(buffer); // Traite le reste
-                if (result.newParts) {
-                     // Convertit la dernière partie en HTML et l'ajoute
-                     finalHTMLContent += result.newParts.replace(/\n/g, '<br>');
-                }
-                 if (result.error) {
-                     finalHTMLContent += `<br><strong style="color: #ffaaaa;">خطأ من الخادم: ${result.error}</strong>`;
-                 }
-                 // Met à jour l'UI une dernière fois
-                 assistantMessageDiv.innerHTML = finalHTMLContent;
-                 chatbox.scrollTop = chatbox.scrollHeight; // Scroll final
-                console.log("Final HTML content set.");
-                break; // Sort de la boucle
-            }
+            // Traiter le chunk reçu SI value n'est pas vide
+            if (value) {
+                const rawChunk = decoder.decode(value, { stream: true });
+                console.log("Received raw chunk:", rawChunk); // Log pour débogage
 
-            buffer += decoder.decode(value, { stream: true });
-            // console.log("Received chunk, buffer:", buffer); // Peut être TROP verbeux
-
-            // Traite le buffer pour obtenir les messages SSE complets
-            const result = processSSEBuffer(buffer);
-            buffer = result.incomplete; // Garde la partie incomplète
-
-            // Si on a reçu de nouvelles données de texte
-            if (result.newParts) {
-                if (isFirstChunk) {
-                     // Remplace le "..." par le premier contenu reçu
-                     finalHTMLContent = result.newParts.replace(/\n/g, '<br>');
-                     assistantMessageDiv.innerHTML = finalHTMLContent; // Première mise à jour
-                     isFirstChunk = false; // Ne plus effacer le "..."
-                 } else {
-                     // Ajoute les nouvelles parties à la fin
-                     finalHTMLContent += result.newParts.replace(/\n/g, '<br>');
-                     assistantMessageDiv.innerHTML = finalHTMLContent; // Met à jour l'UI
-                 }
-                 chatbox.scrollTop = chatbox.scrollHeight; // Scroll pendant le stream
-            }
+                // --- Mise à jour UI Immédiate ---
+                // Nettoyer l'indicateur "..." au premier chunk reçu
+                if (isFirstChunk && assistantMessageDiv.querySelector('.thinking')) {
+                    assistantMessageDiv.innerHTML = ''; // Vide le contenu (enlève le span '...')
+                    isFirstChunk = false;
+                }
+                // Ajoute le nouveau morceau de texte (converti en HTML)
+                // Note: innerHTML peut être lent si les chunks sont très petits et nombreux.
+                // textContent serait plus rapide mais ne gère pas <br>.
+                assistantMessageDiv.innerHTML += rawChunk.replace(/\n/g, '<br>');
+                chatbox.scrollTop = chatbox.scrollHeight; // Scroll pendant l'ajout
+                // --- Fin Mise à jour UI Immédiate ---
+
+                // Ajoute le chunk au buffer pour détecter les événements spéciaux
+                buffer += rawChunk;
+
+                // --- Traitement des Événements Spéciaux ---
+                const eventResult = parseSSEEvents(buffer);
+                buffer = eventResult.incomplete; // Garde la partie non traitée du buffer
+
+                for (const event of eventResult.events) {
+                    if (event.type === 'end') {
+                        console.log("Fin de stream détectée (event: end)");
+                        sendButton.disabled = false; // Réactive le bouton
+                        // On pourrait vouloir sortir de la boucle ici si 'done' tarde
+                        // mais il vaut mieux attendre 'done = true' normalement.
+                    } else if (event.type === 'error') {
+                        console.error("Erreur signalée par le serveur (event: error):", event.data);
+                        // Ajoute l'erreur à la fin
+                        assistantMessageDiv.innerHTML += `<br><strong style="color: #ffaaaa;">خطأ من الخادم: ${event.data.replace(/\n/g, '<br>')}</strong>`;
+                        chatbox.scrollTop = chatbox.scrollHeight;
+                        sendButton.disabled = false;
+                        // Considérer de sortir de la boucle ici ?
+                    }
+                    // Gérer d'autres événements si nécessaire
+                }
+                 // --- Fin Traitement Événements ---
+            } // Fin if(value)
 
-            // Si on a reçu une erreur spécifique
-            if (result.error) {
-                 finalHTMLContent += `<br><strong style="color: #ffaaaa;">خطأ من الخادم: ${result.error}</strong>`;
-                 assistantMessageDiv.innerHTML = finalHTMLContent; // Affiche l'erreur
-                 chatbox.scrollTop = chatbox.scrollHeight;
-                 // On pourrait vouloir arrêter le stream ici, mais on laisse le serveur décider avec 'done' ou 'event: end'
+            // Si le stream est terminé (signalé par le reader)
+            if (done) {
+                console.log("Reader finished (done=true). Stream ended.");
+                // Traiter une dernière fois le buffer pour les événements ?
+                // Normalement pas nécessaire si les événements finissent par \n\n
+                if (buffer.trim()){
+                     console.log("Processing final buffer content:", buffer);
+                     const finalEventResult = parseSSEEvents(buffer);
+                     for (const event of finalEventResult.events) { /* Gérer comme ci-dessus */ }
+                }
+                break; // Sortir de la boucle while
             }
-
-             // Si le serveur signale la fin explicitement via event: end
-             if (result.ended) {
-                  console.log("Server sent end event, exiting loop.");
-                  // Le 'break' se fera au prochain 'done=true' ou on peut forcer ici:
-                  // break; // Décommenter si nécessaire
-             }
-        }
+        } // Fin while(true)
 
     } catch (error) {
         console.error('Erreur dans askQuestion (fetch ou stream):', error);
-         if (assistantMessageDiv) {
-             assistantMessageDiv.innerHTML = finalHTMLContent + `<br><br><strong style="color: #ffaaaa;">حدث خطأ في الاتصال: ${error.message}</strong>`; // Ajoute l'erreur JS/Network
-             chatbox.scrollTop = chatbox.scrollHeight;
-         } else { addMessage('assistant', `<strong style="color: #ffaaaa;">حدث خطأ في الاتصال: ${error.message}</strong>`); }
+        if (assistantMessageDiv) {
+            // Supprimer l'indicateur "..." s'il est encore là
+             const thinkingSpan = assistantMessageDiv.querySelector('.thinking');
+             if (thinkingSpan) thinkingSpan.remove();
+            // Afficher l'erreur JS/Network
+            assistantMessageDiv.innerHTML += `<br><br><strong style="color: #ffaaaa;">حدث خطأ في الاتصال: ${error.message}</strong>`;
+            chatbox.scrollTop = chatbox.scrollHeight;
+        } else {
+            addMessage('assistant', `<strong style="color: #ffaaaa;">حدث خطأ في الاتصال: ${error.message}</strong>`);
+        }
     } finally {
-        console.log("Executing finally block: Enabling button.");
-        // On ne réactive le bouton que si le stream n'a pas été explicitement terminé par event: end
-        // (car processSSEBuffer peut l'avoir déjà réactivé)
-        // Solution simple: toujours réactiver ici, même si redondant.
+        console.log("Executing finally block.");
+        // Le bouton peut déjà avoir été réactivé par event: end/error, mais sécurité :
         sendButton.disabled = false;
     }
 }
 
+
 // --- Écouteurs d'événements (inchangés) ---
-// ...
+sendButton.addEventListener('click', askQuestion);
+messageInput.addEventListener('keypress', function(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        askQuestion();
+    }
+});
+messageInput.addEventListener('input', adjustTextareaHeight);
+adjustTextareaHeight(); // Appel initial
 
-console.log("Chat script loaded and listeners attached.");
+console.log("Chat script loaded and listeners attached. Streaming UI enabled.");