Merge branch 'master' into bugfix/remove-logs-messages

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

@@ -52,6 +52,7 @@ html {
   --lightChatHeadHover: #1e1f201a;
   --group-header: #929292;
   --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
+  --reactions-tooltip-bg: #ffffff;
 }
 
 html[theme="dark"] {
@@ -107,5 +108,6 @@ html[theme="dark"] {
   --chatHeadTextActive: #ffffff;
   --lightChatHeadHover: #e0e1e31a;
   --group-header: #c8c8c8;
-  --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px
+  --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
+  --reactions-tooltip-bg: #161515;
 }

qortal-ui-core/language/us.json

@@ -574,7 +574,12 @@
 		"cchange65": "Please enter a recipient",
 		"cchange66": "Cannot fetch replied-to message. Message is too old.",
 		"cchange68": "edited",
-		"cchange69": "Auto-show images"
+		"cchange69": "Auto-view images",
+		"cchange70": "This image type is not supported",
+		"cchange71": "and",
+		"cchange72": "other",
+		"cchange73": "s",
+		"cchange74": "reacted with"
 	},
 	"welcomepage": {
 		"wcchange1": "Welcome to Q-Chat",

qortal-ui-core/language/zhc.json

@@ -574,7 +574,12 @@
 		"cchange65": "请输入收件人",
 		"cchange66": "无法获取回覆消息。消息太旧了。",
 		"cchange68": "编辑",
-		"cchange69": "自动显示图像"
+		"cchange69": "自动显示图像",
+		"cchange70": "不支援此类型图像",
+		"cchange71": "和",
+		"cchange72": "其他",
+		"cchange73": "的",
+		"cchange74": "心情回应"
 	},
 	"welcomepage": {
 		"wcchange1": "欢迎来到Q-Chat",

qortal-ui-core/language/zht.json

@@ -574,7 +574,12 @@
 		"cchange65": "請輸入收件人",
 		"cchange66": "無法獲取回覆消息。消息太舊了。",
 		"cchange68": "編輯",
-		"cchange69": "自動顯示圖像"
+		"cchange69": "自動顯示圖像",
+		"cchange70": "不支援此類型圖像",
+		"cchange71": "和",
+		"cchange72": "其他",
+		"cchange73": "的",
+		"cchange74": "心情回應"
 	},
 	"welcomepage": {
 		"wcchange1": "歡迎來到 Q-Chat",

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

@@ -49,6 +49,7 @@ html {
   --chatHeadTextActive: #080808;
   --group-header: #929292;
   --group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
+  --reactions-tooltip-bg: #ffffff;
 }
 
 html[theme="dark"] {
@@ -101,5 +102,6 @@ html[theme="dark"] {
   --chatHeadText: #ffffff;
   --chatHeadTextActive: #ffffff;
   --group-header: #c8c8c8;
-  --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px
+  --group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
+  --reactions-tooltip-bg: #161515;
 }

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

@@ -831,6 +831,7 @@ class ChatPage extends LitElement {
         this.getOldMessage = this.getOldMessage.bind(this)
         this._sendMessage = this._sendMessage.bind(this)
         this.insertImage = this.insertImage.bind(this)
+        this.pasteImage = this.pasteImage.bind(this)
         this.toggleEnableChatEnter = this.toggleEnableChatEnter.bind(this)
         this._downObserverhandler = this._downObserverhandler.bind(this)
         this.setOpenTipUser = this.setOpenTipUser.bind(this)
@@ -1341,7 +1342,7 @@ class ChatPage extends LitElement {
 
 
 
-  async  connectedCallback() {
+    async connectedCallback() {
         super.connectedCallback();
         await this.initUpdate()
         this.webWorker = new WebWorker();
@@ -1419,7 +1420,8 @@ class ChatPage extends LitElement {
             ]
           })
           document.addEventListener('keydown', this.initialChat);
-      }
+          document.addEventListener('paste', this.pasteImage);
+    }
 
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -1441,7 +1443,8 @@ class ChatPage extends LitElement {
         }
         
         document.removeEventListener('keydown', this.initialChat);
-      }
+        document.removeEventListener('paste', this.pasteImage);
+    }
 
       initialChat(e) {
         if (this.editor && !this.editor.isFocused && this.currentEditor === '_chatEditorDOM' && !this.openForwardOpen && !this.openTipUser) {
@@ -1454,8 +1457,56 @@ class ChatPage extends LitElement {
                this.editor.commands.focus('end')
             }
         }
+    }
+
+
+    async pasteImage (e) { 
+        const event = e;
+        const handleTransferIntoURL = (dataTransfer) => {
+            try {
+                const [firstItem] = dataTransfer.items;
+                console.log({firstItem});
+                const blob = firstItem.getAsFile();
+                console.log({blob});
+                return blob;
+            } catch (error) {
+                console.log(error);
+            }
+        }
+        if (event.clipboardData) {
+            const blobFound = handleTransferIntoURL(event.clipboardData)
+            if (blobFound) {
+                this.insertImage(blobFound);
+                return;
+            } else {
+                const item_list = await navigator.clipboard.read();
+                let image_type; 
+                const item = item_list.find(item => 
+                    item.types.some( type => { 
+                    if (type.startsWith( 'image/')) {
+                        image_type = type; 
+                        return true;
+                    }
+                })
+                );
+                if (item) {
+                    try {                        
+                        const blob = item && await item.getType(image_type);
+                        let file = new File([blob], "name", {
+                        type: image_type
+                        });
+                        this.insertImage(file);
+                    } catch (error) {
+                        console.error(error);
+                        let errorMsg = get("chatpage.cchange70")
+                        parentEpml.request('showSnackBar', `${errorMsg}`)
+                    }
+                } else {
+                    return
+                }
+            }
+        }   
 
-    
     }
 
    async goToRepliedMessage(message, clickedOnMessage){
@@ -2611,6 +2662,8 @@ class ChatPage extends LitElement {
             if (!userName) {
                 parentEpml.request('showSnackBar', get("chatpage.cchange27"));
                 this.isLoading = false;
+                this.isUploadingImage = false;
+                this.imageFile = null;
                 return;
             }
 
@@ -2683,6 +2736,7 @@ class ChatPage extends LitElement {
                 const stringifyMessageObject = JSON.stringify(messageObject);
                 this.sendMessage(stringifyMessageObject, typeMessage);
         }  else if (outSideMsg && outSideMsg.type === 'reaction') {
+            const userName = await getName(this.selectedAddress.address);
             typeMessage = 'edit';
             let chatReference = outSideMsg.editedMessageObj.reference;
 
@@ -2704,11 +2758,14 @@ class ChatPage extends LitElement {
             const findEmojiIndex = reactions.findIndex((reaction)=> reaction.type === outSideMsg.reaction)
             if(findEmojiIndex !== -1){
                 let users =  reactions[findEmojiIndex].users || []
-                const findUserIndex = users.findIndex((user)=> user === this.selectedAddress.address )
+                const findUserIndex = users.findIndex((user)=> user.address === this.selectedAddress.address )
                 if(findUserIndex !== -1){
                   users.splice(findUserIndex, 1)
                 } else {
-                    users.push(this.selectedAddress.address)
+                    users.push({ 
+                        address: this.selectedAddress.address,
+                        name: userName
+                    })
                 }
                 reactions[findEmojiIndex] = {
                     ...reactions[findEmojiIndex],
@@ -2722,7 +2779,10 @@ class ChatPage extends LitElement {
                 reactions = [...reactions, {
                     type: outSideMsg.reaction,
                     qty: 1,
-                    users: [this.selectedAddress.address]
+                    users: [{ 
+                        address: this.selectedAddress.address,
+                        name: userName
+                    }]
                 }]
             }
             const messageObject = {

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

@@ -175,9 +175,13 @@ export const chatStyles = css`
 	}
 
 	.message-reactions {
-		background-color: transparent;
+    background-color: transparent;
-		width: calc(100% - 54px);
+    width: calc(100% - 54px);
-		margin-left: 54px;
+    margin-left: 54px;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: left;
+    gap: 8px;
 	}
 
 	.original-message {
@@ -412,11 +416,11 @@ export const chatStyles = css`
 	}
 
 	.reactions-bg {
+		position: relative;
 		background-color: #d5d5d5;
 		border-radius: 10px;
 		padding: 5px;
 		color: black;
-		margin-right: 10px;
 		transition: all 0.1s ease-in-out;
 		border: 0.5px solid transparent;
 		cursor: pointer;
@@ -723,6 +727,5 @@ export const chatStyles = css`
           transform: rotate(360deg);
       }
   }
-  
 
 `

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

@@ -13,6 +13,7 @@ import './WrapperModal';
 import "./UserInfo/UserInfo";
 import '@vaadin/icons';
 import '@vaadin/icon';
+import '@vaadin/tooltip';
 import '@material/mwc-button';
 import '@material/mwc-dialog';
 import '@material/mwc-icon';
@@ -293,10 +294,9 @@ class MessageTemplate extends LitElement {
             setUserName: { attribute: false },
             openTipUser:{ type: Boolean },
             goToRepliedMessage: { attribute: false },
-            listSeenMessages: {type: Array},
+            listSeenMessages: { type: Array },
-            addSeenMessage: {attribute: false},
+            addSeenMessage: { attribute: false },
-            chatId: {type: String}
+            chatId: { type: String },
-            
         }
     }
 
@@ -349,6 +349,13 @@ class MessageTemplate extends LitElement {
         if(autoSeeChatList.includes(this.chatId) || this.listSeenMessages.includes(this.messageObj.reference)){
             this.viewImage =  true
         }
+
+        const tooltips = this.shadowRoot.querySelectorAll('vaadin-tooltip');
+        tooltips.forEach(tooltip => {
+        const overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
+        overlay.shadowRoot.getElementById("overlay").style.cssText = "background-color: transparent; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px";
+        overlay.shadowRoot.getElementById('content').style.cssText = "background-color: var(--reactions-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; border-radius: 8px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;";
+        });
     }
 
     render() {
@@ -377,6 +384,7 @@ class MessageTemplate extends LitElement {
             repliedToData = this.messageObj.repliedToData;
             isImageDeleted = parsedMessageObj.isImageDeleted;
             reactions = parsedMessageObj.reactions || [];
+            console.log(reactions, 'reactions here');
             version = parsedMessageObj.version;
             isForwarded = parsedMessageObj.type === 'forward';
             isEdited = parsedMessageObj.isEdited && true;
@@ -683,17 +691,66 @@ class MessageTemplate extends LitElement {
                         </div>
                         <div class="message-reactions" style="${reactions.length > 0 && 
                             'margin-top: 10px; margin-bottom: 5px;'}">
-                                ${reactions.map((reaction)=> {
+                                ${reactions.map((reaction, index)=> {
                                     return html`
                                     <span 
-                                    @click=${() => this.sendMessage({
+                                        @click=${() => this.sendMessage({
                                         type: 'reaction',
                                         editedMessageObj: this.messageObj,
                                         reaction:  reaction.type,
                                         })} 
-                                    class="reactions-bg">
+                                        id=${`reactions-${index}`}
-                                    ${reaction.type} ${reaction.qty}
+                                        class="reactions-bg">
-                                    </span>`
+                                        ${reaction.type} 
+                                        ${reaction.qty}
+                                        <vaadin-tooltip 
+                                        for=${`reactions-${index}`} 
+                                        position="top"
+                                        hover-delay=${400}
+                                        hide-delay=${1}
+                                        text=${reaction.users.length > 3 ?
+                                        (
+                                        `${reaction.users[0].name 
+                                        ? reaction.users[0].name 
+                                        : cropAddress(reaction.users[0].address)}, 
+                                        ${reaction.users[1].name 
+                                        ? reaction.users[1].name 
+                                        : cropAddress(reaction.users[1].address)},
+                                        ${reaction.users[2].name 
+                                        ? reaction.users[2].name 
+                                        : cropAddress(reaction.users[2].address)}
+                                        ${get("chatpage.cchange71")} ${reaction.users.length - 3} ${get("chatpage.cchange72")}${(reaction.users.length - 3) > 1 ? html`${get("chatpage.cchange73")}` : ""} ${get("chatpage.cchange74")} ${reaction.type}`
+                                        ) : reaction.users.length === 3 ?
+                                        (
+                                        `${reaction.users[0].name 
+                                        ? reaction.users[0].name 
+                                        : cropAddress(reaction.users[0].address)}, 
+                                        ${reaction.users[1].name 
+                                        ? reaction.users[1].name 
+                                        : cropAddress(reaction.users[1].address)} 
+                                        ${get("chatpage.cchange71")} 
+                                        ${reaction.users[2].name 
+                                        ? reaction.users[2].name 
+                                        : cropAddress(reaction.users[2].address)} ${get("chatpage.cchange74")} ${reaction.type}`
+                                        ) : reaction.users.length === 2 ?
+                                        (
+                                        `${reaction.users[0].name 
+                                        ? reaction.users[0].name 
+                                        : cropAddress(reaction.users[0].address)}
+                                        ${get("chatpage.cchange71")} 
+                                        ${reaction.users[1].name 
+                                        ? reaction.users[1].name 
+                                        : cropAddress(reaction.users[1].address)} ${get("chatpage.cchange74")} ${reaction.type}`
+                                        ) : reaction.users.length === 1 ?
+                                        (
+                                        `${reaction.users[0].name 
+                                        ? reaction.users[0].name 
+                                        : cropAddress(reaction.users[0].address)} ${get("chatpage.cchange74")} ${reaction.type}`
+                                        ) 
+                                        : "" }>
+                                    </vaadin-tooltip> 
+                                    </span>
+                                    `
                                 })}
                         </div>
                     </div>