ability to fetch after and before, max 100 msgs

plugins/plugins/core/components/ChatPage.js

@@ -1354,6 +1354,7 @@ class ChatPage extends LitElement {
         this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
         this.updateMessageHash = {}
         this.addToUpdateMessageHashmap = this.addToUpdateMessageHashmap.bind(this)
+        this.getAfterMessages = this.getAfterMessages.bind(this)
     }
 
     setOpenGifModal(value) {
@@ -2488,6 +2489,7 @@ class ChatPage extends LitElement {
                 .messages=${this.messagesRendered} 
                 .escapeHTML=${escape} 
                 .getOldMessage=${this.getOldMessage}
+                .getAfterMessages=${this.getAfterMessages}
                 .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
                 .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
                 .sendMessage=${(val) => this._sendMessage(val)}
@@ -2630,8 +2632,8 @@ class ChatPage extends LitElement {
                 _publicKey: this._publicKey,
                 addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
             }));
-
-            this.messagesRendered = [...decodeMsgs, ...this.messagesRendered].sort(function (a, b) {
+            const lengthOfExistingMsgs = this.messagesRendered
+            this.messagesRendered = [...decodeMsgs, ...this.messagesRendered.slice(0, 80)].sort(function (a, b) {
                 return a.timestamp
                     - b.timestamp
             })
@@ -2665,7 +2667,79 @@ class ChatPage extends LitElement {
                 addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
             }));
 
-            this.messagesRendered = [...decodeMsgs, ...this.messagesRendered].sort(function (a, b) {
+            this.messagesRendered = [...decodeMsgs, ...this.messagesRendered.slice(0,80)].sort(function (a, b) {
+                return a.timestamp
+                    - b.timestamp
+            })
+
+            this.isLoadingOldMessages = false
+            await this.getUpdateComplete()
+            const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'))
+            const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
+
+            if (findElement) {
+                findElement.scrollIntoView({ behavior: 'auto', block: 'center' })
+            }
+        }
+    }
+    async getAfterMessages(scrollElement) {
+        const firstMsg = this.messagesRendered.at(-1)
+        const timestamp = scrollElement.messageObj.timestamp
+        
+        if (this.isReceipient) {
+            const getInitialMessages = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=20&reverse=true&after=${timestamp}&haschatreference=false&encoding=BASE64`
+            })
+
+            const decodeMsgs = getInitialMessages.map((eachMessage) => {
+                return this.decodeMessage(eachMessage)
+            })
+
+            
+            queue.push(() =>  replaceMessagesEdited({
+                decodedMessages: decodeMsgs,
+                parentEpml,
+                isReceipient: this.isReceipient,
+                decodeMessageFunc: this.decodeMessage,
+                _publicKey: this._publicKey,
+                addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
+            }));
+            this.messagesRendered = [ ...this.messagesRendered.slice(-80), ...decodeMsgs].sort(function (a, b) {
+                return a.timestamp
+                    - b.timestamp
+            })
+
+            this.isLoadingOldMessages = false
+            await this.getUpdateComplete()
+            const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'))
+
+            const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
+
+            if (findElement) {
+                findElement.scrollIntoView({ behavior: 'auto', block: 'center' })
+            }
+        } else {
+            const getInitialMessages = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=20&reverse=true&after=${timestamp}&haschatreference=false&encoding=BASE64`
+            })
+
+            const decodeMsgs = getInitialMessages.map((eachMessage) => {
+                return this.decodeMessage(eachMessage)
+            })
+
+            
+            queue.push(() =>  replaceMessagesEdited({
+                decodedMessages: decodeMsgs,
+                parentEpml,
+                isReceipient: this.isReceipient,
+                decodeMessageFunc: this.decodeMessage,
+                _publicKey: this._publicKey,
+                addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
+            }));
+
+            this.messagesRendered = [...this.messagesRendered.slice(-80), ...decodeMsgs].sort(function (a, b) {
                 return a.timestamp
                     - b.timestamp
             })
@@ -2682,7 +2756,6 @@ class ChatPage extends LitElement {
     }
 
     async addToUpdateMessageHashmap(array){
-        console.log({array})
         const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement')
         const originalScrollTop = viewElement.scrollTop;
 const originalScrollHeight = viewElement.scrollHeight;

plugins/plugins/core/components/ChatScroller.js

@@ -172,6 +172,7 @@ class ChatScroller extends LitElement {
             theme: { type: String, reflect: true },
             getNewMessage: { attribute: false },
             getOldMessage: { attribute: false },
+            getAfterMessages: {attribute: false},
             escapeHTML: { attribute: false },
             messages: { type: Array },
             hideMessages: { type: Array },
@@ -304,6 +305,8 @@ class ChatScroller extends LitElement {
             )
         })}
                 <div style=${"height: 1px;"} id='downObserver'></div>
+                <!-- <div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div> -->
+
             </ul>
         `
     }
@@ -399,6 +402,9 @@ class ChatScroller extends LitElement {
     _getOldMessage(_scrollElement) {
         this.getOldMessage(_scrollElement)
     }
+    _getAfterMessages(_scrollElement) {
+        this.getAfterMessages(_scrollElement)
+    }
 
     _getOldMessageAfter(_scrollElement) {
         this.getOldMessageAfter(_scrollElement)
@@ -417,11 +423,11 @@ class ChatScroller extends LitElement {
 
     _downObserverHandler(entries) {
         if (!entries[0].isIntersecting) {
-            let _scrollElement = entries[0].target.previousElementSibling
-            // this._getOldMessageAfter(_scrollElement)
             this.showLastMessageRefScroller(true)
         } else {
+            let _scrollElement = entries[0].target.previousElementSibling
             this.showLastMessageRefScroller(false)
+            this._getAfterMessages(_scrollElement)
         }
     }
 
@@ -437,9 +443,7 @@ class ChatScroller extends LitElement {
 
     downElementObserver() {
         const options = {
-            root: this.viewElement,
-            rootMargin: '0px',
-            threshold: 1
+            
         }
         // identify an element to observe
         const elementToObserve = this.downObserverElement