merge_with_load_message_loop
This commit is contained in:
Pascal
parent
769952a5de
commit
d1b115e605
@ -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';
|
||||
@ -361,6 +361,17 @@ class ChatElement extends HTMLElement {
|
||||
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 loadMemberChat(member: string[]) {
|
||||
if (member.length === 0) {
|
||||
@ -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);
|
||||
// We catch the new process here
|
||||
messagesProcess = res.updated_process.current_process;
|
||||
await service.handleApiReturn(res);
|
||||
if (this.processId) {
|
||||
const res = await service.createDmProcess(member, this.processId);
|
||||
// We catch the new process here
|
||||
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
|
||||
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);
|
||||
// --- 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[] = [];
|
||||
|
||||
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' &&
|
||||
// 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 = `
|
||||
// <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);
|
||||
// }
|
||||
// };
|
||||
// };
|
||||
|
||||
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 = `
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
||||
messageElement.appendChild(messageContent);
|
||||
messagesContainer.appendChild(messageElement);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user