((resolve, reject) => {
transaction.oncomplete = () => {
console.log('✅ Transaction completed');
resolve();
};
transaction.onerror = () => reject(transaction.error);
});
// Recharger les messages
if (this.selectedMemberId) {
await this.loadMemberChat(this.selectedMemberId);
}
} 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;
}
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;
}
this.selectedMemberId = String(memberId);
const chatHeader = this.shadowRoot?.querySelector('#chat-header');
const messagesContainer = this.shadowRoot?.querySelector('#messages');
if (!chatHeader || !messagesContainer) return;
const memberAddress = String(memberId);
const emojis = await addressToEmoji(memberAddress);
chatHeader.textContent = `Chat with ${emojis}`;
messagesContainer.innerHTML = '';
const dbRequest = indexedDB.open('4nk');
dbRequest.onerror = () => {
console.error("Database error:", dbRequest.error);
};
dbRequest.onsuccess = async (event) => {
const db = dbRequest.result;
const transaction = db.transaction(['diffs'], 'readonly');
const store = transaction.objectStore('diffs');
const messages: any[] = [];
const cursorRequest = store.openCursor();
cursorRequest.onsuccess = async (e) => {
const cursor = (e.target as IDBRequest).result;
if (cursor) {
const record = cursor.value;
if (record.description === 'message_content' &&
record.metadata &&
record.metadata.roleName === this.selectedRole &&
((record.metadata.sender === myAddresses[0] && record.metadata.recipient === memberId) ||
(record.metadata.sender === memberId && record.metadata.recipient === myAddresses[0]))) {
messages.push(record);
}
cursor.continue();
} else {
messages.sort((a, b) => a.metadata.timestamp - b.metadata.timestamp);
for (const message of messages) {
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.metadata.type === 'file') {
let fileContent = '';
if (message.metadata.fileType.startsWith('image/')) {
fileContent = `
`;
} else {
const blob = this.base64ToBlob(message.metadata.fileData, message.metadata.fileType);
const url = URL.createObjectURL(blob);
fileContent = `
`;
}
messageContent.innerHTML = `
${senderEmoji}: ${fileContent}
${new Date(message.metadata.timestamp).toLocaleString('fr-FR')}
`;
} else {
// Message texte normal
messageContent.innerHTML = `
${senderEmoji}: ${message.metadata.text}
${new Date(message.metadata.timestamp).toLocaleString('fr-FR')}
`;
}
messageElement.appendChild(messageContent);
messagesContainer.appendChild(messageElement);
}
this.scrollToBottom(messagesContainer);
}
};
};
} catch (error) {
console.error('Error loading chat:', 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 {
// console.log('🔍 Début création process message');
const parentProcessId = this.getAttribute('process-id');
if (!parentProcessId) {
throw new Error('No parent process ID found');
}
await this.loadMemberChat(member.sp_addresses);
} catch (error) {
console.error('❌ Error handling member click:', error);
}
};
memberList.appendChild(memberItem);
}
}
roleElement.appendChild(memberList);
}
private async loadGroupList(processId: string): Promise {
console.log('Loading group list with processId:', processId);
const groupList = this.shadowRoot?.querySelector('#group-list');
if (!groupList) return;
groupList.innerHTML = '';
const dbRequest = window.indexedDB.open('4nk');
const db = await new Promise((resolve, reject) => {
dbRequest.onsuccess = () => resolve(dbRequest.result);
dbRequest.onerror = () => reject(dbRequest.error);
});
const transaction = db.transaction(['processes'], 'readonly');
const processStore = transaction.objectStore('processes');
const processRequest = processStore.get(processId);
const process = await new Promise((resolve, reject) => {
processRequest.onsuccess = () => {
console.log('🔍 Process found:', processRequest.result);
resolve(processRequest.result);
};
processRequest.onerror = () => reject(processRequest.error);
});
if (!process?.states?.[0]?.encrypted_pcd?.roles) {
console.error('❌ Process structure invalid:', process);
return;
}
const roles = process.states[0].encrypted_pcd.roles;
console.log('🔑 Roles found:', roles);
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';
// 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);
}
// 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.selectedMemberId,
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.selectedMemberId,
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.selectedMemberId) {
await this.loadMemberChat(this.selectedMemberId);
}
} 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);
});
}
connectedCallback() {
if (this.processId) {
console.log('🔍 Loading chat with process ID:', this.processId);
this.loadGroupList(this.processId);
} else {
console.error('❌ No process ID found in element attributes');
}
// Si un membre est sélectionné par défaut, charger ses messages
if (this.selectedMemberId) {
this.loadMemberChat(this.selectedMemberId);
}
}
private addNewMessagingProcess(processId: string, processName: string) {
console.log('🎯 Début addNewMessagingProcess');
console.log('📝 ProcessId reçu:', processId);
// Stockage immédiat du processId
this.processId = processId;
console.log('💾 ProcessId stocké dans this.processId:', this.processId);
const groupList = this.shadowRoot?.querySelector('#group-list');
if (!groupList) {
console.error('Group list not found');
return;
}
// Vérification que le processId est bien stocké
console.log('Vérification this.processId après stockage:', this.processId);
const existingProcess = groupList.querySelector(`[data-process-id="${processId}"]`);
if (existingProcess) {
console.log('Process already exists:', processId);
return;
}
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 = processName;
nameSpan.className = 'process-name';
const emojiSpan = document.createElement('span');
emojiSpan.className = 'process-emoji';
addressToEmoji(processId).then(emojis => {
emojiSpan.textContent = emojis;
});
container.appendChild(nameSpan);
container.appendChild(emojiSpan);
li.appendChild(container);
const roleList = document.createElement('ul');
roleList.className = 'role-list';
roleList.style.display = 'none';
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');
}
private async getExistingMessageProcess(parentId: string, spAddresses: string[]): Promise {
try {
console.log('🔍 Recherche du processus message');
console.log('Parent ID:', parentId);
console.log('SP Addresses:', spAddresses);
const db = await Database.getInstance();
const processStore = 'processes';
// Récupérer le processus parent
const parentProcess = await db.getObject(processStore, parentId);
console.log('📂 Process parent trouvé dans IndexedDB:', {
store: processStore,
processId: parentId,
data: parentProcess
});
// Afficher la structure détaillée
if (parentProcess?.states) {
console.log('📝 States:', parentProcess.states);
console.log('🔐 Encrypted PCD:', parentProcess.states[0]?.encrypted_pcd);
console.log('🔄 Processes:', parentProcess.states[0]?.encrypted_pcd?.processes);
}
// Chercher dans les states[0].encrypted_pcd.roles
const roles = parentProcess?.states?.[0]?.encrypted_pcd?.roles;
console.log('👥 Roles trouvés:', roles);
// Chercher le processus message dans les rôles
for (const role in roles) {
console.log(` Vérification du rôle: ${role}`);
const members = roles[role].members;
if (members?.some((member: any) =>
spAddresses.includes(member.sp_addresses[0])
)) {
console.log('✅ Membre trouvé dans le rôle:', role);
return {
description: 'messaging',
parent_id: parentId,
roles: roles
};
}
}
console.log('❌ Aucun processus message correspondant trouvé');
return null;
} catch (error) {
console.error('❌ Erreur recherche processus:', error);
return null;
}
}
}
customElements.define('chat-element', ChatElement);
export { ChatElement };