Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages

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

@@ -366,7 +366,6 @@ class ChatModals extends LitElement {
               <textarea class='textarea' @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id='messageBox' placeholder='${translate('welcomepage.wcchange5')}' rows='1'></textarea>
           </p>
           <mwc-button ?disabled='${this.isLoading}' slot='primaryAction' @click=${() => {
-            console.log("here500");
             this._sendMessage();
           }
         }>${translate('welcomepage.wcchange6')}

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

@@ -54,8 +54,9 @@ class ChatPage extends LitElement {
             _initialMessages: { type: Array },
             isUserDown: { type: Boolean },
             isPasteMenuOpen: { type: Boolean },
-            showNewMesssageBar: { attribute: false },
+            showNewMessageBar: { attribute: false },
-            hideNewMesssageBar: { attribute: false },
+            hideNewMessageBar: { attribute: false },
+            setOpenPrivateMessage: { attribute: false },
             chatEditorPlaceholder: { type: String },
             messagesRendered: { type: Array },
             repliedToMessageObj: { type: Object },
@@ -75,6 +76,8 @@ class ChatPage extends LitElement {
             openForwardOpen: {type: Boolean },
             userFound: { type: Array },
             userFoundModalOpen: { type: Boolean },
+            webWorker: { type: Object },
+            webWorkerImage: { type: Object }
         }
     }
 
@@ -693,10 +696,12 @@ class ChatPage extends LitElement {
             name: "",
             selected: false
         }
+        this.webWorker = null;
+        this.webWorkerImage = null;
     }
     
     render() {
-        console.log(25, 'here');
+        console.log(5, 'Chat Page Here');
         return html`
             <div class="chat-container">
                 <div>
@@ -983,6 +988,18 @@ class ChatPage extends LitElement {
         `
     }
 
+    connectedCallback() {
+        super.connectedCallback();
+        this.webWorker = new WebWorker();
+        this.webWorkerImage = new WebWorkerImage();
+      }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.webWorker.terminate();
+        this.webWorkerImage.terminate();
+      }
+
     async userSearch() {
         const nameValue = this.shadowRoot.getElementById('sendTo').value;
             if (!nameValue) {
@@ -1175,9 +1192,6 @@ class ChatPage extends LitElement {
             }
         }
         
-        if (changedProperties && changedProperties.has('forwardActiveChatHeadUrl')) {
-            console.log(this.forwardActiveChatHeadUrl, "forwardActiveChatHeadUrl here");
-        }
     }
 
    async renderPlaceholder() {
@@ -1224,6 +1238,7 @@ class ChatPage extends LitElement {
         ?isLoadingMessages=${this.isLoadingOldMessages}
         .setIsLoadingMessages=${(val) => this.setIsLoadingMessages(val)}
         .setForwardProperties=${(forwardedMessage)=> this.setForwardProperties(forwardedMessage)}
+        .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
         >
         </chat-scroller>
         `
@@ -1435,7 +1450,7 @@ class ChatPage extends LitElement {
             this.messagesRendered = [...this.messagesRendered, newMessage]
             await this.getUpdateComplete();
 
-            this.showNewMesssageBar();
+            this.showNewMessageBar();
         }
     }
 
@@ -1673,7 +1688,6 @@ class ChatPage extends LitElement {
     }
 
    async _sendMessage(outSideMsg) {
-
         if(this.isReceipient){
            let hasPublicKey = true
             if(!this._publicKey.hasPubKey){
@@ -1714,7 +1728,7 @@ class ChatPage extends LitElement {
         // create new var called repliedToData and use that to modify the UI
         // find specific object property in local
         let typeMessage = 'regular';
-       
+        let workerImage;
         this.isLoading = true;
         this.chatEditor.disable();
         this.chatEditorNewChat.disable()
@@ -1748,6 +1762,12 @@ class ChatPage extends LitElement {
             let compressedFile = ''
             var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg==";
 
+            if (this.webWorkerImage) {
+                workerImage = this.webWorkerImage;
+            } else {
+                this.webWorkerImage = new WebWorkerImage();
+            }
+   
         const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
             const byteCharacters = atob(b64Data);
             const byteArrays = [];
@@ -1795,7 +1815,7 @@ class ChatPage extends LitElement {
                     metaData: undefined,
                     uploadType: 'file',
                     selectedAddress: this.selectedAddress,
-                    worker: new WebWorkerImage()
+                    worker: workerImage
                    })
                    this.isDeletingImage = false
             } catch (error) {
@@ -1839,6 +1859,13 @@ class ChatPage extends LitElement {
                 this.chatEditorNewChat.enable()
                 return;
             }
+
+            if (this.webWorkerImage) {
+                workerImage = this.webWorkerImage;
+            } else {
+                this.webWorkerImage = new WebWorkerImage();
+            }
+
             const image = this.imageFile
             const id = this.uid();
             const identifier = `qchat_${id}`;
@@ -1878,7 +1905,7 @@ class ChatPage extends LitElement {
                         metaData: undefined,
                         uploadType: 'file',
                         selectedAddress: this.selectedAddress,
-                        worker: new WebWorkerImage()
+                        worker: workerImage
                     });
                 this.isUploadingImage = false;
                 this.imageFile = null;
@@ -2162,21 +2189,29 @@ class ChatPage extends LitElement {
 
         const _computePow = async (chatBytes, isForward) => {
             const difficulty = this.balance === 0 ? 12 : 8;
+
             const path = window.parent.location.origin + '/memory-pow/memory-pow.wasm.full'
-              const worker = new WebWorker();
+
-            let nonce = null
+              let worker;
-            let chatBytesArray = null
+
+              if (this.webWorker) {
+                worker = this.webWorker;
+              } else {
+                this.webWorker = new WebWorker();
+              }
+
+            let nonce = null;
+
+            let chatBytesArray = null;
+
               await new Promise((res, rej) => {
                 worker.postMessage({chatBytes, path, difficulty});
-            
                 worker.onmessage = e => {
-                  worker.terminate()
+                  chatBytesArray = e.data.chatBytesArray;
-                  chatBytesArray = e.data.chatBytesArray
+                    nonce = e.data.nonce;
-                    nonce = e.data.nonce
+                    res();
-                    res()
-                 
                 }
-              })
+              });
 
             let _response = await parentEpml.request('sign_chat', {
                 nonce: this.selectedAddress.nonce,
@@ -2184,7 +2219,6 @@ class ChatPage extends LitElement {
                 chatNonce: nonce
             });
 
-
             getSendChatResponse(_response, isForward);
         };
 
@@ -2232,7 +2266,7 @@ class ChatPage extends LitElement {
         if (entries[0].isIntersecting) {
 
             this.setIsUserDown(true)
-            this.hideNewMesssageBar()
+            this.hideNewMessageBar()
         } else {
 
             this.setIsUserDown(false)

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

@@ -446,4 +446,52 @@ export const chatStyles = css`
 		width: 100%;
 		justify-content: center
 	}
+
+	.delete-image-msg {
+		font-family: Livvic, sans-serif;
+		font-size: 20px;
+		color: var(--chat-bubble-msg-color);
+		letter-spacing: 0.3px;
+		font-weight: 300;
+		text-align: center;
+	}
+
+	.modal-button-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+  }
+
+  .modal-button {
+      font-family: Roboto, sans-serif;
+      font-size: 16px;
+      color: var(--mdc-theme-primary);
+      background-color: transparent;
+      padding: 8px 10px;
+      border-radius: 5px;
+      border: none;
+      transition: all 0.3s ease-in-out;
+  }
+
+  .modal-button-red {
+      font-family: Roboto, sans-serif;
+      font-size: 16px;
+      color: #F44336;
+      background-color: transparent;
+      padding: 8px 10px;
+      border-radius: 5px;
+      border: none;
+      transition: all 0.3s ease-in-out;
+  }
+
+  .modal-button-red:hover {
+      cursor: pointer;
+      background-color: #f4433663;
+  }
+
+  .modal-button:hover {
+      cursor: pointer;
+      background-color: #03a8f475;
+  }
 `

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

@@ -37,6 +37,7 @@ class ChatScroller extends LitElement {
             setIsLoadingMessages: {attribute: false},
             chatId: { type: String },
             setForwardProperties: { attribute: false },
+            setOpenPrivateMessage: { attribute: false },
         }
     }
 
@@ -53,12 +54,22 @@ class ChatScroller extends LitElement {
 
 
     render() {
-        console.log({messages: this.messages})
+        let formattedMessages = this.messages.reduce((messageArray, message, index) => {
-        let formattedMessages = this.messages.reduce((messageArray, message) => {
             const lastGroupedMessage = messageArray[messageArray.length - 1];
             let timestamp;
             let sender;
             let repliedToData;
+            
+            let firstMessageInChat;
+
+            if (index === 0) {
+                firstMessageInChat = true;
+            } else {
+                firstMessageInChat = false;
+            }
+
+            message = {...message, firstMessageInChat}
+
             if (lastGroupedMessage) {
                 timestamp = lastGroupedMessage.timestamp;
                 sender = lastGroupedMessage.sender;
@@ -105,6 +116,7 @@ class ChatScroller extends LitElement {
                             ?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
                             .setToggledMessage=${this.setToggledMessage}
                             .setForwardProperties=${this.setForwardProperties}
+                            .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
                             >
                             </message-template>`
                     )
@@ -133,10 +145,9 @@ class ChatScroller extends LitElement {
     }
 
     setToggledMessage (message) {
-        toggledMessage = message
+        toggledMessage = message;
     }
 
-
     async firstUpdated() {
         this.emojiPicker.on('emoji', selection => {
 
@@ -144,8 +155,6 @@ class ChatScroller extends LitElement {
                 type: 'reaction',
                 editedMessageObj: toggledMessage,
                 reaction:  selection.emoji,
-             
-               
                 })
             });
         this.viewElement = this.shadowRoot.getElementById('viewElement');
@@ -226,13 +235,15 @@ class MessageTemplate extends LitElement {
             sendMessage: { attribute: false },
             sendMessageForward: { attribute: false },
             openDialogImage: { attribute: false },
+            openDeleteImage: { type: Boolean },
             isImageLoaded: { type: Boolean },
             isFirstMessage: { type: Boolean },
             isSingleMessageInGroup: { type: Boolean },
             isLastMessageInGroup: { type: Boolean },
             setToggledMessage: {attribute: false},
             setForwardProperties: {attribute: false},
-            viewImage: {type: Boolean}
+            viewImage: {type: Boolean},
+            setOpenPrivateMessage : { attribute: false }
         }
     }
 
@@ -477,12 +488,10 @@ class MessageTemplate extends LitElement {
                                         class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
                                         style=${this.isFirstMessage && "margin-top: 10px;"}>
                                             ${imageHTML}<vaadin-icon
-                                            @click=${() => this.sendMessage({
+                                            @click=${() => {
-                                            type: 'delete',
+                                                this.openDeleteImage = true;
-                                            name: image.name,
+                                                this.chatE
-                                            identifier: image.identifier,
+                                                }}
-                                            editedMessageObj: this.messageObj,
-                                        })}
                                             class="image-delete-icon"  icon="vaadin:close" slot="icon"></vaadin-icon>
                                         </div>
                                     ` : image && isImageDeleted ? html`
@@ -527,6 +536,8 @@ class MessageTemplate extends LitElement {
                                 .emojiPicker=${this.emojiPicker} 
                                 .setToggledMessage=${this.setToggledMessage}
                                 .setForwardProperties=${this.setForwardProperties}
+                                ?firstMessageInChat=${this.messageObj.firstMessageInChat}
+                                .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
                             > 
                             </chat-menu>
                         </div>
@@ -580,6 +591,31 @@ class MessageTemplate extends LitElement {
 					    ${translate("general.close")}
 					</mwc-button>
 				</mwc-dialog>
+                <mwc-dialog
+                hideActions
+                ?open=${this.openDeleteImage} 
+                @closed=${()=> {
+                    this.openDeleteImage = false;
+                }}>
+                <div class="delete-image-msg">
+                    <p>Are you sure you want to delete this image?</p>
+                </div>
+                <div class="modal-button-row" @click=${() => this.openDeleteImage = false}>
+                    <button class="modal-button-red">
+                       Cancel 
+                    </button>
+                    <button
+                    class="modal-button" 
+                    @click=${() => this.sendMessage({
+                                type: 'delete',
+                                name: image.name,
+                                identifier: image.identifier,
+                                editedMessageObj: this.messageObj,
+                            })}>
+                        Yes
+                    </button>
+                </div>
+                </mwc-dialog>
         `
     }
 }
@@ -605,7 +641,9 @@ class ChatMenu extends LitElement {
             version: { type: String },
             setToggledMessage: { attribute: false },
             sendMessageForward: { attribute: false },
-            setForwardProperties: {attribute: false}
+            setForwardProperties: { attribute: false },
+            firstMessageInChat: { type: Boolean },
+            setOpenPrivateMessage: { attribute: false }
         }
     }
 
@@ -684,7 +722,7 @@ class ChatMenu extends LitElement {
         return html` 
             <div class="container">
             <div 
-                class="menu-icon tooltip reaction" 
+                class=${`menu-icon reaction ${!this.firstMessageInChat ? "tooltip" : ""}`} 
                 data-text="${translate("blockpage.bcchange13")}" 
                 @click=${(e) => {
                     if(this.version === '0'){
@@ -703,21 +741,24 @@ class ChatMenu extends LitElement {
                     <vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>
                 </div>
                 <div 
-                class="menu-icon tooltip" 
+                class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} 
                 data-text="${translate("blockpage.bcchange14")}" 
                 @click="${() => {
                     this.messageForwardFunc()
                     }}">
                     <vaadin-icon icon="vaadin:arrow-forward" slot="icon"></vaadin-icon>
                 </div>                
-                <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}">   
+                <div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange9")}" @click="${() => this.setOpenPrivateMessage({
+                    name: this.originalMessage.senderName ? this.originalMessage.senderName : this.originalMessage.sender,
+                    open: true   
+                })}">   
                     <vaadin-icon icon="vaadin:paperplane" slot="icon"></vaadin-icon>
                 </div>
-                <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}">
+                <div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange8")}" @click="${() => this.copyToClipboard(this.toblockaddress)}">
                     <vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
                 </div>
                 <div 
-                class="menu-icon tooltip" 
+                class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} 
                 data-text="${translate("blockpage.bcchange11")}" 
                 @click="${() => {
                     if (this.version === '0') {
@@ -733,7 +774,7 @@ class ChatMenu extends LitElement {
                 ${this.myAddress === this.originalMessage.sender ? (
                     html`
                     <div 
-                    class="menu-icon tooltip" 
+                    class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
                     data-text="${translate("blockpage.bcchange12")}" 
                     @click=${() => {
                     if(this.version === '0'){
@@ -747,7 +788,7 @@ class ChatMenu extends LitElement {
                     </div>
                     `
                 ) : html`<div></div>`}
-                <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
+                <div class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`} data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
                     <vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
                 </div>
                 ${this.showBlockAddressIcon

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

@@ -25,7 +25,8 @@ class ChatWelcomePage extends LitElement {
             btnDisable: { type: Boolean },
             isLoading: { type: Boolean },
             balance: { type: Number },
-            theme: { type: String, reflect: true }
+            theme: { type: String, reflect: true },
+            setOpenPrivateMessage: { attribute: false }
         }
     }
 
@@ -212,7 +213,14 @@ class ChatWelcomePage extends LitElement {
                     <div class="center-box">
                         <mwc-icon class="img-icon">chat</mwc-icon><br>
                         <span style="font-size: 20px; color: var(--black);">${this.myAddress.address}</span>
-                        <div class="start-chat" @click=${() => this.shadowRoot.querySelector('#startSecondChatDialog').show()}>${translate("welcomepage.wcchange2")}</div>
+                        <div 
+                            class="start-chat" 
+                            @click="${() => this.setOpenPrivateMessage({
+                            name: "",
+                            open: true   
+                            })}">
+                            ${translate("welcomepage.wcchange2")}
+                        </div>
                     </div>
                 </div>
 

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

@@ -250,15 +250,15 @@ class NameMenu extends LitElement {
     }
 
     firstUpdated() {
-        this.getChatBlockedAdresses()
+        this.getChatBlockedAdresses();
 
 	  setInterval(() => {
 	      this.getChatBlockedAdresses();
 	  }, 60000)
 
         window.addEventListener('storage', () => {
-            const checkLanguage = localStorage.getItem('qortalLanguage')
+            const checkLanguage = localStorage.getItem('qortalLanguage');
-            use(checkLanguage)
+            use(checkLanguage);
         })
 
         window.onclick = function(event) {

qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js

@@ -70,8 +70,9 @@ class Chat extends LitElement {
         this.messages = []
         this.btnDisable = false
         this.isLoading = false
-        this.showNewMesssageBar = this.showNewMesssageBar.bind(this)
+        this.showNewMessageBar = this.showNewMessageBar.bind(this)
-        this.hideNewMesssageBar = this.hideNewMesssageBar.bind(this)
+        this.hideNewMessageBar = this.hideNewMessageBar.bind(this)
+        this.setOpenPrivateMessage = this.setOpenPrivateMessage.bind(this)
         this._sendMessage = this._sendMessage.bind(this)
         this.insertImage = this.insertImage.bind(this)
         this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
@@ -399,6 +400,11 @@ class Chat extends LitElement {
         parentEpml.imReady()
     }
 
+    setOpenPrivateMessage(props) {
+        this.openPrivateMessage = props.open;
+        this.shadowRoot.getElementById("sendTo").value = props.name
+    }
+
    async userSearch() {
     const nameValue = this.shadowRoot.getElementById('sendTo').value;
         if(!nameValue) {
@@ -725,7 +731,11 @@ class Chat extends LitElement {
     }
 
     renderChatWelcomePage() {
-        return html`<chat-welcome-page myAddress=${JSON.stringify(this.selectedAddress)}></chat-welcome-page>`
+        return html`
+        <chat-welcome-page 
+            myAddress=${JSON.stringify(this.selectedAddress)}
+            .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}>
+        </chat-welcome-page>`
     }
 
     renderChatHead(chatHeadArr) {
@@ -745,7 +755,7 @@ class Chat extends LitElement {
         // Else render Welcome to Q-CHat
 
         // TODO: DONE: Do the above in the ChatPage 
-        return html`<chat-page .chatHeads=${this.chatHeads} .hideNewMesssageBar=${this.hideNewMesssageBar} .showNewMesssageBar=${this.showNewMesssageBar} myAddress=${window.parent.reduxStore.getState().app.selectedAddress.address} chatId=${this.activeChatHeadUrl}></chat-page>`
+        return html`<chat-page .chatHeads=${this.chatHeads} .hideNewMessageBar=${this.hideNewMessageBar} .showNewMessageBar=${this.showNewMessageBar} myAddress=${window.parent.reduxStore.getState().app.selectedAddress.address} chatId=${this.activeChatHeadUrl} .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}></chat-page>`
     }
 
     setChatHeads(chatObj) {
@@ -835,11 +845,11 @@ class Chat extends LitElement {
         viewElement.scroll({ top: viewElement.scrollHeight, left: 0, behavior: 'smooth' })
     }
 
-    showNewMesssageBar() {
+    showNewMessageBar() {
         this.shadowRoot.getElementById('newMessageBar').classList.remove('hide-new-message-bar')
     }
 
-    hideNewMesssageBar() {
+    hideNewMessageBar() {
         this.shadowRoot.getElementById('newMessageBar').classList.add('hide-new-message-bar')
     }
 }