Merge branch 'test' into dev

public/style/chat.css

@@ -226,15 +226,9 @@ body {
 }
 
 .message-container {
-    max-width: 100%;
-    border-radius: 5px;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    background-color: #f1f1f1;
     display: flex;
-    flex-direction: column;
+    margin: 8px;
 }
-
 .message-container .message {
     align-self: flex-start;
 }
@@ -246,27 +240,27 @@ body {
 }
 
 .message {
-    padding: 12px 18px;
-    background-color: #e1e1e1;
-    border-radius: 15px;
     max-width: 70%;
-    font-size: 16px;
-    line-height: 1.4;
-    margin-bottom: 0%;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    position: relative;
-    display: inline-block;
+    padding: 10px;
+    border-radius: 12px;
+    background:var(--secondary-color);
+    margin: 2px 0;
 }
 
 /* Messages de l'utilisateur */
 .message.user {
-    background-color: #3498db;
+    background: #2196f3;
     color: white;
-    align-self: flex-end;
-    text-align: right;
 }
 
+.message-time {
+    font-size: 0.7em;
+    opacity: 0.7;
+    margin-left: 0px;
+    margin-top: 5px;
+}
+
+
 /* Amélioration de l'esthétique des messages */
 /* .message.user:before {
     content: '';

src/pages/process/process.ts

@@ -36,23 +36,39 @@ export async function init() {
   search_div.appendChild(autocomplete_list);
   search_div.appendChild(dropdown_icon);
 
-  // This is temporary
-  // Create a new process with hardcoded members for demonstration purpose
-  await createMessagingProcess();
+  const processes = await getProcesses();
 
-  setTimeout(async () => {
-    const processes = await getProcesses();
-    for (const {key, value} of processes) {
+  for (const {key, value} of processes) {
+    const processName = await getDescription(key, value);
+    if (processName) {
+      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);
+    }
+  }
+  const { autocomplete_options } = getOptions(element);
+
+  if (autocomplete_options.length === 0) {
+    console.log('No existing processes - creating new messaging process');
+    await createMessagingProcess();
+
+    const updatedProcesses = await getProcesses();
+    for (const {key, value} of updatedProcesses) {
       const processName = await getDescription(key, value);
-      // const processName = value['description'];
       if (processName) {
-        console.log('adding process name to list:', processName);
+        console.log('adding new process to list:', processName);
         const opt = new Option(processName);
         opt.value = processName;
+        opt.setAttribute('data-process-id', key);
         element.add(opt);
       }
     }
-  }, 1000)
+  } else {
+    console.log('Existing processes found - skipping messaging creation');
+  }
+
   // set the wrapper as child (instead of the element)
   element.parentNode?.replaceChild(wrapper, element);
   // set element as child of wrapper
@@ -60,15 +76,6 @@ export async function init() {
   wrapper.appendChild(search_div);
 
   addPlaceholder(wrapper);
-
-  //   const select = document.querySelector(".select-field");
-  //   for (const process of processeList) {
-  //     const option = document.createElement("option");
-  //     option.setAttribute("value", process.name);
-  //     option.innerText = process.name;
-
-  //     select.appendChild(option);
-  //   }
 }
 
 function removePlaceholder(wrapper: HTMLElement) {
@@ -184,12 +191,33 @@ 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) options_to_show = autocomplete_options;
-  else options_to_show = autocomplete(query, autocomplete_options);
+  if (dropdown) {
+    let messagingCounter = 1;
+    const messagingOptions = select.querySelectorAll('option[value="messaging"]');
+    
+    options_to_show = autocomplete_options.map(option => {
+      if (option === 'messaging') {
+        // Récupérer l'élément option correspondant au compteur actuel
+        const currentOption = messagingOptions[messagingCounter - 1];
+        const processId = currentOption?.getAttribute('data-process-id');
+        console.log(`Mapping messaging ${messagingCounter} with processId:`, processId);
+        
+        const optionText = `messaging ${messagingCounter}`;
+        messagingCounter++;
+        
+        // Stocker le processId dans un attribut data sur le select
+        select.setAttribute(`data-messaging-id-${messagingCounter - 1}`, processId || '');
+        
+        return optionText;
+      }
+      return option;
+    });
+  } else {
+    options_to_show = autocomplete(query, autocomplete_options);
+  }
 
   const wrapper = select.parentNode;
   const input_search = wrapper?.querySelector('.search-container');
@@ -225,12 +253,44 @@ function populateAutocompleteList(select: HTMLSelectElement, query: string, drop
 
 // Listener to autocomplete results when clicked set the selected property in the select option
 function selectOption(e: any) {
-  console.log('🚀 ~ selectOption ~ e:', e);
+  console.log('🎯 Click event:', e);
+  console.log('🎯 Target value:', e.target.dataset.value);
+  
   const wrapper = e.target.parentNode.parentNode.parentNode;
+  const select = wrapper.querySelector('select');
   const input_search = wrapper.querySelector('.selected-input');
   const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
+  
+  console.log('🎯 Selected option:', option);
+  console.log('🎯 Process ID:', option?.getAttribute('data-process-id'));
 
-  console.log('🚀 ~ selectOption ~ option:', option);
+  if (e.target.dataset.value.includes('messaging')) {
+    const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
+    const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
+    
+    console.log('🚀 Dispatching newMessagingProcess event:', {
+      processId,
+      processName: `Messaging Process ${processId}`
+    });
+
+    // 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(navigateEvent);
+    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 || '');
+    }
+  }
+}));

src/services/service.ts

@@ -11,7 +11,7 @@ import { BackUp } from '~/models/backup.model';
 
 export const U32_MAX = 4294967295;
 
-const storageUrl = `https://demo.4nkweb.com/storage`;
+const storageUrl = `/storage`;
 const BOOTSTRAPURL = [`https://demo.4nkweb.com/ws/`];
 const DEFAULTAMOUNT = 1000n;
 

vite.config.ts

@@ -55,8 +55,27 @@ export default defineConfig({
   },
   server: {
     fs: {
-      cachedChecks: false
+      cachedChecks: false,
     },
     port: 3001,
+    proxy: {
+      '/storage': {
+        target: 'https://demo.4nkweb.com',
+        changeOrigin: true,
+        secure: false,
+        rewrite: (path) => path.replace(/^\/storage/, '/storage'),
+        configure: (proxy, _options) => {
+          proxy.on('error', (err, _req, _res) => {
+            console.log('proxy error', err);
+          });
+          proxy.on('proxyReq', (proxyReq, req, _res) => {
+            console.log('Sending Request:', req.method, req.url);
+          });
+          proxy.on('proxyRes', (proxyRes, req, _res) => {
+            console.log('Received Response:', proxyRes.statusCode, req.url);
+          });
+        }
+      }
+    }
   },
 });