Added forward message user lookup

qortal-ui-core/font/material-icons.css

@@ -18,6 +18,20 @@
     url(Montserrat.ttf) format('truetype');
 }
 
+@font-face {
+  font-family: 'KoHo';
+  src: local('KoHo'),
+    local('KoHo'),
+    url(KoHo.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Livvic';
+  src: local('Livvic'),
+    local('Livvic'),
+    url(Livvic.ttf) format('truetype');
+}
+
 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;

qortal-ui-core/language/us.json

@@ -466,7 +466,7 @@
       "cchange4": "New Message",
       "cchange5": "(Click to scroll down)",
       "cchange6": "Type the name or address of who you want to chat with to send a private message! You can validate the person's name by clicking on the book icon.",
-      "cchange7": "Name / Address",
+      "cchange7": "Username / Address",
       "cchange8": "Message...",
       "cchange9": "Send",
       "cchange10": "Blocked Users List",
@@ -478,7 +478,7 @@
       "cchange16": "Successfully unblocked this user.",
       "cchange17": "Error occurred when trying to unblock this user. Please try again!",
       "cchange18": "unblock",
-      "cchange19": "Invalid Name / Address, Check the name / address and retry...",
+      "cchange19": "Invalid Username / Address, Check the name / address and retry...",
       "cchange20": "Message Sent Successfully!",
       "cchange21": "Sending failed, Please retry...",
       "cchange22": "Loading Messages...",
@@ -495,7 +495,8 @@
       "cchange34": "This chat message is using an older message version and cannot use this feature.",
       "cchange35": "Error when trying to fetch the user's name. Please try again!",
       "cchange36": "Search Results",
-      "cchange37": "No Results Found"
+      "cchange37": "No Results Found",
+      "cchange38": "User Verified"
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",
@@ -524,7 +525,7 @@
       "bcchange13": "Reaction",
       "bcchange14": "Forward",
       "bcchange15": "Message Forwarded",
-      "bcchange16": "Choose recipient",
+      "bcchange16": "Choose Recipient or Search for One Below",
       "bcchange17": "FORWARDED"
    },
    "grouppage": {

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

@@ -16,7 +16,6 @@ export class ChatSearchResults extends LitElement {
   static styles = [chatSearchResultsStyles]
 
   render() {
-    console.log(10, "search results here");
     return html`
       <div class="chat-results-card" style=${this.isOpen ? "display: block;" : "display: none;"}>
         <vaadin-icon 
@@ -49,7 +48,7 @@ export class ChatSearchResults extends LitElement {
                           this.onClickFunc(result);
                       }}>
                         <p class="chat-result">
-                          ${result}
+                          ${result.name}
                         </p>
                       </div>
                     `

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

@@ -57,6 +57,10 @@ class ChatSelect extends LitElement {
                 color: #92959e;
             }
 
+            .name {
+                user-select: none;
+            }
+
             .clearfix:after {
                 visibility: hidden;
                 display: block;
@@ -122,13 +126,60 @@ class ChatSelect extends LitElement {
         }
 
         return html`
-            <li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
+            <li 
-                ${this.isImageLoaded ? html`${avatarImg}` : html`` }
+            @click=${() => this.getUrl(this.chatInfo.url)} 
-                ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : html`` }
+            class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
-                ${!this.isImageLoaded && this.chatInfo.name ? html`<div  style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.name.charAt(0)}</div>`: ''}
+                ${this.isImageLoaded ? html`${avatarImg}` : html``}
-                ${!this.isImageLoaded && this.chatInfo.groupName ? html`<div  style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadBgActive)' : 'var(--chatHeadBg)' }; color: ${this.activeChatHeadUrl === this.chatInfo.url ? 'var(--chatHeadTextActive)' : 'var(--chatHeadText)' }; font-weight:bold; display: flex; justify-content: center; align-items: center; text-transform: capitalize">${this.chatInfo.groupName.charAt(0)}</div>`: ''}
+                ${!this.isImageLoaded && !this.chatInfo.name && !this.chatInfo.groupName ? html`<mwc-icon class="img-icon">account_circle</mwc-icon>` : 
+                html`` 
+                }
+                ${!this.isImageLoaded && this.chatInfo.name ? 
+                    html`
+                    <div  
+                    style="width:40px; height:40px; float: left; border-radius:50%; background: ${this.activeChatHeadUrl === this.chatInfo.url ? 
+                        'var(--chatHeadBgActive)' : 
+                        'var(--chatHeadBg)' }; 
+                        color: ${this.activeChatHeadUrl === this.chatInfo.url ? 
+                        'var(--chatHeadTextActive)' : 
+                        'var(--chatHeadText)'}; 
+                        font-weight:bold; 
+                        display: flex; 
+                        justify-content: center; 
+                        align-items: center; 
+                        text-transform: capitalize">
+                        ${this.chatInfo.name.charAt(0)}
+                    </div>`: 
+                ''}
+                ${!this.isImageLoaded && this.chatInfo.groupName ? 
+                    html`
+                    <div  
+                    style="width:40px; 
+                    height:40px; 
+                    float: left; 
+                    border-radius:50%; 
+                    background: ${this.activeChatHeadUrl === this.chatInfo.url ? 
+                    'var(--chatHeadBgActive)' : 
+                    'var(--chatHeadBg)' }; 
+                    color: ${this.activeChatHeadUrl === this.chatInfo.url ? 
+                    'var(--chatHeadTextActive)' : 
+                    'var(--chatHeadText)' }; 
+                    font-weight:bold; 
+                    display: flex; 
+                    justify-content: center; 
+                    align-items: center; 
+                    text-transform: capitalize">
+                        ${this.chatInfo.groupName.charAt(0)}
+                    </div>`: 
+                ''}
                 <div class="about">
-                    <div class="name"><span style="float:left; padding-left: 8px; color: var(--chat-group);">${this.chatInfo.groupName ? this.chatInfo.groupName : this.chatInfo.name !== undefined ? this.chatInfo.name : this.chatInfo.address.substr(0, 15)} </span> </div>
+                    <div class="name">
+                        <span style="float:left; padding-left: 8px; color: var(--chat-group);">
+                            ${this.chatInfo.groupName ? 
+                            this.chatInfo.groupName : 
+                            this.chatInfo.name !== undefined ? this.chatInfo.name : 
+                            this.chatInfo.address.substr(0, 15)}
+                        </span>
+                    </div>
                 </div>
             </li>
         `

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

@@ -363,14 +363,14 @@ class ChatTextEditor extends LitElement {
         return true
       }
 
-    sendMessageFunc() {
+    sendMessageFunc(props) {
         if (this.chatMessageSize > 1000 ) {
             parentEpml.request('showSnackBar', get("chatpage.cchange29"));
             return;
         };
         this.chatMessageSize = 0;
         this.chatEditor.updateMirror();
-        this._sendMessage();
+        this._sendMessage(props);
     }
 
     getMessageSize(message){

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

@@ -42,17 +42,16 @@ class Chat extends LitElement {
             privateMessagePlaceholder: { type: String},
             chatEditor: { type:  Object },
             imageFile: { type: Object },
-            activeChatHeadUrl: {type: String},
+            activeChatHeadUrl: { type: String },
             openPrivateMessage: { type: Boolean },
             userFound: { type: Array},
             userFoundModalOpen: { type: Boolean },
-            userSelected: { type: String}
+            userSelected: { type: Object }
         }
     }
 
  static styles = [qchatStyles]
 
-
     constructor() {
         super()
         this.selectedAddress = {}
@@ -84,7 +83,7 @@ class Chat extends LitElement {
         this.openPrivateMessage = false
         this.userFound = []
         this.userFoundModalOpen = false
-        this.userSelected = ''
+        this.userSelected = {}
     }
 
   async setActiveChatHeadUrl(url) {
@@ -94,7 +93,6 @@ class Chat extends LitElement {
     }
 
     render() {
-        console.log(22, "here");
         return html`
             <div class="container clearfix">
                 <div class="people-list" id="people-list">
@@ -149,13 +147,16 @@ class Chat extends LitElement {
                                     ?disabled=${this.isLoading} 
                                     id="sendTo" 
                                     placeholder="${translate("chatpage.cchange7")}" 
-                                    value=${this.userSelected}
+                                    value=${this.userSelected.name}
-                                    @keypress=${() => this.userSelected = ""}
+                                    @keypress=${() => {
+                                        this.userSelected = {};
+                                        this.requestUpdate();
+                                        }}
                                 />
-                                ${this.userSelected ? (
+                                ${this.userSelected.name ? (
                                     html`
                                     <div class="user-verified">
-                                        <p >User Verified</p>
+                                        <p >${translate("chatpage.cchange38")}</p>
                                         <vaadin-icon icon="vaadin:check-circle-o" slot="icon"></vaadin-icon>
                                     </div>
                                     `
@@ -198,7 +199,7 @@ class Chat extends LitElement {
                                 </button>
                                 <button
                                     class="modal-button"
-                                    @click=${this.sendMessageFunc}
+                                    @click=${this._sendMessage}
                                     ?disabled="${this.isLoading}">
                                         ${this.isLoading === false 
                                         ? this.renderSendText() 
@@ -394,15 +395,6 @@ class Chat extends LitElement {
         parentEpml.imReady()
     }
 
-    async updated(changedProperties) {
-        if (changedProperties && changedProperties.has('userFound')) {
-            console.log(this.userFound, "user found array here");
-        }
-        if (changedProperties && changedProperties.has('userSelected')) {
-            console.log(this.userSelected, "user selected here");
-        }
-    }
-
    async userSearch() {
     const nameValue = this.shadowRoot.getElementById('sendTo').value;
         if(!nameValue) {
@@ -420,7 +412,7 @@ class Chat extends LitElement {
             } else {
                 this.userFound = [
                     ...this.userFound, 
-                    result.name,
+                    result,
                   ];
             }
             this.userFoundModalOpen = true;