Add reply design to chat

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

@@ -46,6 +46,7 @@ class ChatPage extends LitElement {
             hideNewMesssageBar: { attribute: false },
             chatEditorPlaceholder: { type: String },
             messagesRendered: { type: Array },
+            repliedToSignature: { type: String },
         }
     }
 
@@ -135,9 +136,11 @@ class ChatPage extends LitElement {
         this.isPasteMenuOpen = false
         this.chatEditorPlaceholder = this.renderPlaceholder()
         this.messagesRendered = []
+        this.repliedToSignature = ''
     }
 
     render() {
+
         return html`
             ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
             <div class="chat-text-area">
@@ -281,7 +284,17 @@ class ChatPage extends LitElement {
     }
 
     renderChatScroller(initialMessages) {
-        return html`<chat-scroller .initialMessages=${initialMessages} .messages=${this.messagesRendered} .emojiPicker=${this.emojiPicker} .escapeHTML=${escape} .getOldMessage=${this.getOldMessage} > </chat-scroller>`
+        return html`
+        <chat-scroller 
+        .initialMessages=${initialMessages} 
+        .messages=${this.messagesRendered} 
+        .emojiPicker=${this.emojiPicker} 
+        .escapeHTML=${escape} 
+        .getOldMessage=${this.getOldMessage}
+        .setRepliedToSignature=${this.setRepliedToSignature}
+        .repliedToSignature=${this.repliedToSignature}
+        >
+        </chat-scroller>`
     }
 
     async getUpdateComplete() {
@@ -385,6 +398,11 @@ class ChatPage extends LitElement {
         }
     }
 
+    setRepliedToSignature(messageSignature) {
+        console.log(messageSignature, "Replied To Message Signature Here")
+        this.repliedToSignature = messageSignature;
+    }
+
     /**
     * New Message Template implementation, takes in a message object.
     * @param { Object } messageObj
@@ -642,6 +660,13 @@ class ChatPage extends LitElement {
     }
 
     _sendMessage() {
+        // 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 
+        // need whole original message object, transform the data and put it in local storage
+        // create new var called repliedToData and use that to modify the UI
+        // find specific object property in local
+        
         this.isLoading = true;
         this.chatEditor.disable();
         const messageText = this.mirrorChatInput.value;
@@ -658,8 +683,24 @@ class ChatPage extends LitElement {
             this.chatEditor.enable();
             let err1string = get("chatpage.cchange24");
             parentEpml.request('showSnackBar', `${err1string}`);
+        } else if(this.repliedToSignature) {
+            const messageObject = {
+                messageText,
+                images: [''],
+                repliedTo: this.repliedToSignature,
+                version: 1
+            }
+            const stringifyMessageObject = JSON.stringify(messageObject)
+            this.sendMessage(stringifyMessageObject);
         } else {
-            this.sendMessage(trimmedMessage);
+            const messageObject = {
+                messageText,
+                images: [''],
+                repliedTo: '',
+                version: 1
+            }
+            const stringifyMessageObject = JSON.stringify(messageObject)
+            this.sendMessage(stringifyMessageObject);
         }
     }
 

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

@@ -68,7 +68,7 @@ export const chatStyles = css`
 	.message-data {
 		width: 92%;
 		margin-bottom: 15px;
-		margin-left: 50px;
+		margin-left: 55px;
 	}
 
 	.message-data-name {
@@ -89,48 +89,76 @@ export const chatStyles = css`
 		padding-bottom: 4px;
 	}
 
+	.chat-bubble-container {
+		display:flex;
+		gap: 7px;
+	}
+
 	.message-container {
 		position: relative;
+    display: flex;
+    flex-grow: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    background-color: whitesmoke;
+    border-radius: 5px;
+    padding: 10px 15px;
+    gap: 10px;
+    margin-bottom: 20px;
+	}
+
+	.original-message {
+    position: relative;
+    color: black;
+    line-height: 19px;
+    overflow-wrap: break-word;
+    user-select: text;
+    font-size: 16px;
+    width: 90%;
+    border-radius: 5px;
+    background-color: rgba(209, 209, 209, 0.79);
+    padding: 8px 5px 8px 25px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.original-message:before {
+		content: "";
+    position: absolute;
+    top: 5px;
+    left: 10px;
+    height: 75%;
+    width: 2.6px;
+    background-color: rgb(14, 190, 240);
 	}
 
 	.message {
 		color: black;
-		padding: 12px 10px;
 		line-height: 19px;
-		white-space: pre-line;
 		word-wrap: break-word;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;
 		user-select: text;
 		font-size: 16px;
-		border-radius: 7px;
-		margin-bottom: 20px;
 		width: 90%;
 		position: relative;
 	}
 
-	.message:after {
+	.message-data-avatar {
-		bottom: 100%;
+		margin: 0px 8px 3px 3px;
-		left: 93%;
+		width: 42px; 
-		border: solid transparent;
+		height: 42px;
-		content: " ";
+		float: left;
-		height: 0;
-		width: 0;
-		position: absolute;
-		white-space: pre-line;
-		word-wrap: break-word;
-		pointer-events: none;
-		border-bottom-color: #ddd;
-		border-width: 10px;
-		margin-left: -10px;
 	}
 
 	.message-parent:hover .chat-hover {
 		display: block;
 	}
 
-	.message-parent:hover .message{
+	.message-parent:hover .message-container {
 		filter:brightness(0.90);
 	}
 
@@ -138,7 +166,7 @@ export const chatStyles = css`
 		display: none;
 		position: absolute;
 		top: -38px;
-		left: 88.2%;
+		right: 20px;
 	}
 
 	.emoji {
@@ -154,21 +182,11 @@ export const chatStyles = css`
 		border: 2px solid #eeeeee;
 	}
 
-	.my-message:after {
-		border-bottom-color: #d1d1d1;
-		left: 7%;
-	}
-
 	.other-message {
 		background: #f1f1f1;
 		border: 2px solid #dedede;
 	}
 	
-	.other-message:after {
-		border-bottom-color: #f1f1f1;
-		left: 7%;
-	}
-
 	.align-left {
 		text-align: left;
 	}
@@ -269,7 +287,7 @@ export const chatStyles = css`
 	.block-user-container {
 		display: block;
 		position: absolute;
-		left: -48px;
+		left: -5px;
 	}
 
 	.block-user {
@@ -277,7 +295,7 @@ export const chatStyles = css`
 		border: 1px solid rgb(218, 217, 217);
 		border-radius: 5px;
 		background-color: white;
-		width: 100%;
+		width: 90px;
 		height: 32px;
 		padding: 3px 8px;
 		box-shadow: rgba(77, 77, 82, 0.2) 0px 7px 29px 0px;

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

@@ -24,7 +24,9 @@ class ChatScroller extends LitElement {
             escapeHTML: { attribute: false },
             initialMessages: { type: Array }, // First set of messages to load.. 15 messages max ( props )
             messages: { type: Array },
-            hideMessages: { type: Array }
+            hideMessages: { type: Array },
+            setRepliedToSignature: {type: Function},
+            repliedToSignature: {type: String},
         }
     }
 
@@ -47,7 +49,16 @@ class ChatScroller extends LitElement {
                 ${repeat(
                     this.messages,
                     (message) => message.reference,
-                    (message) => html`<message-template .emojiPicker=${this.emojiPicker} .escapeHTML=${this.escapeHTML} .messageObj=${message} .hideMessages=${this.hideMessages}></message-template>`
+                    (message) => html`
+                    <message-template 
+                    .emojiPicker=${this.emojiPicker} 
+                    .escapeHTML=${this.escapeHTML} 
+                    .messageObj=${message} 
+                    .hideMessages=${this.hideMessages}
+                    .setRepliedToSignature=${this.setRepliedToSignature}
+                    .repliedToSignature=${this.repliedToSignature}
+                    >
+                    </message-template>`
                 )}
                 <div id='downObserver'></div>
                 <div class='last-message-ref'>
@@ -137,7 +148,9 @@ class MessageTemplate extends LitElement {
             hideMessages: { type: Array },
             openDialogPrivateMessage: {type: Boolean},
             openDialogBlockUser: {type: Boolean},
-            showBlockAddressIcon: { type: Boolean }
+            showBlockAddressIcon: { type: Boolean },
+            setRepliedToSignature: {type: Function},
+            repliedToSignature: {type: String},
         }
     }
 
@@ -180,8 +193,30 @@ class MessageTemplate extends LitElement {
     }
 
     render() {
+        console.log(this.messageObj, "here244")
         const hidemsg = this.hideMessages
-
+        let message = ""
+        let repliedToData = null
+        try {
+            const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage)
+            message = parsedMessageObj.messageText
+            repliedToData = {
+                    "timestamp": 1663419371885,
+                    "txGroupId": 0,
+                    "reference": "5LuncmE2RsGVdQizkZLnjgqU8QozR2hHhkiSujUgywEfqAvm6RW4xZ7c9XjuMnb76bNmX2ntRNhnBF4ErvawM1dW",
+                    "senderPublicKey": "xmZXCYzGU2t3S6Ehm2zp4pVm83q9d143NKRgmiU1dXW",
+                    "sender": "Qj9aLrdK2FLQY6YssRQUkDmXNJCko2zF7e",
+                    "senderName": "GiseleH",
+                    "data": "3JLP9vViLoRPJ1Pqt2uC6Ufqf7wgTrs4HuV4Ltgwdnf5ekcBCCf5MTm2Sg3sXHeuVnCpoJAyVdqgAbr7tcBoq3soNZTjteusXjjW3NSMNcJEAadaTYC68xGXGmvK1jRyioPqGaKiXKzR2jPPRV5SyiPd66788Z2Rqt3VQB98rvronX5w5tE9UUWRor6bmMeVL3dj7fHYhLPPE5VBpCS9Eskti7vnTgDUQxnjfr",
+                    "isText": true,
+                    "isEncrypted": false,
+                    "signature": "3jWvhQKSDt4Zqeup5sLfyNksVVphFW5iF11PsTZzXQLCCPH9pDMqwNoKE2oe3DPYz47VbbLgJaAWMVA44z9dUr9U",
+                    "decodedMessage": "for TrentB512 who computer crashed your registered name in qortal for your level 3 account was TrentB512 https://exqlorer.com/address/Qf58otnEXeoyvD7dvYmfEGpQ64oMD3uvwM"
+                
+            }
+        } catch (error) {
+            message = this.messageObj.decodedMessage
+        }
         let avatarImg = ''
         let nameMenu = ''
         let levelFounder = ''
@@ -209,9 +244,20 @@ class MessageTemplate extends LitElement {
                     <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" style="width:42px; height:42px; ${this.messageObj.sender === this.myAddress ? "float:left;" : "float:left;"} margin:3px;">${avatarImg}</div>
+                <div class="message-data-avatar">
-                <div class="message-container">
+                ${avatarImg}
-                <div id="messageContent" class="message ${this.messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage)))}</div>
+                </div>
+                <div class="message-container ${this.messageObj.sender === this.myAddress ? "my-message" : "other-message"}">
+                ${repliedToData && html`
+                    <div 
+                        class="original-message" 
+                        style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}>
+                        ${repliedToData.decodedMessage}
+                    </div>
+                    `}
+                <div id="messageContent" class="message">
+                    ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
+                </div>
                     <chat-menu 
                         tabindex="0"
                         class="chat-hover"
@@ -221,6 +267,9 @@ class MessageTemplate extends LitElement {
                         .showBlockUserModal=${() => this.showBlockUserModal()}
                         .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
                         .showBlockAddressIcon=${this.showBlockAddressIcon}
+                        .originalMessageSignature=${this.messageObj.signature}
+                        .setRepliedToSignature=${this.setRepliedToSignature}
+                        .repliedToSignature=${this.repliedToSignature}
                         @blur=${() => this.showBlockIconFunc(false)}
                     > 
                     </chat-menu>
@@ -250,7 +299,10 @@ class ChatMenu extends LitElement {
             showBlockUserModal: {type: Function},
             toblockaddress: { type: String, attribute: true },
             showBlockIconFunc: {type: Function},
-            showBlockAddressIcon: {type: Boolean}
+            showBlockAddressIcon: {type: Boolean},
+            originalMessageSignature: {type: String},
+            setRepliedToSignature: {type: Function},
+            repliedToSignature: {type: String},
         }
     }
 
@@ -278,13 +330,16 @@ class ChatMenu extends LitElement {
     
     render() {
         return html` 
-            <div class="container" style=${this.showBlockAddressIcon && "width: 70px" }>
+            <div class="container">
                 <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange9")}" @click="${() => this.showPrivateMessageModal()}">   
                     <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)}">
                     <vaadin-icon icon="vaadin:copy" slot="icon"></vaadin-icon>
                 </div>
+                <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange11")}" @click="${() => this.setRepliedToSignature(this.originalMessageSignature)}">
+                    <vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
+                </div>
                 <div class="menu-icon tooltip" data-text="${translate("blockpage.bcchange10")}" @click="${() => this.showBlockIconFunc(true)}">
                     <vaadin-icon icon="vaadin:ellipsis-dots-h" slot="icon"></vaadin-icon>
                 </div>