Update static/script.js

static/script.js

@@ -1,178 +1,3 @@
-// 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) {
-//     console.log("Processing buffer:", buffer); // LOG AJOUTÉ
-//     let messages = buffer.split('\n\n');
-//     let incomplete = buffer.endsWith('\n\n') ? '' : messages.pop();
-//     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();
-//             } else if (line.startsWith('data: ')) {
-//                 dataLines.push(line.substring(6));
-//             }
-//         });
-//         let data = dataLines.join('\n');
-//         console.log(`--> SSE Event Parsed: ${eventType}, Data: ${data.substring(0, 100)}...`); // LOG AJOUTÉ
-
-//         if (eventType === 'message') {
-//             if (targetDiv.querySelector('.thinking')) {
-//                 console.log("Replacing 'thinking' indicator"); // LOG AJOUTÉ
-//                 targetDiv.innerHTML = '';
-//             }
-//             newResponsePart += data;
-//         } else if (eventType === 'end') {
-//             console.log("Fin de stream détectée (event: end)"); // LOG AJOUTÉ
-//             sendButton.disabled = false;
-//         } else if (eventType === 'error') {
-//             console.error("Erreur SSE du serveur:", data); // LOG AJOUTÉ
-//              currentResponseAccumulated += `<br><strong style="color: #ffaaaa;">خطأ من الخادم: ${data}</strong>`;
-//             sendButton.disabled = false;
-//         }
-//     });
-
-//     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;
-//     // console.log("Updated Response:", updatedResponse.substring(0, 100) + "..."); // Optionnel: peut être très verbeux
-
-//     return { incomplete: incomplete, updatedResponse: updatedResponse };
-// }
-
-// // --- adjustTextareaHeight function (inchangée) ---
-// function adjustTextareaHeight() { /* ... */ }
-
-
-// // --- 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) {
-//     if (e.key === 'Enter' && !e.shiftKey) {
-//         e.preventDefault();
-//         askQuestion();
-//     }
-// });
-// messageInput.addEventListener('input', adjustTextareaHeight);
-// adjustTextareaHeight(); // Appel initial
-
-// console.log("Chat script loaded and listeners attached."); // LOG AJOUTÉ
-
-
-
 const chatbox = document.getElementById('chatbox');
 const messageInput = document.getElementById('message-input');
 const sendButton = document.getElementById('send-button');
@@ -181,62 +6,67 @@ const sendButton = document.getElementById('send-button');
 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 = [];
+// --- 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(); // Garde la partie incomplète
+    let incomplete = buffer.endsWith('\n\n') ? '' : messages.pop();
+    let newResponsePart = '';
 
     messages.forEach(message => {
         if (!message.trim()) return;
-        let eventType = 'message'; // Type par défaut
-        let data = ''; // Données associées à l'événement (peut être multi-lignes)
+        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)); // Stocke les lignes de données
+                dataLines.push(line.substring(6));
             }
-            // Ignorer les lignes id: et : (commentaires)
         });
+        let data = dataLines.join('\n');
+        console.log(`--> SSE Event Parsed: ${eventType}, Data: ${data.substring(0, 100)}...`); // LOG AJOUTÉ
 
-        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)}...`);
+        if (eventType === 'message') {
+            if (targetDiv.querySelector('.thinking')) {
+                console.log("Replacing 'thinking' indicator"); // LOG AJOUTÉ
+                targetDiv.innerHTML = '';
+            }
+            newResponsePart += data;
+        } else if (eventType === 'end') {
+            console.log("Fin de stream détectée (event: end)"); // LOG AJOUTÉ
+            sendButton.disabled = false;
+        } else if (eventType === 'error') {
+            console.error("Erreur SSE du serveur:", data); // LOG AJOUTÉ
+             currentResponseAccumulated += `<br><strong style="color: #ffaaaa;">خطأ من الخادم: ${data}</strong>`;
+            sendButton.disabled = false;
         }
     });
 
-    return { events: events, incomplete: incomplete };
-}
+    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;
+    // console.log("Updated Response:", updatedResponse.substring(0, 100) + "..."); // Optionnel: peut être très verbeux
 
+    return { incomplete: incomplete, updatedResponse: updatedResponse };
+}
 
 // --- 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
-}
+function adjustTextareaHeight() { /* ... */ }
+
 
-// --- askQuestion function (MODIFIÉE pour le streaming UI direct) ---
+// --- askQuestion function (avec plus de logs) ---
 async function askQuestion() {
-    console.log("askQuestion called");
+    console.log("askQuestion called"); // LOG AJOUTÉ
     const question = messageInput.value.trim();
     if (!question) {
-        console.log("Question is empty, aborting.");
+        console.log("Question is empty, aborting."); // LOG AJOUTÉ
         return;
     }
 
@@ -244,118 +74,85 @@ async function askQuestion() {
     messageInput.value = '';
     sendButton.disabled = true;
     adjustTextareaHeight(); // Réajuste après vidage
-    console.log("User message added, button disabled.");
+    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');
-    // Utiliser textContent pour l'indicateur est plus sûr
-    const thinkingSpan = document.createElement('span');
-    thinkingSpan.className = 'thinking';
-    thinkingSpan.textContent = '...';
-    assistantMessageDiv.appendChild(thinkingSpan);
+    assistantMessageDiv.innerHTML = '<span class="thinking">...</span>'; // Indicateur visuel simple
     chatbox.appendChild(assistantMessageDiv);
     chatbox.scrollTop = chatbox.scrollHeight;
-    console.log("Assistant placeholder added.");
+    console.log("Assistant placeholder added."); // LOG AJOUTÉ
 
-    let buffer = '';        // Buffer pour détecter les événements SSE spéciaux
-    const decoder = new TextDecoder();
-    let isFirstChunk = true; // Pour savoir quand remplacer le "..."
+    let currentResponse = ""; // Déclaration initiale
+    let buffer = '';        // Initialisation buffer
+    const decoder = new TextDecoder(); // Initialisation decoder
 
     try {
-        console.log("Initiating fetch to /ask");
+        console.log("Initiating fetch to /ask"); // LOG AJOUTÉ
         const response = await fetch('/ask', {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
+            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}`);
+
+        console.log(`Fetch response received. Status: ${response.status}, OK: ${response.ok}`); // LOG AJOUTÉ
 
         if (!response.ok || !response.body) {
-             let errorBody = "N/A"; try { errorBody = await response.text(); } catch (e) {}
+             // 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.");
+        console.log("ReadableStream reader obtained. Starting read loop."); // LOG AJOUTÉ
 
-        // Boucle principale de lecture du stream
         while (true) {
+            console.log("Calling reader.read()..."); // LOG AJOUTÉ
             const { done, value } = await reader.read();
 
-            // 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
-
-                // --- 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;
+            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
+            }
 
-                // --- Traitement des Événements Spéciaux ---
-                const eventResult = parseSSEEvents(buffer);
-                buffer = eventResult.incomplete; // Garde la partie non traitée du buffer
+            // Decode et ajoute au buffer
+            const chunk = decoder.decode(value, { stream: true });
+            console.log("Received chunk:", chunk); // LOG AJOUTÉ (peut être volumineux)
+            buffer += chunk;
 
-                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)
+            // 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É
 
-            // 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
-            }
-        } // Fin while(true)
+        }
 
     } catch (error) {
-        console.error('Erreur dans askQuestion (fetch ou stream):', error);
-        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>`);
-        }
+        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.");
-        // Le bouton peut déjà avoir été réactivé par event: end/error, mais sécurité :
+        console.log("Executing finally block: Enabling button."); // LOG AJOUTÉ
         sendButton.disabled = false;
     }
 }
@@ -372,4 +169,4 @@ messageInput.addEventListener('keypress', function(e) {
 messageInput.addEventListener('input', adjustTextareaHeight);
 adjustTextareaHeight(); // Appel initial
 
-console.log("Chat script loaded and listeners attached. Streaming UI enabled.");
+console.log("Chat script loaded and listeners attached."); // LOG AJOUTÉ