diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts
index 9c1f300..8ab314b 100755
--- a/src/pages/chat/chat.ts
+++ b/src/pages/chat/chat.ts
@@ -699,7 +699,66 @@ class ChatElement extends HTMLElement {
                         roleList.className = 'role-list';
                         (roleList as HTMLElement).style.display = 'none';
 
-                        li.appendChild(roleList);
+                        // Traiter chaque rôle
+                        Object.entries(roles).forEach(([roleName, roleData]: [string, any]) => {
+                            const roleItem = document.createElement('li');
+                            roleItem.className = 'role-item';
+                            
+                            const roleContainer = document.createElement('div');
+                            roleContainer.className = 'role-item-container';
+            
+                            const roleNameSpan = document.createElement('span');
+                            roleNameSpan.className = 'role-name';
+                            roleNameSpan.textContent = roleName;
+            
+                            // Filtrer les membres dupliqués ici, avant de les passer à toggleMembers
+                            const uniqueMembers = new Map<string, any>();
+                            roleData.members?.forEach((member: any) => {
+                            const spAddress = member.sp_addresses?.[0];
+                            if (spAddress && !uniqueMembers.has(spAddress)) {
+                                uniqueMembers.set(spAddress, member);
+                            }
+                            });
+            
+                        // Créer un nouveau roleData avec les membres uniques
+                            const filteredRoleData = {
+                            ...roleData,
+                            members: Array.from(uniqueMembers.values())
+                            };
+
+            roleContainer.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.toggleMembers(filteredRoleData, roleItem);
+            });
+            
+            roleContainer.appendChild(roleNameSpan);
+            roleItem.appendChild(roleContainer);
+            roleList.appendChild(roleItem);
+        });
+
+        li.appendChild(roleList);
+        groupList.appendChild(li);
+
+
+        // Ajouter un écouteur d'événements pour gérer le clic sur le container
+        container.addEventListener('click', (event) => {
+            event.stopPropagation();
+            container.classList.toggle('expanded');
+            const roleList = container.parentElement?.querySelector('.role-list');
+            const dm = container.parentElement?.querySelector('.dm');
+            
+            if (roleList) {
+                // Si le container est expanded, on montre la liste des rôles
+                if (container.classList.contains('expanded')) {
+                    (roleList as HTMLElement).style.display = 'block';
+                    if (dm) (dm as HTMLElement).style.display = 'block';
+                } else {
+                    // Sinon on cache la liste des rôles
+                    (roleList as HTMLElement).style.display = 'none';
+                    if (dm) (dm as HTMLElement).style.display = 'none';
+                }
+            }
+        });
                 
 
                     }