diff --git a/plugins/plugins/core/components/ChatPage.js b/plugins/plugins/core/components/ChatPage.js index e14fe629..dbd11b11 100644 --- a/plugins/plugins/core/components/ChatPage.js +++ b/plugins/plugins/core/components/ChatPage.js @@ -55,7 +55,7 @@ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) export const queue = new RequestQueue(); -export const chatLimit = 40 +export const chatLimit = 10 class ChatPage extends LitElement { static get properties() { return { @@ -2152,13 +2152,7 @@ class ChatPage extends LitElement { return } - if ((message.timestamp - this.messagesRendered[0].timestamp) > 86400000) { - let errorMsg = get("chatpage.cchange66") - parentEpml.request('showSnackBar', `${errorMsg}`) - return - } - - if ((message.timestamp - this.messagesRendered[0].timestamp) < 86400000) { + const findOriginalMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(clickedOnMessage.signature) if (findOriginalMessage) { const messageClientRect = findOriginalMessage.getBoundingClientRect() @@ -2169,15 +2163,25 @@ class ChatPage extends LitElement { top: messageClientRect.top, offsetHeight: findOriginalMessage.offsetHeight } + + await this.getOldMessageDynamic(0, clickedOnMessage.timestamp, message) + await new Promise((res)=> { + setTimeout(()=> { + res() + },1000) + }) + await this.getUpdateCompleteMessages() + + const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template')) + const findMessage = marginElements.find((item) => item.messageObj.signature === message.signature) + if (findMessage) { + findMessage.scrollIntoView({ behavior: 'auto', block: 'center' }) } - await this.getOldMessageDynamic(0, this.messagesRendered[0].timestamp, message.timestamp - 7200000) - const findMessage = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById(message.signature) if (findMessage) { this.isLoadingGoToRepliedMessage = { ...this.isLoadingGoToRepliedMessage, loading: false } - findMessage.scrollIntoView({ block: 'center' }) const findElement = findMessage.shadowRoot.querySelector('.message-parent') if (findElement) { findElement.classList.add('blink-bg') @@ -2553,6 +2557,13 @@ class ChatPage extends LitElement { return true } + async getUpdateCompleteMessages() { + await super.getUpdateComplete() + const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template')) + await Promise.all(marginElements.map(el => el.updateComplete)) + return true + } + async getUpdateCompleteTextEditor() { await super.getUpdateComplete() const marginElements = Array.from(this.shadowRoot.querySelectorAll('chat-text-editor')) @@ -2571,14 +2582,22 @@ class ChatPage extends LitElement { }) } - async getOldMessageDynamic(limit, before, after) { - + async getOldMessageDynamic(limit, timestampClickedOnMessage, messageToGoTo) { + const findMsg = await parentEpml.request("apiCall", { + type: "api", + url: `/chat/message/${messageToGoTo.signature}?encoding=BASE64`, + }) + if(!findMsg) return null if (this.isReceipient) { - const getInitialMessages = await parentEpml.request('apiCall', { + const getInitialMessagesBefore = await parentEpml.request('apiCall', { type: 'api', - url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${limit}&reverse=true&before=${before}&after=${after}&haschatreference=false&encoding=BASE64` + url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${20}&reverse=true&before=${findMsg.timestamp}&haschatreference=false&encoding=BASE64` }) - + const getInitialMessagesAfter = await parentEpml.request('apiCall', { + type: 'api', + url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${20}&reverse=true&after=${findMsg.timestamp - 100}&haschatreference=false&encoding=BASE64` + }) + const getInitialMessages = [...getInitialMessagesBefore, ...getInitialMessagesAfter] let decodeMsgs = [] await new Promise((res, rej) => { this.webWorkerDecodeMessages.postMessage({messages: getInitialMessages, isReceipient: this.isReceipient, _publicKey: this._publicKey, privateKey: window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey }); @@ -2606,7 +2625,7 @@ class ChatPage extends LitElement { })); - let list = [...decodeMsgs, ...this.messagesRendered.slice(0,80)] + let list = [...decodeMsgs] await new Promise((res, rej) => { @@ -2621,21 +2640,23 @@ class ChatPage extends LitElement { } }) - this.messagesRendered = list - + this.messagesRendered = { + messages: list, + type: 'inBetween', + } this.isLoadingOldMessages = false - await this.getUpdateComplete() - const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement') - - if (viewElement) { - viewElement.scrollTop = 200 - } + } else { - const getInitialMessages = await parentEpml.request('apiCall', { + const getInitialMessagesBefore = await parentEpml.request('apiCall', { type: 'api', - url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${limit}&reverse=true&before=${before}&after=${after}&haschatreference=false&encoding=BASE64` + url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${20}&reverse=true&before=${findMsg.timestamp}&haschatreference=false&encoding=BASE64` }) + const getInitialMessagesAfter = await parentEpml.request('apiCall', { + type: 'api', + url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${20}&reverse=true&after=${findMsg.timestamp - 100}&haschatreference=false&encoding=BASE64` + }) + const getInitialMessages = [...getInitialMessagesBefore, ...getInitialMessagesAfter] let decodeMsgs = [] await new Promise((res, rej) => { @@ -2664,7 +2685,7 @@ class ChatPage extends LitElement { - let list = [...decodeMsgs, ...this.messagesRendered.slice(0,80)] + let list = [...decodeMsgs] await new Promise((res, rej) => { @@ -2679,16 +2700,15 @@ class ChatPage extends LitElement { } }) - this.messagesRendered = list + this.messagesRendered = { + messages: list, + type: 'inBetween', + signature: messageToGoTo.signature + } this.isLoadingOldMessages = false - await this.getUpdateComplete() - const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement') - - if (viewElement) { - viewElement.scrollTop = 200 - } + } } @@ -3067,22 +3087,22 @@ viewElement.scrollTop = originalScrollTop + heightDifference; } - let list = [...this.messagesRendered] + // let list = [...this.messagesRendered] - await new Promise((res, rej) => { + // await new Promise((res, rej) => { - this.webWorkerSortMessages.postMessage({list}); + // this.webWorkerSortMessages.postMessage({list}); - this.webWorkerSortMessages.onmessage = e => { - console.log('e',e) + // this.webWorkerSortMessages.onmessage = e => { + // console.log('e',e) - list = e.data - res() + // list = e.data + // res() - } - }) + // } + // }) - this.messagesRendered = list + // this.messagesRendered = list } } @@ -3124,15 +3144,19 @@ viewElement.scrollTop = originalScrollTop + heightDifference; async renderNewMessage(newMessage) { if (newMessage.chatReference) { - const findOriginalMessageIndex = this.messagesRendered.findIndex(msg => msg.signature === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference)) - if (findOriginalMessageIndex !== -1 && this.messagesRendered[findOriginalMessageIndex].sender === newMessage.sender) { - const newMessagesRendered = [...this.messagesRendered] - newMessagesRendered[findOriginalMessageIndex] = { - ...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName, - sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp - } - this.messagesRendered = newMessagesRendered - await this.getUpdateComplete() + // const findOriginalMessageIndex = this.messagesRendered.findIndex(msg => msg.signature === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference)) + // if (findOriginalMessageIndex !== -1 && this.messagesRendered[findOriginalMessageIndex].sender === newMessage.sender) { + // const newMessagesRendered = [...this.messagesRendered] + // newMessagesRendered[findOriginalMessageIndex] = { + // ...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, senderName: newMessagesRendered[findOriginalMessageIndex].senderName, + // sender: newMessagesRendered[findOriginalMessageIndex].sender, editedTimestamp: newMessage.timestamp + // } + // this.messagesRendered = newMessagesRendered + // await this.getUpdateComplete() + // } + this.messagesRendered = { + messages: [newMessage], + type: 'update', } return } @@ -3141,14 +3165,22 @@ viewElement.scrollTop = originalScrollTop + heightDifference; if (newMessage.sender === this.selectedAddress.address) { - this.messagesRendered = [...this.messagesRendered, newMessage] + + this.messagesRendered = { + messages: [newMessage], + type: 'new', + } await this.getUpdateComplete() viewElement.scrollTop = viewElement.scrollHeight } else if (this.isUserDown) { + this.messagesRendered = { + messages: [newMessage], + type: 'new', + } // Append the message and scroll to the bottom if user is down the page - this.messagesRendered = [...this.messagesRendered, newMessage] + // this.messagesRendered = [...this.messagesRendered, newMessage] await this.getUpdateComplete() viewElement.scrollTop = viewElement.scrollHeight diff --git a/plugins/plugins/core/components/ChatScroller.js b/plugins/plugins/core/components/ChatScroller.js index 9ef56e2e..6239db60 100644 --- a/plugins/plugins/core/components/ChatScroller.js +++ b/plugins/plugins/core/components/ChatScroller.js @@ -253,6 +253,7 @@ class ChatScroller extends LitElement { } this.oldMessages = [] this._upObserverhandler = this._upObserverhandler.bind(this) + this.newListMessages = this.newListMessages.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this) this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this) this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address @@ -290,6 +291,30 @@ class ChatScroller extends LitElement { this.requestUpdate(); } + async newListMessages(newMessages, signature) { + console.log('sup') + let data = [] + newMessages.forEach(newMessage => { + const lastGroupedMessage = data[data.length - 1]; + + if (this.shouldGroupWithLastMessage(newMessage, lastGroupedMessage)) { + lastGroupedMessage.messages.push(newMessage); + } else { + data.push({ + messages: [newMessage], + ...newMessage + }); + } + }); + + + + this.messagesToRender = data + this.requestUpdate() + + + + } async addNewMessages(newMessages, type) { console.log('sup') newMessages.forEach(newMessage => { @@ -351,14 +376,6 @@ class ChatScroller extends LitElement { this.requestUpdate(); this.setIsLoadingMessages(false) - // await this.getUpdateComplete(); - // setTimeout(()=> { - // this.viewElement.scrollTop = this.viewElement.scrollHeight + 50; - // this.setIsLoadingMessages(false) - // },50) - - - } async replaceMessagesWithUpdate(updatedMessages) { @@ -372,11 +389,25 @@ class ChatScroller extends LitElement { this.requestUpdate(); } + async replaceMessagesWithUpdateByArray(updatedMessagesArray) { + console.log({updatedMessagesArray}, this.messagesToRender) + for (let group of this.messagesToRender) { + for (let i = 0; i < group.messages.length; i++) { + const update = updatedMessagesArray.find(updatedMessage => ((updatedMessage.chatReference === group.messages[i].signature) || (updatedMessage.chatReference === group.messages[i].originalSignature))); + if (update) { + Object.assign(group.messages[i], update); + } + } + } + this.requestUpdate(); + } + + async updated(changedProperties) { if (changedProperties && changedProperties.has('messages')) { - console.log('this.messages', this.messages) + if (this.messages.type === 'initial') { this.addNewMessages(this.messages.messages, 'initial') @@ -384,6 +415,8 @@ class ChatScroller extends LitElement { } else if (this.messages.type === 'new') this.addNewMessages(this.messages.messages) else if (this.messages.type === 'old') this.prependOldMessages(this.messages.messages) + else if (this.messages.type === 'inBetween') this.newListMessages(this.messages.messages, this.messages.signature) + else if (this.messages.type === 'update') this.replaceMessagesWithUpdateByArray(this.messages.messages) } @@ -430,7 +463,6 @@ class ChatScroller extends LitElement { let formattedMessages = this.messagesToRender - console.log('this.messagesToRender', this.messagesToRender) return html` ${this.isLoadingMessages ? html`