diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts
index 88f354c..5338c01 100755
--- a/src/pages/chat/chat.ts
+++ b/src/pages/chat/chat.ts
@@ -37,6 +37,11 @@ export function initChat() {
 }
 
 class ChatElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['process-id'];
+    }
+
+    private processId: string | null = null;
     private selectedMemberId: string | null = null;
     private messagesMock: any[] = [];
     private dom: Node;
@@ -58,6 +63,10 @@ class ChatElement extends HTMLElement {
         this.messagesMock = messageStore.getMessages();
         this.dom = getCorrectDOM('signature-element');
 
+        // Récupérer le processId depuis l'attribut du composant
+        this.processId = this.getAttribute('process-id');
+        console.log('🔍 Constructor - Process ID from element:', this.processId);
+
         this.shadowRoot!.innerHTML = `
 
         <style>
@@ -115,6 +124,14 @@ class ChatElement extends HTMLElement {
         }) as EventListener);
     }
 
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        console.log(`🔄 Attribute ${name} changed from ${oldValue} to ${newValue}`);
+        if (name === 'process-id' && newValue) {
+            console.log('🔍 Loading chat with new process ID:', newValue);
+            this.loadGroupList(newValue);
+        }
+    }
+
     private initMessageEvents() {
         // Pour le bouton Send
         const sendButton = this.shadowRoot?.querySelector('#send-button');
@@ -390,53 +407,34 @@ class ChatElement extends HTMLElement {
     }
 
 
-    private loadGroupList(): void {
+    private loadGroupList(processId: string): void {
+        console.log('🔍 Loading group list with processId:', processId);
         const groupList = this.shadowRoot?.querySelector('#group-list');
-        if (!groupList) return;
+        if (!groupList) {
+            console.error('❌ Group list element not found');
+            return;
+        }
 
-        groupsMock.forEach(group => {
-            const li = document.createElement('li');
-            li.className = 'group-list-item';
-            
-            // Create a flex container for the name and the icon
-            const container = document.createElement('div');
-            container.className = 'group-item-container';
-            
-            // Span for the process name
-            const nameSpan = document.createElement('span');
-            nameSpan.textContent = group.name;
-            nameSpan.className = 'process-name';
-            
-            // Add click event to show roles
-            nameSpan.addEventListener('click', (event) => {
-                event.stopPropagation();
-                this.toggleRoles(group, li);
-            });
-            
-            // Assemble the elements
-            container.appendChild(nameSpan);
-            li.appendChild(container);
+        // Vider la liste existante
+        groupList.innerHTML = '';
 
-            // Create and append the role list container
-            const roleList = document.createElement('ul');
-            roleList.className = 'role-list';
-            roleList.style.display = 'none';
-
-            // Add roles for this process
-            group.roles.forEach(role => {
-                const roleItem = document.createElement('li');
-                roleItem.className = 'role-item';
-                roleItem.textContent = role.name;
-                roleItem.onclick = (event) => {
-                    event.stopPropagation();
-                    this.toggleMembers(role, roleItem);
-                };
-                roleList.appendChild(roleItem);
-            });
-
-            li.appendChild(roleList);
-            groupList.appendChild(li);
-        });
+        // Créer l'élément pour le processus de messaging
+        const li = document.createElement('li');
+        li.className = 'group-list-item';
+        li.setAttribute('data-process-id', processId);
+        
+        const container = document.createElement('div');
+        container.className = 'group-item-container';
+        
+        const nameSpan = document.createElement('span');
+        nameSpan.textContent = `Messaging Process ${processId}`;
+        nameSpan.className = 'process-name';
+        
+        container.appendChild(nameSpan);
+        li.appendChild(container);
+        groupList.appendChild(li);
+        
+        console.log('✅ Group list item added for process:', processId);
     }
 
 
@@ -555,8 +553,13 @@ class ChatElement extends HTMLElement {
     connectedCallback() {
         this.updateCurrentUserDisplay();
         this.initializeEventListeners();
-        this.loadGroupList();
         
+        if (this.processId) {
+            console.log('🔍 Loading chat with process ID:', this.processId);
+            this.loadGroupList(this.processId);
+        } else {
+            console.error('❌ No process ID found in element attributes');
+        }
         // Si un membre est sélectionné par défaut, charger ses messages
         if (this.selectedMemberId) {
             this.loadMemberChat(this.selectedMemberId);