merge_with_load_message_loop

src/pages/chat/chat.ts

@@ -7,7 +7,7 @@ declare global {
 }
 
 import { membersMock } from '../../mocks/mock-signature/membersMocks';
-import { ApiReturn, Device, Member } from '../../../pkg/sdk_client';
+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';
@@ -362,6 +362,17 @@ class ChatElement extends HTMLElement {
         (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 loadMemberChat(member: string[]) {
         if (member.length === 0) {
             console.error('Empty member');
@@ -375,6 +386,7 @@ class ChatElement extends HTMLElement {
                 return;
             }
 
+            // Set the selected member
             this.selectedMember = member;
             
             const chatHeader = this.shadowRoot?.querySelector('#chat-header');
@@ -388,6 +400,10 @@ class ChatElement extends HTMLElement {
             messagesContainer.innerHTML = '';
 
             // Filter processes for the children of current process
+            if (!this.processId) {
+                console.error('No process id');
+                return;
+            }
             const children: string[] = await service.getChildrenOfProcess(this.processId);
 
             let messagesProcess: Process | null = null;
@@ -415,10 +431,14 @@ class ChatElement extends HTMLElement {
                 // We need to create a new process
                 let newProcess;
                 try {
-                    const res = await service.createDmProcess(member, this.processId);
+                    if (this.processId) {
-                    // We catch the new process here
+                        const res = await service.createDmProcess(member, this.processId);
-                    messagesProcess = res.updated_process.current_process;
+                        // We catch the new process here
-                    await service.handleApiReturn(res);
+                        messagesProcess = res.updated_process?.current_process ?? null;
+                        await service.handleApiReturn(res);
+                    } else {
+                        console.error('No process id');
+                    }
                 } catch (e) {
                     console.error(e);
                     return;
@@ -427,94 +447,102 @@ class ChatElement extends HTMLElement {
                 console.log('Found child process', messagesProcess);
             }
 
-            // Get the diffs from the database
+            // --- GET THE STATE ID ---
-            for (const state of messagesProcess.states) {
+            const messagesProcessStateId = messagesProcess?.states?.[0]?.state_id;
-                const pcd_commitment = state.pcd_commitment;
+            console.log("Je suis messagesProcessStateId", messagesProcessStateId);
-                if (pcd_commitment) {
+
-                    const message_hash = pcd_commitment.message;
+            // --- GET THE DIFF FROM THE STATE ID ---
-                    if (message_hash) {
+            if (messagesProcessStateId) {
-                        const diff = await service.getDiffByValue(message_hash);
+                const diffFromStateId = await this.getDiffByStateId(messagesProcessStateId);
-                        const message = diff.new_value;
+                console.log("Je suis diffFromStateId", diffFromStateId);
-                        console.log(message);
+            }
+
+            // Récupérer les messages depuis les états du processus
+            const allMessages: any[] = [];
+
+            if (messagesProcess?.states) {
+                for (const state of messagesProcess.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);
+                        }
                     }
                 }
             }
 
-            //             if (record.description === 'message_content' && 
+            allMessages.sort((a, b) => a.metadata.createdAt - b.metadata.createdAt);
-            //                 record.metadata && 
+            if (allMessages.length === 0) {
-            //                 record.metadata.roleName === this.selectedRole &&
+                console.log('No messages found');
-            //                 ((record.metadata.sender === myAddresses[0] && record.metadata.recipient === memberId) ||
+                return;
-            //                  (record.metadata.sender === memberId && record.metadata.recipient === myAddresses[0]))) {
+            } 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';
                     
-            //                 messages.push(record);
+                    const isCurrentUser = message.metadata.sender === myAddresses[0];
-            //             }
+                    messageElement.style.justifyContent = isCurrentUser ? 'flex-end' : 'flex-start';
-            //             cursor.continue();
-            //         } else {
-            //             messages.sort((a, b) => a.metadata.timestamp - b.metadata.timestamp);
     
-            //             for (const message of messages) {
+                    const messageContent = document.createElement('div');
-            //                 const messageElement = document.createElement('div');
+                    messageContent.className = `message ${isCurrentUser ? 'user' : ''}`;
-            //                 messageElement.className = 'message-container';
     
-            //                 const isCurrentUser = message.metadata.sender === myAddresses[0];
+                    const senderEmoji = await addressToEmoji(message.metadata.sender);
-            //                 messageElement.style.justifyContent = isCurrentUser ? 'flex-end' : 'flex-start';
                     
-            //                 const messageContent = document.createElement('div');
+                    if (message.type === 'file') {
-            //                 messageContent.className = `message ${isCurrentUser ? 'user' : ''}`;
+                        let fileContent = '';
+                        if (message.content.type.startsWith('image/')) {
+                            fileContent = `
+                                <div class="file-preview">
+                                    <img src="${message.content.data}" alt="Image" style="max-width: 200px; max-height: 200px;"/>
+                                </div>
+                            `;
+                        } else {
+                            const blob = this.base64ToBlob(message.content.data, message.content.type);
+                            const url = URL.createObjectURL(blob);
+                            fileContent = `
+                                <div class="file-download">
+                                    <a href="${url}" download="${message.content.name}">
+                                        📎 ${message.content.name}
+                                    </a>
+                                </div>
+                            `;
+                        }
     
-            //                 const senderEmoji = await addressToEmoji(message.metadata.sender);
+                        messageContent.innerHTML = `
+                            <div class="message-content">
+                                <strong>${senderEmoji}</strong>: ${fileContent}
+                            </div>
+                            <div class="message-time">
+                                ${new Date(message.metadata.createdAt).toLocaleString('fr-FR')}
+                            </div>
+                        `;
+                    } else {
+                        messageContent.innerHTML = `
+                            <div class="message-content">
+                                <strong>${senderEmoji}</strong>: ${message.content}
+                            </div>
+                            <div class="message-time">
+                                ${new Date(message.metadata.createdAt).toLocaleString('fr-FR')}
+                            </div>
+                        `;
+                    }
     
-            //                 if (message.metadata.type === 'file') {
+                    messageElement.appendChild(messageContent);
-            //                     let fileContent = '';
+                    messagesContainer.appendChild(messageElement);
-            //                     if (message.metadata.fileType.startsWith('image/')) {
+                }
-            //                         fileContent = `
-            //                             <div class="file-preview">
-            //                                 <img src="${message.metadata.fileData}" alt="${message.metadata.fileName}" style="max-width: 200px; max-height: 200px;"/>
-            //                             </div>
-            //                         `;
-            //                     } else {
-            //                         const blob = this.base64ToBlob(message.metadata.fileData, message.metadata.fileType);
-            //                         const url = URL.createObjectURL(blob);
-            //                         fileContent = `
-            //                             <div class="file-download">
-            //                                 <a href="${url}" download="${message.metadata.fileName}">
-            //                                     📎 ${message.metadata.fileName}
-            //                                 </a>
-            //                             </div>
-            //                         `;
-            //                     }
-
-            //                     messageContent.innerHTML = `
-            //                         <div class="message-content">
-            //                             <strong>${senderEmoji}</strong>: ${fileContent}
-            //                         </div>
-            //                         <div class="message-time">
-            //                             ${new Date(message.metadata.timestamp).toLocaleString('fr-FR')}
-            //                         </div>
-            //                     `;
-            //                 } else {
-            //                     // Message texte normal
-            //                     messageContent.innerHTML = `
-            //                         <div class="message-content">
-            //                             <strong>${senderEmoji}</strong>: ${message.metadata.text}
-            //                         </div>
-            //                         <div class="message-time">
-            //                             ${new Date(message.metadata.timestamp).toLocaleString('fr-FR')}
-            //                         </div>
-            //                     `;
-            //                 }
-
-            //                 messageElement.appendChild(messageContent);
-            //                 messagesContainer.appendChild(messageElement);
-            //             }
-                        
-            //             this.scrollToBottom(messagesContainer);
-            //         }
-            //     };
-            // };
     
+                this.scrollToBottom(messagesContainer);
+            } else {
+                console.log('No messages found');
+            }
+            this.scrollToBottom(messagesContainer);
         } catch (error) {
-            console.error('Error loading chat:', error);
+            console.error('❌ Error in loadMemberChat:', error);
         }
     }
 

src/services/database.service.ts

@@ -267,6 +267,28 @@ class Database {
       throw e;
     }
   }
+
+  // Request a store by index
+  public async requestStoreByIndex(storeName: string, indexName: string, request: string): Promise<any[]> {
+    const db = await this.getDb();
+    const tx = db.transaction(storeName, 'readonly');
+    const store = tx.objectStore(storeName);
+    const index = store.index(indexName);
+
+    try {
+      return new Promise((resolve, reject) => {
+        const getAllRequest = index.getAll(request);
+        getAllRequest.onsuccess = () => {
+          const allItems = getAllRequest.result;
+          const filtered = allItems.filter(item => item.state_id === request);
+          resolve(filtered);
+        };
+        getAllRequest.onerror = () => reject(getAllRequest.error);
+      });
+    } catch (e) {
+      throw e;
+    }
+  }
 }
 
 export default Database;