added reactions

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

@@ -315,7 +315,6 @@ class ChatPage extends LitElement {
 
         // Attach Event Handler
         this.emojiPickerHandler.addEventListener('click', () => this.emojiPicker.togglePicker(this.emojiPickerHandler));
-
         window.addEventListener('storage', () => {
             const checkLanguage = localStorage.getItem('qortalLanguage')
             use(checkLanguage)
@@ -429,6 +428,7 @@ class ChatPage extends LitElement {
         .setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)}
         .setEditedMessageObj=${(val) => this.setEditedMessageObj(val)}
         .focusChatEditor=${() => this.focusChatEditor()}
+        .sendMessage=${(val)=> this._sendMessage(val)}
         >
         </chat-scroller>`
     }
@@ -991,7 +991,7 @@ class ChatPage extends LitElement {
         // Add to the messages... TODO: Save messages to localstorage and fetch from it to make it persistent... 
     }
 
-    _sendMessage() {
+    _sendMessage(outSideMsg) {
         // 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 
@@ -1007,9 +1007,58 @@ class ChatPage extends LitElement {
         const sanitizedMessage = messageText.replace(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
         const trimmedMessage = sanitizedMessage.trim();
 
-     
+        if(outSideMsg && outSideMsg.type === 'reaction'){
+            typeMessage = 'edit'
+            let chatReference = outSideMsg.editedMessageObj.reference
 
-        if (/^\s*$/.test(trimmedMessage)) {
+            if(outSideMsg.editedMessageObj.chatReference){
+                chatReference = outSideMsg.editedMessageObj.chatReference
+            }
+           
+            let message = ""
+        try {
+            const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage)
+            message = parsedMessageObj
+            
+        } catch (error) {
+            message = outSideMsg.editedMessageObj.decodedMessage
+        }   
+
+            let reactions = message.reactions || []
+            const findEmojiIndex = reactions.findIndex((reaction)=> reaction.type === outSideMsg.reaction)
+            if(findEmojiIndex !== -1){
+                let users =  reactions[findEmojiIndex].users || []
+                const findUserIndex = users.find((user)=> user === this.selectedAddress.address )
+                if(findUserIndex !== -1){
+                  users.splice(findUserIndex, 1)
+                } else {
+                    users.push(this.selectedAddress.address)
+                }
+                reactions[findEmojiIndex] = {
+                    ...reactions[findEmojiIndex],
+                    qty: users.length,
+                    users
+                }
+                if(users.length === 0){
+                    reactions.splice(findEmojiIndex, 1)
+                }
+            } else {
+                reactions = [...reactions, {
+                    type: outSideMsg.reaction,
+                    qty: 1,
+                    users: [this.selectedAddress.address]
+                }]
+            }
+            
+            const messageObject = {
+                ...message,
+                reactions
+                
+            }
+            const stringifyMessageObject = JSON.stringify(messageObject)
+            this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
+
+        } else if (/^\s*$/.test(trimmedMessage)) {
             this.isLoading = false;
             this.chatEditor.enable();
         } else if (trimmedMessage.length >= 256) {
@@ -1046,7 +1095,7 @@ class ChatPage extends LitElement {
             message = parsedMessageObj
             
         } catch (error) {
-            message = this.messageObj.decodedMessage
+            message = this.editedMessageObj.decodedMessage
         }
             const messageObject = {
                 ...message,

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

@@ -320,4 +320,13 @@ export const chatStyles = css`
 		padding: 3px 8px;
 		box-shadow: rgba(77, 77, 82, 0.2) 0px 7px 29px 0px;
 	}
+
+	.reactions-bg {
+		background-color: #3C4048;
+		border-radius: 10px;
+		padding: 4px;
+		color: white;
+		margin-right: 10px;
+		cursor: pointer
+	}
 `

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

@@ -13,6 +13,8 @@ import '@vaadin/icon';
 import '@material/mwc-button';
 import '@material/mwc-dialog';
 import '@material/mwc-icon';
+import { EmojiPicker } from 'emoji-picker-js';
+
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 class ChatScroller extends LitElement {
@@ -27,7 +29,8 @@ class ChatScroller extends LitElement {
             hideMessages: { type: Array },
             setRepliedToMessageObj: { type: Function },
             setEditedMessageObj: { type: Function },
-            focusChatEditor: { type: Function }
+            focusChatEditor: { type: Function },
+            sendMessage: { type: Function}
         }
     }
 
@@ -44,8 +47,6 @@ class ChatScroller extends LitElement {
 
 
     render() {
-        console.log({messages: this.messages})
-
         return html`
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
@@ -61,6 +62,7 @@ class ChatScroller extends LitElement {
                     .setRepliedToMessageObj=${this.setRepliedToMessageObj}
                     .setEditedMessageObj=${this.setEditedMessageObj}
                     .focusChatEditor=${this.focusChatEditor}
+                    .sendMessage=${this.sendMessage}
                     >
                     </message-template>`
                 )}
@@ -82,11 +84,6 @@ class ChatScroller extends LitElement {
         return changedProperties.has('messages');
       }
 
-    async updated(changedProperties) { 
-
-        console.log({changedProperties})
-    }
-
     async firstUpdated() {
         this.viewElement = this.shadowRoot.getElementById('viewElement')
         this.upObserverElement = this.shadowRoot.getElementById('upObserver')
@@ -166,6 +163,7 @@ class MessageTemplate extends LitElement {
             setRepliedToMessageObj: { type: Function },
             setEditedMessageObj: { type: Function },
             focusChatEditor: { type: Function },
+            sendMessage: { type: Function }
         }
     }
 
@@ -210,11 +208,14 @@ class MessageTemplate extends LitElement {
     render() {
         const hidemsg = this.hideMessages
         let message = ""
+        let reactions = []
         let repliedToData = null
         try {
             const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage)
             message = parsedMessageObj.messageText
             repliedToData = this.messageObj.repliedToData
+         reactions = parsedMessageObj.reactions || []
+
         } catch (error) {
             message = this.messageObj.decodedMessage
         }
@@ -269,6 +270,16 @@ class MessageTemplate extends LitElement {
                     `}
                 <div id="messageContent" class="message">
                     ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
+                    
+                </div>
+                <div>
+                ${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"
@@ -285,6 +296,7 @@ class MessageTemplate extends LitElement {
                     .focusChatEditor=${this.focusChatEditor}
                     .myAddress=${this.myAddress}
                     @blur=${() => this.showBlockIconFunc(false)}
+                    .sendMessage=${this.sendMessage}
                 > 
                 </chat-menu>
                 </div>
@@ -317,7 +329,9 @@ class ChatMenu extends LitElement {
             setRepliedToMessageObj: { type: Function },
             setEditedMessageObj: { type: Function },
             focusChatEditor: { type: Function },
-            myAddress: { type: Object }
+            myAddress: { type: Object },
+            emojiPicker: { attribute: false },
+            sendMessage: {type: Function}
         }
     }
 
@@ -341,6 +355,34 @@ class ChatMenu extends LitElement {
             console.error('Copy to clipboard error:', err)
         }
     }
+
+  
+
+    firstUpdated(){
+        this.emojiPicker = new EmojiPicker({
+            style: "twemoji",
+            twemojiBaseUrl: '/emoji/',
+            showPreview: false,
+            showVariants: false,
+            showAnimation: false,
+            position: 'top-start',
+            boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
+        });
+
+      this.emojiPicker.on('emoji', selection => {
+        this.sendMessage({
+            type: 'reaction',
+            editedMessageObj: this.originalMessage,
+            reaction:  selection.emoji,
+         
+           
+        })
+ 
+    });
+      
+    }
+
+ 
     
     render() {
         return html` 
@@ -360,6 +402,15 @@ class ChatMenu extends LitElement {
                     }}">
                     <vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
                 </div>
+                <div 
+                class="menu-icon tooltip reaction" 
+                data-text="${translate("blockpage.bcchange13")}" 
+                @click=${(e) => {
+                    this.emojiPicker.togglePicker(e.target)
+                    }}
+               >
+                    <vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>
+                </div>
                 ${this.myAddress === this.originalMessage.sender ? (
                     html`
                     <div