add avatar to chat heads

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

@@ -43,6 +43,10 @@ html {
   --nav-border-selected-color: #03a9f4;
   --error: #d50000;
   --background: url("/img/qortal_background_light_.jpg");
+  --chatHeadBg: #ebebeb;
+  --chatHeadBgActive: #ebebeb;
+  --chatHeadText: #080808;
+  --chatHeadTextActive: #080808;
 }
 
 html[theme="dark"] {
@@ -90,4 +94,8 @@ html[theme="dark"] {
   --nav-border-selected-color: #76c8f5;
   --error: #d50000;
   --background: url("/img/qortal_background_dark_.jpg");
+  --chatHeadBg: #008fd5;
+  --chatHeadBgActive: #0f1a2e;
+  --chatHeadText: #ffffff;
+  --chatHeadTextActive: #ffffff;
 }

qortal-ui-core/src/styles/switch-theme.css

@@ -42,6 +42,10 @@ html {
   --nav-border-color: #eeeeee;
   --nav-border-selected-color: #03a9f4;
   --background: url("/img/qortal_background_light_.jpg");
+  --chatHeadBg: #ebebeb;
+  --chatHeadBgActive: #ebebeb;
+  --chatHeadText: #080808;
+  --chatHeadTextActive: #080808;
 }
 
 html[theme="dark"] {
@@ -88,4 +92,8 @@ html[theme="dark"] {
   --nav-border-color: #0b305e;
   --nav-border-selected-color: #76c8f5;
   --background: url("/img/qortal_background_dark_.jpg");
+  --chatHeadBg: #008fd5;
+  --chatHeadBgActive: #0f1a2e;
+  --chatHeadText: #ffffff;
+  --chatHeadTextActive: #ffffff;
 }

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

@@ -12,7 +12,8 @@ class ChatHead extends LitElement {
             config: { type: Object },
             chatInfo: { type: Object },
             iconName: { type: String },
-            activeChatHeadUrl: { type: String }
+            activeChatHeadUrl: { type: String },
+            isImageLoaded: { type: Boolean },
         }
     }
 
@@ -75,12 +76,55 @@ class ChatHead extends LitElement {
         this.chatInfo = {}
         this.iconName = ''
         this.activeChatHeadUrl = ''
+        this.isImageLoaded = false
+        this.imageFetches = 0
     }
 
+    createImage(imageUrl)  {
+        const imageHTMLRes = new Image();
+        imageHTMLRes.src = imageUrl;
+        imageHTMLRes.style= "width:40px; height:40px; float: left; border-radius:50%";
+        imageHTMLRes.onclick= () => {
+            this.openDialogImage = true;
+        }
+        imageHTMLRes.onload = () => {
+            this.isImageLoaded = true;
+        }
+        imageHTMLRes.onerror = () => {   
+            if (this.imageFetches < 4) {
+                setTimeout(() => {
+                    this.imageFetches = this.imageFetches + 1;
+                    imageHTMLRes.src = imageUrl;
+                }, 500);
+            } else {
+               
+
+                this.isImageLoaded = false
+            }
+        };
+        return imageHTMLRes;
+      }
+
     render() {
+        console.log('this.chatInfo',this.chatInfo)
+        let avatarImg = '';
+        let backupAvatarImg = ''
+        if(this.chatInfo.name){
+            const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
+            const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
+            const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.chatInfo.name}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`;
+            avatarImg= this.createImage(avatarUrl)
+          
+        }
+
+       
+
         return html`
             <li @click=${() => this.getUrl(this.chatInfo.url)} class="clearfix ${this.activeChatHeadUrl === this.chatInfo.url ? 'active' : ''}">
-                <mwc-icon class="img-icon">account_circle</mwc-icon>
+                ${this.isImageLoaded ? html`${avatarImg}` : html`` }
+                ${!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> <mwc-icon style="float:right; padding: 0 1rem; color: var(--chat-group);">${this.chatInfo.groupId !== undefined ? 'lock_open' : 'lock'}</mwc-icon> </div>
                 </div>