Update frontend/src/components/ChatInterface.jsx

frontend/src/components/ChatInterface.jsx

@@ -12,7 +12,9 @@ saveBotResponse, toLogin }) => {
   const [streamingText, setStreamingText] = useState('');
   const [isStreaming, setIsStreaming] = useState(false);
   const [fullResponse, setFullResponse] = useState('');
-  
+  const [tokenLimitReached, setTokenLimitReached] = useState(false);
+  const [hasInteractionStarted, setHasInteractionStarted] = useState(false);
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
@@ -70,6 +72,8 @@ saveBotResponse, toLogin }) => {
   
    const sendMessage = async (message) => {
     try {
+      setHasInteractionStarted(true);
+
       setIsLoading(true);
       
       setMessages(prev => [...prev, { sender: 'user', text: message }]);
@@ -80,15 +84,33 @@ saveBotResponse, toLogin }) => {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
-        body: JSON.stringify({ message }),
+        body: JSON.stringify({ 
+          message,
+          conversation_id: activeConversationId 
+        }),
       });
       
+      const responseData = await chatRes.json();
+      
+      // Vérifier si la limite de tokens est atteinte
+      if (responseData.error === 'token_limit_exceeded') {
+        setIsLoading(false);
+        setTokenLimitReached(true);
+        
+        // Afficher un message à l'utilisateur
+        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." 
+        }]);
+        
+        return;
+      }
+      
       if (!chatRes.ok) throw new Error(`Chat API error ${chatRes.status}`);
       
-      const { response: botResponse } = await chatRes.json();
+      const { response: botResponse } = responseData;
       
       setIsLoading(false);
-      
       setMessages(prev => [...prev, { sender: 'bot-streaming', text: '' }]);
       
       streamResponse(botResponse);
@@ -108,6 +130,19 @@ saveBotResponse, toLogin }) => {
     }
   };
 
+  const handleCreateNewConversation = () => {
+    onNewChat();
+    setTokenLimitReached(false);
+    setHasInteractionStarted(false);
+
+  };
+  useEffect(() => {
+    if (activeConversationId === null && messages.length === 0) {
+      setHasInteractionStarted(false);
+    }
+  }, [activeConversationId, messages]);
+
+
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -124,7 +159,7 @@ const isMarkdown = (text) => {
 };
   return (
     <div className="chat-container">
-      {messages.length === 0 ? (
+      {messages.length === 0 && !hasInteractionStarted ? (
         <>
           <div className="chat-header">
             <h2 className="chat-title">Medic.ial</h2>
@@ -173,24 +208,34 @@ const isMarkdown = (text) => {
             <h2 className="chat-title">Medic.ial</h2>
           </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">
-                  <ReactMarkdown>{msg.text}</ReactMarkdown>
+          {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 && (
+              <div className="token-limit-warning">
+                <button 
+                  className="new-conversation-button"
+                  onClick={handleCreateNewConversation}
+                >
+                  Démarrer une nouvelle conversation
+                </button>
               </div>
-            );
-          })}
-                       {isStreaming && (
-            <div className="message bot">
-              <div className="message-content streaming-message">
-                <ReactMarkdown>{streamingText}</ReactMarkdown>
+            )}
+              {isStreaming && (
+              <div className="message bot">
+                <div className="message-content streaming-message">
+                  {isMarkdown(streamingText) ? <ReactMarkdown>{streamingText}</ReactMarkdown> : streamingText}
+                </div>
               </div>
-            </div>
-)}
+            )}
             
             {isLoading && (
               <div className="message bot">
@@ -206,8 +251,8 @@ const isMarkdown = (text) => {
               <textarea
                 value={inputMessage}
                 onChange={(e) => setInputMessage(e.target.value)}
-                placeholder="Tapez votre message ici..."
-                disabled={isLoading}
+                placeholder={tokenLimitReached ? "Créez une nouvelle conversation pour continuer..." : "Tapez votre message ici..."}
+                disabled={isLoading || tokenLimitReached}
                 rows="1"
                 ref={textareaRef}
                 className="input-textarea"
@@ -222,8 +267,8 @@ const isMarkdown = (text) => {
                   e.target.style.height = `${e.target.scrollHeight}px`;
                 }}
               />
-              <button type="submit" disabled={isLoading || !inputMessage.trim()}>
-                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
+              <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">
                   <path d="M120-160v-240l320-80-320-80v-240l760 320-760 320Z"/>
                 </svg>
               </button>