mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
added pending messages
This commit is contained in:
parent
f5a9fe46c4
commit
79fa08a099
@ -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 = ''
|
||||
this._publicKey.hasPubKey = false
|
||||
publicKey.key = ''
|
||||
publicKey.hasPubKey = false
|
||||
} else if (res !== false) {
|
||||
this._publicKey.key = res
|
||||
this._publicKey.hasPubKey = true
|
||||
publicKey.key = res
|
||||
publicKey.hasPubKey = true
|
||||
hasPublicKey = true
|
||||
} else {
|
||||
this._publicKey.key = ''
|
||||
this._publicKey.hasPubKey = false
|
||||
publicKey.key = ''
|
||||
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) {
|
||||
this.isLoading = true
|
||||
async sendMessage({messageText, typeMessage, chatReference, isForward,isReceipient, _chatId, _publicKey, messageQueue}) {
|
||||
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,
|
||||
recipientPublicKey: this._publicKey.key,
|
||||
recipient: _chatId,
|
||||
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()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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() !== "") {
|
||||
|
||||
@ -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){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user