Update frontend/src/components/ChatInterface.jsx

frontend/src/components/ChatInterface.jsx

@@ -9,23 +9,50 @@ saveBotResponse, toLogin }) => {
   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 scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
   useEffect(scrollToBottom, [messages]);
 
-  const sendMessage = async (message) => {
+
+
+
+  const streamResponse = (response) => {
+    setIsStreaming(true);
+    setFullResponse(response);
+    setStreamingText('');
+    
+    const words = response.split(' ');
+    let currentIndex = 0;
+    
+    const streamInterval = setInterval(() => {
+      if (currentIndex < words.length) {
+        setStreamingText(prev => prev + (prev ? ' ' : '') + words[currentIndex]);
+        currentIndex++;
+      } else {
+        clearInterval(streamInterval);
+        setIsStreaming(false);
+        
+        setMessages(prev => prev.filter(msg => msg.sender !== 'bot-streaming'));
+        setMessages(prev => [...prev, { sender: 'bot', text: response }]);
+      }
+    }, 40); 
+    
+    return () => clearInterval(streamInterval);
+  };
+  
+   const sendMessage = async (message) => {
     try {
       setIsLoading(true);
       
-      // Ajouter le message utilisateur à l'interface
       setMessages(prev => [...prev, { sender: 'user', text: message }]);
       
-      // IMPORTANT: Obtenir l'ID de conversation mis à jour (nouvelle ou existante)
       const updatedConversationId = await onMessageSent(message);
       
-      // Appel à l'API de chat
       const chatRes = await fetch('/api/chat', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -37,10 +64,12 @@ saveBotResponse, toLogin }) => {
       
       const { response: botResponse } = await chatRes.json();
       
-      // Ajouter la réponse du bot à l'interface
-      setMessages(prev => [...prev, { sender: 'bot', text: botResponse }]);
+      setIsLoading(false);
+      
+      setMessages(prev => [...prev, { sender: 'bot-streaming', text: '' }]);
+      
+      streamResponse(botResponse);
       
-      // Utiliser l'ID de conversation mis à jour
       if (updatedConversationId) {
         saveBotResponse(updatedConversationId, botResponse);
       } else if (activeConversationId) {
@@ -49,15 +78,14 @@ saveBotResponse, toLogin }) => {
       
     } catch (error) {
       console.error('Erreur:', error);
+      setIsLoading(false);
       setMessages(prev => [...prev, 
-        { sender: 'user', text: message },
         { sender: 'bot', text: "Désolé, une erreur s'est produite. Veuillez réessayer." }
       ]);
-    } finally {
-      setIsLoading(false);
     }
   };
 
+
   const handleSubmit = (e) => {
     e.preventDefault();
     const txt = inputMessage.trim();
@@ -120,13 +148,25 @@ saveBotResponse, toLogin }) => {
             <h2 className="chat-title">Medic.ial</h2>
           </div>
           <div className="messages-container">
-            {messages.map((msg, index) => (
-              <div key={index} className={`message ${msg.sender}`}>
-                <div className="message-content">
-                  {isMarkdown(msg.text) ? <ReactMarkdown>{msg.text}</ReactMarkdown> : msg.text}
+            {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>
+              );
+            })}
+             {isStreaming && (
+              <div className="message bot">
+                <div className="message-content streaming-message">
+                  {isMarkdown(streamingText) ? <ReactMarkdown>{streamingText}</ReactMarkdown> : streamingText}
                 </div>
               </div>
-            ))}
+            )}
+            
             {isLoading && (
               <div className="message bot">
                 <div className="message-content loading">