File size: 6,962 Bytes
c9d0942 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
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; |