Merge pull request #1 from JustinWesleyFerrari/feature/replies

Feature/replies

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 },
+            repliedToMessageObj: { type: Object },
         }
     }
 
@@ -63,12 +64,11 @@ class ChatPage extends LitElement {
 
         .chat-text-area .typing-area {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             position: absolute;
             bottom: 0;
             width: 98%;
             box-sizing: border-box;
-            padding: 5px;
             margin-bottom: 8px;
             border: 1px solid var(--black);
             border-radius: 10px;
@@ -90,10 +90,67 @@ class ChatPage extends LitElement {
             border: none;
         }
 
+        .repliedTo-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 20px 8px 10px;
+        }
+        
+        .repliedTo-subcontainer {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .repliedTo-message {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+
+
+        .senderName {
+            margin: 0;
+            color: var(--mdc-theme-primary);
+            font-weight: bold;
+        }
+
+        .original-message {
+            margin: 0;
+        }
+
+        .reply-icon {
+            width: 20px;
+            color: var(--mdc-theme-primary);
+        }
+
+        .close-icon {
+            color: #676b71;
+            width: 25px;
+            transition: all 0.1s ease-in-out;
+        }
+
+        .close-icon:hover {
+            cursor: pointer;
+            color: #494c50;
+        }
+        
+        .chat-text-area .typing-area .chatbar {
+            width: auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: auto;
+            padding: 5px;
+        }
+
         .chat-text-area .typing-area .emoji-button {
             width: 45px;
             height: 40px;
-            padding: 5px;
+            padding-top: 4px;
             border: none;
             outline: none;
             background: transparent;
@@ -135,18 +192,38 @@ class ChatPage extends LitElement {
         this.isPasteMenuOpen = false
         this.chatEditorPlaceholder = this.renderPlaceholder()
         this.messagesRendered = []
+        this.repliedToMessageObj = null
     }
     
     render() {
         return html`
             ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
             <div class="chat-text-area">
-                <div class="typing-area">
+                    <div class="typing-area">
-                    <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
+                        ${this.repliedToMessageObj && html`
-                    <iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe>
+                            <div class="repliedTo-container">
-                    <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
+                                <div class="repliedTo-subcontainer">
-                        ${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
+                                    <vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon>
-                    </button>
+                                    <div class="repliedTo-message">
+                                        <p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
+                                        <p class="original-message">${this.repliedToMessageObj.decodedMessage}</p>
+                                    </div>
+                                </div>
+                                <vaadin-icon
+                                 class="close-icon"
+                                 icon="vaadin:close-big"
+                                 slot="icon"
+                                 @click=${() => this.closeRepliedToContainer()}
+                                 ></vaadin-icon>
+                            </div>
+                        `}
+                    <div class="chatbar">
+                        <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
+                        <iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe>
+                        <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
+                            ${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`}
+                        </button>
+                    </div>
                 </div>
             </div>
         `
@@ -281,7 +358,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}
+        .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
+        .focusChatEditor=${() => this.focusChatEditor()}
+        >
+        </chat-scroller>`
     }
 
     async getUpdateComplete() {
@@ -385,6 +472,23 @@ class ChatPage extends LitElement {
         }
     }
         
+    async setRepliedToMessageObj(messageObj) {
+        console.log(messageObj, "Replied To Message Object Here")
+        this.repliedToMessageObj = {...messageObj};
+        this.requestUpdate();
+        await this.updateComplete;
+        console.log(this.repliedToMessageObj);
+    }
+
+    closeRepliedToContainer() {
+        this.repliedToMessageObj = null;
+        this.requestUpdate();
+    }
+ 
+    focusChatEditor() {
+       this.chatEditor.focus();
+    }
+
     /**
     * New Message Template implementation, takes in a message object.
     * @param { Object } messageObj
@@ -436,10 +540,6 @@ class ChatPage extends LitElement {
   async  renderNewMessage(newMessage) {
 
         const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
-        const downObserver = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('downObserver');
-        const li = document.createElement('li');
-        li.innerHTML = this.chatMessageTemplate(newMessage);
-        li.id = newMessage.signature;
 
         if (newMessage.sender === this.selectedAddress.address) {
 
@@ -642,6 +742,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 +765,24 @@ class ChatPage extends LitElement {
             this.chatEditor.enable();
             let err1string = get("chatpage.cchange24");
             parentEpml.request('showSnackBar', `${err1string}`);
+        } else if (this.repliedToMessageObj) {
+            const messageObject = {
+                messageText,
+                images: [''],
+                repliedTo: this.repliedToMessageObj.signature,
+                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

@@ -17,6 +17,10 @@ export const chatStyles = css`
 		--mdc-theme-secondary: var(--mdc-theme-primary);
 	}
 
+	* :focus-visible {
+		outline: none;
+	}
+
 	*::-webkit-scrollbar-track {
 		background: var(--scrollbarBG);
 	}
@@ -68,7 +72,7 @@ export const chatStyles = css`
 	.message-data {
 		width: 92%;
 		margin-bottom: 15px;
-		margin-left: 50px;
+		margin-left: 55px;
 	}
 
 	.message-data-name {
@@ -89,48 +93,87 @@ 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;
+		display: flex;
+		flex-direction: column;
+    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;
+	}
+
+	.original-message:before {
+		content: "";
+    position: absolute;
+    top: 5px;
+    left: 10px;
+    height: 75%;
+    width: 2.6px;
+    background-color: var(--mdc-theme-primary);
+	}
+
+	.original-message-sender {
+		margin: 0 0 5px 0;
+		color: var(--mdc-theme-primary);
+	}
+
+	.replied-message {
+		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.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 +181,7 @@ export const chatStyles = css`
 		display: none;
 		position: absolute;
 		top: -38px;
-		left: 88.2%;
+		right: 25px;
 	}
 
 	.emoji {
@@ -154,21 +197,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;
 	}
@@ -211,6 +244,10 @@ export const chatStyles = css`
 		position: relative;
 	}
 
+	.container:focus-visible {
+		outline: none;
+	}
+
 	.menu-icon {
 		width: 100%;
 		padding: 5px;
@@ -220,6 +257,7 @@ export const chatStyles = css`
 	}
 
 	.menu-icon:hover {
+		border-radius: 5px;
 		background-color: #dad9d9;
 		transition: all 0.1s ease-in-out;
 		cursor: pointer;
@@ -231,11 +269,12 @@ export const chatStyles = css`
 
 	.tooltip:before {
 		content: attr(data-text); 
+		display: none; 
 		position: absolute;
 		top: -47px;
 		left: 50%;
 		transform: translateX(-50%);
-		width: 90px;
+		width: auto;
 		padding: 10px;
 		border-radius: 10px;
 		background:#fff;
@@ -244,7 +283,8 @@ export const chatStyles = css`
 		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 		font-size: 12px;
 		z-index: 5;
-		display: none; 
+		white-space: nowrap;
+  	overflow: hidden;
 	}
 
 	.tooltip:hover:before {
@@ -267,9 +307,9 @@ export const chatStyles = css`
 	}
 
 	.block-user-container {
-		display: block;
+		display: none;
 		position: absolute;
-		left: -48px;
+		left: -5px;
 	}
 
 	.block-user {
@@ -277,7 +317,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 },
+            setRepliedToMessageObj: { type: Function },
+            focusChatEditor: { type: Function }
         }
     }
 
@@ -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}
+                    .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                    .focusChatEditor=${this.focusChatEditor}
+                    >
+                    </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 },
+            setRepliedToMessageObj: { type: Function },
+            focusChatEditor: { type: Function },
         }
     }
 
@@ -181,7 +194,28 @@ class MessageTemplate extends LitElement {
 
     render() {
         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 +243,21 @@ 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%)"}>
+                        <p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
+                        <p class="replied-message">${repliedToData.decodedMessage}</p>
+                    </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}
+                        .originalMessage=${this.messageObj}
+                        .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                        .focusChatEditor=${this.focusChatEditor}
                         @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},
+            originalMessage: {type: Object},
+            setRepliedToMessageObj: { type: Function },
+            focusChatEditor: {type: Function},
         }
     }
 
@@ -278,13 +330,22 @@ 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.setRepliedToMessageObj(this.originalMessage);
+                        this.focusChatEditor();
+                        }}">
+                    <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>