Continued Chat UI Refactor

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

@@ -7,7 +7,7 @@ html {
   --border: #d0d6de;
   --border2: #dde2e8;
   --copybutton: #707584;
-  --chat-bubble: #efefef73;
+  --chat-bubble: #9f9f9f0a;
   --chat-bubble-bg: #f3f3f3;
   --chat-bubble-msg-color: #080808;
   --sectxt: #576374;

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

@@ -7,7 +7,7 @@ html {
   --border: #d0d6de;
   --border2: #dde2e8;
   --copybutton: #707584;
-  --chat-bubble: #efefef73;
+  --chat-bubble: #9f9f9f0a;
   --chat-bubble-bg: #f3f3f3;
   --chat-bubble-msg-color: #080808;
   --sectxt: #576374;

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

@@ -82,8 +82,14 @@ export const chatStyles = css`
 	}
 
 	.message-data-name {
-		color: var(--black);
 		user-select: none;
+		color: #03a9f4;
+		margin-bottom: 5px;
+	}
+
+	.message-data-my-name {
+		color: #cf21e8;
+		text-shadow: 0 0 3px #cf21e8;
 	}
 
 	.message-data-time {
@@ -127,7 +133,6 @@ export const chatStyles = css`
     justify-content: center;
     border-radius: 5px;
     padding: 12px 15px;
-    gap: 10px;
 		width: fit-content;
     min-width: 150px;
 	}
@@ -158,16 +163,14 @@ export const chatStyles = css`
     position: relative;
 		display: flex;
 		flex-direction: column;
-    color: black;
+    color: var(--chat-bubble-msg-color);
     line-height: 19px;
-    overflow-wrap: break-word;
     user-select: text;
-    font-size: 13px;
+    font-size: 15px;
     width: 90%;
     border-radius: 5px;
-    background-color: rgba(232, 232, 232, 0.79);
     padding: 8px 5px 8px 25px;
-		white-space: nowrap;
+		margin-bottom: 10px;
 	}
 
 	.original-message:before {
@@ -187,8 +190,10 @@ export const chatStyles = css`
 
 	.replied-message {
 		margin: 0;
+		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		max-width: 300px;
 	}
 
 	.message {

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

@@ -14,6 +14,7 @@ import '@material/mwc-button';
 import '@material/mwc-dialog';
 import '@material/mwc-icon';
 import { EmojiPicker } from 'emoji-picker-js';
+import {cropAddress} from "../../utils/cropAddress";
 
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@@ -247,6 +248,8 @@ class MessageTemplate extends LitElement {
     }
 
     render() {
+        const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
+        console.log({isFirstMessage: this.isFirstMessage, isSingleMessageInGroup: this.isSingleMessageInGroup, isLastMessageInGroup: this.isLastMessageInGroup, messageText: parsedMessageObj.messageText})
         const hidemsg = this.hideMessages;
         let message = "";
         let reactions = [];
@@ -321,11 +324,12 @@ class MessageTemplate extends LitElement {
             imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
         }
 
-        if (this.messageObj.sender === this.myAddress) {
-            nameMenu = html`<span style="color: #03a9f4;">${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`;
-        } else {
-            nameMenu = html`<span>${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`;
-        }
+        nameMenu = html`
+            <span class="${this.messageObj.sender === this.myAddress && 'message-data-my-name'}">
+                ${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)}
+            </span>
+        `;
+
         if (repliedToData) {
             try {
                 const parsedMsg =  JSON.parse(repliedToData.decodedMessage);
@@ -347,7 +351,6 @@ class MessageTemplate extends LitElement {
                 ${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>
@@ -376,20 +379,32 @@ class MessageTemplate extends LitElement {
                             (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)
+                            ${(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) ? 
+                            : (this.isFirstMessage === false && this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true) ? 
                             'border-radius: 10px 25px 25px 0;' 
+                            : this.isFirstMessage === true 
+                            ? 'border-radius: 25px 25px 25px 0px;'
                             : null
                             }">
+                                ${this.isFirstMessage  ? 
+                                    html`
+                                        <span class="message-data-name">
+                                            ${nameMenu}
+                                        </span>
+                                        `
+                                    : 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>
+                                        <p class="original-message-sender">
+                                            ${repliedToData.sendName ?? cropAddress(repliedToData.sender)}
+                                        </p>
+                                        <p class="replied-message">
+                                            ${repliedToData.decodedMessage.messageText}
+                                        </p>
                                     </div>
                                     `}
                                     ${image && !isImageDeleted ? html`

qortal-ui-plugins/plugins/utils/cropAddress.js

@@ -0,0 +1,8 @@
+export function cropAddress(string = "", range = 5) {
+  const [start, end] = [
+    string?.substring(0, range),
+    string?.substring(string?.length - range, string?.length),
+    //
+  ];
+  return start + "..." + end;
+}