Send Private Message Done in Chat Menu

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 },
-            hideNewMesssageBar: { attribute: false },
+            showNewMessageBar: { 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) {
-        console.log(outSideMsg);
         // have params to determine if it's a reply or not
         // have variable to determine if it's a response, holds signature in constructor
         // need original message signature 
@@ -1681,7 +1695,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()
@@ -1715,6 +1729,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 = [];
@@ -1762,7 +1782,7 @@ class ChatPage extends LitElement {
                     metaData: undefined,
                     uploadType: 'file',
                     selectedAddress: this.selectedAddress,
-                    worker: new WebWorkerImage()
+                    worker: workerImage
                    })
                    this.isDeletingImage = false
             } catch (error) {
@@ -1806,6 +1826,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}`;
@@ -1845,7 +1872,7 @@ class ChatPage extends LitElement {
                         metaData: undefined,
                         uploadType: 'file',
                         selectedAddress: this.selectedAddress,
-                        worker: new WebWorkerImage()
+                        worker: workerImage
                     });
                 this.isUploadingImage = false;
                 this.imageFile = null;
@@ -2123,21 +2150,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 chatBytesArray = null
+
+              let worker;
+
+              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
-                    nonce = e.data.nonce
-                    res()
-                 
+                  chatBytesArray = e.data.chatBytesArray;
+                    nonce = e.data.nonce;
+                    res();
                 }
-              })
+              });
 
             let _response = await parentEpml.request('sign_chat', {
                 nonce: this.selectedAddress.nonce,
@@ -2145,7 +2180,6 @@ class ChatPage extends LitElement {
                 chatNonce: nonce
             });
 
-
             getSendChatResponse(_response, isForward);
         };
 
@@ -2193,7 +2227,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.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) => {
+        let formattedMessages = this.messages.reduce((messageArray, message, index) => {
             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');
@@ -232,6 +241,7 @@ class MessageTemplate extends LitElement {
             isLastMessageInGroup: { type: Boolean },
             setToggledMessage: { attribute: false },
             setForwardProperties: { attribute: false },
+            setOpenPrivateMessage : { attribute: false }
         }
     }
 
@@ -508,6 +518,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>
@@ -586,7 +598,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 }
         }
     }
 
@@ -665,7 +679,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'){
@@ -684,21 +698,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') {
@@ -714,7 +731,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'){
@@ -728,7 +745,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')
-            use(checkLanguage)
+            const checkLanguage = localStorage.getItem('qortalLanguage');
+            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.hideNewMesssageBar = this.hideNewMesssageBar.bind(this)
+        this.showNewMessageBar = this.showNewMessageBar.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'
@@ -395,6 +396,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) {
@@ -720,7 +726,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) {
@@ -740,7 +750,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) {
@@ -830,11 +840,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')
     }
 }