load_ok

src/pages/chat/chat.ts

@@ -108,6 +108,11 @@ class ChatElement extends HTMLElement {
         });
         this.initMessageEvents();
         this.initFileUpload();
+
+        document.addEventListener('newMessagingProcess', ((event: CustomEvent) => {
+            console.log('🎯 Received newMessagingProcess event:', event.detail);
+            this.addNewMessagingProcess(event.detail.processId, event.detail.processName);
+        }) as EventListener);
     }
 
     private initMessageEvents() {
@@ -557,6 +562,56 @@ class ChatElement extends HTMLElement {
             this.loadMemberChat(this.selectedMemberId);
         }
     }
+
+    private addNewMessagingProcess(processId: string, processName: string) {
+        console.log('🎯 Adding new messaging process:', { processId, processName });
+        const groupList = this.shadowRoot?.querySelector('#group-list');
+        if (!groupList) {
+            console.error('Group list not found in shadow DOM');
+            return;
+        }
+
+        // Vérifier si le processus existe déjà
+        const existingProcess = groupList.querySelector(`[data-process-id="${processId}"]`);
+        if (existingProcess) {
+            console.log('Process already exists:', processId);
+            return;
+        }
+
+        // Créer le nouveau groupe
+        const li = document.createElement('li');
+        li.className = 'group-list-item';
+        li.setAttribute('data-process-id', processId);
+        
+        // Créer le conteneur flex
+        const container = document.createElement('div');
+        container.className = 'group-item-container';
+        
+        // Span pour le nom du processus
+        const nameSpan = document.createElement('span');
+        nameSpan.textContent = processName;
+        nameSpan.className = 'process-name';
+        
+        // Assembler les éléments
+        container.appendChild(nameSpan);
+        li.appendChild(container);
+
+        // Créer la liste des rôles
+        const roleList = document.createElement('ul');
+        roleList.className = 'role-list';
+        roleList.style.display = 'none';
+        
+        // Ajouter un rôle par défaut pour le messaging
+        const roleItem = document.createElement('li');
+        roleItem.className = 'role-item';
+        roleItem.textContent = 'Messaging';
+        roleList.appendChild(roleItem);
+
+        li.appendChild(roleList);
+        groupList.appendChild(li);
+        
+        console.log('🎯 New messaging process added successfully');
+    }
 }
 
 customElements.define('chat-element', ChatElement);

src/pages/process/process.ts

@@ -171,24 +171,26 @@ function clearAutocompleteList(select: HTMLSelectElement) {
 // Populate the autocomplete list following a given query from the user
 function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
   const { autocomplete_options } = getOptions(select);
-  console.log('🚀 ~ populateAutocompleteList ~ autocomplete_options:', autocomplete_options);
 
   let options_to_show;
 
   if (dropdown) {
     let messagingCounter = 1;
-    const messagingOptions = autocomplete_options.filter(option => option === 'messaging');
+    const messagingOptions = select.querySelectorAll('option[value="messaging"]');
     
     options_to_show = autocomplete_options.map(option => {
       if (option === 'messaging') {
-        const allMessagingOptions = select.querySelectorAll('option[value="messaging"]');
+        // Récupérer l'élément option correspondant au compteur actuel
-        const currentMessagingOption = allMessagingOptions[messagingCounter - 1];
+        const currentOption = messagingOptions[messagingCounter - 1];
-        const processId = currentMessagingOption?.getAttribute('data-process-id');
+        const processId = currentOption?.getAttribute('data-process-id');
-        const optionText = `messaging ${messagingCounter}`;
+        console.log(`Mapping messaging ${messagingCounter} with processId:`, processId);
         
-        // Stocker le processId avec son index spécifique
+        const optionText = `messaging ${messagingCounter}`;
-        select.setAttribute(`data-messaging-id-${messagingCounter}`, processId || '');
         messagingCounter++;
+        
+        // Stocker le processId dans un attribut data sur le select
+        select.setAttribute(`data-messaging-id-${messagingCounter - 1}`, processId || '');
+        
         return optionText;
       }
       return option;
@@ -246,18 +248,27 @@ function selectOption(e: any) {
     const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
     const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
     
-    console.log('🎯 Navigating to chat with process:', {
+    console.log('🚀 Dispatching newMessagingProcess event:', {
-      value: e.target.dataset.value,
+      processId,
-      processId: processId
+      processName: `Messaging Process ${processId}`
     });
 
-    const event = new CustomEvent('navigate', {
+    // Dispatch l'événement avant la navigation
+    document.dispatchEvent(new CustomEvent('newMessagingProcess', {
+      detail: {
+        processId: processId,
+        processName: `Messaging Process ${processId}`
+      }
+    }));
+    
+    // Navigation vers le chat
+    const navigateEvent = new CustomEvent('navigate', {
       detail: {
         page: 'chat',
         processId: processId || ''
       }
     });
-    document.dispatchEvent(event);
+    document.dispatchEvent(navigateEvent);
     return;
   }
   option.setAttribute('selected', '');