js_chat_ko

src/pages/chat/chat.ts

@@ -230,12 +230,10 @@ class ChatElement extends HTMLElement {
 // Send a messsage
     private sendMessage() {
     const messageInput = this.shadowRoot?.querySelector('#message-input') as HTMLInputElement;
-    if (!messageInput) return;
+    if (!messageInput || !this.selectedMemberId) return;
-    const messageText = messageInput.value.trim();
     
-    if (messageText === '' || this.selectedMemberId === null) {
+    const messageText = messageInput.value.trim();
-        return;
+    if (messageText === '') return;
-    }
 
     const newMessage: Message = {
         id: Date.now(),
@@ -255,7 +253,13 @@ class ChatElement extends HTMLElement {
     // Automatic response after 2 seconds
     setTimeout(() => {
         if (this.selectedMemberId) {
-            const autoReply = this.generateAutoReply(`Member ${this.selectedMemberId}`);
+            const autoReply = {
+                id: Date.now(),
+                sender: "Member",
+                text: "OK...",
+                time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+                type: 'text' as const
+            };
             messageStore.addMessage(this.selectedMemberId, autoReply);
             this.messagesMock = messageStore.getMessages();
             this.loadMemberChat(this.selectedMemberId);
@@ -271,45 +275,34 @@ class ChatElement extends HTMLElement {
     
     
         // Load the list of members
-        private loadMemberChat(memberId: string | number) {
+        private async loadMemberChat(memberId: string | number) {
             this.selectedMemberId = String(memberId);
             const memberMessages = this.messagesMock.find(m => String(m.memberId) === String(memberId));
     
-            // Find the process and the role of the member
-            let memberInfo = { processName: '', roleName: '', memberName: '' };
-            groupsMock.forEach(process => {
-                process.roles.forEach(role => {
-                    const member = role.members.find(m => String(m.id) === String(memberId));
-                    if (member) {
-                        memberInfo = {
-                            processName: process.name,
-                            roleName: role.name,
-                            memberName: member.name
-                        };
-                    }
-                });
-            });
-    
             const chatHeader = this.shadowRoot?.querySelector('#chat-header');
             const messagesContainer = this.shadowRoot?.querySelector('#messages');
     
             if (!chatHeader || !messagesContainer) return;
             
-            chatHeader.textContent = `Chat with ${memberInfo.roleName} ${memberInfo.memberName} from ${memberInfo.processName}`;
+            const memberAddress = String(memberId);
+            const emojis = await addressToEmoji(memberAddress);
+            chatHeader.textContent = `Chat with ${emojis}`;
             messagesContainer.innerHTML = '';
     
             if (memberMessages) {
-                memberMessages.messages.forEach((message: Message) => {
+                for (const message of memberMessages.messages) {
                     const messageElement = document.createElement('div');
                     messageElement.className = 'message-container';
     
                     const messageContent = document.createElement('div');
                     messageContent.className = 'message';
+                    
                     if (message.type === 'file') {
                         messageContent.innerHTML = `<a href="${message.fileData}" download="${message.fileName}" target="_blank">${message.fileName}</a>`;
                         messageContent.classList.add('user');
                     } else {
-                        messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
+                        const senderEmojis = await addressToEmoji(memberAddress);
+                        messageContent.innerHTML = `<strong>${senderEmojis}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
                         if (message.sender === "4NK") {
                             messageContent.classList.add('user');
                         }
@@ -317,9 +310,8 @@ class ChatElement extends HTMLElement {
     
                     messageElement.appendChild(messageContent);
                     messagesContainer.appendChild(messageElement);
-                });
                 }
-    
+            }
     
             this.scrollToBottom(messagesContainer);
         }
@@ -344,12 +336,7 @@ class ChatElement extends HTMLElement {
                 const memberContainer = document.createElement('div');
                 memberContainer.className = 'member-container';
 
-                // Afficher l'adresse SP
-                const addressSpan = document.createElement('span');
-                addressSpan.className = 'member-address';
-                addressSpan.textContent = member.sp_addresses?.[0] || 'No address';
     
-                // Ajouter les emojis pour l'adresse
                 const emojiSpan = document.createElement('span');
                 emojiSpan.className = 'member-emoji';
                 if (member.sp_addresses?.[0]) {
@@ -357,7 +344,6 @@ class ChatElement extends HTMLElement {
                     emojiSpan.textContent = emojis;
                 }
 
-                memberContainer.appendChild(addressSpan);
                 memberContainer.appendChild(emojiSpan);
                 memberItem.appendChild(memberContainer);
                 
@@ -483,10 +469,8 @@ class ChatElement extends HTMLElement {
         nameSpan.textContent = `Process : `;
         nameSpan.className = 'process-name';
         
-        // Ajouter d'abord le nom
         container.appendChild(nameSpan);
         
-        // Puis ajouter les emojis
         await addressToEmoji(processId).then(emojis => {
             const emojiSpan = document.createElement('span');
             emojiSpan.className = 'process-emoji';
@@ -496,7 +480,6 @@ class ChatElement extends HTMLElement {
         
         li.appendChild(container);
 
-        // Créer et ajouter la liste des rôles
         const roleList = document.createElement('ul');
         roleList.className = 'role-list';
 
@@ -511,7 +494,6 @@ class ChatElement extends HTMLElement {
             roleNameSpan.className = 'role-name';
             roleNameSpan.textContent = roleName;
             
-            // Ajouter l'événement de clic
             roleContainer.addEventListener('click', (event) => {
                 event.stopPropagation();
                 this.toggleMembers(roles[roleName], roleItem);