declare global { interface Window { loadMemberChat: (memberId: string | number) => void; } } import { membersMock } from '../../mocks/mock-signature/membersMocks'; import { ApiReturn, Device, Member, Process, RoleDefinition } from '../../../pkg/sdk_client'; import { getCorrectDOM } from '../../utils/document.utils'; import chatStyle from '../../../public/style/chat.css?inline'; import { addressToEmoji } from '../../utils/sp-address.utils'; import Database from '../../services/database.service'; import Services from '../../services/service'; const storageUrl = `/storage`; interface LocalNotification { memberId: string; text: string; time: string; } export function initChat() { const chatElement = document.createElement('chat-element'); const container = document.querySelector('.container'); if (container) { container.appendChild(chatElement); } } class ChatElement extends HTMLElement { static get observedAttributes() { return ['process-id']; } private processId: string | null = null; private processRoles: any | null = null; private selectedMember: string | null = null; private notifications: LocalNotification[] = []; private notificationBadge = document.querySelector('.notification-badge'); private notificationBoard = document.getElementById('notification-board'); private notificationBell = document.getElementById('notification-bell'); private allMembers = membersMock.map(member => ({ id: member.id, name: member.name, roleName: 'Default Role' })); private messageState: number = 0; private selectedRole: string | null = null; private userProcessSet: Set = new Set(); private addressMap: Record = {}; // map each address to its pairing process id constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot!.innerHTML = `

Signature

Description

Documents

`; window.loadMemberChat = async (memberId: string | number) => { if (typeof memberId === 'string') { return await this.loadMemberChat(memberId); } else { console.error('Invalid memberId type. Expected string, got number.'); } }; document.addEventListener('DOMContentLoaded', () => { this.notificationBadge = document.querySelector('.notification-badge'); this.notificationBoard = document.getElementById('notification-board'); this.notificationBell = document.getElementById('notification-bell'); if (!this.notificationBadge || !this.notificationBoard || !this.notificationBell) { console.error('Notification elements not found'); } }); // Initialiser les événements de notification document.addEventListener('click', (event: Event): void => { if (this.notificationBoard && this.notificationBoard.style.display === 'block' && !this.notificationBoard.contains(event.target as Node) && this.notificationBell && !this.notificationBell.contains(event.target as Node)) { this.notificationBoard.style.display = 'none'; } }); this.initMessageEvents(); } 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.loadGroupListFromAProcess(newValue); } } private initMessageEvents() { const sendButton = this.shadowRoot?.querySelector('#send-button'); if (sendButton) { sendButton.addEventListener('click', () => { this.sendMessage(); setTimeout(() => this.reloadMemberChat(this.selectedMember), 500); }); } const messageInput = this.shadowRoot?.querySelector('#message-input'); if (messageInput) { messageInput.addEventListener('keypress', (event: Event) => { const keyEvent = event as KeyboardEvent; if (keyEvent.key === 'Enter' && !keyEvent.shiftKey) { event.preventDefault(); this.sendMessage(); setTimeout(() => this.reloadMemberChat(this.selectedMember), 500); } }); } const fileInput = this.shadowRoot?.querySelector('#file-input') as HTMLInputElement; if (fileInput) { fileInput.addEventListener('change', (event: Event) => { const target = event.target as HTMLInputElement; if (target.files && target.files.length > 0) { this.sendFile(target.files[0]); } }); } } ///////////////////// Notification module ///////////////////// // Delete a notification private removeNotification(index: number) { this.notifications?.splice(index, 1); // Ajout de ?. this.renderNotifications(); this.updateNotificationBadge(); } // Show notifications private renderNotifications() { if (!this.notificationBoard) return; // Reset the interface this.notificationBoard.innerHTML = ''; // Displays "No notifications available" if there are no notifications if (this.notifications.length === 0) { this.notificationBoard.innerHTML = '
No notifications available
'; return; } // Add each notification to the list this.notifications.forEach((notif, index) => { const notifElement = document.createElement('div'); notifElement.className = 'notification-item'; notifElement.textContent = `${notif.text} at ${notif.time}`; notifElement.onclick = async () => { await this.loadMemberChat(notif.memberId); await this.removeNotification(index); }; this.notificationBoard?.appendChild(notifElement); }); } private updateNotificationBadge() { if (!this.notificationBadge) return; const count = this.notifications.length; this.notificationBadge.textContent = count > 99 ? '+99' : count.toString(); (this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none'; } // Add notification private async addNotification(memberId: string, message: any) { try { // Obtenir l'emoji à partir du Pairing Process const pairingProcess = await this.getPairingProcess(memberId); const memberEmoji = await addressToEmoji(pairingProcess); // Obtenir le processus et le rôle const processId = this.getAttribute('process-id'); const processEmoji = processId ? await addressToEmoji(processId) : '📝'; // Trouver le rôle du membre const member = this.allMembers.find(m => String(m.id) === memberId); const role = message.metadata?.roleName || 'Member'; // Déterminer le texte de la notification let notificationText = ''; if (message.type === 'file') { notificationText = `${memberEmoji} (${role}) in ${processEmoji}: New file - ${message.fileName}`; } else { notificationText = `${memberEmoji} (${role}) in ${processEmoji}: ${message.metadata.text}`; } // Créer la notification const notification = { memberId, text: notificationText, time: new Date(message.metadata.timestamp).toLocaleString('fr-FR') }; // Ajouter la notification et mettre à jour l'interface this.notifications.push(notification); this.renderNotifications(); this.updateNotificationBadge(); } catch (error) { console.error('Error creating notification:', error); } } private async sendMessage() { const messageInput = this.shadowRoot?.querySelector('#message-input') as HTMLInputElement; if (!messageInput || !this.selectedMember) { console.error('❌ Missing message input or selected member'); return; } if (!this.processId) { console.error('no process id set'); return; } const messageText = messageInput.value.trim(); if (messageText === '') { console.error('❌ Empty message'); return; } try { const service = await Services.getInstance(); const myAddresses = await service.getMemberFromDevice(); if (!myAddresses) throw new Error('No paired member found'); const timestamp = Date.now(); const message = { state: this.messageState, type: 'text', content: messageText, metadata: { createdAt: timestamp, lastModified: timestamp, sender: myAddresses, recipient: this.selectedMember, } }; console.log("----this.processId",this.processId ); const process = await service.getProcess(this.processId); if (!process) { console.error('Failed to retrieve process from DB'); return; } else { console.log(process); } const processTip = process.states[process.states.length - 1].commited_in; console.log(processTip); // We take the last commited state and copy all values const lastCommitedState = process.states.findLast( state => state.commited_in !== processTip ); if (!lastCommitedState) { console.error('Failed to find last commited state'); return; } else { console.log(lastCommitedState); } let newState = {}; // fetch all the values from diff for (const [attribute, hash] of Object.entries(lastCommitedState.pcd_commitment)) { const value = await service.getDiffByValue(hash); newState[attribute] = value.new_value; } newState.message = message; // Now we create a new state for the dm process const apiReturn = service.updateProcess(this.processId, newState); const updatedProcess = apiReturn.updated_process.current_process; const newStateId = updatedProcess.states[updatedProcess.states.length - 2 ].state_id; // We take the last concurrent state, just before the tip await service.handleApiReturn(apiReturn); const createPrdReturn = service.createPrdUpdate(this.processId, newStateId); await service.handleApiReturn(createPrdReturn); // Now we validate the new state const approveChangeReturn = service.approveChange(this.processId, newStateId); await service.handleApiReturn(approveChangeReturn); } catch (error) { console.error('❌ Error in sendMessage:', error); } } private scrollToBottom(container: Element) { (container as HTMLElement).scrollTop = (container as HTMLElement).scrollHeight; } // Get the diff by state id async getDiffByStateId(stateId: string) { try { const database = await Database.getInstance(); const diff = await database.requestStoreByIndex('diffs', 'byStateId', stateId); return diff; } catch (error) { console.error('Error getting diff by state id:', error); } } private async lookForChildren(): Promise { // Filter processes for the children of current process const service = await Services.getInstance(); if (!this.processId) { console.error('No process id'); return null; } const children: string[] = await service.getChildrenOfProcess(this.processId); const processRoles = this.processRoles; const selectedMember = this.selectedMember; for (const child of children) { const roles = await this.getRoles(JSON.parse(child)); // Check that we and the other members are in the role if (!service.isChildRole(processRoles, roles)) { console.error('Child process roles are not a subset of parent') continue; } if (!service.rolesContainsMember(roles, selectedMember)) { console.error('Member is not part of the process'); continue; } if (!service.rolesContainsUs(roles)) { console.error('We\'re not part of child process'); continue; } return child; } return null; } private async loadAllMembers() { console.log('🎯 Loading all members'); const groupList = this.shadowRoot?.querySelector('#group-list'); if (!groupList) return; const service = await Services.getInstance(); const members = await service.getAllMembers(); console.log("MEMBERS: ", members); const memberList = document.createElement('div'); memberList.className = 'member-list active'; for (const [processId, member] of Object.entries(members)) { const memberItem = document.createElement('li'); memberItem.className = 'member-item'; const memberContainer = document.createElement('div'); memberContainer.className = 'member-container'; const emojiSpan = document.createElement('span'); emojiSpan.className = 'member-emoji'; const emojis = await addressToEmoji(processId); emojiSpan.textContent = `Member : ${emojis}`; memberContainer.appendChild(emojiSpan); memberItem.appendChild(memberContainer); memberList.appendChild(memberItem); memberItem.addEventListener('click', async () => { try { await this.loadMemberChat(processId); } catch (error) { console.error('Error loading member chat:', error); } }); } groupList.appendChild(memberList); } private async lookForDmProcess(): Promise { // Filter processes for the children of current process const service = await Services.getInstance(); const processes = await service.getProcesses(); const memberAddresses = await service.getAddressesForMemberId(this.selectedMember); const recipientAddresses = memberAddresses.sp_addresses; for (const [processId, process] of Object.entries(processes)) { const description = await service.getDescription(processId, process); console.log('Process description:', description); if (description !== "dm") { continue; } const roles = await this.getRoles(process); if (!service.rolesContainsMember(roles, recipientAddresses)) { console.error('Member is not part of the process'); continue; } if (!service.rolesContainsUs(roles)) { console.error('We\'re not part of child process'); continue; } return processId; } return null; } private async loadMemberChat(pairingProcess: string) { try { const service = await Services.getInstance(); const myAddresses = await service.getMemberFromDevice(); if (!myAddresses) { console.error('No paired member found'); return; } // Set the selected member this.selectedMember = pairingProcess; console.log("SELECTED MEMBER: ", this.selectedMember); const chatHeader = this.shadowRoot?.querySelector('#chat-header'); const messagesContainer = this.shadowRoot?.querySelector('#messages'); if (!chatHeader || !messagesContainer) return; const emojis = await addressToEmoji(pairingProcess); chatHeader.textContent = `Chat with ${emojis}`; messagesContainer.innerHTML = ''; let dmProcessId = await this.lookForDmProcess(); if (dmProcessId === null) { console.log('Create a new dm process'); // We need to create a new process try { const memberAddresses = await service.getAddressesForMemberId(this.selectedMember); console.log("MEMBER ADDRESSES: ", memberAddresses); // await service.checkConnections(otherMembers); const res = await service.createDmProcess(memberAddresses.sp_addresses); // We catch the new process here const updatedProcess = res.updated_process?.current_process; const processId = updatedProcess?.states[0]?.commited_in; const stateId = updatedProcess?.states[0]?.state_id; await service.handleApiReturn(res); setTimeout(async () => { // Now create a first commitment console.log('Created a dm process', processId); this.processId = processId; const createPrdReturn = await service.createPrdUpdate(processId, stateId); console.log(createPrdReturn); await service.handleApiReturn(createPrdReturn); const approveChangeReturn = service.approveChange(processId, stateId); console.log(approveChangeReturn); await service.handleApiReturn(approveChangeReturn); }, 500); } catch (e) { console.error(e); return; } // while (dmProcessId === null) { // dmProcessId = await this.lookForDmProcess(); // await new Promise(r => setTimeout(r, 1000)); // } } else { console.log('Found DM process', dmProcessId); this.processId = dmProcessId; } /* TODO console.log("Je suis messagesProcess", messagesProcess); // --- GET THE STATE ID --- const messagesProcessStateId = messagesProcess?.states?.[0]?.state_id; console.log("Je suis messagesProcessStateId", messagesProcessStateId); // --- GET THE DIFF FROM THE STATE ID --- if (messagesProcessStateId) { const diffFromStateId = await this.getDiffByStateId(messagesProcessStateId); console.log("Je suis diffFromStateId", diffFromStateId); }*/ // Récupérer les messages depuis les états du processus const allMessages: any[] = []; const dmProcess = await service.getProcess(dmProcessId); console.log(dmProcess); if (dmProcess?.states) { for (const state of dmProcess.states) { const pcd_commitment = state.pcd_commitment; if (pcd_commitment) { const message_hash = pcd_commitment.message; if (message_hash) { const diff = await service.getDiffByValue(message_hash); const message = diff?.new_value; if (message === "" || message === undefined) { continue; } console.log('message', message); allMessages.push(message); } } } } allMessages.sort((a, b) => a.metadata.createdAt - b.metadata.createdAt); if (allMessages.length > 0) { console.log('Messages found:', allMessages); for (const message of allMessages) { const messageElement = document.createElement('div'); messageElement.className = 'message-container'; const isCurrentUser = message.metadata.sender === myAddresses[0]; messageElement.style.justifyContent = isCurrentUser ? 'flex-end' : 'flex-start'; const messageContent = document.createElement('div'); messageContent.className = `message ${isCurrentUser ? 'user' : ''}`; console.log("SENDER: ", message.metadata.sender); const pairingProcess = await this.getMyProcessId(); const senderEmoji = await addressToEmoji(pairingProcess); if (message.type === 'file') { let fileContent = ''; if (message.content.type.startsWith('image/')) { fileContent = `
Image
`; } else { const blob = this.base64ToBlob(message.content.data, message.content.type); const url = URL.createObjectURL(blob); fileContent = `
📎 ${message.content.name}
`; } messageContent.innerHTML = `
${senderEmoji}: ${fileContent}
${new Date(message.metadata.createdAt).toLocaleString('fr-FR')}
`; } else { messageContent.innerHTML = `
${senderEmoji}: ${message.content}
${new Date(message.metadata.createdAt).toLocaleString('fr-FR')}
`; } messageElement.appendChild(messageContent); messagesContainer.appendChild(messageElement); } this.scrollToBottom(messagesContainer); } else { console.log('No messages found'); } this.scrollToBottom(messagesContainer); } catch (error) { console.error('❌ Error in loadMemberChat:', error); } } private async reloadMemberChat(pairingProcess: string) { try { const service = await Services.getInstance(); const myAddresses = await service.getMemberFromDevice(); if (!myAddresses) { console.error('No paired member found'); return; } const messagesContainer = this.shadowRoot?.querySelector('#messages'); if (!messagesContainer) return; const emojis = await addressToEmoji(pairingProcess); messagesContainer.innerHTML = ''; let dmProcessId = await this.processId; // Récupérer les messages depuis les états du processus const allMessages: any[] = []; const dmProcess = await service.getProcess(dmProcessId); console.log(dmProcess); if (dmProcess?.states) { for (const state of dmProcess.states) { const pcd_commitment = state.pcd_commitment; if (pcd_commitment) { const message_hash = pcd_commitment.message; if (message_hash) { const diff = await service.getDiffByValue(message_hash); const message = diff?.new_value; if (message === "" || message === undefined) { continue; } console.log('message', message); allMessages.push(message); } } } } allMessages.sort((a, b) => a.metadata.createdAt - b.metadata.createdAt); if (allMessages.length > 0) { console.log('Messages found:', allMessages); for (const message of allMessages) { const messageElement = document.createElement('div'); messageElement.className = 'message-container'; const isCurrentUser = message.metadata.sender === myAddresses[0]; messageElement.style.justifyContent = isCurrentUser ? 'flex-end' : 'flex-start'; const messageContent = document.createElement('div'); messageContent.className = `message ${isCurrentUser ? 'user' : ''}`; console.log("SENDER: ", message.metadata.sender); const pairingProcess = await this.getMyProcessId(); const senderEmoji = await addressToEmoji(pairingProcess); if (message.type === 'file') { let fileContent = ''; if (message.content.type.startsWith('image/')) { fileContent = `
Image
`; } else { const blob = this.base64ToBlob(message.content.data, message.content.type); const url = URL.createObjectURL(blob); fileContent = `
📎 ${message.content.name}
`; } messageContent.innerHTML = `
${senderEmoji}: ${fileContent}
${new Date(message.metadata.createdAt).toLocaleString('fr-FR')}
`; } else { messageContent.innerHTML = `
${senderEmoji}: ${message.content}
${new Date(message.metadata.createdAt).toLocaleString('fr-FR')}
`; } messageElement.appendChild(messageContent); messagesContainer.appendChild(messageElement); } this.scrollToBottom(messagesContainer); } else { console.log('No messages found'); } this.scrollToBottom(messagesContainer); } catch (error) { console.error('❌ Error in loadMemberChat:', error); } } private base64ToBlob(base64: string, type: string): Blob { const byteCharacters = atob(base64.split(',')[1]); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += 512) { const slice = byteCharacters.slice(offset, offset + 512); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } return new Blob(byteArrays, { type: type }); } //To get a map with key: sp address, value: pairing process async getAddressMap() { const service = await Services.getInstance(); const allMembers = await service.getAllMembers(); const addressMap: Record = {}; for (const [key, values] of Object.entries(allMembers)) { if (values.sp_addresses) { for (let value of values.sp_addresses) { this.addressMap[value] = key; } } else { console.log(`No sp_addresses array found for key "${key}"`); } } return this.addressMap; } async findProcessIdFromAddresses(addresses: string[]): Promise { console.log('Addresses to find:', addresses); const service = await Services.getInstance(); const allMembers = await service.getAllMembers(); console.log('Available members:', allMembers); const sortedAddresses = [...addresses].sort(); for (const [key, value] of Object.entries(allMembers)) { if (value.sp_addresses && value.sp_addresses.length === sortedAddresses.length) { const sortedValue = [...value.sp_addresses].sort(); if (sortedValue.every((val, index) => val === sortedAddresses[index])) { return key; } } } return null; } private async toggleMembers(roleData: any, roleElement: HTMLElement) { console.log('Toggle members called with roleData:', roleData); let memberList = roleElement.querySelector('.member-list'); const roleName = roleElement.querySelector('.role-name')?.textContent || ''; if (memberList) { console.log('Existing memberList found, toggling display'); (memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none'; return; } console.log('Creating new memberList'); memberList = document.createElement('ul'); memberList.className = 'member-list'; if (roleData.members) { console.log('Members found:', roleData.members); for (const member of roleData.members) { console.log('Processing member:', member); const memberItem = document.createElement('li'); memberItem.className = 'member-item'; const memberContainer = document.createElement('div'); memberContainer.className = 'member-container'; const emojiSpan = document.createElement('span'); emojiSpan.className = 'member-emoji'; const currentPairingProcess = await this.findProcessIdFromAddresses(member.sp_addresses); console.log('PairingProcess:', currentPairingProcess); if (currentPairingProcess) { const emojis = await addressToEmoji(currentPairingProcess); console.log('Adresse pairée:', emojis); emojiSpan.textContent = emojis; // Stocker le pairingProcess dans un attribut data- memberItem.setAttribute('data-pairing-process', currentPairingProcess); } else { const emojis = await addressToEmoji(member.sp_addresses[0]); emojiSpan.textContent = emojis; memberItem.setAttribute('data-pairing-process', member.sp_addresses[0]); } memberContainer.appendChild(emojiSpan); memberItem.appendChild(memberContainer); memberItem.onclick = async (event) => { event.stopPropagation(); try { const pairingProcess = memberItem.getAttribute('data-pairing-process'); if (pairingProcess) { await this.loadMemberChat(pairingProcess); } } catch (error) { console.error('❌ Error handling member click:', error); } }; memberList.appendChild(memberItem); } } else { console.log('No members found in roleData'); } roleElement.appendChild(memberList); } async getRoles(process: Process): Promise { const service = await Services.getInstance(); // Get the `commited_in` value of the last state and remove it from the array const currentCommitedIn = process.states.pop()?.commited_in; if (currentCommitedIn === undefined) { return null; // No states available } // Find the last state where `commited_in` is different let lastDifferentState = process.states.findLast( state => state.commited_in !== currentCommitedIn ); if (!lastDifferentState) { // It means that we only have one state that is not commited yet, that can happen with process we just created // let's assume that the right description is in the last concurrent state and not handle the (arguably rare) case where we have multiple concurrent states on a creation lastDifferentState = process.states.pop(); } if (!lastDifferentState || !lastDifferentState.pcd_commitment) { return null; } console.log('lastDifferentState (roles):', lastDifferentState); // Take the roles out of the state const roles = lastDifferentState!.pcd_commitment['roles']; if (roles) { const userDiff = await service.getDiffByValue(roles); if (userDiff) { console.log("Successfully retrieved userDiff:", userDiff); return userDiff.new_value; } else { console.log("Failed to retrieve a non-null userDiff."); } } return null; } private async switchTab(tabType: string, tabs: NodeListOf) { // Mettre à jour les classes des onglets tabs.forEach(tab => { tab.classList.toggle('active', tab.getAttribute('data-tab') === tabType); }); // Supprimer le contenu existant sauf les onglets const groupList = this.shadowRoot?.querySelector('#group-list'); if (!groupList) return; const children = Array.from(groupList.children); children.forEach(child => { if (!child.classList.contains('tabs')) { groupList.removeChild(child); } }); // Charger le contenu approprié switch (tabType) { case 'processes': const processSet = await this.getProcessesWhereTheCurrentMemberIs(); await this.loadAllProcesses(processSet); break; case 'members': this.loadAllMembers(); break; default: console.error('Unknown tab type:', tabType); } } private async loadAllProcesses(processSet: Set) { console.log('🎯 Loading all processes'); console.log("Je suis le processSet dans loadAllProcesses :", processSet); this.closeSignature(); const dbRequest = indexedDB.open('4nk'); return new Promise((resolve, reject) => { dbRequest.onerror = (event) => { console.error('❌ Error opening database:', dbRequest.error); reject(dbRequest.error); }; dbRequest.onsuccess = async (event) => { const db = dbRequest.result; const transaction = db.transaction(['processes'], 'readonly'); const store = transaction.objectStore('processes'); const request = store.getAll(); request.onsuccess = () => { const processResult = request.result; console.log('🎯 Processed result:', processResult); // Afficher les processus dans le container #group-list const groupList = this.shadowRoot?.querySelector('#group-list'); if (!groupList) { console.warn('⚠️ Group list element not found'); return; } groupList.innerHTML = ''; const tabContent = document.createElement('div'); tabContent.className = 'tabs'; tabContent.innerHTML = ` `; groupList.appendChild(tabContent); // Ajouter les event listeners const tabs = tabContent.querySelectorAll('.tab'); tabs.forEach(tab => { tab.addEventListener('click', () => { const tabType = tab.getAttribute('data-tab'); if (tabType) { this.switchTab(tabType, tabs); } }); }); //trier les processus : ceux de l'utilisateur en premier processResult.sort((a, b) => { const aInSet = this.userProcessSet.has(a.states[0].commited_in); const bInSet = this.userProcessSet.has(b.states[0].commited_in); return bInSet ? 1 : aInSet ? -1 : 0; }); for (const process of processResult) { const li = document.createElement('li'); li.className = 'group-list-item'; const oneProcess = process.states[0].commited_in; const roles = process.states[0].encrypted_pcd.roles; // Si le processus est dans notre Set, ajouter la classe my-process if (this.userProcessSet && this.userProcessSet.has(oneProcess)) { li.style.cssText = ` background-color: var(--accent-color); transition: background-color 0.3s ease; cursor: pointer; `; li.onmouseover = () => { li.style.backgroundColor = 'var(--accent-color-hover)'; }; li.onmouseout = () => { li.style.backgroundColor = 'var(--accent-color)'; }; console.log("✅ Processus trouvé dans le set:", oneProcess); } li.setAttribute('data-process-id', oneProcess); li.onclick = async (event) => { event.stopPropagation(); console.log("CLICKED ON PROCESS:", oneProcess); //viser le h1 de signature-header const signatureHeader = this.shadowRoot?.querySelector('.signature-header h1'); if (signatureHeader) { const emoji = await addressToEmoji(oneProcess); signatureHeader.textContent = `Signature of ${emoji}`; } this.openSignature(); //afficher les roles dans chaque processus console.log('🎯 Roles de signature:', roles); await this.loadAllRolesAndMembersInSignature(roles); }; groupList.appendChild(li); const container = document.createElement('div'); container.className = 'group-item-container'; const nameSpan = document.createElement('span'); nameSpan.textContent = `Process : `; nameSpan.className = 'process-name'; container.appendChild(nameSpan); addressToEmoji(oneProcess).then(emojis => { const emojiSpan = document.createElement('span'); emojiSpan.className = 'process-emoji'; emojiSpan.textContent = emojis; container.appendChild(emojiSpan); }); li.appendChild(container); // afficher les roles dans chaque processus //console.log('🎯 Roles:', roles); const roleList = document.createElement('ul'); roleList.className = 'role-list'; (roleList as HTMLElement).style.display = 'none'; // 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(); 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', async (event) => { console.log("CLICKED ON ROLE:", roleName); event.stopPropagation(); await this.toggleMembers(filteredRoleData, roleItem); }); roleContainer.appendChild(roleNameSpan); roleItem.appendChild(roleContainer); roleList.appendChild(roleItem); }); li.appendChild(roleList); groupList.appendChild(li); container.addEventListener('click', (event) => { event.stopPropagation(); container.classList.toggle('expanded'); roleList.style.display = container.classList.contains('expanded') ? 'block' : 'none'; }); } resolve(processResult); }; request.onerror = () => { console.error('❌ Error getting processes:', request.error); reject(request.error); }; }; }); } private async loadAllRolesAndMembersInSignature(roles: any) { console.log('🎯 Roles:', roles); const signatureDescription = this.shadowRoot?.querySelector('.signature-description'); if (signatureDescription) { signatureDescription.innerHTML = ''; Object.entries(roles).forEach(([roleName, roleData]: [string, any]) => { const roleItem = document.createElement('li'); roleItem.className = 'role-signature'; const roleContainer = document.createElement('div'); roleContainer.className = 'role-signature-container'; const roleNameSpan = document.createElement('span'); roleNameSpan.className = 'role-signature-name'; roleNameSpan.textContent = roleName; const uniqueMembers = new Map(); roleData.members?.forEach((member: any) => { const spAddress = member.sp_addresses?.[0]; if (spAddress && !uniqueMembers.has(spAddress)) { uniqueMembers.set(spAddress, member); } }); const filteredRoleData = { ...roleData, members: Array.from(uniqueMembers.values()) }; roleContainer.addEventListener('click', async (event) => { console.log("CLICKED ON ROLE:", roleName); event.stopPropagation(); await this.toggleMembers(filteredRoleData, roleItem); }); roleContainer.appendChild(roleNameSpan); roleItem.appendChild(roleContainer); signatureDescription.appendChild(roleItem); }); } } //fonction qui ferme la signature private closeSignature() { const closeSignature = this.shadowRoot?.querySelector('#close-signature'); const signatureArea = this.shadowRoot?.querySelector('.signature-area'); if (closeSignature && signatureArea) { closeSignature.addEventListener('click', () => { signatureArea.classList.add('hidden'); }); } } //fonction qui ouvre la signature private openSignature() { const signatureArea = this.shadowRoot?.querySelector('.signature-area'); if (signatureArea) { signatureArea.classList.remove('hidden'); } } //Load tous les processus où le sp_adress est impliqué et renvoie un tableau d'adresses de processus private async getMyProcessId() { const service = await Services.getInstance(); return service.getPairingProcessId(); } //fonction qui renvoie les processus où le sp_adress est impliqué private async getProcessesWhereTheCurrentMemberIs() { const service = await Services.getInstance(); try { const currentMember = await service.getMemberFromDevice(); if (!currentMember) { console.error('❌ Pas de membre trouvé'); return this.userProcessSet; } const pairingProcess = await this.getMyProcessId(); const memberEmoji = await addressToEmoji(pairingProcess); console.log("Mon adresse:", currentMember[0], memberEmoji); const processes = await service.getProcesses(); for (const [processId, process] of Object.entries(processes)) { console.log(processId); console.log(process); let roles; try { roles = await this.getRoles(process); if (!roles) { roles = await process.states[0].encrypted_pcd.roles; } } catch (e) { console.error('Failed to get roles for process:', processId); continue; } const hasCurrentUser = Object.values(roles).some(role => (role as { members: { sp_addresses: string[] }[] }).members .some(member => member.sp_addresses.includes(currentMember[0])) ); if (hasCurrentUser) { this.userProcessSet.add(processId); console.log("Ajout du process au Set:", processId); } } return this.userProcessSet; } catch (e) { console.error('❌ Erreur:', e); return this.userProcessSet; } } // Load the group list from all processes public async loadAllGroupListFromMyProcess(): Promise { console.log('🎯 Loading all group list'); const groupList = this.shadowRoot?.querySelector('#group-list'); if (!groupList) { console.error('❌ Group list element not found'); return; } const processes = await this.getProcesses(); if (!processes || Object.keys(processes).length === 0) { console.log('⚠️ No processes found'); return; } for (const {key} of processes) { const processName = await key; console.log("Je suis l'id process de la boucle :" ,processName); this.loadGroupListFromAProcess(processName); } } // Load the group list from a process private async loadGroupListFromAProcess(processId: string): Promise { console.log('Loading group list with processId:', processId); const groupList = this.shadowRoot?.querySelector('#group-list'); if (!groupList) return; groupList.innerHTML = ''; this.processId = processId; const service = await Services.getInstance(); const process = await service.getProcess(this.processId); const roles = await this.getRoles(process); if (roles === null) { console.error('no roles in process'); return; } this.processRoles = roles; console.log('🔑 Roles found:', this.processRoles); 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 = `Process : `; nameSpan.className = 'process-name'; container.appendChild(nameSpan); await addressToEmoji(processId).then(emojis => { const emojiSpan = document.createElement('span'); emojiSpan.className = 'process-emoji'; emojiSpan.textContent = emojis; container.appendChild(emojiSpan); }); li.appendChild(container); const roleList = document.createElement('ul'); roleList.className = 'role-list'; (roleList as HTMLElement).style.display = 'none'; // 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(); 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', async (event) => { console.log("CLICKED ON ROLE:", roleName); event.stopPropagation(); await this.toggleMembers(filteredRoleData, roleItem); }); roleContainer.appendChild(roleNameSpan); roleItem.appendChild(roleContainer); roleList.appendChild(roleItem); }); li.appendChild(roleList); groupList.appendChild(li); container.addEventListener('click', (event) => { event.stopPropagation(); container.classList.toggle('expanded'); roleList.style.display = container.classList.contains('expanded') ? 'block' : 'none'; }); } // Send a file private async sendFile(file: File) { const MAX_FILE_SIZE = 1 * 1024 * 1024; if (file.size > MAX_FILE_SIZE) { alert('Le fichier est trop volumineux. Taille maximum : 1MB'); return; } try { const service = await Services.getInstance(); const myAddresses = await service.getMemberFromDevice(); if (!myAddresses) throw new Error('No paired member found'); let fileData: string; if (file.type.startsWith('image/')) { fileData = await this.compressImage(file); } else { fileData = await this.readFileAsBase64(file); } const timestamp = Date.now(); const processId = this.getAttribute('process-id'); const uniqueKey = `${processId}${timestamp}`; const dbRequest = indexedDB.open('4nk'); dbRequest.onerror = (event) => { console.error("Database error:", dbRequest.error); }; dbRequest.onsuccess = async (event) => { const db = dbRequest.result; const transaction = db.transaction(['diffs'], 'readwrite'); const store = transaction.objectStore('diffs'); try { // Message du fichier const fileTemplate = { value_commitment: uniqueKey, messaging_id: processId, description: 'message_content', metadata: { text: `Fichier envoyé: ${file.name}`, timestamp: timestamp, sender: myAddresses[0], recipient: this.selectedMember, messageState: this.messageState, roleName: this.selectedRole, type: 'file', fileName: file.name, fileType: file.type, fileData: fileData } }; await new Promise((resolve, reject) => { const request = store.add(fileTemplate); request.onsuccess = () => { console.log('✅ File message saved'); resolve(); }; request.onerror = () => reject(request.error); }); // Réponse automatique const autoReplyTemplate = { value_commitment: `${processId}${timestamp + 1000}`, messaging_id: processId, description: 'message_content', metadata: { text: "J'ai bien reçu votre fichier 📎", timestamp: timestamp + 1000, sender: this.selectedMember, recipient: myAddresses[0], messageState: this.messageState, roleName: this.selectedRole } }; await new Promise((resolve, reject) => { const request = store.add(autoReplyTemplate); request.onsuccess = () => { console.log('✅ Auto reply saved'); if (myAddresses[0]) { this.addNotification(myAddresses[0], autoReplyTemplate); } resolve(); }; request.onerror = () => reject(request.error); }); // Attendre la fin de la transaction await new Promise((resolve, reject) => { transaction.oncomplete = () => { console.log('✅ Transaction completed'); resolve(); }; transaction.onerror = () => reject(transaction.error); }); // Réinitialiser l'input file const fileInput = this.shadowRoot?.querySelector('#file-input') as HTMLInputElement; if (fileInput) fileInput.value = ''; // Recharger les messages if (this.selectedMember) { await this.loadMemberChat(this.selectedMember); } } catch (error) { console.error('❌ Transaction error:', error); } }; } catch (error) { console.error('❌ Error in sendFile:', error); } } private async readFileAsBase64(file: File): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result as string); reader.onerror = reject; reader.readAsDataURL(file); }); } private async compressImage(file: File): Promise { return new Promise((resolve, reject) => { const img = new Image(); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); img.onload = () => { let width = img.width; let height = img.height; const MAX_WIDTH = 800; const MAX_HEIGHT = 600; if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } canvas.width = width; canvas.height = height; ctx?.drawImage(img, 0, 0, width, height); resolve(canvas.toDataURL('image/jpeg', 0.7)); }; img.onerror = reject; img.src = URL.createObjectURL(file); }); } private async getProcesses(): Promise { const service = await Services.getInstance(); const processes = await service.getProcesses(); const res = Object.entries(processes).map(([key, value]) => ({ key, value, })); return res; } async connectedCallback() { this.processId = this.getAttribute('process-id'); if (this.processId) { console.log("🔍 Chargement du chat avec processID"); await this.loadGroupListFromAProcess(this.processId); } else { console.log("🔍 Chargement des processus par défaut"); const processSet = await this.getProcessesWhereTheCurrentMemberIs(); await this.loadAllProcesses(processSet); } if (this.selectedMember && this.selectedMember.length > 0) { console.log('🔍 Loading chat for selected member:', this.selectedMember); await this.loadMemberChat(this.selectedMember); } else { console.warn('⚠️ No member selected yet. Waiting for selection...'); } } } customElements.define('chat-element', ChatElement); export { ChatElement };