Upload 16 files

frontend/src/App.css

@@ -0,0 +1,456 @@
+/* ----- Disposition générale ----- */
+.App {
+  display: flex;               
+  min-height: 100vh;          
+  margin: 0;
+  background-image: url('../public/blurBackground.png'); 
+  background-size: cover; 
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed; 
+}
+.body{
+  background-image: url('../public/blurBackground.png');
+  background-size: cover; 
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed; 
+}
+
+/* ----- Panel latéral (sidebar) ----- */
+.sidebar-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;      
+  max-width: 250px;    
+  height: 100vh; /* Add fixed height */
+  background-color: #1E2136;   
+  color: #ffffff;
+  overflow-y: auto;          
+  transition: max-width 0.3s ease;
+}
+
+   .App.panel-collapsed .main-content {
+    margin-left: 0;        
+  }
+  
+.sidebar-panel.collapsed {
+  max-width: 0;  
+  overflow: hidden;
+}
+
+/* ----- Contenu principal (zone de chat + header) ----- */
+.main-content {
+  flex: 1;                     
+  display: flex;
+  flex-direction: column;
+  transition: margin-left 0.3s ease;
+
+}
+.new-chat-button {
+ 
+  background-color: #1e2136; 
+  border: none;
+  border-radius: 50%; 
+  
+  cursor: pointer;
+}
+
+.new-chat-button:hover {
+  background-color: #2a2d45; 
+}
+
+.new-chat-button svg {
+  width: 20px; 
+  height: 20px; 
+  fill: #ffffff; 
+}
+/* ----- Header du chat ----- */
+.chat-header {
+  display: flex;
+  position: relative;
+  justify-content: center; 
+  align-items: center; 
+  padding: 10px 15px;
+  color: #ffffff;
+  font-size: 1.3rem;
+  margin: 0;
+}
+.chat-header .avatar-container {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%); 
+}
+
+.chat-title {
+  font-weight: 400; 
+  font-size: 1.3rem; 
+  color: #ffffff; 
+  text-transform: uppercase; 
+  letter-spacing: 1px; 
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
+  font-family: 'Montserrat', sans-serif; 
+  text-align: center; 
+}
+/* ----- Conteneur du chat (zone de messages + input) ----- */
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+/* ----- Vue sans message : contenu centré ----- */
+.no-messages-view {
+  flex: 1;  
+  display: flex;
+  flex-direction: column;
+  justify-content: center; 
+  align-items: center;    
+  padding: 20px;
+  text-align: center;
+}
+.no-messages-view .welcome-message {
+  margin-bottom: 20px;
+  color:white;
+  font-size:1.5rem;
+}
+
+.no-messages-view .input-container {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  right: auto;
+  margin-top: 20px;
+  width: 100%;
+}
+
+
+.welcome-content {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 600px;
+  width: 100%;
+  margin-bottom: 100px;
+}
+
+.no-messages-view .input-form {
+  max-width: 600px;
+  width: 100%;
+}
+
+/* ----- Zone des messages scrollable ----- */
+.messages-container {
+  flex: 1; 
+  overflow-y: auto; 
+  padding: 20px 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  justify-content: flex-start; 
+  gap: 12px; 
+  margin-left: 10vw; 
+  margin-right: 10vw;
+  margin-bottom: 8vw; 
+}
+.messages-container::-webkit-scrollbar {
+
+  display:none;
+
+}
+
+@media (max-width: 768px) {
+  .messages-container {
+    margin-left: 5vw;
+    margin-right: 5vw;
+    margin-bottom: 100px; 
+  }
+}
+
+@media (max-width: 480px) {
+  .messages-container {
+    margin-left: 2vw;
+    margin-right: 2vw;
+    margin-bottom: 120px; /* Ajuste l'espace en bas pour les très petits écrans */
+  }
+}
+/* ----- Style des messages ----- */
+.message {
+  max-width: 70%; /* Limite la largeur des messages */
+  padding: 12px 16px;
+  border-radius: 8px;
+  word-break: break-word;
+  animation: fade-in 0.3s ease-in-out;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre légère */
+}
+.message.user {
+  align-self: flex-end; /* Aligne à droite */
+  background: rgba(67, 72, 105, 0.3);
+  backdrop-filter: blur(10px);
+  color: #ffffff;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-bottom-right-radius: 4px;
+}
+
+.message.bot .message-content{
+  display:flex;
+  align-self: flex-end;
+}
+.message.user .message-content{
+  display:flex;
+  align-self: flex-start;
+}
+.message.bot {
+  align-self: flex-start; 
+  color: #e1e1e1;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-bottom-left-radius: 4px;
+}
+
+/* ----- Animation pour l'apparition ----- */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(5px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ----- Indicateur de chargement ----- */
+.loading span {
+  display: inline-block;
+  animation: loading-dots 1.4s infinite ease-in-out;
+  font-size: 1.2rem;
+  margin-right: 2px;
+}
+
+@keyframes loading-dots {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+.input-container {
+  position: fixed;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  z-index: 999;
+  width: 100%;
+}
+.disclaimer-text {
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  margin-top: 8px;
+  font-style: italic;
+  max-width: 600px; 
+}
+
+.conversation-date{
+  font-size: 0.8rem;
+  font-style: italic;
+  margin-top: 2px;
+  color:rgb(183, 183, 183);
+}
+
+/* ----- Formulaire d'entrée ----- */
+.input-form {
+  display: flex;
+  align-items: center; 
+  justify-content: space-between; 
+  background: linear-gradient(180deg, #1E2136 0%, #1E2136 100%);
+  border-radius: 20px;
+  padding: 12px 16px;
+  width: 100%;
+  max-width: 600px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+/* Input */
+.input-form input {
+  flex: 1; 
+  padding: 10px 12px;
+  border: none;
+  border-radius: 16px;
+  font-size: 14px;
+  outline: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.input-form textarea {
+  flex: 1;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 16px;
+  font-size: 14px;
+  outline: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  resize: none; 
+  overflow-y: auto; 
+  height: auto; 
+  max-height: 150px; 
+
+}
+.input-form textarea::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+  textarea::-webkit-scrollbar {
+    width: 12px; 
+}
+
+/* For Firefox */
+textarea {
+    scrollbar-width: thin; 
+    scrollbar-color: #acacac transparent; 
+}
+
+textarea:hover {
+    scrollbar-color: #b1b1b1 transparent; 
+}
+
+/* Placeholder */
+.input-form input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* Bouton d'envoi */
+.input-form button {
+  display: flex;
+  align-items: center; 
+  justify-content: center; 
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 16px;
+  padding: 6px 12px; 
+  margin-left: 8px;
+  transition: opacity 0.2s;
+  border-radius: 50%; 
+ 
+}
+
+.input-form button:hover {
+  opacity: 0.7;
+}
+
+/* Désactivation du bouton */
+.input-form button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+h2{
+  display: block;
+  text-align: center;
+}
+/* ----- Bouton de collapse principal  ----- */
+.collapse-button-main {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 999;       
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 24px;    
+}
+
+/* ----- Icônes ----- */
+.material-icons {
+  vertical-align: middle;
+}
+
+/* ----- Liste des conversations dans le panel ----- */
+.conversations-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto; 
+  max-height: calc(100vh - 100px); 
+}
+
+  
+  .conversations-list::-webkit-scrollbar {
+    width: 12px; 
+}
+
+.conversation-today-title{
+  display: flex;
+  margin-left: 6%;
+}
+.conversation-before-title{
+  display: flex;
+  margin-left: 6%;
+}
+.delete-button{
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 24px;    
+  margin-left: auto;
+
+}
+/* For Firefox */
+.conversations-list {
+    scrollbar-width: thin; 
+    scrollbar-color: #acacac transparent; 
+}
+
+.conversations-list:hover {
+    scrollbar-color: #b1b1b1 transparent; 
+}
+
+.conversation-item {
+  padding: 8px;
+  gap: 12px;
+  border-bottom: 1px solid #525467;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.conversation-item:hover {
+  background-color: #525467;
+}
+
+.conversation-icon {
+  margin-right: 6px;
+}
+
+/* ----- Footer du panel ----- */
+.sidebar-footer {
+  margin-top: auto;
+  border-top: 1px solid #525467;
+  padding: 8px;
+}
+.sidebar-header{
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.3rem;
+  padding-top:0.5rem;
+    padding-inline-start: calc(0.5rem);
+    padding-inline-end: calc(0.5rem);  ;}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.user-avatar {
+  font-size: 20px;
+}
+
+.collapse-button {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+}

frontend/src/App.js

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import './App.css';
+import ChatInterface from './components/ChatInterface';
+import Panel from './components/Panel';
+import Login from './components/Login';
+import Signin from './components/Signin';
+
+
+function App() {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [conversations, setConversations] = useState([
+    { id: 1, title: "Premier diagnostic", date: "12 Mar" },
+    { id: 2, title: "Question sur les symptômes", date: "11 Mar" },
+    { id: 3, title: "Consultation générale", date: "10 Mar" }
+  ]);
+  const [activeConversationId, setActiveConversationId] = useState(null);
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const handleNewChat = () => {
+    setActiveConversationId(null);
+    setMessages([]);
+  };
+
+  const handleMessageSent = (message) => {
+  
+    if (!activeConversationId) {
+      const newChat = { 
+        id: Date.now(), 
+        title: message.length > 15 ? message.substring(0, 15) + "..." : message,   
+        date: new Date().toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' }),
+        time: new Date().toLocaleTimeString('fr-FR', { hour: 'numeric', minute: 'numeric' }) 
+
+      };
+      setConversations([newChat, ...conversations]);
+      setActiveConversationId(newChat.id);
+    }
+  };
+
+  const [page, setPage] = useState("chat");
+
+  return (
+    <div className={`App ${isCollapsed ? 'panel-collapsed' : ''}`}>
+
+    {page === "chat" && (
+        <Panel 
+          conversations={conversations}
+          setConversations={setConversations}
+          activeConversationId={activeConversationId}
+          setActiveConversationId={setActiveConversationId}
+          onNewChat={handleNewChat} 
+          onToggleCollapse={toggleCollapse} 
+          isCollapsed={isCollapsed} 
+        />
+      )}
+      
+      <div className="main-content">
+        {isCollapsed && (
+          <button className="collapse-button-main" onClick={toggleCollapse}>
+            <span className="material-icons">
+              <svg
+                fill="#FFFF"
+                width="20"
+                height="20"
+                viewBox="0 0 32 32"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <defs>
+                  <style>{`.cls-1{fill:none;}`}</style>
+                </defs>
+                <title>open-panel--solid--left</title>
+                <path d="M28,4H4A2,2,0,0,0,2,6V26a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V6A2,2,0,0,0,28,4Zm0,22H12V6H28Z" />
+                <rect
+                  id="_Transparent_Rectangle_"
+                  data-name="<Transparent Rectangle>"
+                  className="cls-1"
+                  width="20"
+                  height="20"
+                />
+              </svg>
+            </span>
+          </button>
+        )}
+
+        {page === "chat" && 
+          <ChatInterface
+            messages={messages}
+            setMessages={setMessages}
+            onMessageSent={handleMessageSent}
+            toLogin={() => setPage("login")}/>}
+        {page === "login" && <Login toSignin={() => setPage("signin")}/>}
+        {page === "signin" && <Signin toLogin={() => setPage("login")}/>}
+      </div>
+    </div>
+  );
+}
+
+export default App;

frontend/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/avatar.css

@@ -0,0 +1,23 @@
+.avatar-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .avatar-image-wrapper {
+    width: 2rem;
+    height: 2rem;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: transform 0.3s ease;
+  }
+  
+
+  
+  .circular--portrait-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }

frontend/src/components/AddUser.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+
+const AddUser = () => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await fetch('http://localhost:5001/add_user', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name, email }),
+      });
+      const data = await response.json();
+      if (response.ok) {
+        setMessage(data.message);
+      } else {
+        setMessage(data.error);
+      }
+    } catch (error) {
+      setMessage('An error occurred');
+    }
+  };
+
+  return (
+    <div>
+      <h1>Add User</h1>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>Name:</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+        <div>
+          <label>Email:</label>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+        <button type="submit">Add User</button>
+      </form>
+      {message && <p>{message}</p>}
+    </div>
+  );
+};
+
+export default AddUser;

frontend/src/components/Avatar.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import '../avatar.css'; 
+
+export default function Avatar({onClick}) {
+
+
+  return (
+    <div className="avatar-container" onClick={onClick}>
+      <div
+        className="avatar-image-wrapper"
+     
+      >
+        <img
+          className="circular--portrait-img"
+          alt="me"
+          src={new URL("../../public/emojipouce.png", import.meta.url).href}
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/ChatInterface.jsx

@@ -0,0 +1,200 @@
+import React, { useState, useRef, useEffect } from 'react';
+import axios from 'axios';
+import ReactMarkdown from 'react-markdown';
+import Avatar from './Avatar.jsx';
+import '../App.css';
+
+const ChatInterface = ({ messages = [], setMessages = () => {}, onMessageSent = () => {}, toLogin }) => {
+  const [inputMessage, setInputMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const messagesEndRef = useRef(null);
+  const textareaRef = useRef(null); 
+
+
+  const isMarkdown = (text) => /[#*_>`-]/.test(text);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const sendMessage = async (message) => {
+    try {
+      setIsLoading(true);
+      
+      onMessageSent(message);
+      
+      const response = await axios.post('https://15af0837fca124cf6d.gradio.live/gradio_api/run/predict', {
+        data: [message, null],
+        fn_index: 0
+      });
+      const botResponse = response.data.data[0];
+      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. 👍" }
+      ]);
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (inputMessage.trim() === '') return;
+    sendMessage(inputMessage);
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+    setInputMessage('');
+    
+  };
+
+  // Le reste du composant reste inchangé
+  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">
+            <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>
+          <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;

frontend/src/components/Login.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import '../login.css'; 
+
+
+const Login = ({toSignin}) => {
+
+    
+
+  return (
+    <div className='login'>
+        <h1 className='title-1'>Te voilà de retour sur Medic.ial !</h1>
+        <div className="container">
+            <div className='container-form'>
+                <form action="" className='form'>
+                    <h3>CONNEXION</h3>
+                    <div className='form-container-input'>
+                        <p className='form-title'>Adresse email</p>
+                        <input type='mail' className='form-input'/>
+                    </div>
+                    <div className='form-container-input'>
+                        <p className='form-title'>Mot de passe</p>
+                        <input type='password' className='form-input'/>
+                    </div>
+                    <div className='form-container-submit'>
+                        <button type="submit">Connexion</button>
+                        <p>Mot de passe oublié?</p>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <p className='title-2'>Pas encore de compte ? <span onClick={toSignin}>S'inscrire</span></p>
+    </div>
+  )
+}
+
+export default Login

frontend/src/components/Panel.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import '../App.css';
+
+const Panel = ({
+  conversations = [],
+  setConversations = () => {},
+  activeConversationId,
+  setActiveConversationId,
+  onToggleCollapse,
+  isCollapsed,
+  onNewChat
+}) => {
+
+
+  const createNewChat = () => {
+    onNewChat(); 
+  };
+
+const deleteConversation=(conversationId)=>{
+  console.log(conversationId)
+  setConversations(prev => prev.filter(chat => chat.id !== conversationId));
+  setActiveConversationId(null);
+  
+}
+
+  return (
+    <div className={`sidebar-panel ${isCollapsed ? 'collapsed' : ''}`}>
+      <div className="sidebar-header">
+        {!isCollapsed && (
+          <button className="collapse-button" onClick={onToggleCollapse}>
+            <svg
+              fill="#FFFF"
+              width="20"
+              height="20"
+              viewBox="0 0 32 32"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <defs>
+                <style>{`.cls-1{fill:none;}`}</style>
+              </defs>
+              <title>open-panel--solid--left</title>
+              <path d="M28,4H4A2,2,0,0,0,2,6V26a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V6A2,2,0,0,0,28,4Zm0,22H12V6H28Z" />
+              <rect
+                id="_Transparent_Rectangle_"
+                data-name="<Transparent Rectangle>"
+                className="cls-1"
+                width="20"
+                height="20"
+              />
+            </svg>
+          </button>
+        )}
+        <button className="new-chat-button" onClick={createNewChat}>
+          {!isCollapsed && (
+            <span>
+              <svg
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="currentColor"
+              >
+                <path d="M495.6 49.23l-32.82-32.82C451.8 5.471 437.5 0 423.1 0c-14.33 0-28.66 5.469-39.6 16.41L167.5 232.5C159.1 240 154.8 249.5 152.4 259.8L128.3 367.2C126.5 376.1 133.4 384 141.1 384c.916 0 1.852-.0918 2.797-.2813c0 0 74.03-15.71 107.4-23.56c10.1-2.377 19.13-7.459 26.46-14.79l217-217C517.5 106.5 517.4 71.1 495.6 49.23zM461.7 94.4L244.7 311.4C243.6 312.5 242.5 313.1 241.2 313.4c-13.7 3.227-34.65 7.857-54.3 12.14l12.41-55.2C199.6 268.9 200.3 267.5 201.4 266.5l216.1-216.1C419.4 48.41 421.6 48 423.1 48s3.715 .4062 5.65 2.342l32.82 32.83C464.8 86.34 464.8 91.27 461.7 94.4zM424 288c-13.25 0-24 10.75-24 24v128c0 13.23-10.78 24-24 24h-304c-13.22 0-24-10.77-24-24v-304c0-13.23 10.78-24 24-24h144c13.25 0 24-10.75 24-24S229.3 64 216 64L71.1 63.99C32.31 63.99 0 96.29 0 135.1v304C0 479.7 32.31 512 71.1 512h303.1c39.69 0 71.1-32.3 71.1-72L448 312C448 298.8 437.3 288 424 288z" />
+              </svg>
+            </span>
+          )}
+        </button>
+    
+      </div>
+
+      <div className="conversations-list">
+        <div class="conversation-today">
+          <h6 className="conversation-today-title">Aujourd'hui</h6>
+        {conversations.map(chat => (
+          <div 
+            key={chat.id} 
+            className={`conversation-item ${activeConversationId === chat.id ? 'active' : ''}`}
+            onClick={() => setActiveConversationId(chat.id)}
+          >
+           
+            {!isCollapsed && (
+              <>
+               <div className="conversation-icon">
+               <span className="material-icons">{chat.time}</span>
+             </div>
+              <div className="conversation-details">
+                
+                <div className="conversation-title">{chat.title}</div>
+                <div className="conversation-date">{chat.date}</div>
+              </div>
+              <button className="delete-button" onClick={(e) => {
+                    e.stopPropagation();
+                    deleteConversation(chat.id);
+                  }}>
+
+
+        
+              <span>
+                <svg width="15px" height="15px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ff0000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10 12V17" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M14 12V17" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4 7H20" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M6 10V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V10" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+              </span>
+           
+            </button>
+              </>
+            )}
+          </div>
+        ))}
+        </div>
+        <div class="conversation-before">
+          <h6 className="conversation-before-title">Les 30 derniers jours</h6>
+          
+           </div>
+      </div>
+
+    </div>
+  );
+};
+
+export default Panel;

frontend/src/components/Signin.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react'
+import '../login.css';
+
+function Signin({toLogin}) {
+    const [formData, setFormData] = useState({
+        prenom: '',
+        nom: '',
+        email: '',
+        password: '', // Changé de password_hash à password pour correspondre à l'API
+    });
+    
+    const handleChange = (e) => {
+        setFormData({...formData, [e.target.name]: e.target.value});
+    };
+    
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const res = await fetch("/.netlify/functions/register", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(formData)
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                console.log(data);
+                toLogin();
+            } else {
+                const errorData = await res.json().catch(() => ({}));
+                alert(errorData.detail || "Erreur d'inscription");
+            }
+        } catch (error) {
+            console.error("Erreur lors de l'inscription", error);
+        }
+    };
+
+    return (
+        <div className='login'>
+            <h1 className='title-1'>Bienvenue sur Medic.ial !</h1>
+            <div className="container">
+                <div className='container-form'>
+                    <form action="" className='form' onSubmit={handleSubmit}>
+                        <h3>INSCRIPTION</h3>
+                        <div className='form-container-name'>
+                            <div>
+                                <p className='form-title'>Prénom</p>
+                                <input type='text' name="prenom" onChange={handleChange} value={formData.prenom} className='form-input'/>
+                            </div>
+                            <div>
+                                <p className='form-title'>Nom</p>
+                                <input type='text' name="nom" onChange={handleChange} value={formData.nom} className='form-input'/>
+                            </div>
+                        </div>
+                        <div className='form-container-input'>
+                            <p className='form-title'>Adresse email</p>
+                            <input type='email' name="email" onChange={handleChange} value={formData.email} className='form-input'/>
+                        </div>
+                        <div className='form-container-input'>
+                            <p className='form-title'>Mot de passe</p>
+                            <input type='password' name="password" onChange={handleChange} value={formData.password} className='form-input'/>
+                        </div>
+                        <div className='form-container-submit'>
+                            <button type="submit">Inscription</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <p className='title-2'>Déjà un compte ? <span onClick={toLogin}>Se connecter</span></p>
+        </div>
+    )
+}
+
+export default Signin

frontend/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/login.css

@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Trade+Winds&display=swap');
+
+.login {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+}
+
+
+.title-1 {
+    text-align: center;
+    font-weight: 200;
+    margin: 3%;
+}
+
+.title-2 {
+    text-align: center;
+}
+
+.title-2 span {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-family: 'Montserrat', sans-serif;
+}
+
+.container-form {
+    background-color: rgb(30, 33, 54, 0.2);
+    border-radius: 20px;
+    width: 40%;
+    height: 30rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.form {
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    color: white;
+    width: 60%;
+    height: 90%;
+}
+
+
+.form-container-input {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.form-container-name {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+
+}
+
+.form-container-input>input, .form-container-name input {
+    width: 100%;
+    height: 2rem;
+    color: white;
+}
+
+.form-container-name div {
+    width: 45%;
+}
+
+.form-input {
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    border-bottom: 1px solid white;
+}
+
+.form-title {
+    font-size: x-small;
+}
+
+.form-container-submit {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.form-container-submit>p {
+    text-decoration: underline;
+    font-size: small;
+    cursor: pointer;
+}
+
+.form-container-submit>button {
+    background: none;
+    border: 1px solid white;
+    border-radius: 10px;
+    color: white;
+    text-align: center;
+    width: 15rem;
+    height: 3rem;
+    font-family: 'Montserrat', sans-serif;
+    cursor: pointer;
+}
+
+.form-container-submit>button:hover {
+    background: white;
+    color: black;
+}

frontend/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';