This commit is contained in:
Pascal 2025-01-07 19:35:37 +01:00
parent be112a7579
commit 15d2522a68

View File

@ -242,15 +242,13 @@ class ChatElement extends HTMLElement {
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'text' as const type: 'text' as const
}; };
// Add and display the message immediately
messageStore.addMessage(this.selectedMemberId, newMessage); messageStore.addMessage(this.selectedMemberId, newMessage);
this.messagesMock = messageStore.getMessages(); this.messagesMock = messageStore.getMessages();
this.loadMemberChat(this.selectedMemberId); this.loadMemberChat(this.selectedMemberId);
// Reset the input
messageInput.value = ''; messageInput.value = '';
// Automatic response after 2 seconds
setTimeout(() => { setTimeout(() => {
if (this.selectedMemberId) { if (this.selectedMemberId) {
const autoReply = { const autoReply = {
@ -268,16 +266,15 @@ class ChatElement extends HTMLElement {
}, 2000); }, 2000);
} }
// Scroll down the conversation after loading messages private scrollToBottom(container: Element) {
private scrollToBottom(container: Element) { (container as HTMLElement).scrollTop = (container as HTMLElement).scrollHeight;
(container as HTMLElement).scrollTop = (container as HTMLElement).scrollHeight; }
}
// Load the list of members // Load the list of members
private async loadMemberChat(memberId: string | number) { private async loadMemberChat(memberId: string | number) {
this.selectedMemberId = String(memberId); this.selectedMemberId = String(memberId);
const memberMessages = this.messagesMock.find(m => String(m.memberId) === String(memberId)); const memberMessages = this.messagesMock.find(m => String(m.memberId) === String(memberId));
const chatHeader = this.shadowRoot?.querySelector('#chat-header'); const chatHeader = this.shadowRoot?.querySelector('#chat-header');
const messagesContainer = this.shadowRoot?.querySelector('#messages'); const messagesContainer = this.shadowRoot?.querySelector('#messages');
@ -301,8 +298,11 @@ class ChatElement extends HTMLElement {
messageContent.innerHTML = `<a href="${message.fileData}" download="${message.fileName}" target="_blank">${message.fileName}</a>`; messageContent.innerHTML = `<a href="${message.fileData}" download="${message.fileName}" target="_blank">${message.fileName}</a>`;
messageContent.classList.add('user'); messageContent.classList.add('user');
} else { } else {
const senderEmojis = await addressToEmoji(memberAddress); const senderDisplay = message.sender === "4NK"
messageContent.innerHTML = `<strong>${senderEmojis}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`; ? "Me"
: await addressToEmoji(memberAddress);
messageContent.innerHTML = `<strong>${senderDisplay}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
if (message.sender === "4NK") { if (message.sender === "4NK") {
messageContent.classList.add('user'); messageContent.classList.add('user');
} }
@ -310,12 +310,12 @@ class ChatElement extends HTMLElement {
messageElement.appendChild(messageContent); messageElement.appendChild(messageContent);
messagesContainer.appendChild(messageElement); messagesContainer.appendChild(messageElement);
}
} }
this.scrollToBottom(messagesContainer);
} }
this.scrollToBottom(messagesContainer);
}
private async toggleMembers(roleData: any, roleElement: HTMLElement) { private async toggleMembers(roleData: any, roleElement: HTMLElement) {
let memberList = roleElement.querySelector('.member-list'); let memberList = roleElement.querySelector('.member-list');
if (memberList) { if (memberList) {