Update frontend/src/components/ChatInterface.jsx

frontend/src/components/ChatInterface.jsx

@@ -1,5 +1,6 @@
 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';
 
@@ -8,124 +9,194 @@ 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" });
   };
-  useEffect(scrollToBottom, [messages]);
 
-  const sendMessage = async (message) => {
-    try {
-      setIsLoading(true);
-      onMessageSent(message);
-
-      // 1️⃣ – récupérer 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];  // vecteur
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
 
-      console.log('User embedding:', userEmbedding);
+  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. 👍" }
+    ]);
+  }
+};
 
-      // 2️⃣ – envoyer au chat endpoint (on peut inclure l'embedding si besoin pour RAG)
-      const chatRes = await fetch('/api/chat', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          message,
-          embedding: userEmbedding,    // optionnel selon ton backend
-        }),
-      });
-      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(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();
-    const txt = inputMessage.trim();
-    if (!txt) return;
-    sendMessage(txt);
+    if (inputMessage.trim() === '') return;
+    sendMessage(inputMessage);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
     setInputMessage('');
-    if (textareaRef.current) textareaRef.current.style.height = 'auto';
+    
   };
 
+  // Le reste du composant reste inchangé
   return (
     <div className="chat-container">
-      <div className="chat-header">
-        <Avatar onClick={toLogin}/>
-        <h2 className="chat-title">Medic.ial</h2>
-      </div>
-      <div className="messages-container">
-        {messages.map((msg, i) => (
-          <div key={i} className={`message ${msg.sender}`}>
-            <div className="message-content">
-              {/#|\*|_|`|>/.test(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>
+      {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">
+            <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 ref={messagesEndRef} />
       </div>
-
-      <form onSubmit={handleSubmit} className="input-form">
-        <textarea
-          ref={textareaRef}
-          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';
-            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>
-
-      <figcaption className="disclaimer-text">
-        Medic.ial est sujet à faire des erreurs. Vérifiez les informations fournies.
-      </figcaption>
+    </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
+                value={inputMessage}
+                onChange={(e) => setInputMessage(e.target.value)  
+                }
+                placeholder="Tapez votre message ici..."
+                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>
+            <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;