Update frontend/src/components/ChatInterface.jsx

frontend/src/components/ChatInterface.jsx

@@ -21,28 +21,49 @@ saveBotResponse, toLogin }) => {
 
 
 
- 
-   
-  const streamResponse = (response) => {
+ const streamResponse = (response) => {
     setIsStreaming(true);
     setFullResponse(response);
     setStreamingText('');
     
-    const words = response.split(' ');
-    let currentIndex = 0;
+    // Garder une référence au message de streaming
+    let streamMessageId = Date.now().toString();
+    
+    // Ajouter un message de streaming avec un ID unique
+    setMessages(prev => [...prev, { 
+      sender: 'bot-streaming', 
+      text: '', 
+      id: streamMessageId 
+    }]);
+    
+    const totalCharacters = response.length;
+    let charCount = 0;
     
     const streamInterval = setInterval(() => {
-      if (currentIndex < words.length) {
-        setStreamingText(prev => prev + (currentIndex > 0 ? ' ' : '') + words[currentIndex]);
-        currentIndex++;
+      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.filter(msg => msg.sender !== 'bot-streaming'));
-        setMessages(prev => [...prev, { sender: 'bot', text: response }]);
+        setMessages(prev => 
+          prev.map(msg => 
+            msg.id === streamMessageId 
+              ? { sender: 'bot', text: response, id: streamMessageId } 
+              : msg
+          )
+        );
       }
-    }, 40); 
+    }, 30);
     
     return () => clearInterval(streamInterval);
   };
@@ -162,7 +183,7 @@ saveBotResponse, toLogin }) => {
                 </div>
               );
             })}
-             {isStreaming && (
+              {isStreaming && (
               <div className="message bot">
                 <div className="message-content streaming-message">
                   {isMarkdown(streamingText) ? <ReactMarkdown>{streamingText}</ReactMarkdown> : streamingText}