fix reply if not in message array

qortal-ui-core/font/switch-theme.css

@@ -28,6 +28,7 @@ html {
   --relaynodetxt: #646464;
   --menuhover: #eeeeee;
   --menuactive: #ebebeb;
+  --menuactivergb: 235, 235, 235;
   --mainmenutext: #080808;
   --mainmenutexthover: #080808;
   --switchbackground: #666666;
@@ -82,6 +83,7 @@ html[theme="dark"] {
   --relaynodetxt: #d4d4d4;
   --menuhover: #008fd5;
   --menuactive: #008fd5;
+  --menuactivergb: 0, 143, 213;
   --mainmenutext: #008fd5;
   --mainmenutexthover: #0f1a2e;
   --switchbackground: #eeeeee;

qortal-ui-core/language/us.json

@@ -571,7 +571,8 @@
       "cchange62": "Wrong Username and Address Inputted! Please try again!",
       "cchange63": "Enter Enabled",
       "cchange64": "Enter Disabled",
-      "cchange65": "Please enter a recipient"
+      "cchange65": "Please enter a recipient",
+      "cchange66": "Cannot fetch replied-to message. Message is too old."
 
    },
    "welcomepage": {

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -102,7 +102,8 @@ class ChatPage extends LitElement {
             openTipUser: { type: Boolean },
             openUserInfo: { type: Boolean },
             selectedHead: { type: Object },
-            userName: { type: String }
+            userName: { type: String },
+            goToRepliedMessage: {attribute: false}
         }
     }
 
@@ -906,7 +907,6 @@ class ChatPage extends LitElement {
     }
 
     setUserName(props) {
-        console.log({props})
         this.userName = props.senderName ? props.senderName : props.sender;
         this.setSelectedHead(props);
     }
@@ -925,7 +925,6 @@ class ChatPage extends LitElement {
     }
     
     render() {
-        console.log(this.userName, "username here");
         return html`
             <div class="main-container">
             <div 
@@ -1434,6 +1433,49 @@ class ChatPage extends LitElement {
         
     }
 
+   async goToRepliedMessage(message){
+    const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference)
+    if(findMessage){
+        findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        const findElement = findMessage.shadowRoot.querySelector('.message-parent')
+        if(findElement){
+            findElement.classList.add('blink-bg')
+            setTimeout(()=> {
+                findElement.classList.remove('blink-bg')
+            }, 2000)
+        }
+  
+        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){
+       await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000)
+       const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.reference)
+    if(findMessage){
+        findMessage.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        const findElement = findMessage.shadowRoot.querySelector('.message-parent')
+        if(findElement){
+            findElement.classList.add('blink-bg')
+            setTimeout(()=> {
+                findElement.classList.remove('blink-bg')
+            }, 2000)
+        }
+  
+        return
+    }
+
+    let errorMsg = get("chatpage.cchange66")
+    parentEpml.request('showSnackBar', `${errorMsg}`)
+    
+    }
+
+   }
+
     async userSearch() {
         const nameValue = this.shadowRoot.getElementById('sendTo').value;
             if (!nameValue) {
@@ -1616,7 +1658,6 @@ class ChatPage extends LitElement {
                 this.groupAdmin = membersAdminsWithName
                 this.groupMembers = membersWithName
                 this.groupInfo = getGroupInfo
-                console.log({membersAdminsWithName})
             } catch (error) {
                 console.error(error)
             }
@@ -1749,6 +1790,8 @@ class ChatPage extends LitElement {
             .setSelectedHead=${(val) => this.setSelectedHead(val)}
             ?openTipUser=${this.openTipUser}
             .selectedHead=${this.selectedHead}
+            .goToRepliedMessage=${(val)=> this.goToRepliedMessage(val)}
+            .getOldMessageAfter=${(val)=> this.getOldMessageAfter(val)}
             >
             </chat-scroller>
         `
@@ -1782,6 +1825,81 @@ class ChatPage extends LitElement {
           })
     }
 
+    async getOldMessageDynamic(limit, before, after) {
+
+        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=${limit}&reverse=true&before=${before}&after=${after}&haschatreference=false`,
+            });
+
+            const decodeMsgs = getInitialMessages.map((eachMessage) => {
+                return this.decodeMessage(eachMessage)
+            })
+            
+         
+            const replacedMessages = await replaceMessagesEdited({
+                decodedMessages: decodeMsgs,
+	            parentEpml,
+                isReceipient: this.isReceipient,
+                decodeMessageFunc: this.decodeMessage,
+                _publicKey: this._publicKey
+            })
+            this.messagesRendered = [...replacedMessages, ...this.messagesRendered].sort(function (a, b) {
+                return a.timestamp
+                    - b.timestamp
+            })
+            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', {
+                type: 'api',
+                url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${limit}&reverse=true&before=${before}&after=${after}&haschatreference=false`,
+            });
+
+
+            const decodeMsgs = getInitialMessages.map((eachMessage) => {
+                return this.decodeMessage(eachMessage)
+            })
+
+            const replacedMessages = await replaceMessagesEdited({
+                decodedMessages: decodeMsgs,
+	            parentEpml,
+                isReceipient: this.isReceipient,
+                decodeMessageFunc: this.decodeMessage,
+                _publicKey: this._publicKey
+            })
+          
+            this.messagesRendered = [...replacedMessages, ...this.messagesRendered].sort(function (a, b) {
+                return a.timestamp
+                    - b.timestamp
+            })
+            this.isLoadingOldMessages = false
+            await this.getUpdateComplete();
+            const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
+
+            if(viewElement){
+                viewElement.scrollTop = 200
+            }
+       
+                
+          
+         
+
+        }
+    }
+
+
     async getOldMessage(scrollElement) {
  
         if (this.isReceipient) {
@@ -1853,6 +1971,77 @@ class ChatPage extends LitElement {
         }
     }
 
+    async getOldMessageAfter(scrollElement) {
+ 
+        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&afer=${scrollElement.messageObj.timestamp}&haschatreference=false`,
+            });
+
+            const decodeMsgs = getInitialMessages.map((eachMessage) => {
+                return this.decodeMessage(eachMessage)
+            })
+            
+         
+            const replacedMessages = await replaceMessagesEdited({
+                decodedMessages: decodeMsgs,
+	            parentEpml,
+                isReceipient: this.isReceipient,
+                decodeMessageFunc: this.decodeMessage,
+                _publicKey: this._publicKey
+            })
+            this.messagesRendered = [...this.messagesRendered, ...replacedMessages].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.reference === scrollElement.messageObj.reference)
+          
+            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=${scrollElement.messageObj.timestamp}&haschatreference=false`,
+            });
+
+
+            const decodeMsgs = getInitialMessages.map((eachMessage) => {
+                return this.decodeMessage(eachMessage)
+            })
+
+            const replacedMessages = await replaceMessagesEdited({
+                decodedMessages: decodeMsgs,
+	            parentEpml,
+                isReceipient: this.isReceipient,
+                decodeMessageFunc: this.decodeMessage,
+                _publicKey: this._publicKey
+            })
+          
+            this.messagesRendered = [ ...this.messagesRendered, ...replacedMessages].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.reference === scrollElement.messageObj.reference)
+            
+            if(findElement){
+                findElement.scrollIntoView({ behavior: 'auto', block: 'center' });
+            }
+         
+
+        }
+    }
+
     async processMessages(messages, isInitial) {
         const isReceipient = this.chatId.includes('direct')
          const decodedMessages = messages.map((eachMessage) => {
@@ -2002,7 +2191,6 @@ class ChatPage extends LitElement {
         let decodedMessageObj = {};
 
         if (isReceipientVar === true) {
-            console.log('encoded', encodedMessageObj.isEncrypted, _publicKeyVar.hasPubKey,encodedMessageObj.data)
             // direct chat
             if (encodedMessageObj.isEncrypted === true && _publicKeyVar.hasPubKey === true && encodedMessageObj.data) {
                 let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, _publicKeyVar.key, encodedMessageObj.reference);
@@ -2653,7 +2841,6 @@ class ChatPage extends LitElement {
                         type: 'api',
                         url: `/names/${userInput}`
                     });
-                        console.log({validatedAddress, validatedUsername })
                     
                         if (validatedAddress && validatedUsername.name) {
                             userPubkey = await parentEpml.request('apiCall', {

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -172,6 +172,7 @@ export const chatStyles = css`
     border-radius: 5px;
     padding: 8px 5px 8px 25px;
 		margin-bottom: 10px;
+		cursor: pointer;
 	}
 
 	.original-message:before {
@@ -187,6 +188,7 @@ export const chatStyles = css`
 	.original-message-sender {
 		margin: 0 0 5px 0;
 		color: var(--mdc-theme-primary);
+		cursor: pointer;
 	}
 
 	.replied-message {
@@ -640,4 +642,14 @@ export const chatStyles = css`
     border-top: 2px solid rgba(#0D0D0D, 0.1);
     margin: 2rem 0;
   }
+
+  .blink-bg{
+	border-radius: 8px;
+		animation: blinkingBackground 3s;
+	}
+	@keyframes blinkingBackground{
+		0%		{ background-color: rgba(var(--menuactivergb), 1)}
+
+		100%	        { background-color:rgba(var(--menuactivergb), 0)}
+	}
 `

qortal-ui-plugins/plugins/core/components/ChatScroller.js

@@ -50,7 +50,9 @@ class ChatScroller extends LitElement {
             openTipUser: { type: Boolean },
             openUserInfo: { type: Boolean },
             userName: { type: String },
-            selectedHead: { type: Object }
+            selectedHead: { type: Object },
+            goToRepliedMessage: { attribute: false },
+            getOldMessageAfter: {attribute: false}
         }
     }
 
@@ -101,6 +103,7 @@ class ChatScroller extends LitElement {
             }
             return messageArray;
         }, [])
+
         
         return html`
               ${this.isLoadingMessages ?  html`
@@ -132,7 +135,10 @@ class ChatScroller extends LitElement {
                             .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
                             .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
                             .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
-                            .setUserName=${(val) => this.setUserName(val)}>
+                            .setUserName=${(val) => this.setUserName(val)}
+                            id=${message.reference}
+                            .goToRepliedMessage=${this.goToRepliedMessage}
+                            >
                             </message-template>`
                     )
                 })}
@@ -195,6 +201,10 @@ class ChatScroller extends LitElement {
         this.getOldMessage(_scrollElement)
     }
 
+    _getOldMessageAfter(_scrollElement) {
+        this.getOldMessageAfter(_scrollElement)
+    }
+
     _upObserverhandler(entries) {
         if (entries[0].isIntersecting) {
             if(this.messages.length < 20){
@@ -208,6 +218,8 @@ class ChatScroller extends LitElement {
 
     _downObserverHandler(entries) {
         if (!entries[0].isIntersecting) {
+            let _scrollElement = entries[0].target.previousElementSibling;
+            // this._getOldMessageAfter(_scrollElement);
             this.showLastMessageRefScroller(true);
         } else {
             this.showLastMessageRefScroller(false);
@@ -270,7 +282,8 @@ class MessageTemplate extends LitElement {
             setOpenTipUser: { attribute: false },
             setOpenUserInfo: { attribute: false },
             setUserName: { attribute: false },
-            openTipUser:{ type: Boolean }
+            openTipUser:{ type: Boolean },
+            goToRepliedMessage: { attribute: false },
         }
     }
 
@@ -511,14 +524,13 @@ class MessageTemplate extends LitElement {
                                 ) : null}
                             </div>
                                 ${repliedToData && html`
-                                    <div class="original-message">
+                                    <div class="original-message" 
+                                    @click=${()=> {
+                                        this.goToRepliedMessage(repliedToData)
+                                    }}>
                                         <p 
-                                        style=${this.myAddress === repliedToData.sender ? "cursor: auto;" : "cursor: pointer;"}
-                                        @click=${() => {
-                                            if (this.myAddress === repliedToData.sender) return;
-                                            this.setOpenUserInfo(true);
-                                            this.setUserName(repliedToData)
-                                        }} 
+                                        
+                                      
                                             class="original-message-sender">
                                              ${repliedToData.senderName ?? cropAddress(repliedToData.sender)}
                                         </p>