Update frontend/src/components/ChatInterface.jsx

frontend/src/components/ChatInterface.jsx

@@ -34,11 +34,13 @@ const ChatInterface = ({
   useEffect(() => {
     scrollToBottom();
     
+    // Nettoyer l'intervalle précédent si existant
     if (updateIntervalRef.current) {
       clearInterval(updateIntervalRef.current);
       updateIntervalRef.current = null;
     }
     
+    // Créer un nouvel intervalle si en streaming
     if (isStreaming && currentStreamId) {
       updateIntervalRef.current = setInterval(() => {
         if (accumulatedText.current.length > 0) {
@@ -51,9 +53,10 @@ const ChatInterface = ({
           });
           accumulatedText.current = '';
         }
-      }, 100); 
+      }, 100); // Mise à jour toutes les 100ms pour plus de fluidité
     }
     
+    // Nettoyage lors du démontage
     return () => {
       if (updateIntervalRef.current) {
         clearInterval(updateIntervalRef.current);
@@ -66,24 +69,31 @@ const ChatInterface = ({
       setIsLoading(true);
       const userMessageId = `user-${Date.now()}`;
 
+      // Ajouter le message de l'utilisateur
       setMessages(prev => [...prev, { 
         sender: 'user', 
         text: message,
         id: userMessageId
       }]);      
+      // Envoyer le message au backend
       const updatedConversationId = await onMessageSent(message);
       
+      // Créer un ID unique pour le message en streaming
       const streamMessageId = `bot-${Date.now()}`;
     setCurrentStreamId(streamMessageId);
       
+      // Ajouter un message bot vide pour le streaming
       setMessages(prev => {
+        // Vérifier si le message utilisateur existe déjà
         const userMessageExists = prev.some(m => m.id === userMessageId);
         
+        // Si pour une raison quelconque le message utilisateur a disparu, le rajouter
         const updatedMessages = userMessageExists ? prev : [
           ...prev, 
           { sender: 'user', text: message, id: userMessageId }
         ];
         
+        // Ajouter le message bot de streaming
         return [...updatedMessages, { 
           sender: 'bot', 
           text: '', 
@@ -91,10 +101,11 @@ const ChatInterface = ({
         }];
       });
       
-      setIsLoading(false);
-      setIsStreaming(true); 
+      setIsLoading(false); // Plus de chargement mais streaming
+      setIsStreaming(true); // Commencer le streaming
       
-      const response = await fetch('/api/chat', {
+      // Faire la requête au backend
+      const response = await fetch('http://localhost:8000/api/chat', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
@@ -105,6 +116,7 @@ const ChatInterface = ({
         }),
       });
       
+      // Gestion des erreurs HTTP
       if (!response.ok) {
         const errorData = await response.json();
         
@@ -124,6 +136,7 @@ const ChatInterface = ({
         throw new Error(`Chat API error ${response.status}`);
       }
       
+      // Traiter la réponse en streaming si disponible
       if (response.headers.get('content-type')?.includes('text/event-stream') && response.body) {
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
@@ -133,6 +146,7 @@ const ChatInterface = ({
           const { done, value } = await reader.read();
           if (done) break;
           
+          // Décoder et traiter les données
           const chunk = decoder.decode(value);
           const lines = chunk.split('\n\n');
           
@@ -152,6 +166,7 @@ const ChatInterface = ({
                   setCurrentStreamId(null);
                   setIsLoading(false);
                   
+                  // Mise à jour finale
                   setMessages(prev => 
                     prev.map(msg => 
                       msg.id === streamMessageId 
@@ -160,33 +175,53 @@ const ChatInterface = ({
                     )
                   );
                   
+                  // Rafraîchir la liste des conversations
                   if (typeof refreshConversationList === 'function') {
                     setTimeout(refreshConversationList, 100);
                   }
                   
-                  return; 
+                  return; // Sortir de la boucle une fois terminé
                 }
-                if (data.content) {
-                      fullText += data.content;
+                else if (data.content) {
+                  // Ajouter le contenu du chunk
+                  fullText += data.content;
+                  accumulatedText.current += data.content;
+                  
+                  // Mise à jour moins fréquente de l'interface
+                  if (accumulatedText.current.length >= updateThreshold || data.content.includes('\n')) {
+                    setMessages(prev => {
+                      const userMsg = prev.find(m => m.sender === 'user' && m.text === message);
+                      const botMsg = prev.find(m => m.id === streamMessageId);
                       
-                      // Update immediately without accumulation
-                      setMessages(prev => {
-                        return prev.map(msg => 
-                          msg.id === streamMessageId 
-                            ? { ...msg, text: fullText }
-                            : msg
-                        );
-                      });
+                      const updatedMessages = userMsg ? prev : [
+                        ...prev, 
+                        { sender: 'user', text: message, id: `user-${Date.now()}` }
+                      ];
                       
-                      // Ensure scroll
-                      requestAnimationFrame(scrollToBottom);
-                    }
+                      if (botMsg) {
+                        return updatedMessages.map(msg => 
+                          msg.id === streamMessageId ? { ...msg, text: fullText } : msg
+                        );
+                      } else {
+                        return [...updatedMessages, { sender: 'bot', text: fullText, id: streamMessageId }];
+                      }
+                    });
+                    
+                    accumulatedText.current = ''; // Réinitialiser l'accumulateur
+                    
+                    // Faire défiler vers le bas
+                    requestAnimationFrame(() => {
+                      scrollToBottom();
+                    });
+                  }
+                }
                 else if (data.type === 'error') {
                   console.error("SSE Error received:", data.error);
                   setIsStreaming(false);
                   setCurrentStreamId(null);
                   setIsLoading(false);
                   
+                  // Remplacer par un message d'erreur
                   setMessages(prev => 
                     prev.map(msg => 
                       msg.id === streamMessageId 
@@ -203,6 +238,7 @@ const ChatInterface = ({
         }
       } 
       else {
+        // Fallback pour les réponses non-streaming
         console.log("Received non-streaming response.");
         const responseData = await response.json();
         setIsStreaming(false);
@@ -217,6 +253,7 @@ const ChatInterface = ({
           )
         );
         
+        // Rafraîchir la liste des conversations
         if (typeof refreshConversationList === 'function') {
           setTimeout(refreshConversationList, 100);
         }
@@ -228,6 +265,7 @@ const ChatInterface = ({
       setCurrentStreamId(null);
       setIsLoading(false);
       
+      // Afficher l'erreur
       setMessages(prev => {
         const filteredMessages = prev.filter(m => m.id !== currentStreamId);
         return [...filteredMessages, 
@@ -259,9 +297,11 @@ const ChatInterface = ({
   };
 
   const isMarkdown = (text, sender) => {
+    // Forcer le rendu Markdown pour TOUS les messages du bot
     if (sender === 'bot') {
       return true;
     }
+    // Pour les messages utilisateur, vérifier la présence de syntaxe Markdown
     return /(?:\*\*|__|##|\*|_|`|>|\d+\.\s|\-\s|\[.*\]\(.*\))/.test(text);
   };