Update frontend/src/components/ChatInterface.jsx

frontend/src/components/ChatInterface.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { InferenceClient } from "@huggingface/inference";
 import Avatar from './Avatar.jsx';
 import '../App.css';
 
@@ -9,194 +8,166 @@ const ChatInterface = ({ messages = [], setMessages = () => {}, onMessageSent =
   const [isLoading, setIsLoading] = useState(false);
   const messagesEndRef = useRef(null);
   const textareaRef = useRef(null);
-  
-  // Initialisation du client Hugging Face (idéalement dans un .env)
-  const hfClient = new InferenceClient(process.env.REACT_APP_HF_TOKEN || "token");
-  console.log(process.env.REACT_APP_HF_TOKEN);
-  const isMarkdown = (text) => /[#*_>`-]/.test(text);
 
   const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [messages]);
+  useEffect(scrollToBottom, [messages]);
 
   const sendMessage = async (message) => {
-  try {
-    setIsLoading(true);
-    onMessageSent(message);
-    const response = await fetch("/api/chat", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ message })
-    });
-    const data = await response.json();
-    const botResponse = data.response;
-    setMessages(prev => [
-      ...prev,
-      { sender: 'user', text: message },
-      { sender: 'bot', text: botResponse }
-    ]);
-    setIsLoading(false);
-  } 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. 👍" }
-    ]);
-  }
-};
+    try {
+      setIsLoading(true);
+      onMessageSent(message);
 
-  
+      // 1. Récupération de l'embedding
+      const embedRes = await fetch('/api/embed', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ texts: [message] }),
+      });
+      if (!embedRes.ok) throw new Error(`Embed API error ${embedRes.status}`);
+      const { embeddings } = await embedRes.json();
+      const userEmbedding = embeddings[0];
+
+      // 2. Appel à l'endpoint chat avec embedding
+      const chatRes = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message, embedding: userEmbedding }),
+      });
+      if (!chatRes.ok) throw new Error(`Chat API error ${chatRes.status}`);
+      const { response: botResponse } = await chatRes.json();
+
+      setMessages(prev => [
+        ...prev,
+        { sender: 'user', text: message },
+        { sender: 'bot', text: botResponse }
+      ]);
+    } catch (error) {
+      console.error('Erreur:', error);
+      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();
-    if (inputMessage.trim() === '') return;
-    sendMessage(inputMessage);
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-    }
+    const txt = inputMessage.trim();
+    if (!txt) return;
+    sendMessage(txt);
     setInputMessage('');
-    
+    if (textareaRef.current) textareaRef.current.style.height = 'auto';
   };
 
-  // Le reste du composant reste inchangé
+  const isMarkdown = (text) => /[#*_>`-]/.test(text);
+
   return (
     <div className="chat-container">
       {messages.length === 0 ? (
-       <>
-       <div className="chat-header">
-         <h2 className="chat-title">Medic.ial</h2>
-         <Avatar onClick={toLogin}/>
-       </div>
-       <div className="no-messages-view">
-         <div className="welcome-content">
-           <div className="welcome-message">
-             <p>Bonjour ! Comment puis-je vous aider aujourd'hui ? 🧑‍⚕️</p>
-           </div>
-           <div className="input-container centered">
-             <form onSubmit={handleSubmit} className="input-form">
-             <textarea
-      value={inputMessage}
-      onChange={(e) => setInputMessage(e.target.value)}
-      placeholder="Posez une question..."
-      disabled={isLoading}
-      rows="1" 
-      className="input-textarea"
-      onKeyDown={(e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-          e.preventDefault(); 
-          handleSubmit(e); 
-        }
-      }}
-      onInput={(e) => {
-        e.target.style.height = "auto"; // Réinitialise la hauteur
-        e.target.style.height = `${e.target.scrollHeight}px`; // Ajuste à la hauteur du contenu
-      }}
-    />
-               <button type="submit" style={{background:"none"}} disabled={isLoading || inputMessage.trim() === ''}>
-                 <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>
-             </form>
-           </div>
-         </div>
-       </div>
-     </>
-         
+        <>
+          <div className="chat-header">
+            <h2 className="chat-title">Medic.ial</h2>
+            <Avatar onClick={toLogin} />
+          </div>
+          <div className="no-messages-view">
+            <div className="welcome-content">
+              <div className="welcome-message">
+                <p>Bonjour ! Comment puis-je vous aider aujourd'hui ? 🧑‍⚕️</p>
+              </div>
+              <div className="input-container centered">
+                <form onSubmit={handleSubmit} className="input-form">
+                  <textarea
+                    value={inputMessage}
+                    onChange={(e) => setInputMessage(e.target.value)}
+                    placeholder="Posez une question..."
+                    disabled={isLoading}
+                    rows="1"
+                    ref={textareaRef}
+                    className="input-textarea"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        handleSubmit(e);
+                      }
+                    }}
+                    onInput={(e) => {
+                      e.target.style.height = 'auto';
+                      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">
+                      <path d="M120-160v-240l320-80-320-80v-240l760 320-760 320Z"/>
+                    </svg>
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </>
       ) : (
         <>
           <div className="chat-header">
-            <Avatar onClick={toLogin}/>
+            <Avatar onClick={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
-        )}
-      </div>
-    </div>
-  ))}
-  {isLoading && (
-    <div className="message bot">
-      <div className="message-content loading">
-        <span>.</span><span>.</span><span>.</span>
-      </div>
-    </div>
-  )}
-  <div ref={messagesEndRef} />
-</div>
+            {messages.map((msg, index) => (
+              <div key={index} className={`message ${msg.sender}`}>
+                <div className="message-content">
+                  {isMarkdown(msg.text) ? <ReactMarkdown>{msg.text}</ReactMarkdown> : msg.text}
+                </div>
+              </div>
+            ))}
+            {isLoading && (
+              <div className="message bot">
+                <div className="message-content loading">
+                  <span>.</span><span>.</span><span>.</span>
+                </div>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
           <div className="input-container">
             <form onSubmit={handleSubmit} className="input-form">
-            <textarea
+              <textarea
                 value={inputMessage}
-                onChange={(e) => setInputMessage(e.target.value)  
-                }
+                onChange={(e) => setInputMessage(e.target.value)}
                 placeholder="Tapez votre message ici..."
                 disabled={isLoading}
-                rows="1" 
+                rows="1"
                 ref={textareaRef}
                 className="input-textarea"
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault(); 
-                    handleSubmit(e); 
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSubmit(e);
                   }
                 }}
                 onInput={(e) => {
-                  e.target.style.height = "auto"; 
-                  e.target.style.height = `${e.target.scrollHeight}px`; 
+                  e.target.style.height = 'auto';
+                  e.target.style.height = `${e.target.scrollHeight}px`;
                 }}
-    />
-              <button type="submit" disabled={isLoading || inputMessage.trim() === ''}>
+              />
+              <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">
                   <path d="M120-160v-240l320-80-320-80v-240l760 320-760 320Z"/>
                 </svg>
               </button>
             </form>
-            <figcaption className="disclaimer-text">Medic.ial est sujet à faire des erreurs. Vérifiez les informations fournies.</figcaption>
+            <figcaption className="disclaimer-text">
+              Medic.ial est sujet à faire des erreurs. Vérifiez les informations fournies.
+            </figcaption>
           </div>
         </>
       )}
     </div>
   );
 };
-/*const UserList = () => {
-  const [users, setUsers] = useState([]);
-  useEffect(() => {
-    const fetchUsers = async () => {
-      try {
-        const response = await fetch('/.netlify/functions/get_users');
-        const data = await response.json();
-        setUsers(data);
-      } catch (error) {
-        console.error('An error occurred while fetching users:', error);
-      }
-    };
-    fetchUsers();
-  }, []);
-  return (
-    <div>
-      <h1>User List</h1>
-      <ul>
-        {users.map((user, index) => (
-          <li key={index}>{user[1]} - {user[2]}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};*/
 
 export default ChatInterface;