Update frontend/src/components/ChatInterface.jsx

frontend/src/components/ChatInterface.jsx

@@ -3,132 +3,252 @@ import ReactMarkdown from 'react-markdown';
 import Avatar from './Avatar.jsx';
 import '../App.css';
 
-const ChatInterface = ({ messages = [], setMessages = () => {}, onMessageSent = () => {}, activeConversationId,
-saveBotResponse, toLogin, onCreateNewConversation = () => {},onNewChat = () => {},refreshConversationList = () => {} }) => {
+const ChatInterface = ({ 
+  messages = [], 
+  setMessages = () => {}, 
+  onMessageSent = () => {}, 
+  activeConversationId,
+  saveBotResponse, 
+  toLogin, 
+  onNewChat = () => {},
+  refreshConversationList = () => {} 
+}) => {
   const [inputMessage, setInputMessage] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const messagesEndRef = useRef(null);
   const textareaRef = useRef(null);
-  const [streamingText, setStreamingText] = useState('');
   const [isStreaming, setIsStreaming] = useState(false);
-  const [fullResponse, setFullResponse] = useState('');
   const [tokenLimitReached, setTokenLimitReached] = useState(false);
   const [hasInteractionStarted, setHasInteractionStarted] = useState(false);
+  const [currentStreamId, setCurrentStreamId] = useState(null);
+  
+  // Pour optimiser les performances du streaming
+  const accumulatedText = useRef('');
+  const updateThreshold = 1; 
+  const updateIntervalRef = useRef(null);
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
-  useEffect(scrollToBottom, [messages]);
-
-
-
- const streamResponse = (response) => {
-    setIsStreaming(true);
-    setFullResponse(response);
-    setStreamingText('');
-    
-    // Garder une référence au message de streaming
-    let streamMessageId = Date.now().toString();
+  
+  useEffect(() => {
+    scrollToBottom();
     
-    setMessages(prev => [...prev, { 
-      sender: 'bot-streaming', 
-      text: '', 
-      id: streamMessageId 
-    }]);
+    if (updateIntervalRef.current) {
+      clearInterval(updateIntervalRef.current);
+      updateIntervalRef.current = null;
+    }
     
-    const totalCharacters = response.length;
-    let charCount = 0;
+    if (isStreaming && currentStreamId) {
+      updateIntervalRef.current = setInterval(() => {
+        if (accumulatedText.current.length > 0) {
+          setMessages(prev => {
+            return prev.map(msg => 
+              msg.id === currentStreamId 
+                ? { ...msg, text: msg.text + accumulatedText.current } 
+                : msg
+            );
+          });
+          accumulatedText.current = '';
+        }
+      }, 100); 
+    }
     
-    const streamInterval = setInterval(() => {
-      if (charCount < totalCharacters) {
-        charCount += 5;
-        const fragment = response.substring(0, charCount);
-        
-        setMessages(prev => 
-          prev.map(msg => 
-            msg.id === streamMessageId ? { ...msg, text: fragment } : msg
-          )
-        );
-        
-        setStreamingText(fragment);
-      } else {
-        clearInterval(streamInterval);
-        setIsStreaming(false);
-        
-        setMessages(prev => 
-          prev.map(msg => 
-            msg.id === streamMessageId 
-              ? { sender: 'bot', text: response, id: streamMessageId } 
-              : msg
-          )
-        );
+    return () => {
+      if (updateIntervalRef.current) {
+        clearInterval(updateIntervalRef.current);
       }
-    }, 30);
-    
-    return () => clearInterval(streamInterval);
-  };
-
-  
-   const sendMessage = async (message) => {
+    };
+  }, [isStreaming, currentStreamId, messages]);
+  const sendMessage = async (message) => {
     try {
       setHasInteractionStarted(true);
       setIsLoading(true);
+      const userMessageId = `user-${Date.now()}`;
+
+      setMessages(prev => [...prev, { 
+        sender: 'user', 
+        text: message,
+        id: userMessageId
+      }]);      
+      const updatedConversationId = await onMessageSent(message);
       
-      setMessages(prev => [...prev, { sender: 'user', text: message }]);
+      const streamMessageId = `bot-${Date.now()}`;
+    setCurrentStreamId(streamMessageId);
       
-      const updatedConversationId = await onMessageSent(message);
+      setMessages(prev => {
+        const userMessageExists = prev.some(m => m.id === userMessageId);
+        
+        const updatedMessages = userMessageExists ? prev : [
+          ...prev, 
+          { sender: 'user', text: message, id: userMessageId }
+        ];
+        
+        return [...updatedMessages, { 
+          sender: 'bot', 
+          text: '', 
+          id: streamMessageId 
+        }];
+      });
       
-      const chatRes = await fetch('/api/chat', {
+      setIsLoading(false);
+      setIsStreaming(true); 
+      
+      const response = await fetch('http://localhost:8000/api/chat', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
         body: JSON.stringify({ 
           message,
-          conversation_id: activeConversationId,
-          skip_save: true  
+          conversation_id: activeConversationId || updatedConversationId,
+          skip_save: false // Le backend gère la sauvegarde
         }),
       });
       
-      const responseData = await chatRes.json();
-      
-      if (responseData.error === 'token_limit_exceeded') {
-        setIsLoading(false);
-        setTokenLimitReached(true);
+      if (!response.ok) {
+        const errorData = await response.json();
         
-        setMessages(prev => [...prev, { 
-          sender: 'bot', 
-          text: "⚠️ **Limite de taille de conversation atteinte**\n\nCette conversation est devenue trop longue. Pour continuer à discuter, veuillez créer une nouvelle conversation." 
-        }]);
+        if (errorData.error === 'token_limit_exceeded') {
+          setIsStreaming(false);
+          setCurrentStreamId(null);
+          setTokenLimitReached(true);
+          
+          setMessages(prev => [...prev.filter(m => m.id !== streamMessageId), { 
+            sender: 'bot', 
+            text: "⚠️ **Limite de taille de conversation atteinte**\n\nCette conversation est devenue trop longue. Pour continuer à discuter, veuillez créer une nouvelle conversation." 
+          }]);
+          
+          return;
+        }
         
-        return;
+        throw new Error(`Chat API error ${response.status}`);
       }
       
-      if (!chatRes.ok) throw new Error(`Chat API error ${chatRes.status}`);
-      
-      const { response: botResponse } = responseData;
-      
-      setIsLoading(false);
-      
-      streamResponse(botResponse);
-      
-     
-      
-      if (activeConversationId && typeof refreshConversationList === 'function') {
-        refreshConversationList();
-      }
-      
-      if (updatedConversationId) {
-        saveBotResponse(updatedConversationId, botResponse, true);  
-      } else if (activeConversationId) {
-        saveBotResponse(activeConversationId, botResponse, true);  
+      if (response.headers.get('content-type')?.includes('text/event-stream') && response.body) {
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let fullText = '';
+        
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          
+          const chunk = decoder.decode(value);
+          const lines = chunk.split('\n\n');
+          
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              try {
+                const data = JSON.parse(line.slice(5));
+                
+                if (data.type === 'start') {
+                  console.log("Début du streaming");
+                  fullText = '';
+                  accumulatedText.current = '';
+                } 
+                else if (data.type === 'end') {
+                  console.log("SSE End received");
+                  setIsStreaming(false);
+                  setCurrentStreamId(null);
+                  setIsLoading(false);
+                  
+                  setMessages(prev => 
+                    prev.map(msg => 
+                      msg.id === streamMessageId 
+                        ? { ...msg, sender: 'bot', text: fullText }
+                        : msg
+                    )
+                  );
+                  
+                  if (typeof refreshConversationList === 'function') {
+                    setTimeout(refreshConversationList, 100);
+                  }
+                  
+                  return; 
+                }
+                else if (data.content) {
+                  fullText += data.content;
+                  accumulatedText.current += data.content;
+                  
+                  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);
+                      
+                      const updatedMessages = userMsg ? prev : [
+                        ...prev, 
+                        { sender: 'user', text: message, id: `user-${Date.now()}` }
+                      ];
+                      
+                      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
+                    
+                    requestAnimationFrame(() => {
+                      scrollToBottom();
+                    });
+                  }
+                }
+                else if (data.type === 'error') {
+                  console.error("SSE Error received:", data.error);
+                  setIsStreaming(false);
+                  setCurrentStreamId(null);
+                  setIsLoading(false);
+                  
+                  setMessages(prev => 
+                    prev.map(msg => 
+                      msg.id === streamMessageId 
+                        ? { sender: 'bot', text: "Désolé, une erreur s'est produite." }
+                        : msg
+                    )
+                  );
+                }
+              } catch (e) {
+                console.error('Error parsing SSE data:', e, line);
+              }
+            }
+          }
+        }
+      } 
+      else {
+        console.log("Received non-streaming response.");
+        const responseData = await response.json();
+        setIsStreaming(false);
+        setCurrentStreamId(null);
+        setIsLoading(false);
+        
+        setMessages(prev => 
+          prev.map(msg => 
+            msg.id === streamMessageId 
+              ? { sender: 'bot', text: responseData.response, id: streamMessageId }
+              : msg
+          )
+        );
+        
+        if (typeof refreshConversationList === 'function') {
+          setTimeout(refreshConversationList, 100);
+        }
       }
       
     } catch (error) {
-      console.error('Erreur:', error);
+      console.error('Erreur lors de l\'envoi/réception du message:', error);
+      setIsStreaming(false);
+      setCurrentStreamId(null);
       setIsLoading(false);
-      setMessages(prev => [...prev, 
-        { sender: 'bot', text: "Désolé, une erreur s'est produite. Veuillez réessayer." }
-      ]);
+      
+      setMessages(prev => {
+        const filteredMessages = prev.filter(m => m.id !== currentStreamId);
+        return [...filteredMessages, 
+          { sender: 'bot', text: "Désolé, une erreur s'est produite. Veuillez réessayer." }
+        ];
+      });
     }
   };
 
@@ -136,16 +256,14 @@ saveBotResponse, toLogin, onCreateNewConversation = () => {},onNewChat = () => {
     onNewChat();
     setTokenLimitReached(false);
     setHasInteractionStarted(false);
-
   };
+  
   useEffect(() => {
     if (activeConversationId === null && messages.length === 0) {
       setHasInteractionStarted(false);
     }
   }, [activeConversationId, messages]);
 
-
-
   const handleSubmit = (e) => {
     e.preventDefault();
     const txt = inputMessage.trim();
@@ -155,10 +273,14 @@ saveBotResponse, toLogin, onCreateNewConversation = () => {},onNewChat = () => {
     if (textareaRef.current) textareaRef.current.style.height = 'auto';
   };
 
-
-const isMarkdown = (text) => {
-  return /(?:\*\*|__|##|\*|_|`|>|\d+\.\s|\-\s|\[.*\]\(.*\))/.test(text);
-};
+  const isMarkdown = (text, sender) => {
+    if (sender === 'bot') {
+      return true;
+    }
+    return /(?:\*\*|__|##|\*|_|`|>|\d+\.\s|\-\s|\[.*\]\(.*\))/.test(text);
+  };
+  
+  
   return (
     <div className="chat-container">
       {messages.length === 0 && !hasInteractionStarted ? (
@@ -211,17 +333,24 @@ const isMarkdown = (text) => {
           </div>
           <div className="messages-container">
           {messages.map((msg, index) => {
-              if (msg.sender === 'bot-streaming') return null;
-              
-              return (
-                <div key={index} className={`message ${msg.sender}`}>
-                  <div className="message-content">
-                    {isMarkdown(msg.text) ? <ReactMarkdown>{msg.text}</ReactMarkdown> : msg.text}
-                  </div>
-                </div>
-              );
-            })}
-             {tokenLimitReached && (
+  const isActiveStreaming = isStreaming && msg.id === currentStreamId;
+  
+  return (
+    <div key={msg.id || index} className={`message ${msg.sender}`}>
+      <div className={`message-content ${isActiveStreaming ? 'streaming-message' : ''}`}>
+        {isMarkdown(msg.text, msg.sender) ? 
+          <ReactMarkdown>{msg.text}</ReactMarkdown> : 
+          <span>{msg.text}</span>
+        }
+        {isActiveStreaming && (
+          <span className="typing-indicator">▌</span>
+        )}
+      </div>
+    </div>
+  );
+})}
+            
+            {tokenLimitReached && (
               <div className="token-limit-warning">
                 <button 
                   className="new-conversation-button"
@@ -231,13 +360,6 @@ const isMarkdown = (text) => {
                 </button>
               </div>
             )}
-              {isStreaming && (
-              <div className="message bot">
-                <div className="message-content streaming-message">
-                  {isMarkdown(streamingText) ? <ReactMarkdown>{streamingText}</ReactMarkdown> : streamingText}
-                </div>
-              </div>
-            )}
             
             {isLoading && (
               <div className="message bot">
@@ -270,7 +392,7 @@ const isMarkdown = (text) => {
                 }}
               />
               <button type="submit" disabled={isLoading || !inputMessage.trim() || tokenLimitReached}>
-              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
+                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
                   <path d="M120-160v-240l320-80-320-80v-240l760 320-760 320Z"/>
                 </svg>
               </button>
@@ -285,4 +407,4 @@ const isMarkdown = (text) => {
   );
 };
 
-export default ChatInterface;
+export default ChatInterface;