-
- ${chat.name}
- ${timeStr}
-
-
-
- ${chat.lastMessage || 'No messages yet'}
-
- ${hasUnread ? `${chat.unreadCount}` : ''}
-
-
No messages. Say hello!
';
- return;
- }
-
- const loadMore = document.createElement("button");
- loadMore.classList.add("load-more-btn");
- loadMore.innerText = "Load more";
- loadMore.addEventListener('click', () => {
- this.loadMoreMessages(chatId, userID);
- });
- elements.messagesContainer.appendChild(loadMore);
-
- for (const msg of messages) {
- this.appendSingleMessage(msg, userID, chatId);
- }
-
- this.scrollToBottom();
- },
-
- async loadMoreMessages(chatId, userId) {
- const oldest = document.querySelector('.message-group:first-of-type');
- const oldestTimestamp = oldest.dataset.timestamp;
- const oldestId = oldest.id;
- console.log(oldest)
- console.log(oldestId)
- console.log(oldestTimestamp)
-
- const loadMoreButton = document.querySelector('.load-more-btn');
- loadMoreButton.removeEventListener('click', this.loadMoreMessages);
-
- const msgs = await getMoreChatMessages(chatId, oldestTimestamp, oldestId);
- msgs.shift();
-
- msgs.forEach(async msg => {
- loadMoreButton.after(this.generateMessage(msg, userId, chatId));
- });
-
- loadMoreButton.addEventListener('click', this.loadMoreMessages);
- },
-
- /**
- * Append a single message (used for optimistic updates immediately upon sending)
- */
- appendSingleMessage(msg, userID, chatId, isLocal = false) {
- elements.messagesContainer.appendChild(this.generateMessage(msg, userID, chatId, isLocal))
- },
-
- generateTempMessageLink(msg) {
- const a = document.createElement('a');
- a.target = "_blank";
- a.href = msg.media.url;
-
- if (msg._data?.mimetype?.startsWith('image/')) {
- const img = document.createElement('img');
- img.classList.add('message-image-attachement');
- img.src = msg.media.url;
- a.appendChild(img);
- } else {
- a.textContent = msg.media.filename || "Download file";
- a.download = msg.media.filename;
- }
-
- return a;
- },
-
- generateMessage(msg, userID, chatId, isLocal = false) {
- const isOutgoing = msg.fromMe || msg.sender === 'me';
-
- function getPrevMessageElem() {
- return elements.messagesContainer.lastElementChild;
- }
-
- const prevMsgEl = getPrevMessageElem();
-
- const groupDiv = document.createElement('div');
- groupDiv.className = `message-group selectable ${isOutgoing ? 'outgoing' : 'incoming'}`;
- groupDiv.id = normalizeId(msg._serialized ? msg : msg.id);
- groupDiv.dataset.timestamp = msg.timestamp;
- groupDiv.dataset.from = msg.participant || msg.from;
-
- const senderName = isOutgoing ? userID : (msg._data.notifyName || msg.from);
- const timeStr = formatTime(msg.timestamp || new Date());
-
- let statusCheck = '';
- if (isOutgoing) {
- if (msg.status === 'read') {
- statusCheck = '