From 5cfa0920178b276671883c7bcc733def7ca8b36e Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Fri, 11 Nov 2022 14:57:54 -0500
Subject: [PATCH] Started Chat UI Refactor

---
 qortal-ui-core/font/switch-theme.css          |   4 +
 qortal-ui-core/src/styles/switch-theme.css    |   4 +
 .../plugins/core/components/ChatPage.js       |  82 ++---
 .../core/components/ChatScroller-css.js       |  40 ++-
 .../plugins/core/components/ChatScroller.js   | 287 +++++++++---------
 5 files changed, 226 insertions(+), 191 deletions(-)

diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css
index 4c65b30c..008718d9 100644
--- a/qortal-ui-core/font/switch-theme.css
+++ b/qortal-ui-core/font/switch-theme.css
@@ -8,6 +8,8 @@ html {
   --border2: #dde2e8;
   --copybutton: #707584;
   --chat-bubble: #efefef73;
+  --chat-bubble-bg: #f3f3f3;
+  --chat-bubble-msg-color: #080808;
   --sectxt: #576374;
   --vdicon: #707b8a;
   --tradehead: #6a6c75;
@@ -45,6 +47,8 @@ html[theme="dark"] {
   --border2: #0b305e;
   --copybutton: #d0d6de;
   --chat-bubble: #9694941a;
+  --chat-bubble-bg: #2d3749;
+  --chat-bubble-msg-color: #ffffff;
   --sectxt: #bbc3cd;
   --vdicon: #d0d6de;
   --tradehead: #008fd5;
diff --git a/qortal-ui-core/src/styles/switch-theme.css b/qortal-ui-core/src/styles/switch-theme.css
index 9c6c517e..9e1a0a49 100644
--- a/qortal-ui-core/src/styles/switch-theme.css
+++ b/qortal-ui-core/src/styles/switch-theme.css
@@ -8,6 +8,8 @@ html {
   --border2: #dde2e8;
   --copybutton: #707584;
   --chat-bubble: #efefef73;
+  --chat-bubble-bg: #f3f3f3;
+  --chat-bubble-msg-color: #080808;
   --sectxt: #576374;
   --vdicon: #707b8a;
   --tradehead: #6a6c75;
@@ -44,6 +46,8 @@ html[theme="dark"] {
   --border2: #0b305e;
   --copybutton: #d0d6de;
   --chat-bubble: #9694941a;
+  --chat-bubble-bg: #2d3749;
+  --chat-bubble-msg-color: #ffffff;
   --sectxt: #bbc3cd;
   --vdicon: #d0d6de;
   --tradehead: #008fd5;
diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index a01ef691..32873534 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -129,6 +129,7 @@ class ChatPage extends LitElement {
             display: flex;
             flex-direction: row;
             align-items: center;
+            justify-content: center;
             gap: 15px;
             width: 100%;
         }
@@ -137,7 +138,7 @@ class ChatPage extends LitElement {
             display: flex;
             flex-direction: column;
             gap: 5px;
-            width: 95%;
+            width: 92%;
         }
 
 
@@ -638,13 +639,13 @@ class ChatPage extends LitElement {
                                             <p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
                                             <p class="original-message">${this.repliedToMessageObj.message}</p>
                                         </div>
+                                        <vaadin-icon
+                                            class="close-icon"
+                                            icon="vaadin:close-big"
+                                            slot="icon"
+                                            @click=${() => this.closeRepliedToContainer()}
+                                            ></vaadin-icon>
                                     </div>
-                                    <vaadin-icon
-                                        class="close-icon"
-                                        icon="vaadin:close-big"
-                                        slot="icon"
-                                        @click=${() => this.closeRepliedToContainer()}
-                                        ></vaadin-icon>
                                 </div>
                             `}
                             ${this.editedMessageObj && html`
@@ -655,35 +656,39 @@ class ChatPage extends LitElement {
                                             <p class="senderName">${translate("chatpage.cchange25")}</p>
                                             <p class="original-message">${this.editedMessageObj.message}</p>
                                         </div>
+                                        <vaadin-icon
+                                            class="close-icon"
+                                            icon="vaadin:close-big"
+                                            slot="icon"
+                                            @click=${() => this.closeEditMessageContainer()}
+                                            ></vaadin-icon>
                                     </div>
-                                    <vaadin-icon
-                                        class="close-icon"
-                                        icon="vaadin:close-big"
-                                        slot="icon"
-                                        @click=${() => this.closeEditMessageContainer()}
-                                        ></vaadin-icon>
                                 </div>
                             `}
                         <div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
                             <div class="chatbar-container" style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}"
                             >
-                                <div class="file-picker-container">
-                                    <vaadin-icon
-                                        class="paperclip-icon"
-                                        icon="vaadin:paperclip"
-                                        slot="icon"
-                                        @click=${() => this.closeEditMessageContainer()}
-                                    >
-                                    </vaadin-icon>
-                                    <div class="file-picker-input-container">
-                                        <input 
-                                            .value="${this.imageFile}"
-                                            @change="${e => this.insertImage(e.target.files[0])}"
-                                            class="file-picker-input" type="file" name="myImage" accept="image/*" />
+                            ${this.accountName && (
+                                html`
+                                    <div class="file-picker-container">
+                                        <vaadin-icon
+                                            class="paperclip-icon"
+                                            icon="vaadin:paperclip"
+                                            slot="icon"
+                                            @click=${() => this.closeEditMessageContainer()}
+                                        >
+                                        </vaadin-icon>
+                                        <div class="file-picker-input-container">
+                                            <input 
+                                                .value="${this.imageFile}"
+                                                @change="${e => this.insertImage(e.target.files[0])}"
+                                                class="file-picker-input" type="file" name="myImage" accept="image/*" />
+                                        </div>
                                     </div>
-                                </div>
+                                    `
+                                )}
                                 <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
-                                <iframe id="_chatEditorDOM" style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
+                                <iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
                                 </iframe>
                                 <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
                                     ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
@@ -783,6 +788,7 @@ class ChatPage extends LitElement {
         this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
         this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
         this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
+        this.accountName = window.parent.reduxStore.getState().app.accountInfo.names[0];
         document.addEventListener('keydown', (e) => {
             if (!this.chatEditor.content.body.matches(':focus')) {
                 // WARNING: Deprecated methods from KeyBoard Event
@@ -1503,7 +1509,7 @@ class ChatPage extends LitElement {
             }
         }
 
-        if(outSideMsg && outSideMsg.type === 'delete'){
+        if (outSideMsg && outSideMsg.type === 'delete') {
             this.isDeletingImage = true
             const userName = outSideMsg.name
             const identifier = outSideMsg.identifier
@@ -1530,19 +1536,18 @@ class ChatPage extends LitElement {
         return blob;
       }
       const blob = b64toBlob(str, 'image/png');
-
             await new Promise(resolve => {
-                new Compressor( blob, {
+                new Compressor(blob, {
                     quality: 0.6,
                     maxWidth: 500,
-                    success(result){
-                        console.log({result})
+                    success(result) {
+                        console.log({result});
                         const file = new File([result], "name", {
                             type: 'image/png'
                         });
-                        console.log({file})
-                        compressedFile = file
-                        resolve()
+                        console.log({file});
+                        compressedFile = file;
+                        resolve();
                     },
                     error(err) {
                         console.log(err.message);
@@ -1605,7 +1610,7 @@ class ChatPage extends LitElement {
             const identifier = `qchat_${id}`;
             let compressedFile = '';
             await new Promise(resolve => {
-                new Compressor( outSideMsg.imageFile, {
+                new Compressor(outSideMsg.imageFile, {
                     quality: .6,
                     maxWidth: 500,
                     success(result){
@@ -1620,7 +1625,6 @@ class ChatPage extends LitElement {
                       },
                 })
             })
-
             const fileSize = compressedFile.size;
             if (fileSize > 5000000) {
                 parentEpml.request('showSnackBar', get("chatpage.cchange26"));
@@ -1832,8 +1836,6 @@ class ChatPage extends LitElement {
                 worker.postMessage({chatBytes, path, difficulty});
             
                 worker.onmessage = e => {
-                    
-                    
                   worker.terminate()
                   chatBytesArray = e.data.chatBytesArray
                     nonce = e.data.nonce
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
index 0e92dfcb..530c3e51 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js
@@ -109,21 +109,43 @@ export const chatStyles = css`
 
 	.message-container {
 		position: relative;
-		margin-bottom: 20px;
 	}
 
-	.message-subcontainer {
+	.message-subcontainer1 {
+		position: relative;
+		display: flex;
+		align-items: flex-end;	
+	}
+
+	.message-subcontainer2 {
 		position: relative;
     display: flex;
-		background-color: #f3f3f3;
+		background-color: var(--chat-bubble-bg);
     flex-grow: 0;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     border-radius: 5px;
-    padding: 10px 15px;
+    padding: 12px 15px;
     gap: 10px;
-    margin-bottom: 10px;
+		width: fit-content;
+    min-width: 150px;
+	}
+
+	.message-triangle {
+		position: relative;
+	}
+
+	.message-triangle:after {
+		content: "";
+		position: absolute;
+		bottom: 0px;
+    left: -9px;
+		width: 0;
+		height: 0;
+		border-style: solid;
+		border-width: 0px 0px 7px 9px;
+		border-color: transparent transparent var(--chat-bubble-bg) transparent;
 	}
 
 	.message-reactions {
@@ -170,7 +192,7 @@ export const chatStyles = css`
 	}
 
 	.message {
-		color: black;
+		color: var(--chat-bubble-msg-color);
 		line-height: 19px;
 		word-wrap: break-word;
 		-webkit-user-select: text;
@@ -178,12 +200,12 @@ export const chatStyles = css`
 		-ms-user-select: text;
 		user-select: text;
 		font-size: 16px;
-		width: 90%;
+		width: 100%;
 		position: relative;
 	}
 
 	.message-data-avatar {
-		margin: 0px 8px 3px 3px;
+		margin: 0px 10px 0px 3px;
 		width: 42px; 
 		height: 42px;
 		float: left;
@@ -207,7 +229,7 @@ export const chatStyles = css`
 	.chat-hover {
 		display: none;
 		position: absolute;
-		top: -38px;
+		top: -25px;
 		right: 5px;
 	}
 
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index 7b55c825..74e52211 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -76,66 +76,27 @@ class ChatScroller extends LitElement {
         return html`
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
-                ${formattedMessages.map((formattedMessage)=> {
-
-return  repeat(
+                ${formattedMessages.map((formattedMessage) => {
+                    return repeat(
                             formattedMessage.messages,
-                    (message) => message.reference,
-                    (message, indexMessage) => html`
-                    <message-template 
-                    .emojiPicker=${this.emojiPicker} 
-                    .escapeHTML=${this.escapeHTML} 
-                    .messageObj=${message} 
-                    .hideMessages=${this.hideMessages}
-                    .setRepliedToMessageObj=${this.setRepliedToMessageObj}
-                    .setEditedMessageObj=${this.setEditedMessageObj}
-                    .focusChatEditor=${this.focusChatEditor}
-                    .sendMessage=${this.sendMessage}
-                    ?isfirstmessage=${indexMessage === 0}
-                    ?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
-                    >
-                    </message-template>`
-                )
+                            (message) => message.reference,
+                            (message, indexMessage) => html`
+                            <message-template 
+                            .emojiPicker=${this.emojiPicker} 
+                            .escapeHTML=${this.escapeHTML} 
+                            .messageObj=${message} 
+                            .hideMessages=${this.hideMessages}
+                            .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                            .setEditedMessageObj=${this.setEditedMessageObj}
+                            .focusChatEditor=${this.focusChatEditor}
+                            .sendMessage=${this.sendMessage}
+                            ?isFirstMessage=${indexMessage === 0}
+                            ?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
+                            ?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
+                            >
+                            </message-template>`
+                    )
                 })}
-                <!-- ${repeat(
-                    testMessages,
-                    (testMessage)=> testMessage.signature,
-                    (testMessage)=> {
-                      return  repeat(
-                            testMessage.messages,
-                    (message) => message.reference,
-                    (message, indexMessage) => html`
-                    <message-template 
-                    .emojiPicker=${this.emojiPicker} 
-                    .escapeHTML=${this.escapeHTML} 
-                    .messageObj=${message} 
-                    .hideMessages=${this.hideMessages}
-                    .setRepliedToMessageObj=${this.setRepliedToMessageObj}
-                    .setEditedMessageObj=${this.setEditedMessageObj}
-                    .focusChatEditor=${this.focusChatEditor}
-                    .sendMessage=${this.sendMessage}
-                    ?isfirstmessage=${indexMessage === 0}
-                    >
-                    </message-template>`
-                )
-                    }
-                )} -->
-                <!-- ${repeat(
-                    this.messages,
-                    (message) => message.reference,
-                    (message) => html`
-                    <message-template 
-                    .emojiPicker=${this.emojiPicker} 
-                    .escapeHTML=${this.escapeHTML} 
-                    .messageObj=${message} 
-                    .hideMessages=${this.hideMessages}
-                    .setRepliedToMessageObj=${this.setRepliedToMessageObj}
-                    .setEditedMessageObj=${this.setEditedMessageObj}
-                    .focusChatEditor=${this.focusChatEditor}
-                    .sendMessage=${this.sendMessage}
-                    >
-                    </message-template>`
-                )} -->
                 <div id='downObserver'></div>
                 <div class='last-message-ref'>
                     <vaadin-icon class='arrow-down-icon' icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
@@ -234,10 +195,11 @@ class MessageTemplate extends LitElement {
             setEditedMessageObj: { type: Function },
             focusChatEditor: { type: Function },
             sendMessage: { type: Function },
-            openDialogImage: {type: Function},
-            isImageLoaded: {type: Boolean},
-            isFirstMessage: {type: Boolean},
-            isSingleMessageInGroup: {type: Boolean}
+            openDialogImage: { type: Function },
+            isImageLoaded: { type: Boolean },
+            isFirstMessage: { type: Boolean },
+            isSingleMessageInGroup: { type: Boolean },
+            isLastMessageInGroup: { type: Boolean },
         }
     }
 
@@ -253,6 +215,7 @@ class MessageTemplate extends LitElement {
         this.isImageLoaded = false
         this.isFirstMessage = false
         this.isSingleMessageInGroup = false
+        this.isLastMessageInGroup = false
     }
 
     static styles = [chatStyles]
@@ -284,22 +247,22 @@ class MessageTemplate extends LitElement {
         }
     }
 
-    
     render() {
-        console.log('isFirst', this.isFirstMessage)
-        const hidemsg = this.hideMessages
-        let message = ""
-        let reactions = []
-        let repliedToData = null
-        let image = null
-        let isImageDeleted = false
+        console.log('isFirst', this.isFirstMessage);
+        console.log("is single message in group", this.isSingleMessageInGroup);
+        const hidemsg = this.hideMessages;
+        let message = "";
+        let reactions = [];
+        let repliedToData = null;
+        let image = null;
+        let isImageDeleted = false;
         try {
             const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
             message = parsedMessageObj.messageText;
             repliedToData = this.messageObj.repliedToData;
             isImageDeleted = parsedMessageObj.isImageDeleted;
             reactions = parsedMessageObj.reactions || [];
-           if(parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0){
+           if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
                 image = parsedMessageObj.images[0];
             }
         } catch (error) {
@@ -324,21 +287,20 @@ class MessageTemplate extends LitElement {
             avatarImg = html`<img src='/img/incognito.png'  style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
         }
   
-     const createImage=(imageUrl)=>{
-       const imageHTMLRes = new Image();
+     const createImage = (imageUrl) => {
+        const imageHTMLRes = new Image();
         imageHTMLRes.src = imageUrl;
         imageHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
         imageHTMLRes.onclick= () => {
-            this.openDialogImage = true
+            this.openDialogImage = true;
         }
-        imageHTMLRes.onload = ()=> {
-            this.isImageLoaded = true
+        imageHTMLRes.onload = () => {
+            this.isImageLoaded = true;
         }
-        imageHTMLRes.onerror = ()=> {   
- 
-            console.log('inputRef', this.imageFetches)
+        imageHTMLRes.onerror = () => {   
+            console.log('inputRef', this.imageFetches);
             if (this.imageFetches < 4) {
-                setTimeout(()=> {
+                setTimeout(() => {
                     this.imageFetches = this.imageFetches + 1;
                     imageHTMLRes.src = imageUrl;
                 }, 500);
@@ -379,71 +341,112 @@ class MessageTemplate extends LitElement {
 
         
         return hideit ? html`<li class="clearfix"></li>` : html`
-            <li class="clearfix message-parent">
-                <div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
-                    <span class="message-data-name">${nameMenu}</span>
-                    <span class="message-data-level">${levelFounder}</span>
-                    <span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
-                </div>
-                <div class="message-data-avatar">
-                ${avatarImg}
-                </div>
-                <div class="message-container">
-                    <div class="message-subcontainer">
-                        ${repliedToData && html`
-                            <div class="original-message">
-                                <p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
-                                <p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
-                            </div>
+            <li 
+            class="clearfix message-parent" 
+            style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false && reactions.length === 0) ? 
+            'padding-bottom: 0;' 
+            : null} 
+            ${this.isFirstMessage && 'margin-top: 20px;'}">
+                ${this.isFirstMessage ? (
+                    html`
+                    <div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}">
+                        <span class="message-data-name">${nameMenu}</span>
+                        <span class="message-data-level">${levelFounder}</span>
+                        <span class="message-data-time"><message-time timestamp=${this.messageObj.timestamp}></message-time></span>
+                    </div>
+                    `
+                ) : null}
+                <div>
+                    <div 
+                    class="message-container" 
+                    style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) && 'margin-bottom: 0'}">
+                        <div class="message-subcontainer1">
+                            ${(this.isSingleMessageInGroup === false || 
+                            (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) 
+                            ? (
+                                html`
+                                    <div class="message-data-avatar">
+                                        ${avatarImg}
+                                    </div>
+                                `
+                            ) : 
+                            html`
+                                <div class="message-data-avatar"></div>
                             `}
-                            ${image && !isImageDeleted ? html`
-                                <div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}>
-                                    ${imageHTML}<vaadin-icon
-                                    @click=${() => this.sendMessage({
-                                    type: 'delete',
-                                    name: image.name,
-                                    identifier: image.identifier,
-                                    editedMessageObj: this.messageObj,
-                                })}
-                                    class="image-delete-icon"  icon="vaadin:close" slot="icon"></vaadin-icon>
-                                </div>
-                            ` : html``}
-                            <div id="messageContent" class="message">
-                                ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
+                            <div 
+                            class="${`message-subcontainer2 
+                            ${((this.isFirstMessage === true && this.isSingleMessageInGroup === false) || 
+                            (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true)) && 
+                            'message-triangle'}`}" 
+                            style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) ? 'margin-bottom: 0;' : null}
+                            ${(this.isFirstMessage === true && this.isSingleMessageInGroup === false && this.isLastMessageInGroup === false) 
+                            ? 'border-radius: 25px 25px 25px 0px;'
+                            : (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false)
+                            ? 'border-radius: 8px 25px 25px 8px;'
+                            : (this.isFirstMessage === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) 
+                            ?  'border-radius: 27px 25px 25px 12px;'
+                            : (this.isSingleMessageInGroup === true && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ? 
+                            'border-radius: 10px 25px 25px 0;' 
+                            : null
+                            }">
+                                ${repliedToData && html`
+                                    <div class="original-message">
+                                        <p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
+                                        <p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
+                                    </div>
+                                    `}
+                                    ${image && !isImageDeleted ? html`
+                                        <div class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}>
+                                            ${imageHTML}<vaadin-icon
+                                            @click=${() => this.sendMessage({
+                                            type: 'delete',
+                                            name: image.name,
+                                            identifier: image.identifier,
+                                            editedMessageObj: this.messageObj,
+                                        })}
+                                            class="image-delete-icon"  icon="vaadin:close" slot="icon"></vaadin-icon>
+                                        </div>
+                                    ` : html``}
+                                    <div id="messageContent" class="message">
+                                        ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
+                                    </div>
                             </div>
+                                <chat-menu 
+                                tabindex="0"
+                                class="chat-hover"
+                                style="${this.showBlockAddressIcon ? 'display: block;' : null} ${this.isFirstMessage && 'top: -50px'}"
+                                toblockaddress="${this.messageObj.sender}" 
+                                .showPrivateMessageModal=${() => this.showPrivateMessageModal()}
+                                .showBlockUserModal=${() => this.showBlockUserModal()}
+                                .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
+                                .showBlockAddressIcon=${this.showBlockAddressIcon}
+                                .originalMessage=${{...this.messageObj, message}}
+                                .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                                .setEditedMessageObj=${this.setEditedMessageObj}
+                                .focusChatEditor=${this.focusChatEditor}
+                                .myAddress=${this.myAddress}
+                                @blur=${() => this.showBlockIconFunc(false)}
+                                .sendMessage=${this.sendMessage}
+                            > 
+                            </chat-menu>
+                        </div>
+                        <div class="message-reactions" style="${reactions.length > 0 && 
+                            'margin-top: 10px; margin-bottom: 5px;'}">
+                                ${reactions.map((reaction)=> {
+                                    return html`
+                                    <span 
+                                    @click=${() => this.sendMessage({
+                                        type: 'reaction',
+                                        editedMessageObj: this.messageObj,
+                                        reaction:  reaction.type,
+                                        })} 
+                                    class="reactions-bg">
+                                    ${reaction.type} ${reaction.qty}
+                                    </span>`
+                                })}
+                        </div>
+
                     </div>
-                    <div class="message-reactions">
-                            ${reactions.map((reaction)=> {
-                                return html`
-                                <span 
-                                @click=${() => this.sendMessage({
-                                    type: 'reaction',
-                                    editedMessageObj: this.messageObj,
-                                    reaction:  reaction.type,
-                                    })} 
-                                class="reactions-bg">
-                                ${reaction.type} ${reaction.qty}
-                                </span>`
-                            })}
-                    </div>
-                    <chat-menu 
-                        tabindex="0"
-                        class="chat-hover"
-                        style=${this.showBlockAddressIcon && "display: block"}
-                        toblockaddress="${this.messageObj.sender}" 
-                        .showPrivateMessageModal=${() => this.showPrivateMessageModal()}
-                        .showBlockUserModal=${() => this.showBlockUserModal()}
-                        .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
-                        .showBlockAddressIcon=${this.showBlockAddressIcon}
-                        .originalMessage=${{...this.messageObj, message}}
-                        .setRepliedToMessageObj=${this.setRepliedToMessageObj}
-                        .setEditedMessageObj=${this.setEditedMessageObj}
-                        .focusChatEditor=${this.focusChatEditor}
-                        .myAddress=${this.myAddress}
-                        @blur=${() => this.showBlockIconFunc(false)}
-                        .sendMessage=${this.sendMessage}
-                    > 
-                    </chat-menu>
                 </div>
             </div>
             </li>