+
+ ${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 = '