fix newest messages and dynamic old

plugins/plugins/core/components/ChatPage.js

@@ -55,7 +55,7 @@ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 
 export const queue = new RequestQueue();
 
-export const chatLimit = 40
+export const chatLimit = 10
 class ChatPage extends LitElement {
     static get properties() {
         return {
@@ -2152,13 +2152,7 @@ class ChatPage extends LitElement {
             return
         }
 
-        if ((message.timestamp - this.messagesRendered[0].timestamp) > 86400000) {
-            let errorMsg = get("chatpage.cchange66")
-            parentEpml.request('showSnackBar', `${errorMsg}`)
-            return
-        }
       
-        if ((message.timestamp - this.messagesRendered[0].timestamp) < 86400000) {
             const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.signature)
             if (findOriginalMessage) {
                 const messageClientRect = findOriginalMessage.getBoundingClientRect()
@@ -2169,15 +2163,25 @@ class ChatPage extends LitElement {
                     top: messageClientRect.top,
                     offsetHeight: findOriginalMessage.offsetHeight
                 }
+       
+            await this.getOldMessageDynamic(0, clickedOnMessage.timestamp, message)
+            await new Promise((res)=> {
+                setTimeout(()=> {
+                    res()
+                },1000)
+            })
+            await this.getUpdateCompleteMessages()
+            
+            const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'))
+            const findMessage = marginElements.find((item) => item.messageObj.signature === message.signature)
+            if (findMessage) {
+                findMessage.scrollIntoView({ behavior: 'auto', block: 'center' })
             }
-            await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000)
-            const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature)
             if (findMessage) {
                 this.isLoadingGoToRepliedMessage = {
                     ...this.isLoadingGoToRepliedMessage,
                     loading: false
                 }
-                findMessage.scrollIntoView({ block: 'center' })
                 const findElement = findMessage.shadowRoot.querySelector('.message-parent')
                 if (findElement) {
                     findElement.classList.add('blink-bg')
@@ -2553,6 +2557,13 @@ class ChatPage extends LitElement {
         return true
     }
 
+    async getUpdateCompleteMessages() {
+        await super.getUpdateComplete()
+        const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'))
+        await Promise.all(marginElements.map(el => el.updateComplete))
+        return true
+    }
+
     async getUpdateCompleteTextEditor() {
         await super.getUpdateComplete()
         const marginElements = Array.from(this.shadowRoot.querySelectorAll('chat-text-editor'))
@@ -2571,14 +2582,22 @@ class ChatPage extends LitElement {
         })
     }
 
-    async getOldMessageDynamic(limit, before, after) {
+    async getOldMessageDynamic(limit, timestampClickedOnMessage, messageToGoTo) {
-
+      const findMsg = await parentEpml.request("apiCall", {
+            type: "api",
+             url: `/chat/message/${messageToGoTo.signature}?encoding=BASE64`,
+        })
+        if(!findMsg) return null
         if (this.isReceipient) {
-            const getInitialMessages = await parentEpml.request('apiCall', {
+            const getInitialMessagesBefore = await parentEpml.request('apiCall', {
                 type: 'api',
-                url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${limit}&reverse=true&before=${before}&after=${after}&haschatreference=false&encoding=BASE64`
+                url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${20}&reverse=true&before=${findMsg.timestamp}&haschatreference=false&encoding=BASE64`
             })
-
+            const getInitialMessagesAfter = 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=${findMsg.timestamp - 100}&haschatreference=false&encoding=BASE64`
+            })
+            const getInitialMessages = [...getInitialMessagesBefore, ...getInitialMessagesAfter]
             let decodeMsgs = []
             await new Promise((res, rej) => {
                 this.webWorkerDecodeMessages.postMessage({messages: getInitialMessages, isReceipient: this.isReceipient, _publicKey: this._publicKey, privateKey: window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey });
@@ -2606,7 +2625,7 @@ class ChatPage extends LitElement {
             }));
 
           
-            let list = [...decodeMsgs, ...this.messagesRendered.slice(0,80)]
+            let list = [...decodeMsgs]
            
             await new Promise((res, rej) => {
        
@@ -2621,21 +2640,23 @@ class ChatPage extends LitElement {
                 }
               })
            
-              this.messagesRendered  = list
+              this.messagesRendered = {
-
+                messages: list,
+                type: 'inBetween',
+            }
 
             this.isLoadingOldMessages = false
-            await this.getUpdateComplete()
-            const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement')
             
-            if (viewElement) {
-                viewElement.scrollTop = 200
-            }
         } else {
-            const getInitialMessages = await parentEpml.request('apiCall', {
+            const getInitialMessagesBefore = await parentEpml.request('apiCall', {
                 type: 'api',
-                url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${limit}&reverse=true&before=${before}&after=${after}&haschatreference=false&encoding=BASE64`
+                url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${20}&reverse=true&before=${findMsg.timestamp}&haschatreference=false&encoding=BASE64`
             })
+            const getInitialMessagesAfter = await parentEpml.request('apiCall', {
+                type: 'api',
+                url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${20}&reverse=true&after=${findMsg.timestamp - 100}&haschatreference=false&encoding=BASE64`
+            })
+            const getInitialMessages = [...getInitialMessagesBefore, ...getInitialMessagesAfter]
 
             let decodeMsgs = []
             await new Promise((res, rej) => {
@@ -2664,7 +2685,7 @@ class ChatPage extends LitElement {
            
 
        
-            let list = [...decodeMsgs, ...this.messagesRendered.slice(0,80)]
+            let list = [...decodeMsgs]
            
             await new Promise((res, rej) => {
        
@@ -2679,16 +2700,15 @@ class ChatPage extends LitElement {
                 }
               })
            
-              this.messagesRendered  = list
+            this.messagesRendered = {
+                messages: list,
+                type: 'inBetween',
+                signature: messageToGoTo.signature
+            }
 
 
             this.isLoadingOldMessages = false
-            await this.getUpdateComplete()
-            const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement')
            
-            if (viewElement) {
-                viewElement.scrollTop = 200
-            }
         }
     }
 
@@ -3067,22 +3087,22 @@ viewElement.scrollTop = originalScrollTop + heightDifference;
             }
             
 
-            let list = [...this.messagesRendered]
+            // let list = [...this.messagesRendered]
            
-            await new Promise((res, rej) => {
+            // await new Promise((res, rej) => {
        
-                this.webWorkerSortMessages.postMessage({list});
+            //     this.webWorkerSortMessages.postMessage({list});
             
-                this.webWorkerSortMessages.onmessage = e => {
+            //     this.webWorkerSortMessages.onmessage = e => {
-                    console.log('e',e)
+            //         console.log('e',e)
               
-                    list = e.data
+            //         list = e.data
-                    res()
+            //         res()
                  
-                }
+            //     }
-              })
+            //   })
            
-              this.messagesRendered  = list
+            //   this.messagesRendered  = list
         }
     }
 
@@ -3124,15 +3144,19 @@ viewElement.scrollTop = originalScrollTop + heightDifference;
 
     async renderNewMessage(newMessage) {
         if (newMessage.chatReference) {
-            const findOriginalMessageIndex = this.messagesRendered.findIndex(msg => msg.signature === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference))
+            // const findOriginalMessageIndex = this.messagesRendered.findIndex(msg => msg.signature === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference))
-            if (findOriginalMessageIndex !== -1 && this.messagesRendered[findOriginalMessageIndex].sender === newMessage.sender) {
+            // if (findOriginalMessageIndex !== -1 && this.messagesRendered[findOriginalMessageIndex].sender === newMessage.sender) {
-                const newMessagesRendered = [...this.messagesRendered]
+            //     const newMessagesRendered = [...this.messagesRendered]
-                newMessagesRendered[findOriginalMessageIndex] = {
+            //     newMessagesRendered[findOriginalMessageIndex] = {
-                    ...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName,
+            //         ...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName,
-                    sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp
+            //         sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp
-                }
+            //     }
-                this.messagesRendered = newMessagesRendered
+            //     this.messagesRendered = newMessagesRendered
-                await this.getUpdateComplete()
+            //     await this.getUpdateComplete()
+            // }
+            this.messagesRendered = {
+                messages: [newMessage],
+                type: 'update',
             }
             return
         }
@@ -3141,14 +3165,22 @@ viewElement.scrollTop = originalScrollTop + heightDifference;
 
         if (newMessage.sender === this.selectedAddress.address) {
 
-            this.messagesRendered = [...this.messagesRendered, newMessage]
+            
+            this.messagesRendered = {
+                messages: [newMessage],
+                type: 'new',
+            }
             await this.getUpdateComplete()
 
             viewElement.scrollTop = viewElement.scrollHeight
         } else if (this.isUserDown) {
 
+            this.messagesRendered = {
+                messages: [newMessage],
+                type: 'new',
+            }
             // Append the message and scroll to the bottom if user is down the page
-            this.messagesRendered = [...this.messagesRendered, newMessage]
+            // this.messagesRendered = [...this.messagesRendered, newMessage]
             await this.getUpdateComplete()
 
             viewElement.scrollTop = viewElement.scrollHeight

plugins/plugins/core/components/ChatScroller.js

@@ -253,6 +253,7 @@ class ChatScroller extends LitElement {
         }
         this.oldMessages = []
         this._upObserverhandler = this._upObserverhandler.bind(this)
+        this.newListMessages = this.newListMessages.bind(this)
         this._downObserverHandler = this._downObserverHandler.bind(this)
         this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this)
         this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
@@ -290,6 +291,30 @@ class ChatScroller extends LitElement {
         this.requestUpdate();
     }
 
+    async newListMessages(newMessages, signature) {
+        console.log('sup')
+        let data = []
+        newMessages.forEach(newMessage => {
+            const lastGroupedMessage = data[data.length - 1];
+
+            if (this.shouldGroupWithLastMessage(newMessage, lastGroupedMessage)) {
+                lastGroupedMessage.messages.push(newMessage);
+            } else {
+                data.push({
+                    messages: [newMessage],
+                    ...newMessage
+                });
+            }
+        });
+
+    
+        
+        this.messagesToRender = data
+        this.requestUpdate()
+  
+        
+
+    }
     async addNewMessages(newMessages, type) {
         console.log('sup')
         newMessages.forEach(newMessage => {
@@ -351,14 +376,6 @@ class ChatScroller extends LitElement {
 
         this.requestUpdate();
         this.setIsLoadingMessages(false)
-        // await this.getUpdateComplete();
-        // setTimeout(()=> {
-        //     this.viewElement.scrollTop = this.viewElement.scrollHeight + 50;
-        //     this.setIsLoadingMessages(false)
-        // },50)
-
-
-
     }
 
     async replaceMessagesWithUpdate(updatedMessages) {
@@ -372,11 +389,25 @@ class ChatScroller extends LitElement {
         this.requestUpdate();
     }
 
+    async replaceMessagesWithUpdateByArray(updatedMessagesArray) {
+        console.log({updatedMessagesArray}, this.messagesToRender)
+        for (let group of this.messagesToRender) {
+            for (let i = 0; i < group.messages.length; i++) {
+                const update = updatedMessagesArray.find(updatedMessage => ((updatedMessage.chatReference  === group.messages[i].signature) || (updatedMessage.chatReference === group.messages[i].originalSignature)));
+                if (update) {
+                    Object.assign(group.messages[i], update);
+                }
+            }
+        }
+        this.requestUpdate();
+    }
+    
+
 
 
     async updated(changedProperties) {
         if (changedProperties && changedProperties.has('messages')) {
-            console.log('this.messages', this.messages)
+     
             if (this.messages.type === 'initial') {
                 this.addNewMessages(this.messages.messages, 'initial')
 
@@ -384,6 +415,8 @@ class ChatScroller extends LitElement {
 
             } else if (this.messages.type === 'new') this.addNewMessages(this.messages.messages)
             else if (this.messages.type === 'old') this.prependOldMessages(this.messages.messages)
+            else if (this.messages.type === 'inBetween') this.newListMessages(this.messages.messages, this.messages.signature)
+            else if (this.messages.type === 'update') this.replaceMessagesWithUpdateByArray(this.messages.messages)
 
 
         }
@@ -430,7 +463,6 @@ class ChatScroller extends LitElement {
 
         let formattedMessages = this.messagesToRender
 
-        console.log('this.messagesToRender', this.messagesToRender)
 
         return html`
               ${this.isLoadingMessages ? html`