select_ok_waiting_for_id

src/pages/process/process.ts

@@ -44,6 +44,7 @@ export async function init() {
       console.log('adding process name to list:', processName);
       const opt = new Option(processName);
       opt.value = processName;
+      opt.setAttribute('data-process-id', key);
       element.add(opt);
     }
   }
@@ -226,6 +227,16 @@ function selectOption(e: any) {
   const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
 
   console.log('🚀 ~ selectOption ~ option:', option);
+  if (e.target.dataset.value.includes('messaging')) {
+    const event = new CustomEvent('navigate', {
+      detail: {
+        page: 'chat',
+        processId: option?.getAttribute('data-process-id') || ''
+      }
+    });
+    document.dispatchEvent(event);
+    return;
+  }
   option.setAttribute('selected', '');
   createToken(wrapper, e.target.dataset.value);
   if (input_search.value) {

src/router.ts

@@ -1,5 +1,6 @@
 import '../public/style/4nk.css';
 import { initHeader } from '../src/components/header/header';
+import { initChat } from '../src/pages/chat/chat';
 import Database from './services/database.service';
 import Services from './services/service';
 import { cleanSubscriptions } from './utils/subscription.utils';
@@ -191,3 +192,18 @@ async function injectHeader() {
 }
 
 (window as any).navigate = navigate;
+
+document.addEventListener('navigate', ((e: Event) => {
+  const event = e as CustomEvent<{page: string, processId?: string}>;
+  if (event.detail.page === 'chat') {
+    const container = document.querySelector('.container');
+    if (container) container.innerHTML = '';
+    
+    initChat();
+    
+    const chatElement = document.querySelector('chat-element');
+    if (chatElement) {
+      chatElement.setAttribute('process-id', event.detail.processId || '');
+    }
+  }
+}));