declare global { interface Window { toggleUserList: () => void; switchUser: (userId: string | number) => void; loadMemberChat: (memberId: string | number) => void; } } import { membersMock } from '../../mocks/mock-signature/membersMocks'; import { ApiReturn, Device, Member, Process } 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[] = []; 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; constructor() { super(); this.attachShadow({ mode: 'open' }); this.processId = this.getAttribute('process-id'); console.log('🔍 Constructor - Process ID from element:', this.processId); this.shadowRoot!.innerHTML = `
`; window.toggleUserList = this.toggleUserList.bind(this); 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.'); } }; 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()); } 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(); } }); } 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 de l'adresse const memberEmoji = await addressToEmoji(memberId); // 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.selectedRole) { console.error('❌ No role selected'); return; } const messageText = messageInput.value.trim(); if (messageText === '') { console.error('❌ Empty message'); return; } try { const service = Services.getInstance(); const myAddresses = await service.getMemberFromDevice(); if (!myAddresses) throw new Error('No paired member found'); const timestamp = Date.now(); // Ouvrir IndexedDB 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 { const message = { state: this.messageState, type: 'text', content: messageText, metadata: { createdAt: timestamp, lastModified: timestamp, sender: myAddresses, recipient: this.selectedMember, } }; await new Promise((resolve, reject) => { const request = store.add(message); request.onsuccess = () => { console.log('✅ Message saved'); messageInput.value = ''; 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); }); // Recharger les messages if (this.selectedMember) { await this.loadMemberChat(this.selectedMember); } } catch (error) { console.error('❌ Transaction error:', error); } }; } 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(); 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() { const service = await Services.getInstance(); const members = service.getAllMembers(); console.log('🎯 Members:', members); } private async loadMemberChat(member: string[]) { if (member.length === 0) { console.error('Empty member'); return; } 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 = member; const chatHeader = this.shadowRoot?.querySelector('#chat-header'); const messagesContainer = this.shadowRoot?.querySelector('#messages'); if (!chatHeader || !messagesContainer) return; const memberId = this.selectedMember[0]; const emojis = await addressToEmoji(memberId); chatHeader.textContent = `Chat with ${emojis}`; messagesContainer.innerHTML = ''; let messagesProcess = await this.lookForChildren(); if (messagesProcess === null) { console.log('Create a new child process'); // We need to create a new process try { if (!this.processId) { console.error('No process id'); return; } const res = await service.createDmProcess(member, this.processId); // 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 child process', processId); const createPrdReturn = await service.createPrdUpdate(processId, stateId); await service.handleApiReturn(createPrdReturn); const approveChangeReturn = service.approveChange(processId, stateId); await service.handleApiReturn(approveChangeReturn); }, 500); } catch (e) { console.error(e); return; } while (messagesProcess === null) { messagesProcess = await this.lookForChildren(); await new Promise(r => setTimeout(r, 500)); } } else { console.log('Found child process', messagesProcess); } /* 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[] = []; console.log(messagesProcess); const childProcess = JSON.parse(messagesProcess); if (childProcess?.states) { for (const state of childProcess.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; console.log('message', message); allMessages.push(message); } } } } allMessages.sort((a, b) => a.metadata.createdAt - b.metadata.createdAt); if (allMessages.length === 0) { console.log('No messages found'); return; } else if (allMessages.length > 1 && allMessages[0].metadata.sender === myAddresses[0] && allMessages[0].metadata.recipient === this.selectedMember[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' : ''}`; const senderEmoji = await addressToEmoji(message.metadata.sender); 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 }); } private async toggleMembers(roleData: any, roleElement: HTMLElement) { let memberList = roleElement.querySelector('.member-list'); const roleName = roleElement.querySelector('.role-name')?.textContent || ''; if (memberList) { (memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none'; return; } memberList = document.createElement('ul'); memberList.className = 'member-list'; if (roleData.members) { for (const member of roleData.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'; if (member.sp_addresses?.[0]) { const emojis = await addressToEmoji(member.sp_addresses[0]); emojiSpan.textContent = emojis; } memberContainer.appendChild(emojiSpan); memberItem.appendChild(memberContainer); memberItem.onclick = async (event) => { event.stopPropagation(); // Stocker le rôle sélectionné this.selectedRole = roleName; console.log('🎭 Selected role:', this.selectedRole); try { await this.loadMemberChat(member.sp_addresses); } catch (error) { console.error('❌ Error handling member click:', error); } }; memberList.appendChild(memberItem); } } 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(); } // 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 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': this.loadAllProcesses(); break; case 'members': this.loadAllMembers(); break; default: console.error('Unknown tab type:', tabType); } } //Load all processes private async loadAllProcesses() { console.log('🎯 Loading all processes'); 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); } }); }); for (const process of processResult) { //console.log('🎯 Processing process:', process); const li = document.createElement('li'); li.className = 'group-list-item'; const oneProcess = process.states[0].commited_in; li.setAttribute('data-process-id', oneProcess); 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 const roles = process.states[0].encrypted_pcd.roles; //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', (event) => { event.stopPropagation(); this.toggleMembers(filteredRoleData, roleItem); }); roleContainer.appendChild(roleNameSpan); roleItem.appendChild(roleContainer); roleList.appendChild(roleItem); }); li.appendChild(roleList); groupList.appendChild(li); // Ajouter un écouteur d'événements pour gérer le clic sur le container container.addEventListener('click', (event) => { event.stopPropagation(); container.classList.toggle('expanded'); const roleList = container.parentElement?.querySelector('.role-list'); const dm = container.parentElement?.querySelector('.dm'); if (roleList) { // Si le container est expanded, on montre la liste des rôles if (container.classList.contains('expanded')) { (roleList as HTMLElement).style.display = 'block'; if (dm) (dm as HTMLElement).style.display = 'block'; } else { // Sinon on cache la liste des rôles (roleList as HTMLElement).style.display = 'none'; if (dm) (dm as HTMLElement).style.display = 'none'; } } }); } resolve(processResult); }; request.onerror = () => { console.error('❌ Error getting processes:', request.error); reject(request.error); }; }; }); } // 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', (event) => { event.stopPropagation(); 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'); const roleList = container.parentElement?.querySelector('.role-list'); const dm = container.parentElement?.querySelector('.dm'); if (roleList) { // Si le container est expanded, on montre la liste des rôles if (container.classList.contains('expanded')) { (roleList as HTMLElement).style.display = 'block'; if (dm) (dm as HTMLElement).style.display = 'block'; } else { // Sinon on cache la liste des rôles (roleList as HTMLElement).style.display = 'none'; if (dm) (dm as HTMLElement).style.display = 'none'; } } }); } // Function to manage the list of users private toggleUserList() { const userList = getCorrectDOM('userList'); if (!userList) return; if (!(userList as HTMLElement).classList.contains('show')) { (userList as HTMLElement).innerHTML = membersMock.map(member => `
${member.avatar}
${member.name} ${member.email}
`).join(''); } (userList as HTMLElement).classList.toggle('show'); } // 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 = 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() { console.log('🔍 Connected Callback started'); if (this.processId) { console.log('🔍 Loading chat with process ID:', this.processId); this.loadGroupListFromAProcess(this.processId); } else if(this.processId == null){ console.error('❌ No process ID found in element attributes'); //this.loadAllGroupListFromMyProcess(); this.loadAllProcesses(); this.loadAllMembers(); } // Si un membre est sélectionné par défaut, charger ses messages if (this.selectedMember) { await this.loadMemberChat(this.selectedMember); } } } customElements.define('chat-element', ChatElement); export { ChatElement };