added pending messages

plugins/plugins/core/components/ChatPage.js

@@ -124,7 +124,9 @@ class ChatPage extends LitElement {
             goToRepliedMessage: { attribute: false },
             isLoadingGoToRepliedMessage: { type: Object },
             updateMessageHash: { type: Object},
-            oldMessages: {type: Array}
+            oldMessages: {type: Array},
+            messageQueue: {type: Array},
+            isInProcessQueue: {type: Boolean}
         }
     }
 
@@ -1371,6 +1373,10 @@ class ChatPage extends LitElement {
         this.oldMessages = []
         this.lastReadMessageTimestamp =  0
         this.initUpdate = this.initUpdate.bind(this)
+        this.messageQueue = []
+        this.addToQueue = this.addToQueue.bind(this)
+        this.processQueue = this.processQueue.bind(this)
+        this.isInProcessQueue = false
     }
 
     setOpenGifModal(value) {
@@ -1416,7 +1422,84 @@ class ChatPage extends LitElement {
         this.gifsLoading = props
     }
 
+    addToQueue(outSideMsg, messageQueue) {
+        console.log('added to queue', messageQueue, this.messageQueue)
+        // Push the new message object to the queue
+        
+        this.messageQueue = [...messageQueue, { ...outSideMsg, timestamp: Date.now()}];
+        console.log('Current Queue after adding:', [...this.messageQueue]);
+
+        // Start processing the queue only if the message we just added is the only one in the queue
+        // This ensures that the queue processing starts only once, even if this method is called multiple times
+        if (this.messageQueue.length === 1) {
+            this.processQueue();
+        }
+    
+        // Notify Lit to update/render due to the property change
+        this.requestUpdate();
+    }
+
+    async processQueue() {
+        if (this.messageQueue.length === 0) return;
+        const currentMessage = this.messageQueue[0];
+        console.log({currentMessage})
+        try {
+          const res =  await this.sendMessage(currentMessage);
+          console.log({res})
+          if(res === true) {
+            this.messageQueue = this.messageQueue.slice(1);
+          } else {
+            throw new Error('failed')
+          }
+         
+            if (this.messageQueue.length > 0) {
+                setTimeout(() => this.processQueue(), 2000); // Wait for 10 seconds before retrying
+                // setTimeout(() => this.processQueue(), 0); // Process the next message immediately
+            }
+        } catch (error) {
+            console.error("Failed to send message:", error);
+            setTimeout(() => this.processQueue(), 10000); // Wait for 10 seconds before retrying
+        }
+    }
+    // async processQueue() {
+    //     let inProcess = false;  // to indicate if we're currently sending a message
+    
+    //     while (true) {  // Infinite loop
+    //         const currentMessage = this.messageQueue[0];
+    
+    //         // If there's no current message, you could wait a while (e.g., a second) before the next iteration.
+    //         // This prevents the loop from consuming resources unnecessarily when the queue is empty.
+    //         if (!currentMessage) {
+    //             await new Promise(res => setTimeout(res, 1000));  // Wait for 1 second
+    //             continue;  // go to the next iteration of the loop
+    //         }
+    
+    //         // If not currently processing another message, attempt to send the current one
+    //         if (!inProcess) {
+    //             inProcess = true;  // indicate that we're starting to process a message
+    
+    //             try {
+    //                 await this._sendMessage(currentMessage.outSideMsg, currentMessage.msg, true, currentMessage.chatId, currentMessage.isReceipient, currentMessage._publicKey, currentMessage.attachment);
+    
+    //                 // If successful, remove the processed message from the queue
+    //                 this.messageQueue = this.messageQueue.slice(1);
+    //                 inProcess = false;  // set inProcess back to false since we're done with this message
+    //             } catch (error) {
+    //                 console.error("Failed to send message:", error);
+    //                 inProcess = false;  // set inProcess back to false since an error occurred
+    //                 await new Promise(res => setTimeout(res, 10000));  // Wait for 10 seconds before retrying
+    //             }
+    //         } else {
+    //             await new Promise(res => setTimeout(res, 1000));  // Wait for 1 second before checking again if inProcess is false
+    //         }
+    //     }
+    // }
+    
+    
+
     render() {
+        console.log('this.messageQueue', this.messageQueue.length)
+
         return html`
             <div class="main-container">
             <div 
@@ -1551,6 +1634,7 @@ class ChatPage extends LitElement {
                                 ?openGifModal=${this.openGifModal}
                                 .setOpenGifModal=${(val) => this.setOpenGifModal(val)}
                                 chatId=${this.chatId}
+                                .messageQueue=${this.messageQueue}
                                 >                           
                             </chat-text-editor>
                     </div>
@@ -2394,7 +2478,9 @@ class ChatPage extends LitElement {
 
     async firstUpdated() {
         this.changeTheme()
-
+     
+            // this.processQueue();
+      
         window.addEventListener('storage', () => {
             const checkLanguage = localStorage.getItem('qortalLanguage')
             const checkTheme = localStorage.getItem('qortalTheme')
@@ -2453,6 +2539,7 @@ class ChatPage extends LitElement {
 
 
     shouldUpdate(changedProperties) {
+        console.log({changedProperties})
         if (changedProperties.has('setActiveChatHeadUrl')) {
             return false
         }
@@ -2537,6 +2624,7 @@ class ChatPage extends LitElement {
                 .goToRepliedMessage=${(val, val2) => this.goToRepliedMessage(val, val2)}
                .updateMessageHash=${this.updateMessageHash}
                .clearUpdateMessageHashmap=${this.clearUpdateMessageHashmap}
+               .messageQueue=${this.messageQueue}
             >
             </chat-scroller>
         `
@@ -3484,11 +3572,25 @@ class ChatPage extends LitElement {
         }
     }
 
-    async _sendMessage(outSideMsg, msg) {
+    async _sendMessage(outSideMsg, msg, messageQueue) {
+       const _chatId= this._chatId 
+       const isReceipient= this.isReceipient 
+       const _publicKey= this._publicKey 
+      const attachment= this.attachment
+      console.log({
+        _chatId, isReceipient, _publicKey, attachment
+      })
+        // if(messageQueue){
+        //     console.log('is queueCurrent Queue after before:', [...this.messageQueue]);
+        //     this.addToQueue(outSideMsg, msg, messageQueue);
+
+        //     return
+        // }
+       
         try {
             if (this.isReceipient) {
                 let hasPublicKey = true
-                if (!this._publicKey.hasPubKey) {
+                if (!publicKey.hasPubKey) {
                     hasPublicKey = false
                     try {
                         const res = await parentEpml.request('apiCall', {
@@ -3496,20 +3598,20 @@ class ChatPage extends LitElement {
                             url: `/addresses/publickey/${this.selectedAddress.address}`
                         })
                         if (res.error === 102) {
-                            this._publicKey.key = ''
+                            publicKey.key = ''
-                            this._publicKey.hasPubKey = false
+                            publicKey.hasPubKey = false
                         } else if (res !== false) {
-                            this._publicKey.key = res
+                            publicKey.key = res
-                            this._publicKey.hasPubKey = true
+                            publicKey.hasPubKey = true
                             hasPublicKey = true
                         } else {
-                            this._publicKey.key = ''
+                            publicKey.key = ''
-                            this._publicKey.hasPubKey = false
+                            publicKey.hasPubKey = false
                         }
                     } catch (error) {
                     }
     
-                    if (!hasPublicKey || !this._publicKey.hasPubKey) {
+                    if (!hasPublicKey || !publicKey.hasPubKey) {
                         let err4string = get("chatpage.cchange39")
                         parentEpml.request('showSnackBar', `${err4string}`)
                         return
@@ -3524,7 +3626,7 @@ class ChatPage extends LitElement {
             // create new var called repliedToData and use that to modify the UI
             // find specific object property in local
             let typeMessage = 'regular'
-            this.isLoading = true
+            // this.isLoading = true
             const trimmedMessage = msg
     
             const getName = async (recipient) => {
@@ -3640,7 +3742,7 @@ class ChatPage extends LitElement {
                     isImageDeleted: true
                 }
                 const stringifyMessageObject = JSON.stringify(messageObject)
-                this.sendMessage(stringifyMessageObject, typeMessage, chatReference)
+               return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
             } else if (outSideMsg && outSideMsg.type === 'deleteAttachment') {
                 this.isDeletingAttachment = true
                 let compressedFile = ''
@@ -3738,7 +3840,7 @@ class ChatPage extends LitElement {
                     isAttachmentDeleted: true
                 }
                 const stringifyMessageObject = JSON.stringify(messageObject)
-                this.sendMessage(stringifyMessageObject, typeMessage, chatReference)
+               return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
             } else if (outSideMsg && outSideMsg.type === 'image') {
                 this.isUploadingImage = true
                 const userName = await getName(this.selectedAddress.address)
@@ -3826,7 +3928,7 @@ class ChatPage extends LitElement {
                     version: 3
                 }
                 const stringifyMessageObject = JSON.stringify(messageObject)
-                this.sendMessage(stringifyMessageObject, typeMessage)
+               return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference: undefined, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
             } else if (outSideMsg && outSideMsg.type === 'gif') {
                 const userName = await getName(this.selectedAddress.address)
                 if (!userName) {
@@ -3847,7 +3949,7 @@ class ChatPage extends LitElement {
                     version: 3
                 }
                 const stringifyMessageObject = JSON.stringify(messageObject)
-                this.sendMessage(stringifyMessageObject, typeMessage)
+               return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference: undefined, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
             } else if (outSideMsg && outSideMsg.type === 'attachment') {
                 this.isUploadingAttachment = true
                 const userName = await getName(this.selectedAddress.address)
@@ -3864,7 +3966,7 @@ class ChatPage extends LitElement {
     
                 this.webWorkerFile = new WebWorkerFile()
     
-                const attachment = this.attachment
+                // const attachment = attachment
                 const id = this.uid()
                 const identifier = `qchat_${id}`
                 const fileSize = attachment.size
@@ -3916,7 +4018,7 @@ class ChatPage extends LitElement {
                     version: 3
                 }
                 const stringifyMessageObject = JSON.stringify(messageObject)
-                this.sendMessage(stringifyMessageObject, typeMessage)
+               return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference: undefined, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
             } else if (outSideMsg && outSideMsg.type === 'reaction') {
                 const userName = await getName(this.selectedAddress.address)
                 typeMessage = 'edit'
@@ -3971,7 +4073,7 @@ class ChatPage extends LitElement {
                     reactions
                 }
                 const stringifyMessageObject = JSON.stringify(messageObject)
-                this.sendMessage(stringifyMessageObject, typeMessage, chatReference)
+               return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
             } else if (/^\s*$/.test(trimmedMessage)) {
                 this.isLoading = false
             } else if (this.repliedToMessageObj) {
@@ -3987,7 +4089,7 @@ class ChatPage extends LitElement {
                     version: 3
                 }
                 const stringifyMessageObject = JSON.stringify(messageObject)
-                this.sendMessage(stringifyMessageObject, typeMessage)
+               return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference: undefined, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
             } else if (this.editedMessageObj) {
                 typeMessage = 'edit'
                 let chatReference = this.editedMessageObj.signature
@@ -4010,7 +4112,7 @@ class ChatPage extends LitElement {
                     isEdited: true
                 }
                 const stringifyMessageObject = JSON.stringify(messageObject)
-                this.sendMessage(stringifyMessageObject, typeMessage, chatReference)
+                return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
             } else {
                 const messageObject = {
                     messageText: trimmedMessage,
@@ -4025,7 +4127,7 @@ class ChatPage extends LitElement {
                     this.myTrimmedMeassage = stringifyMessageObject
                     this.shadowRoot.getElementById('confirmDialog').open()
                 } else {
-                    this.sendMessage(stringifyMessageObject, typeMessage)
+                   return this.sendMessage({messageText: stringifyMessageObject, typeMessage, chatReference: undefined, isForward: false, isReceipient, _chatId, _publicKey, messageQueue})
                 }
             }
         } catch (error) {
@@ -4036,20 +4138,27 @@ class ChatPage extends LitElement {
     
     }
 
-    async sendMessage(messageText, typeMessage, chatReference, isForward) {
+    async sendMessage({messageText, typeMessage, chatReference, isForward,isReceipient, _chatId, _publicKey, messageQueue}) {
-        this.isLoading = true
+        console.log('2', {messageText, typeMessage, chatReference, isForward,isReceipient, _chatId, _publicKey})
+        if(messageQueue){
+            console.log('is queueCurrent Queue after before:', [...this.messageQueue]);
+            this.addToQueue({messageText, typeMessage, chatReference, isForward, isReceipient, _chatId, _publicKey}, messageQueue);
+            this.resetChatEditor()
+            return
+        }
+        // this.isLoading = true
         let _reference = new Uint8Array(64)
         window.crypto.getRandomValues(_reference)
         let reference = window.parent.Base58.encode(_reference)
         const sendMessageRequest = async () => {
-            if (this.isReceipient === true) {
+            if (isReceipient === true) {
                 let chatResponse = await parentEpml.request('chat', {
                     type: 18,
                     nonce: this.selectedAddress.nonce,
                     params: {
                         timestamp: Date.now(),
-                        recipient: this._chatId,
+                        recipient: _chatId,
-                        recipientPublicKey: this._publicKey.key,
+                        recipientPublicKey: _publicKey.key,
                         hasChatReference: typeMessage === 'edit' ? 1 : 0,
                         chatReference: chatReference,
                         message: messageText,
@@ -4059,14 +4168,14 @@ class ChatPage extends LitElement {
                         isText: 1
                     }
                 })
-                _computePow(chatResponse)
+               return _computePow(chatResponse)
             } else {
                 let groupResponse = await parentEpml.request('chat', {
                     type: 181,
                     nonce: this.selectedAddress.nonce,
                     params: {
                         timestamp: Date.now(),
-                        groupID: Number(this._chatId),
+                        groupID: Number(_chatId),
                         hasReceipient: 0,
                         hasChatReference: typeMessage === 'edit' ? 1 : 0,
                         chatReference: chatReference,
@@ -4077,7 +4186,7 @@ class ChatPage extends LitElement {
                         isText: 1
                     }
                 })
-                _computePow(groupResponse)
+               return _computePow(groupResponse)
             }
         }
 
@@ -4266,11 +4375,12 @@ class ChatPage extends LitElement {
             })
 
             getSendChatResponse(_response, isForward)
+            return _response
         }
 
         const getSendChatResponse = (response, isForward, customErrorMessage) => {
             if (response === true) {
-                this.resetChatEditor()
+                // this.resetChatEditor()
                 if (isForward) {
                     let successString = get("blockpage.bcchange15")
                     parentEpml.request('showSnackBar', `${successString}`)
@@ -4302,7 +4412,7 @@ class ChatPage extends LitElement {
             sendForwardRequest()
             return
         }
-        sendMessageRequest()
+      return  sendMessageRequest()
     }
 
     /**

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

@@ -43,6 +43,10 @@ export const chatStyles = css`
 		margin: 0;
 		padding: 20px 17px;
 	}
+	.message-sending {
+  opacity: 0.5;
+  cursor: progress;
+}
 
 	.chat-list {
 		overflow-y: auto;

plugins/plugins/core/components/ChatScroller.js

@@ -245,7 +245,8 @@ class ChatScroller extends LitElement {
             clearUpdateMessageHashmap: { attribute: false},
             disableFetching: {type: Boolean},
             isLoadingBefore: {type: Boolean},
-            isLoadingAfter: {type: Boolean}
+            isLoadingAfter: {type: Boolean},
+            messageQueue: {type: Array}
         }
     }
 
@@ -279,6 +280,7 @@ class ChatScroller extends LitElement {
         this.isLoadingAfter = false
         this.disableAddingNewMessages = false
         this.lastReadMessageTimestamp =  null
+        this.messageQueue = []
     }
 
     addSeenMessage(val) {
@@ -614,6 +616,7 @@ class ChatScroller extends LitElement {
     
 
     render() {
+        console.log('this.chatId', this.chatId)
         // let formattedMessages = this.messages.reduce((messageArray, message) => {
         //     const currentMessage = this.updateMessageHash[message.signature] || message;
         //     const lastGroupedMessage = messageArray[messageArray.length - 1];
@@ -698,17 +701,67 @@ class ChatScroller extends LitElement {
                         `
                        
             )}
+            
            
             `
         )}
+
+                        ${this.messageQueue.filter((item )=> this.chatId.includes(item._chatId)).length > 0 ? html`
+                        <div style=${"height: 1px"} id='bottomObserverForFetchingMessages'></div>
+                        ` : html`
                         <div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div>
+                        `}
+                        
 
                 <div style=${"height: 1px;"} id='downObserver'></div>
+                
                 ${this.isLoadingAfter ? html`
                 <div class="spinnerContainer">
                         <paper-spinner-lite active></paper-spinner-lite>
                         </div>
                         ` : ''}
+                        ${repeat(
+                this.messageQueue.filter((item )=> this.chatId.includes(item._chatId)),
+                (message) => message.messageText,
+                (message, indexMessage) => html`
+                         
+                        <message-template 
+                            .emojiPicker=${this.emojiPicker} 
+                            .escapeHTML=${this.escapeHTML} 
+                            .messageObj=${{
+                            decodedMessage: message.messageText, 
+                            
+    "timestamp": message.timestamp,
+    "sender": "QWxEcmZxnM8yb1p92C1YKKRsp8svSVbFEs",
+    "senderName": "palmas",
+    "signature": "4B6hHMHTnSvXTMmQb73P4Yr2o772zu7XxiTiRQv8GsgysNaoc9UCUqb9x7ihz2Su6xCREZUvgACmFpHY2gzUbYHf",
+    
+                            }} 
+                            .hideMessages=${this.hideMessages}
+                            .setRepliedToMessageObj=${this.setRepliedToMessageObj}
+                            .setEditedMessageObj=${this.setEditedMessageObj}
+                            .sendMessage=${this.sendMessage}
+                            .sendMessageForward=${this.sendMessageForward}
+                            ?isFirstMessage=${true}
+                            ?isSingleMessageInGroup=${false}
+                            ?isLastMessageInGroup=${true}
+                            .setToggledMessage=${this.setToggledMessage}
+                            .setForwardProperties=${this.setForwardProperties}
+                            .setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
+                            .setOpenTipUser=${(val) => this.setOpenTipUser(val)}
+                            .setOpenUserInfo=${(val) => this.setOpenUserInfo(val)}
+                            .setUserName=${(val) => this.setUserName(val)}
+                            id=${message.signature}
+                            .goToRepliedMessage=${(val, val2)=> this.goToRepliedMessageFunc(val, val2)}
+                            .addSeenMessage=${(val) => this.addSeenMessage(val)}
+                            .listSeenMessages=${this.listSeenMessages}
+                            chatId=${this.chatId}
+                            ?isInProgress=${true}
+                        ></message-template>
+                        
+                        `
+                       
+            )}
             </ul>
         `
     }
@@ -741,6 +794,9 @@ class ChatScroller extends LitElement {
         if(changedProperties.has('isLoadingAfter')){
             return true
         }
+        if(changedProperties.has('messageQueue')){
+            return true
+        }
         // Only update element if prop1 changed.
         return changedProperties.has('messages')
     }
@@ -820,7 +876,7 @@ class ChatScroller extends LitElement {
 
 
     _upObserverhandler(entries) {
-
+        if(!entries[0].target || !entries[0].target.nextElementSibling) return
         if (entries[0].isIntersecting) {
             if (this.disableFetching) {
                 return
@@ -844,7 +900,7 @@ class ChatScroller extends LitElement {
         if (this.messagesToRender.length === 0 ||  this.disableFetching) {
             return
         }
-        if (!entries[0].isIntersecting) {
+        if (!entries[0].isIntersecting || !entries[0].target || !entries[0].target.previousElementSibling) {
         } else {
             this.disableFetching = true
             this.isLoadingAfter = true
@@ -926,7 +982,8 @@ class MessageTemplate extends LitElement {
             goToRepliedMessage: { attribute: false },
             listSeenMessages: { type: Array },
             addSeenMessage: { attribute: false },
-            chatId: { type: String }
+            chatId: { type: String },
+            isInProgress: {type: Boolean}
         }
     }
 
@@ -947,6 +1004,7 @@ class MessageTemplate extends LitElement {
         this.isSingleMessageInGroup = false
         this.isLastMessageInGroup = false
         this.viewImage = false
+        this.isInProgress = false
     }
 
     static get styles() {
@@ -1059,6 +1117,7 @@ class MessageTemplate extends LitElement {
         let isEdited = false
         let attachment = null
         try {
+            console.log('this.messageOb', this.messageObj )
             const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage)
             if (+parsedMessageObj.version > 1 && parsedMessageObj.messageText) {
                 messageVersion2 = generateHTML(parsedMessageObj.messageText, [
@@ -1250,7 +1309,7 @@ class MessageTemplate extends LitElement {
                     <div 
                     class="message-container" 
                     style="${(this.isSingleMessageInGroup === true && this.isLastMessageInGroup === false) && 'margin-bottom: 0'}">
-                        <div class="message-subcontainer1">
+                        <div class=${`message-subcontainer1 ${this.isInProgress ? 'message-sending' : ''}`}>
                             ${(this.isSingleMessageInGroup === false ||
                 (this.isSingleMessageInGroup === true && this.isLastMessageInGroup === true))
                 ? (
@@ -1476,7 +1535,12 @@ class MessageTemplate extends LitElement {
                                                     `
                 : ''
             }
+                                            ${this.isInProgress ? html`
+                                            <p>Sending...</p>
+                                            ` : html`
                                             <message-time timestamp=${this.messageObj.timestamp}></message-time>
+                                            `}
+                                            
                                         </div>
                                     </div>
                             </div>
@@ -1518,7 +1582,7 @@ class MessageTemplate extends LitElement {
                     editedMessageObj: this.messageObj,
                     reaction: reaction.type,
                 })} 
-                                        id=${`reactions-${index}`}
+                                        id=${`reactions-${indexMessageTemplate}`}
                                         class="reactions-bg">
                                         ${reaction.type} 
                                         ${reaction.qty}
@@ -1530,7 +1594,7 @@ class MessageTemplate extends LitElement {
                                         text=${reaction.users.length > 3 ?
                         (
                             `${reaction.users[0].name
-                                ? reaction.users[0].name
+                                ? reaction.users[0].nameMessageTemplate
                                 : cropAddress(reaction.users[0].address)}, 
                                         ${reaction.users[1].name
                                 ? reaction.users[1].name
@@ -1558,7 +1622,7 @@ class MessageTemplate extends LitElement {
                                         : cropAddress(reaction.users[0].address)}
                                         ${get("chatpage.cchange71")} 
                                         ${reaction.users[1].name
-                                        ? reaction.users[1].name
+                                        ? reaction.users[1].namMessageTemplatee
                                         : cropAddress(reaction.users[1].address)} ${get("chatpage.cchange74")} ${reaction.type}`
                                 ) : reaction.users.length === 1 ?
                                     (
@@ -1585,7 +1649,7 @@ class MessageTemplate extends LitElement {
                 toblockaddress=${this.messageObj.sender}
             >
             </chat-modals>
-            <mwc-dialog 
+            <mwc-dialog MessageTemplate
                 id="showDialogPublicKey" 
                 ?open=${this.openDialogImage} 
                 @closed=${() => {
@@ -1600,7 +1664,7 @@ class MessageTemplate extends LitElement {
 						dialogAction="cancel"
 						class="red"
 						@click=${() => {
-
+MessageTemplate
                 this.openDialogImage = false
             }}
 					>
@@ -1612,7 +1676,7 @@ class MessageTemplate extends LitElement {
                 ?open=${this.openDialogGif} 
                 @closed=${() => {
                 this.openDialogGif = false
-            }}>
+            }}>MessageTemplate
 					<div class="dialog-header"></div>
 					<div class="dialog-container imageContainer">
 					    ${gifHTMLDialog}
@@ -1627,7 +1691,7 @@ class MessageTemplate extends LitElement {
             }}
 					>
 					    ${translate("general.close")}
-					</mwc-button>
+					</mwc-button>MessageTemplate
 				</mwc-dialog>
                 <mwc-dialog
                 hideActions

plugins/plugins/core/components/ChatTextEditor copy.js

@@ -163,6 +163,7 @@ class ChatTextEditor extends LitElement {
 	}
 
 	render() {
+        console.log('here here')
         let scrollHeightBool = false;
         try {
             if (this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 && this.shadowRoot.querySelector(".chat-editor").contentDocument.body.querySelector("#chatbarId").innerHTML.trim() !== "") {

plugins/plugins/core/components/ChatTextEditor.js

@@ -36,7 +36,8 @@ class ChatTextEditor extends LitElement {
             isEnabledChatEnter: {type: Boolean},
             openGifModal: { type: Boolean },
             setOpenGifModal: { attribute: false },
-            chatId: {type: String}
+            chatId: {type: String},
+            messageQueue: {type: Array}
 		}
 	}
 
@@ -376,9 +377,12 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
         this.userName = window.parent.reduxStore.getState().app.accountInfo.names[0]
         this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
         this.editor = null
+        this.messageQueue = []
+
 	}
 
 	render() {
+        console.log('at render', this.messageQueue)
 		return html`
             <div 
              class=${["chatbar-container", "chatbar-buttons", this.iframeId !=="_chatEditorDOM" && 'hide-styling'].join(" ")}
@@ -515,7 +519,8 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
                                 icon="vaadin:check"
                                 slot="icon"
                                 @click=${() => {
-                                    this.sendMessageFunc();
+                                    console.log('onclick', this.messageQueue)
+                                    this.sendMessageFunc(this.messageQueue);
                                 }}
                                 >
                             </vaadin-icon>
@@ -538,7 +543,8 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
                                 alt="send-icon" 
                                 class="send-icon" 
                                 @click=${() => {
-                                    this.sendMessageFunc();
+                                       console.log('onclick', this.messageQueue)
+                                    this.sendMessageFunc(this.messageQueue);
                                 }} 
                                 />
                             ` : 
@@ -641,6 +647,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
       }
 
     sendMessageFunc(props) {
+        console.log({props})
         if(this.editor.isEmpty && (this.iframeId !== 'newChat' && this.iframeId !== 'newAttachmentChat')) return
         this.getMessageSize(this.editor.getJSON())
         if (this.chatMessageSize > 4000 ) {
@@ -648,7 +655,8 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
             return;
         }
         this.chatMessageSize = 0;
-        this._sendMessage(props, this.editor.getJSON());
+        console.log('messageQueue', this.messageQueue)
+        this._sendMessage(props, this.editor.getJSON(), this.messageQueue);
     }
 
     getMessageSize(message){