Merge branch 'feature/implement-logic-edit-reply-messages' of https://github.com/PhillipLangMartinez/qortal-ui into feature/implement-UI-edit-reply-messages

qortal-ui-core/language/us.json

@@ -485,7 +485,7 @@
       "cchange23": "Cannot Decrypt Message!",
       "cchange24": "Maximum Characters per message is 255",
       "cchange25": "Edit Message",
-      "cchange26": "File size exceeds 5 MB",
+      "cchange26": "File size exceeds 0.5 MB",
       "cchange27": "A registered name is required to send images",
       "cchange28": "This file is not an image",
       "cchange29": "Maximum message size is 1000 bytes",

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

@@ -24,6 +24,7 @@ import { replaceMessagesEdited } from '../../utils/replace-messages-edited.js';
 import { publishData } from '../../utils/publish-image.js';
 import WebWorker from 'web-worker:./computePowWorker.js';
 import WebWorkerImage from 'web-worker:./computePowWorkerImage.js';
+import { EmojiPicker } from 'emoji-picker-js';
 
 
 // const messagesCache = localForage.createInstance({
@@ -66,6 +67,7 @@ class ChatPage extends LitElement {
             chatEditorNewChat: { type: Object },
             userLanguage: { type: String },
             lastMessageRefVisible: { type: Boolean },
+            isLoadingOldMessages: {type: Boolean}
         }
     }
 
@@ -550,6 +552,15 @@ class ChatPage extends LitElement {
         this.uid = new ShortUniqueId()
         this.userLanguage = ""
         this.lastMessageRefVisible = false
+        this.emojiPicker = new EmojiPicker({
+            style: "twemoji",
+            twemojiBaseUrl: '/emoji/',
+            showPreview: false,
+            showVariants: false,
+            showAnimation: false,
+            position: 'top-start',
+            boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
+        });
     }
     
     render() {
@@ -853,11 +864,16 @@ class ChatPage extends LitElement {
         .focusChatEditor=${() => this.focusChatEditor()}
         .sendMessage=${(val) => this._sendMessage(val)}
         .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
+        .emojiPicker=${this.emojiPicker} 
+        ?isLoadingMessages=${this.isLoadingOldMessages}
+        .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
         >
         </chat-scroller>
         `
     }
-
+    setIsLoadingMessages(val){
+        this.isLoadingOldMessages = val
+    }
     async getUpdateComplete() {
         await super.getUpdateComplete();
         const marginElements = Array.from(this.shadowRoot.querySelectorAll('chat-scroller'));
@@ -889,9 +905,16 @@ class ChatPage extends LitElement {
                 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' });
+            }
            
-            scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
         
         } else {
             const getInitialMessages = await parentEpml.request('apiCall', {
@@ -916,9 +939,15 @@ class ChatPage extends LitElement {
                 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' });
+            }
          
-            scrollElement.scrollIntoView({ behavior: 'auto', block: 'center' });
 
         }
 
@@ -1359,6 +1388,7 @@ class ChatPage extends LitElement {
                         const file = new File([result], "name", {
                             type: 'image/png'
                         });
+                       
                         compressedFile = file;
                         resolve();
                     },
@@ -1371,7 +1401,7 @@ class ChatPage extends LitElement {
                 await publishData({
                     registeredName: userName,
                     file : compressedFile,
-                    service: 'IMAGE',
+                    service: 'QCHAT_IMAGE',
                     identifier: identifier,
                     parentEpml,
                     metaData: undefined,
@@ -1442,7 +1472,7 @@ class ChatPage extends LitElement {
                 })
             })
             const fileSize = compressedFile.size;
-            if (fileSize > 5000000) {
+            if (fileSize > 500000) {
                 parentEpml.request('showSnackBar', get("chatpage.cchange26"));
                 this.isLoading = false;
                 this.chatEditor.enable();
@@ -1454,7 +1484,7 @@ class ChatPage extends LitElement {
                     await publishData({
                         registeredName: userName,
                         file : compressedFile,
-                        service: 'IMAGE',
+                        service: 'QCHAT_IMAGE',
                         identifier : identifier,
                         parentEpml,
                         metaData: undefined,
@@ -1478,7 +1508,7 @@ class ChatPage extends LitElement {
                 const messageObject = {
                     messageText: trimmedMessageWithImage,
                     images: [{
-                            service: "IMAGE",
+                            service: "QCHAT_IMAGE",
                             name: userName,
                             identifier: identifier
                     }],

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

@@ -435,4 +435,9 @@ export const chatStyles = css`
 		align-items: center;
 		height: 100%;
 	}
+	.spinnerContainer {
+		display: flex;
+		width: 100%;
+		justify-content: center
+	}
 `

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

@@ -17,6 +17,7 @@ import { EmojiPicker } from 'emoji-picker-js';
 import { cropAddress } from "../../utils/cropAddress";
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
+let toggledMessage = {}
 class ChatScroller extends LitElement {
     static get properties() {
         return {
@@ -30,6 +31,9 @@ class ChatScroller extends LitElement {
             focusChatEditor: {attribute: false},
             sendMessage: {attribute: false},
             showLastMessageRefScroller: { type: Function },
+            emojiPicker: { attribute: false },
+            isLoadingMessages: { type: Boolean},
+            setIsLoadingMessages: {attribute: false}
         }
     }
 
@@ -42,15 +46,6 @@ class ChatScroller extends LitElement {
         this._downObserverHandler = this._downObserverHandler.bind(this)
         this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
         this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")    
-        this.emojiPicker = new EmojiPicker({
-            style: "twemoji",
-            twemojiBaseUrl: '/emoji/',
-            showPreview: false,
-            showVariants: false,
-            showAnimation: false,
-            position: 'top-start',
-            boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
-        });
     }
 
 
@@ -78,8 +73,12 @@ class ChatScroller extends LitElement {
             return messageArray;
         }, [])
         
-    
         return html`
+              ${this.isLoadingMessages ?  html`
+                <div class="spinnerContainer">
+                        <paper-spinner-lite active></paper-spinner-lite>
+                        </div>
+                        ` : ''}
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
                 ${formattedMessages.map((formattedMessage) => {
@@ -99,6 +98,7 @@ class ChatScroller extends LitElement {
                             ?isFirstMessage=${indexMessage === 0}
                             ?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
                             ?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
+                            .setToggledMessage=${this.setToggledMessage}
                             >
                             </message-template>`
                     )
@@ -109,6 +109,9 @@ class ChatScroller extends LitElement {
     }
 
     shouldUpdate(changedProperties) {
+        if(changedProperties.has('isLoadingMessages')){
+            return true
+        }
         // Only update element if prop1 changed.
         return changedProperties.has('messages');
       }
@@ -120,7 +123,22 @@ class ChatScroller extends LitElement {
         return true;
     }
 
+    setToggledMessage(message){
+        toggledMessage = message
+    }
+
+
     async firstUpdated() {
+        this.emojiPicker.on('emoji', selection => {
+
+            this.sendMessage({
+                type: 'reaction',
+    editedMessageObj: toggledMessage,
+                reaction:  selection.emoji,
+             
+               
+             })
+            });
         this.viewElement = this.shadowRoot.getElementById('viewElement');
         this.upObserverElement = this.shadowRoot.getElementById('upObserver');
         this.downObserverElement = this.shadowRoot.getElementById('downObserver');
@@ -137,6 +155,7 @@ class ChatScroller extends LitElement {
 
     _upObserverhandler(entries) {
         if (entries[0].isIntersecting) {
+            this.setIsLoadingMessages(true);
             let _scrollElement = entries[0].target.nextElementSibling;
             this._getOldMessage(_scrollElement);
         }
@@ -198,6 +217,7 @@ class MessageTemplate extends LitElement {
             isFirstMessage: { type: Boolean },
             isSingleMessageInGroup: { type: Boolean },
             isLastMessageInGroup: { type: Boolean },
+            setToggledMessage: {attribute: false}
         }
     }
 
@@ -237,7 +257,13 @@ class MessageTemplate extends LitElement {
     }
 
     showBlockIconFunc(bool) {
-        this.shadowRoot.querySelector(".chat-hover").focus({ preventScroll: true })
+        const chatHover = this.shadowRoot.querySelector(".chat-hover")
+
+        if(chatHover){
+            chatHover.querySelector(".chat-hover").focus({ preventScroll: true })
+        }
+      
+       
         if(bool) {
             this.showBlockAddressIcon = true;
         } else {
@@ -454,6 +480,8 @@ class MessageTemplate extends LitElement {
                                 @blur=${() => this.showBlockIconFunc(false)}
                                 .sendMessage=${this.sendMessage}
                                 version=${version}
+                                .emojiPicker=${this.emojiPicker} 
+                                .setToggledMessage=${this.setToggledMessage}
                             > 
                             </chat-menu>
                         </div>
@@ -529,7 +557,8 @@ class ChatMenu extends LitElement {
             myAddress: { type: Object },
             emojiPicker: { attribute: false },
             sendMessage: {attribute: false},
-            version: {type: String}
+            version: {type: String},
+            setToggledMessage: {attribute: false}
         }
     }
 
@@ -559,26 +588,6 @@ class ChatMenu extends LitElement {
         parentEpml.request('showSnackBar', `${errorMsg}`)
     }
 
-    firstUpdated () {
-        this.emojiPicker = new EmojiPicker({
-            style: "twemoji",
-            twemojiBaseUrl: '/emoji/',
-            showPreview: false,
-            showVariants: false,
-            showAnimation: false,
-            position: 'top-start',
-            boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
-        });
-
-      this.emojiPicker.on('emoji', selection => {
-        this.sendMessage({
-            type: 'reaction',
-            editedMessageObj: this.originalMessage,
-            reaction:  selection.emoji,
-         })
-        });
-    }
-    
     render() {
         return html` 
             <div class="container">
@@ -590,7 +599,13 @@ class ChatMenu extends LitElement {
                         this.versionErrorSnack()
                         return
                     }
-                    this.emojiPicker.togglePicker(e.target)
+                    try {
+                        this.setToggledMessage(this.originalMessage)
+                        this.emojiPicker.togglePicker(e.target)
+                    } catch (error) {
+                        console.log({error})
+                    }
+                    
                     }}
                >
                     <vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>

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

@@ -266,7 +266,6 @@ class ChatTextEditor extends LitElement {
     }
 
 	async firstUpdated() {
-        console.log(this.placeholder, "here500");
         if (this.hasGlobalEvents) {
             this.addGlobalEventListener();
         }

qortal-ui-plugins/plugins/utils/replace-messages-edited.js

@@ -17,13 +17,9 @@ export const replaceMessagesEdited = async ({
 				url: `/chat/messages?chatreference=${msg.reference}&reverse=true${msgQuery}`,
 			})
 
-            console.log({response})
-
 			if (response && Array.isArray(response) && response.length !== 0) {
 				let responseItem = { ...response[0] }
-                console.log('right before')
                 const decodeResponseItem = decodeMessageFunc(responseItem, isReceipient, _publicKey)
-               console.log({decodeResponseItem})
 				delete decodeResponseItem.timestamp
 				msgItem = {
 					...msg,
@@ -43,24 +39,20 @@ export const replaceMessagesEdited = async ({
 		try {
 			parsedMessageObj = JSON.parse(msg.decodedMessage)
 		} catch (error) {
-            console.log('error', {parsedMessageObj})
+            console.log('error')
 			return msg
 		}
-        console.log('noerror')
 		let msgItem = msg
 		try {
 			let msgQuery = `&involving=${msg.recipient}&involving=${msg.sender}`
 			if (!isReceipient) {
 				msgQuery = `&txGroupId=${msg.txGroupId}`
 			}
-
-            console.log({parsedMessageObj})
 			if (parsedMessageObj.repliedTo) {
 				const response = await parentEpml.request("apiCall", {
 					type: "api",
 					url: `/chat/messages?chatreference=${parsedMessageObj.repliedTo}&reverse=true${msgQuery}`,
 				})
-                console.log({response2: response})
 				if (
 					response &&
 					Array.isArray(response) &&