Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

started mutable change

Browse Source
This commit is contained in:
PhilReact 2023-09-06 23:56:08 -05:00
parent 772c5f689a
commit 48bf6b3099
2 changed files with 291 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
plugins/plugins/core/components/ChatPage.js
View File

@ -55,7 +55,7 @@ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
export const queue = new RequestQueue(); export const queue = new RequestQueue();
export const chatLimit = 40
class ChatPage extends LitElement { class ChatPage extends LitElement {
static get properties() { static get properties() {
return { return {
@ -81,7 +81,7 @@ class ChatPage extends LitElement {
hideNewMessageBar: { attribute: false }, hideNewMessageBar: { attribute: false },
setOpenPrivateMessage: { attribute: false }, setOpenPrivateMessage: { attribute: false },
chatEditorPlaceholder: { type: String }, chatEditorPlaceholder: { type: String },
messagesRendered: { type: Array }, messagesRendered: { type: Object },
repliedToMessageObj: { type: Object }, repliedToMessageObj: { type: Object },
editedMessageObj: { type: Object }, editedMessageObj: { type: Object },
iframeHeight: { type: Number }, iframeHeight: { type: Number },
@ -120,7 +120,8 @@ class ChatPage extends LitElement {
gifsLoading: { type: Boolean }, gifsLoading: { type: Boolean },
goToRepliedMessage: { attribute: false }, goToRepliedMessage: { attribute: false },
isLoadingGoToRepliedMessage: { type: Object }, isLoadingGoToRepliedMessage: { type: Object },
updateMessageHash: { type: Object} updateMessageHash: { type: Object},
oldMessages: {type: Array}
} }
} }
@ -1309,7 +1310,10 @@ class ChatPage extends LitElement {
this.isUserDown = false this.isUserDown = false
this.isPasteMenuOpen = false this.isPasteMenuOpen = false
this.chatEditorPlaceholder = "" this.chatEditorPlaceholder = ""
this.messagesRendered = [] this.messagesRendered = {
messages: [],
type: ''
}
this.repliedToMessageObj = null this.repliedToMessageObj = null
this.editedMessageObj = null this.editedMessageObj = null
this.iframeHeight = 42 this.iframeHeight = 42
@ -1360,6 +1364,7 @@ class ChatPage extends LitElement {
this.updateMessageHash = {} this.updateMessageHash = {}
this.addToUpdateMessageHashmap = this.addToUpdateMessageHashmap.bind(this) this.addToUpdateMessageHashmap = this.addToUpdateMessageHashmap.bind(this)
this.getAfterMessages = this.getAfterMessages.bind(this) this.getAfterMessages = this.getAfterMessages.bind(this)
this.oldMessages = []
} }
setOpenGifModal(value) { setOpenGifModal(value) {
@ -2510,6 +2515,7 @@ class ChatPage extends LitElement {
<chat-scroller <chat-scroller
chatId=${this.chatId} chatId=${this.chatId}
.messages=${this.messagesRendered} .messages=${this.messagesRendered}
.oldMessages=${this.oldMessages}
.escapeHTML=${escape} .escapeHTML=${escape}
.getOldMessage=${this.getOldMessage} .getOldMessage=${this.getOldMessage}
.getAfterMessages=${this.getAfterMessages} .getAfterMessages=${this.getAfterMessages}
@ -2530,7 +2536,6 @@ class ChatPage extends LitElement {
?openTipUser=${this.openTipUser} ?openTipUser=${this.openTipUser}
.selectedHead=${this.selectedHead} .selectedHead=${this.selectedHead}
.goToRepliedMessage=${(val, val2) => this.goToRepliedMessage(val, val2)} .goToRepliedMessage=${(val, val2) => this.goToRepliedMessage(val, val2)}
.getOldMessageAfter=${(val) => this.getOldMessageAfter(val)}
.updateMessageHash=${this.updateMessageHash} .updateMessageHash=${this.updateMessageHash}
> >
</chat-scroller> </chat-scroller>
@ -2691,7 +2696,7 @@ class ChatPage extends LitElement {
if (this.isReceipient) { if (this.isReceipient) {
const getInitialMessages = await parentEpml.request('apiCall', { const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}&haschatreference=false&encoding=BASE64` url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=${chatLimit}&reverse=true&before=${scrollElement.messageObj.timestamp}&haschatreference=false&encoding=BASE64`
}) })
let decodeMsgs = [] let decodeMsgs = []
await new Promise((res, rej) => { await new Promise((res, rej) => {
@ -2718,22 +2723,26 @@ class ChatPage extends LitElement {
addToUpdateMessageHashmap: this.addToUpdateMessageHashmap addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
})); }));
let list = [...decodeMsgs, ...this.messagesRendered.slice(0,80)] let list = [...decodeMsgs]
await new Promise((res, rej) => { // await new Promise((res, rej) => {
this.webWorkerSortMessages.postMessage({list}); // this.webWorkerSortMessages.postMessage({list});
this.webWorkerSortMessages.onmessage = e => { // this.webWorkerSortMessages.onmessage = e => {
console.log('e',e) // console.log('e',e)
list = e.data // list = e.data
res() // res()
} // }
}) // })
this.messagesRendered = list this.messagesRendered = {
messages: list,
type: 'old',
el: scrollElement
}
this.isLoadingOldMessages = false this.isLoadingOldMessages = false
await this.getUpdateComplete() await this.getUpdateComplete()
@ -2747,7 +2756,7 @@ class ChatPage extends LitElement {
} else { } else {
const getInitialMessages = await parentEpml.request('apiCall', { const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}&haschatreference=false&encoding=BASE64` url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=${chatLimit}&reverse=true&before=${scrollElement.messageObj.timestamp}&haschatreference=false&encoding=BASE64`
}) })
let decodeMsgs = [] let decodeMsgs = []
@ -2777,23 +2786,27 @@ class ChatPage extends LitElement {
_publicKey: this._publicKey, _publicKey: this._publicKey,
addToUpdateMessageHashmap: this.addToUpdateMessageHashmap addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
})); }));
let list = [...decodeMsgs, ...this.messagesRendered.slice(0,80)] let list = [...decodeMsgs]
await new Promise((res, rej) => { // await new Promise((res, rej) => {
this.webWorkerSortMessages.postMessage({list}); // this.webWorkerSortMessages.postMessage({list});
this.webWorkerSortMessages.onmessage = e => { // this.webWorkerSortMessages.onmessage = e => {
console.log('e',e) // console.log('e',e)
list = e.data // list = e.data
res() // res()
} // }
}) // })
this.messagesRendered = list this.messagesRendered = {
this.isLoadingOldMessages = false messages: list,
type: 'old',
el: scrollElement
}
// this.isLoadingOldMessages = false
await this.getUpdateComplete() await this.getUpdateComplete()
const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template')) const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'))
const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature) const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
@ -2804,7 +2817,6 @@ class ChatPage extends LitElement {
} }
} }
async getAfterMessages(scrollElement) { async getAfterMessages(scrollElement) {
const firstMsg = this.messagesRendered.at(-1)
const timestamp = scrollElement.messageObj.timestamp const timestamp = scrollElement.messageObj.timestamp
if (this.isReceipient) { if (this.isReceipient) {
@ -2839,7 +2851,7 @@ class ChatPage extends LitElement {
addToUpdateMessageHashmap: this.addToUpdateMessageHashmap addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
})); }));
let list = [...this.messagesRendered.slice(-80), ...decodeMsgs] let list = [ ...decodeMsgs]
await new Promise((res, rej) => { await new Promise((res, rej) => {
@ -2854,7 +2866,11 @@ class ChatPage extends LitElement {
} }
}) })
this.messagesRendered = list this.messagesRendered = {
messages: list,
type: 'new'
}
this.isLoadingOldMessages = false this.isLoadingOldMessages = false
await this.getUpdateComplete() await this.getUpdateComplete()
@ -2898,7 +2914,7 @@ class ChatPage extends LitElement {
let list = [...this.messagesRendered.slice(-80), ...decodeMsgs] let list = [...decodeMsgs]
await new Promise((res, rej) => { await new Promise((res, rej) => {
@ -2913,7 +2929,10 @@ class ChatPage extends LitElement {
} }
}) })
this.messagesRendered = list this.messagesRendered = {
messages: list,
type: 'new'
}
this.isLoadingOldMessages = false this.isLoadingOldMessages = false
@ -2949,127 +2968,7 @@ const originalScrollHeight = viewElement.scrollHeight;
viewElement.scrollTop = originalScrollTop + heightDifference; viewElement.scrollTop = originalScrollTop + heightDifference;
} }
async getOldMessageAfter(scrollElement) {
if (this.isReceipient) {
const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=20&reverse=true&afer=${scrollElement.messageObj.timestamp}&haschatreference=false&encoding=BASE64`
})
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 });
this.webWorkerDecodeMessages.onmessage = e => {
decodeMsgs = e.data
res()
}
this.webWorkerDecodeMessages.onerror = e => {
console.log('e',e)
rej()
}
})
queue.push(() => replaceMessagesEdited({
decodedMessages: decodeMsgs,
parentEpml,
isReceipient: this.isReceipient,
decodeMessageFunc: this.decodeMessage,
_publicKey: this._publicKey,
addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
}));
let list = [...this.messagesRendered.slice(-80), ...decodeMsgs]
await new Promise((res, rej) => {
this.webWorkerSortMessages.postMessage({list});
this.webWorkerSortMessages.onmessage = e => {
console.log('e',e)
list = e.data
res()
}
})
this.messagesRendered = list
this.isLoadingOldMessages = false
await this.getUpdateComplete()
const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'))
const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
if (findElement) {
findElement.scrollIntoView({ behavior: 'auto', block: 'center' })
}
} else {
const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=20&reverse=true&after=${scrollElement.messageObj.timestamp}&haschatreference=false&encoding=BASE64`
})
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 });
this.webWorkerDecodeMessages.onmessage = e => {
decodeMsgs = e.data
res()
}
this.webWorkerDecodeMessages.onerror = e => {
console.log('e',e)
rej()
}
})
queue.push(() => replaceMessagesEdited({
decodedMessages: decodeMsgs,
parentEpml,
isReceipient: this.isReceipient,
decodeMessageFunc: this.decodeMessage,
_publicKey: this._publicKey,
addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
}));
let list = [...this.messagesRendered.slice(-80), ...decodeMsgs]
await new Promise((res, rej) => {
this.webWorkerSortMessages.postMessage({list});
this.webWorkerSortMessages.onmessage = e => {
console.log('e',e)
list = e.data
res()
}
})
this.messagesRendered = list
this.isLoadingOldMessages = false
await this.getUpdateComplete()
const marginElements = Array.from(this.shadowRoot.querySelector('chat-scroller').shadowRoot.querySelectorAll('message-template'))
const findElement = marginElements.find((item) => item.messageObj.signature === scrollElement.messageObj.signature)
if (findElement) {
findElement.scrollIntoView({ behavior: 'auto', block: 'center' })
}
}
}
async processMessages(messages, isInitial) { async processMessages(messages, isInitial) {
const isReceipient = this.chatId.includes('direct') const isReceipient = this.chatId.includes('direct')
@ -3133,7 +3032,10 @@ viewElement.scrollTop = originalScrollTop + heightDifference;
// TODO: Determine number of initial messages by screen height... // TODO: Determine number of initial messages by screen height...
// this.messagesRendered = this._messages // this.messagesRendered = this._messages
this.messagesRendered = this._messages this.messagesRendered = {
messages: this._messages,
type: 'initial'
}
this.isLoadingMessages = false this.isLoadingMessages = false
setTimeout(() => this.downElementObserver(), 500) setTimeout(() => this.downElementObserver(), 500)
@ -3337,13 +3239,13 @@ viewElement.scrollTop = originalScrollTop + heightDifference;
const lastMessage = cachedData[cachedData.length - 1] const lastMessage = cachedData[cachedData.length - 1]
const newMessages = await parentEpml.request('apiCall', { const newMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true&after=${lastMessage.timestamp}&haschatreference=false&encoding=BASE64` url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=${chatLimit}&reverse=true&after=${lastMessage.timestamp}&haschatreference=false&encoding=BASE64`
}) })
getInitialMessages = [...cachedData, ...newMessages].slice(-20) getInitialMessages = [...newMessages]
} else { } else {
getInitialMessages = await parentEpml.request('apiCall', { getInitialMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true&haschatreference=false&encoding=BASE64` url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=${chatLimit}&reverse=true&haschatreference=false&encoding=BASE64`
}) })
} }
@ -3437,15 +3339,16 @@ viewElement.scrollTop = originalScrollTop + heightDifference;
const newMessages = await parentEpml.request('apiCall', { const newMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true&after=${lastMessage.timestamp}&haschatreference=false&encoding=BASE64` url: `/chat/messages?txGroupId=${groupId}&limit=${chatLimit}&reverse=true&after=${lastMessage.timestamp}&haschatreference=false&encoding=BASE64`
}) })
getInitialMessages = [...cachedData, ...newMessages].slice(-20) getInitialMessages = [...newMessages]
} else { }else {
getInitialMessages = await parentEpml.request('apiCall', { getInitialMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true&haschatreference=false&encoding=BASE64` url: `/chat/messages?txGroupId=${groupId}&limit=${chatLimit}&reverse=true&haschatreference=false&encoding=BASE64`
}) })
}
}
this.processMessages(getInitialMessages, true) this.processMessages(getInitialMessages, true)

278
plugins/plugins/core/components/ChatScroller.js
View File

@ -166,15 +166,53 @@ function processText(input) {
return wrapper return wrapper
} }
const formatMessages = (messages) => {
const formattedMessages = messages.reduce((messageArray, message) => {
const currentMessage = message;
const lastGroupedMessage = messageArray[messageArray.length - 1];
currentMessage.firstMessageInChat = messageArray.length === 0;
let timestamp, sender, repliedToData;
if (lastGroupedMessage) {
timestamp = lastGroupedMessage.timestamp;
sender = lastGroupedMessage.sender;
repliedToData = lastGroupedMessage.repliedToData;
} else {
timestamp = currentMessage.timestamp;
sender = currentMessage.sender;
repliedToData = currentMessage.repliedToData;
}
const isSameGroup = Math.abs(timestamp - currentMessage.timestamp) < 600000 &&
sender === currentMessage.sender &&
!repliedToData;
if (isSameGroup && lastGroupedMessage) {
lastGroupedMessage.messages.push(currentMessage);
} else {
messageArray.push({
messages: [currentMessage],
...currentMessage
});
}
return messageArray;
}, []);
return formattedMessages
}
class ChatScroller extends LitElement { class ChatScroller extends LitElement {
static get properties() { static get properties() {
return { return {
theme: { type: String, reflect: true }, theme: { type: String, reflect: true },
getNewMessage: { attribute: false }, getNewMessage: { attribute: false },
getOldMessage: { attribute: false }, getOldMessage: { attribute: false },
getAfterMessages: {attribute: false}, getAfterMessages: { attribute: false },
escapeHTML: { attribute: false }, escapeHTML: { attribute: false },
messages: { type: Array }, messages: { type: Object },
hideMessages: { type: Array }, hideMessages: { type: Array },
setRepliedToMessageObj: { attribute: false }, setRepliedToMessageObj: { attribute: false },
setEditedMessageObj: { attribute: false }, setEditedMessageObj: { attribute: false },
@ -196,9 +234,10 @@ class ChatScroller extends LitElement {
userName: { type: String }, userName: { type: String },
selectedHead: { type: Object }, selectedHead: { type: Object },
goToRepliedMessage: { attribute: false }, goToRepliedMessage: { attribute: false },
getOldMessageAfter: { attribute: false },
listSeenMessages: { type: Array }, listSeenMessages: { type: Array },
updateMessageHash: {type: Object} updateMessageHash: { type: Object },
messagesToRender: { type: Array },
oldMessages: { type: Array }
} }
} }
@ -208,7 +247,11 @@ class ChatScroller extends LitElement {
constructor() { constructor() {
super() super()
this.messages = [] this.messages = {
messages: [],
type: ''
}
this.oldMessages = []
this._upObserverhandler = this._upObserverhandler.bind(this) this._upObserverhandler = this._upObserverhandler.bind(this)
this._downObserverHandler = this._downObserverHandler.bind(this) this._downObserverHandler = this._downObserverHandler.bind(this)
this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this) this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this)
@ -218,52 +261,176 @@ class ChatScroller extends LitElement {
this.openUserInfo = false this.openUserInfo = false
this.listSeenMessages = [] this.listSeenMessages = []
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
this.messagesToRender = []
} }
addSeenMessage(val) { addSeenMessage(val) {
this.listSeenMessages.push(val) this.listSeenMessages.push(val)
} }
render() { shouldGroupWithLastMessage(newMessage, lastGroupedMessage) {
let formattedMessages = this.messages.reduce((messageArray, message, index) => { if (!lastGroupedMessage) return false;
if(this.updateMessageHash[message.signature]){
message = this.updateMessageHash[message.signature]
}
const lastGroupedMessage = messageArray[messageArray.length - 1]
let timestamp
let sender
let repliedToData
let firstMessageInChat
if (index === 0) { return Math.abs(lastGroupedMessage.timestamp - newMessage.timestamp) < 600000 &&
firstMessageInChat = true lastGroupedMessage.sender === newMessage.sender &&
!lastGroupedMessage.repliedToData;
}
addNewMessage(newMessage) {
const lastGroupedMessage = this.messagesToRender[this.messagesToRender.length - 1];
if (this.shouldGroupWithLastMessage(newMessage, lastGroupedMessage)) {
lastGroupedMessage.messages.push(newMessage);
} else {
this.messagesToRender.push({
messages: [newMessage],
...newMessage
});
}
this.requestUpdate();
}
async addNewMessages(newMessages, type) {
console.log('sup')
newMessages.forEach(newMessage => {
const lastGroupedMessage = this.messagesToRender[this.messagesToRender.length - 1];
if (this.shouldGroupWithLastMessage(newMessage, lastGroupedMessage)) {
lastGroupedMessage.messages.push(newMessage);
} else { } else {
firstMessageInChat = false this.messagesToRender.push({
messages: [newMessage],
...newMessage
});
} }
});
message = { ...message, firstMessageInChat } this.requestUpdate();
if(type === 'initial'){
await this.getUpdateComplete();
setTimeout(() => {
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50;
this.setIsLoadingMessages(false)
}, 50)
}
if (lastGroupedMessage) { }
timestamp = lastGroupedMessage.timestamp
sender = lastGroupedMessage.sender
repliedToData = lastGroupedMessage.repliedToData
}
const isSameGroup = Math.abs(timestamp - message.timestamp) < 600000 && sender === message.sender && !repliedToData
if (isSameGroup) { async prependOldMessages(oldMessages) {
messageArray[messageArray.length - 1].messages = [
...(messageArray[messageArray.length - 1].messages || []), console.log('2', { oldMessages })
message if (!this.messagesToRender) this.messagesToRender = []; // Ensure it's initialized
]
} else { let currentMessageGroup = null;
messageArray.push({ let previousMessage = null;
for (const message of oldMessages) {
if (!previousMessage || !this.shouldGroupWithLastMessage(message, previousMessage)) {
// If no previous message, or if the current message shouldn't be grouped with the previous,
// push the current group to the front of the formatted messages (since these are older messages)
if (currentMessageGroup) {
this.messagesToRender.unshift(currentMessageGroup);
}
currentMessageGroup = {
id: message.signature,
messages: [message], messages: [message],
...message ...message
}) };
} else {
// Add to the current group
currentMessageGroup.messages.push(message);
} }
return messageArray previousMessage = message;
}, []) }
// After processing all old messages, add the last group
if (currentMessageGroup) {
this.messagesToRender.unshift(currentMessageGroup);
}
this.requestUpdate();
this.setIsLoadingMessages(false)
// await this.getUpdateComplete();
// setTimeout(()=> {
// this.viewElement.scrollTop = this.viewElement.scrollHeight + 50;
// this.setIsLoadingMessages(false)
// },50)
}
async replaceMessagesWithUpdate(updatedMessages) {
for (let group of this.messagesToRender) {
for (let i = 0; i < group.messages.length; i++) {
if (updatedMessages[group.messages[i].signature]) {
Object.assign(group.messages[i], updatedMessages[group.messages[i].signature]);
}
}
}
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')
} else if (this.messages.type === 'new') this.addNewMessages(this.messages.messages)
else if (this.messages.type === 'old') this.prependOldMessages(this.messages.messages)
}
if (changedProperties && changedProperties.has('updateMessageHash')) {
this.replaceMessagesWithUpdate(this.updateMessageHash)
}
}
render() {
// let formattedMessages = this.messages.reduce((messageArray, message) => {
// const currentMessage = this.updateMessageHash[message.signature] || message;
// const lastGroupedMessage = messageArray[messageArray.length - 1];
// currentMessage.firstMessageInChat = messageArray.length === 0;
// let timestamp, sender, repliedToData;
// if (lastGroupedMessage) {
// timestamp = lastGroupedMessage.timestamp;
// sender = lastGroupedMessage.sender;
// repliedToData = lastGroupedMessage.repliedToData;
// } else {
// timestamp = currentMessage.timestamp;
// sender = currentMessage.sender;
// repliedToData = currentMessage.repliedToData;
// }
// const isSameGroup = Math.abs(timestamp - currentMessage.timestamp) < 600000 &&
// sender === currentMessage.sender &&
// !repliedToData;
// if (isSameGroup && lastGroupedMessage) {
// lastGroupedMessage.messages.push(currentMessage);
// } else {
// messageArray.push({
// messages: [currentMessage],
// ...currentMessage
// });
// }
// return messageArray;
// }, []);
let formattedMessages = this.messagesToRender
console.log('this.messagesToRender', this.messagesToRender)
return html` return html`
${this.isLoadingMessages ? html` ${this.isLoadingMessages ? html`
@ -273,12 +440,15 @@ class ChatScroller extends LitElement {
` : ''} ` : ''}
<ul id="viewElement" class="chat-list clearfix"> <ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div> <div id="upObserver"></div>
${formattedMessages.map((formattedMessage) => { ${repeat(
return repeat( formattedMessages,
(formattedMessage) => formattedMessage.id, // Use .id as the unique key for formattedMessage.
(formattedMessage) => html`
${repeat(
formattedMessage.messages, formattedMessage.messages,
(message) => message.signature, (message) => message.signature,
(message, indexMessage) => html` (message, indexMessage) => html`
<message-template <message-template
.emojiPicker=${this.emojiPicker} .emojiPicker=${this.emojiPicker}
.escapeHTML=${this.escapeHTML} .escapeHTML=${this.escapeHTML}
.messageObj=${message} .messageObj=${message}
@ -301,10 +471,10 @@ class ChatScroller extends LitElement {
.addSeenMessage=${(val) => this.addSeenMessage(val)} .addSeenMessage=${(val) => this.addSeenMessage(val)}
.listSeenMessages=${this.listSeenMessages} .listSeenMessages=${this.listSeenMessages}
chatId=${this.chatId} chatId=${this.chatId}
> ></message-template>`
</message-template>` )}
) `
})} )}
<div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div> <div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div>
<div style=${"height: 1px;"} id='downObserver'></div> <div style=${"height: 1px;"} id='downObserver'></div>
@ -339,6 +509,7 @@ class ChatScroller extends LitElement {
async getUpdateComplete() { async getUpdateComplete() {
await super.getUpdateComplete() await super.getUpdateComplete()
const marginElements = Array.from(this.shadowRoot.querySelectorAll('message-template')) const marginElements = Array.from(this.shadowRoot.querySelectorAll('message-template'))
console.log({ marginElements })
await Promise.all(marginElements.map(el => el.updateComplete)) await Promise.all(marginElements.map(el => el.updateComplete))
return true return true
} }
@ -376,8 +547,7 @@ class ChatScroller extends LitElement {
this.upElementObserver() this.upElementObserver()
this.downElementObserver() this.downElementObserver()
this.bottomObserver() this.bottomObserver()
await this.getUpdateComplete()
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
this.clearConsole() this.clearConsole()
setInterval(() => { setInterval(() => {
@ -410,13 +580,12 @@ class ChatScroller extends LitElement {
this.getAfterMessages(_scrollElement) this.getAfterMessages(_scrollElement)
} }
_getOldMessageAfter(_scrollElement) {
this.getOldMessageAfter(_scrollElement)
}
_upObserverhandler(entries) { _upObserverhandler(entries) {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
if (this.messages.length < 20) { if (this.isLoadingMessages) {
return return
} }
this.setIsLoadingMessages(true) this.setIsLoadingMessages(true)
@ -433,7 +602,10 @@ class ChatScroller extends LitElement {
} }
} }
__bottomObserverForFetchingMessagesHandler(entries){ __bottomObserverForFetchingMessagesHandler(entries) {
if (this.messagesToRender.length === 0) {
return
}
if (!entries[0].isIntersecting) { if (!entries[0].isIntersecting) {
} else { } else {
let _scrollElement = entries[0].target.previousElementSibling let _scrollElement = entries[0].target.previousElementSibling
@ -453,7 +625,7 @@ class ChatScroller extends LitElement {
downElementObserver() { downElementObserver() {
const options = { const options = {
} }
// identify an element to observe // identify an element to observe
const elementToObserve = this.downObserverElement const elementToObserve = this.downObserverElement
@ -465,7 +637,7 @@ class ChatScroller extends LitElement {
} }
bottomObserver() { bottomObserver() {
const options = { const options = {
} }
// identify an element to observe // identify an element to observe
const elementToObserve = this.bottomObserverForFetchingMessages const elementToObserve = this.bottomObserverForFetchingMessages
@ -631,7 +803,7 @@ class MessageTemplate extends LitElement {
} }
render() { render() {
const hidemsg = this.hideMessages const hidemsg = this.hideMessages
let message = "" let message = ""
let messageVersion2 = "" let messageVersion2 = ""