Update frontend/src/components/Panel.jsx

frontend/src/components/Panel.jsx

@@ -1,118 +1,147 @@
-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;
+import React from 'react';
+import '../App.css';
+
+const Panel = ({
+  conversations = [],
+  setConversations = () => {},
+  activeConversationId,
+  setActiveConversationId,
+  onToggleCollapse,
+  isCollapsed,
+  onNewChat,
+  userName, // Nouvelle prop pour le nom d'utilisateur
+  onLogout  // Nouvelle prop pour la fonction de déconnexion
+}) => {
+
+
+  
+  // Fonctions existantes
+  const createNewChat = () => {
+    onNewChat(); 
+  };
+
+  const deleteConversation = async (conversationId) => {
+    try {
+      const response = await fetch(`http://localhost:7860/api/conversations/${conversationId}`, {
+        method: 'DELETE',
+        credentials: 'include',
+      });
+      
+      if (response.ok) {
+        // Supprimer la conversation localement
+        setConversations(prev => prev.filter(chat => chat.id !== conversationId));
+        
+        // Si la conversation active est supprimée, réinitialiser
+        if (activeConversationId === conversationId) {
+          setActiveConversationId(null);
+        }
+      }
+    } catch (error) {
+      console.error('Erreur lors de la suppression:', error);
+    }
+  };
+
+  return (
+    <div className={`sidebar-panel ${isCollapsed ? 'collapsed' : ''}`}>
+      <div className="sidebar-header">
+        {!isCollapsed && (
+          <>
+            <button className="collapse-button" onClick={onToggleCollapse}>
+              {/* SVG existant */}
+              <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>
+            
+            {/* Affichage du nom d'utilisateur */}
+            {userName && (
+              <div className="user-info">
+                <span className="username">{userName}</span>
+                <button onClick={onLogout} className="logout-btn">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M8.90002 7.56001C9.21002 3.96001 11.06 2.49001 15.11 2.49001H15.24C19.71 2.49001 21.5 4.28001 21.5 8.75001V15.27C21.5 19.74 19.71 21.53 15.24 21.53H15.11C11.09 21.53 9.24002 20.08 8.91002 16.54" stroke="#FF5252" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M15 12H3.62" stroke="#FF5252" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M5.85 8.65002L2.5 12L5.85 15.35" stroke="#FF5252" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                  Déconnexion
+                </button>
+              </div>
+            )}
+          </>
+        )}
+        
+        <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>
+
+      {/* Reste du composant inchangé */}
+      <div className="conversations-list">
+        <div className="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 className="conversation-before">
+          <h6 className="conversation-before-title">Les 30 derniers jours</h6>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Panel;