Update static/script.js

static/script.js

@@ -1,78 +1,27 @@
 const chatbox = document.getElementById('chatbox');
-const messageInput = document.getElementById('message-input'); // Renommé pour clarté
+const messageInput = document.getElementById('message-input');
 const sendButton = document.getElementById('send-button');
 
-// Fonction pour ajouter un message au chatbox
+// --- addMessage function (inchangée) ---
 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() {
-    // ... (début de la fonction inchangé) ...
-
-    let currentResponse = ""; // Déclaration initiale ICI
-
-    try {
-        // ... (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
-                const result = processSSEBuffer(buffer, assistantMessageDiv, currentResponse); // Passe currentResponse
-                currentResponse = result.updatedResponse; // Met à jour currentResponse
-                break;
-            }
-
-            buffer += decoder.decode(value, { stream: true });
-            // 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
-
-            // Scroll (déjà fait dans processSSEBuffer)
-            // chatbox.scrollTop = chatbox.scrollHeight;
-        }
-
-    } catch (error) {
-        // ... (gestion d'erreur inchangée) ...
-    } finally {
-        sendButton.disabled = false;
-    }
-}
-
-// Fonction pour traiter le buffer SSE et mettre à jour l'UI
-// Accepte la réponse actuelle et le div cible, retourne la nouvelle réponse accumulée
+// --- processSSEBuffer function (inchangée - version Méthode 1) ---
 function processSSEBuffer(buffer, targetDiv, currentResponseAccumulated) {
+    console.log("Processing buffer:", buffer); // LOG AJOUTÉ
     let messages = buffer.split('\n\n');
     let incomplete = buffer.endsWith('\n\n') ? '' : messages.pop();
-
-    let newResponsePart = ''; // Pour accumuler les NOUVELLES données de ce buffer
+    let newResponsePart = '';
 
     messages.forEach(message => {
         if (!message.trim()) return;
-
         let eventType = 'message';
         let dataLines = [];
-
         message.split('\n').forEach(line => {
             if (line.startsWith('event: ')) {
                 eventType = line.substring(7).trim();
@@ -80,54 +29,144 @@ function processSSEBuffer(buffer, targetDiv, currentResponseAccumulated) {
                 dataLines.push(line.substring(6));
             }
         });
-
         let data = dataLines.join('\n');
-        console.log(`SSE Event: ${eventType}, Data: ${data.substring(0, 50)}...`); // Log
+        console.log(`--> SSE Event Parsed: ${eventType}, Data: ${data.substring(0, 100)}...`); // LOG AJOUTÉ
 
         if (eventType === 'message') {
             if (targetDiv.querySelector('.thinking')) {
-                targetDiv.innerHTML = ''; // Efface le "..."
+                console.log("Replacing 'thinking' indicator"); // LOG AJOUTÉ
+                targetDiv.innerHTML = '';
             }
-            newResponsePart += data; // Accumule seulement la nouvelle partie
-
+            newResponsePart += data;
         } else if (eventType === 'end') {
-            console.log("Fin de stream détectée par événement 'end'");
+            console.log("Fin de stream détectée (event: end)"); // LOG AJOUTÉ
             sendButton.disabled = false;
         } else if (eventType === 'error') {
-            console.error("Erreur signalée par le serveur via SSE:", data);
-             // Ajoute l'erreur à la fin de la réponse actuelle
+            console.error("Erreur SSE du serveur:", data); // LOG AJOUTÉ
              currentResponseAccumulated += `<br><strong style="color: #ffaaaa;">خطأ من الخادم: ${data}</strong>`;
             sendButton.disabled = false;
         }
     });
 
-    // Met à jour l'UI avec la réponse complète (ancienne + nouvelle)
     const updatedResponse = currentResponseAccumulated + newResponsePart;
+    // Limiter la fréquence de mise à jour de innerHTML si beaucoup de petits chunks
     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
-}
+    // console.log("Updated Response:", updatedResponse.substring(0, 100) + "..."); // Optionnel: peut être très verbeux
 
-// --- 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
+    return { incomplete: incomplete, updatedResponse: updatedResponse };
 }
 
-messageInput.addEventListener('input', adjustTextareaHeight);
+// --- adjustTextareaHeight function (inchangée) ---
+function adjustTextareaHeight() { /* ... */ }
 
 
-// --- Écouteurs d'événements ---
-sendButton.addEventListener('click', askQuestion);
+// --- askQuestion function (avec plus de logs) ---
+async function askQuestion() {
+    console.log("askQuestion called"); // LOG AJOUTÉ
+    const question = messageInput.value.trim();
+    if (!question) {
+        console.log("Question is empty, aborting."); // LOG AJOUTÉ
+        return;
+    }
+
+    addMessage('user', question);
+    messageInput.value = '';
+    sendButton.disabled = true;
+    adjustTextareaHeight(); // Réajuste après vidage
+    console.log("User message added, button disabled."); // LOG AJOUTÉ
+
+    // 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;
+    console.log("Assistant placeholder added."); // LOG AJOUTÉ
+
+    let currentResponse = ""; // Déclaration initiale
+    let buffer = '';        // Initialisation buffer
+    const decoder = new TextDecoder(); // Initialisation decoder
+
+    try {
+        console.log("Initiating fetch to /ask"); // LOG AJOUTÉ
+        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}`); // LOG AJOUTÉ
+
+        if (!response.ok || !response.body) {
+             // Essayer de lire le corps de l'erreur si possible
+             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."); // LOG AJOUTÉ
+
+        while (true) {
+            console.log("Calling reader.read()..."); // LOG AJOUTÉ
+            const { done, value } = await reader.read();
+
+            if (done) {
+                console.log("Reader finished (done=true). Processing remaining buffer."); // LOG AJOUTÉ
+                // Traiter le reste du buffer
+                const result = processSSEBuffer(buffer, assistantMessageDiv, currentResponse);
+                currentResponse = result.updatedResponse;
+                console.log("Final response after stream ended:", currentResponse.substring(0,100)+"..."); // LOG AJOUTÉ
+                break; // Sort de la boucle
+            }
+
+            // Decode et ajoute au buffer
+            const chunk = decoder.decode(value, { stream: true });
+            console.log("Received chunk:", chunk); // LOG AJOUTÉ (peut être volumineux)
+            buffer += chunk;
+
+            // Traite le buffer et met à jour currentResponse/buffer
+            console.log("Processing buffer with new chunk..."); // LOG AJOUTÉ
+            const result = processSSEBuffer(buffer, assistantMessageDiv, currentResponse);
+            currentResponse = result.updatedResponse;
+            buffer = result.incomplete;
+            console.log("Buffer remaining:", buffer); // LOG AJOUTÉ
+
+        }
+
+    } catch (error) {
+        console.error('Erreur dans askQuestion (fetch ou stream):', error); // LOG AJOUTÉ
+        // Affiche l'erreur dans la bulle de l'assistant
+         if (assistantMessageDiv) {
+             // Append error to existing content if any, otherwise set it
+             assistantMessageDiv.innerHTML += `<br><br><strong style="color: #ffaaaa;">حدث خطأ: ${error.message}</strong>`;
+             chatbox.scrollTop = chatbox.scrollHeight; // Scroll pour voir l'erreur
+         } else {
+             // Fallback si assistantMessageDiv n'existe pas (ne devrait pas arriver ici)
+             addMessage('assistant', `<strong style="color: #ffaaaa;">حدث خطأ: ${error.message}</strong>`);
+         }
+    } finally {
+        console.log("Executing finally block: Enabling button."); // LOG AJOUTÉ
+        sendButton.disabled = false;
+    }
+}
+
 
+// --- Écouteurs d'événements (inchangés) ---
+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
+        e.preventDefault();
         askQuestion();
     }
 });
+messageInput.addEventListener('input', adjustTextareaHeight);
+adjustTextareaHeight(); // Appel initial
 
-// Ajuste la hauteur initiale au cas où il y aurait du texte pré-rempli (peu probable ici)
-adjustTextareaHeight();
+console.log("Chat script loaded and listeners attached."); // LOG AJOUTÉ