mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
started mutable change
This commit is contained in:
parent
772c5f689a
commit
48bf6b3099
@ -55,7 +55,7 @@ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
export const queue = new RequestQueue();
|
||||
|
||||
|
||||
export const chatLimit = 40
|
||||
class ChatPage extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
@ -81,7 +81,7 @@ class ChatPage extends LitElement {
|
||||
hideNewMessageBar: { attribute: false },
|
||||
setOpenPrivateMessage: { attribute: false },
|
||||
chatEditorPlaceholder: { type: String },
|
||||
messagesRendered: { type: Array },
|
||||
messagesRendered: { type: Object },
|
||||
repliedToMessageObj: { type: Object },
|
||||
editedMessageObj: { type: Object },
|
||||
iframeHeight: { type: Number },
|
||||
@ -120,7 +120,8 @@ class ChatPage extends LitElement {
|
||||
gifsLoading: { type: Boolean },
|
||||
goToRepliedMessage: { attribute: false },
|
||||
isLoadingGoToRepliedMessage: { type: Object },
|
||||
updateMessageHash: { type: Object}
|
||||
updateMessageHash: { type: Object},
|
||||
oldMessages: {type: Array}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1309,7 +1310,10 @@ class ChatPage extends LitElement {
|
||||
this.isUserDown = false
|
||||
this.isPasteMenuOpen = false
|
||||
this.chatEditorPlaceholder = ""
|
||||
this.messagesRendered = []
|
||||
this.messagesRendered = {
|
||||
messages: [],
|
||||
type: ''
|
||||
}
|
||||
this.repliedToMessageObj = null
|
||||
this.editedMessageObj = null
|
||||
this.iframeHeight = 42
|
||||
@ -1360,6 +1364,7 @@ class ChatPage extends LitElement {
|
||||
this.updateMessageHash = {}
|
||||
this.addToUpdateMessageHashmap = this.addToUpdateMessageHashmap.bind(this)
|
||||
this.getAfterMessages = this.getAfterMessages.bind(this)
|
||||
this.oldMessages = []
|
||||
}
|
||||
|
||||
setOpenGifModal(value) {
|
||||
@ -2510,6 +2515,7 @@ class ChatPage extends LitElement {
|
||||
<chat-scroller
|
||||
chatId=${this.chatId}
|
||||
.messages=${this.messagesRendered}
|
||||
.oldMessages=${this.oldMessages}
|
||||
.escapeHTML=${escape}
|
||||
.getOldMessage=${this.getOldMessage}
|
||||
.getAfterMessages=${this.getAfterMessages}
|
||||
@ -2530,7 +2536,6 @@ class ChatPage extends LitElement {
|
||||
?openTipUser=${this.openTipUser}
|
||||
.selectedHead=${this.selectedHead}
|
||||
.goToRepliedMessage=${(val, val2) => this.goToRepliedMessage(val, val2)}
|
||||
.getOldMessageAfter=${(val) => this.getOldMessageAfter(val)}
|
||||
.updateMessageHash=${this.updateMessageHash}
|
||||
>
|
||||
</chat-scroller>
|
||||
@ -2691,7 +2696,7 @@ class ChatPage extends LitElement {
|
||||
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&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 = []
|
||||
await new Promise((res, rej) => {
|
||||
@ -2718,22 +2723,26 @@ class ChatPage extends LitElement {
|
||||
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 => {
|
||||
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 = {
|
||||
messages: list,
|
||||
type: 'old',
|
||||
el: scrollElement
|
||||
}
|
||||
|
||||
this.isLoadingOldMessages = false
|
||||
await this.getUpdateComplete()
|
||||
@ -2747,7 +2756,7 @@ class ChatPage extends LitElement {
|
||||
} else {
|
||||
const getInitialMessages = await parentEpml.request('apiCall', {
|
||||
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 = []
|
||||
@ -2777,23 +2786,27 @@ class ChatPage extends LitElement {
|
||||
_publicKey: this._publicKey,
|
||||
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 => {
|
||||
console.log('e',e)
|
||||
// this.webWorkerSortMessages.onmessage = e => {
|
||||
// console.log('e',e)
|
||||
|
||||
list = e.data
|
||||
res()
|
||||
// list = e.data
|
||||
// res()
|
||||
|
||||
}
|
||||
})
|
||||
// }
|
||||
// })
|
||||
|
||||
this.messagesRendered = list
|
||||
this.isLoadingOldMessages = false
|
||||
this.messagesRendered = {
|
||||
messages: list,
|
||||
type: 'old',
|
||||
el: scrollElement
|
||||
}
|
||||
// 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)
|
||||
@ -2804,7 +2817,6 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
}
|
||||
async getAfterMessages(scrollElement) {
|
||||
const firstMsg = this.messagesRendered.at(-1)
|
||||
const timestamp = scrollElement.messageObj.timestamp
|
||||
|
||||
if (this.isReceipient) {
|
||||
@ -2839,7 +2851,7 @@ class ChatPage extends LitElement {
|
||||
addToUpdateMessageHashmap: this.addToUpdateMessageHashmap
|
||||
}));
|
||||
|
||||
let list = [...this.messagesRendered.slice(-80), ...decodeMsgs]
|
||||
let list = [ ...decodeMsgs]
|
||||
|
||||
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
|
||||
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) => {
|
||||
|
||||
@ -2913,7 +2929,10 @@ class ChatPage extends LitElement {
|
||||
}
|
||||
})
|
||||
|
||||
this.messagesRendered = list
|
||||
this.messagesRendered = {
|
||||
messages: list,
|
||||
type: 'new'
|
||||
}
|
||||
|
||||
|
||||
this.isLoadingOldMessages = false
|
||||
@ -2949,127 +2968,7 @@ const originalScrollHeight = viewElement.scrollHeight;
|
||||
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) {
|
||||
const isReceipient = this.chatId.includes('direct')
|
||||
@ -3133,7 +3032,10 @@ viewElement.scrollTop = originalScrollTop + heightDifference;
|
||||
|
||||
// TODO: Determine number of initial messages by screen height...
|
||||
// this.messagesRendered = this._messages
|
||||
this.messagesRendered = this._messages
|
||||
this.messagesRendered = {
|
||||
messages: this._messages,
|
||||
type: 'initial'
|
||||
}
|
||||
this.isLoadingMessages = false
|
||||
|
||||
setTimeout(() => this.downElementObserver(), 500)
|
||||
@ -3337,13 +3239,13 @@ viewElement.scrollTop = originalScrollTop + heightDifference;
|
||||
const lastMessage = cachedData[cachedData.length - 1]
|
||||
const newMessages = await parentEpml.request('apiCall', {
|
||||
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 {
|
||||
getInitialMessages = await parentEpml.request('apiCall', {
|
||||
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', {
|
||||
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)
|
||||
} else {
|
||||
getInitialMessages = [...newMessages]
|
||||
}else {
|
||||
getInitialMessages = await parentEpml.request('apiCall', {
|
||||
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)
|
||||
|
||||
|
||||
@ -166,15 +166,53 @@ function processText(input) {
|
||||
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 {
|
||||
static get properties() {
|
||||
return {
|
||||
theme: { type: String, reflect: true },
|
||||
getNewMessage: { attribute: false },
|
||||
getOldMessage: { attribute: false },
|
||||
getAfterMessages: {attribute: false},
|
||||
getAfterMessages: { attribute: false },
|
||||
escapeHTML: { attribute: false },
|
||||
messages: { type: Array },
|
||||
messages: { type: Object },
|
||||
hideMessages: { type: Array },
|
||||
setRepliedToMessageObj: { attribute: false },
|
||||
setEditedMessageObj: { attribute: false },
|
||||
@ -196,9 +234,10 @@ class ChatScroller extends LitElement {
|
||||
userName: { type: String },
|
||||
selectedHead: { type: Object },
|
||||
goToRepliedMessage: { attribute: false },
|
||||
getOldMessageAfter: { attribute: false },
|
||||
listSeenMessages: { type: Array },
|
||||
updateMessageHash: {type: Object}
|
||||
updateMessageHash: { type: Object },
|
||||
messagesToRender: { type: Array },
|
||||
oldMessages: { type: Array }
|
||||
}
|
||||
}
|
||||
|
||||
@ -208,7 +247,11 @@ class ChatScroller extends LitElement {
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.messages = []
|
||||
this.messages = {
|
||||
messages: [],
|
||||
type: ''
|
||||
}
|
||||
this.oldMessages = []
|
||||
this._upObserverhandler = this._upObserverhandler.bind(this)
|
||||
this._downObserverHandler = this._downObserverHandler.bind(this)
|
||||
this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this)
|
||||
@ -218,52 +261,176 @@ class ChatScroller extends LitElement {
|
||||
this.openUserInfo = false
|
||||
this.listSeenMessages = []
|
||||
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
|
||||
this.messagesToRender = []
|
||||
}
|
||||
|
||||
addSeenMessage(val) {
|
||||
this.listSeenMessages.push(val)
|
||||
}
|
||||
|
||||
render() {
|
||||
let formattedMessages = this.messages.reduce((messageArray, message, index) => {
|
||||
if(this.updateMessageHash[message.signature]){
|
||||
|
||||
message = this.updateMessageHash[message.signature]
|
||||
}
|
||||
const lastGroupedMessage = messageArray[messageArray.length - 1]
|
||||
let timestamp
|
||||
let sender
|
||||
let repliedToData
|
||||
let firstMessageInChat
|
||||
shouldGroupWithLastMessage(newMessage, lastGroupedMessage) {
|
||||
if (!lastGroupedMessage) return false;
|
||||
|
||||
if (index === 0) {
|
||||
firstMessageInChat = true
|
||||
return Math.abs(lastGroupedMessage.timestamp - newMessage.timestamp) < 600000 &&
|
||||
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 {
|
||||
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) {
|
||||
messageArray[messageArray.length - 1].messages = [
|
||||
...(messageArray[messageArray.length - 1].messages || []),
|
||||
message
|
||||
]
|
||||
} else {
|
||||
messageArray.push({
|
||||
async prependOldMessages(oldMessages) {
|
||||
|
||||
console.log('2', { oldMessages })
|
||||
if (!this.messagesToRender) this.messagesToRender = []; // Ensure it's initialized
|
||||
|
||||
let currentMessageGroup = null;
|
||||
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],
|
||||
...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`
|
||||
${this.isLoadingMessages ? html`
|
||||
@ -273,12 +440,15 @@ class ChatScroller extends LitElement {
|
||||
` : ''}
|
||||
<ul id="viewElement" class="chat-list clearfix">
|
||||
<div id="upObserver"></div>
|
||||
${formattedMessages.map((formattedMessage) => {
|
||||
return repeat(
|
||||
${repeat(
|
||||
formattedMessages,
|
||||
(formattedMessage) => formattedMessage.id, // Use .id as the unique key for formattedMessage.
|
||||
(formattedMessage) => html`
|
||||
${repeat(
|
||||
formattedMessage.messages,
|
||||
(message) => message.signature,
|
||||
(message, indexMessage) => html`
|
||||
<message-template
|
||||
<message-template
|
||||
.emojiPicker=${this.emojiPicker}
|
||||
.escapeHTML=${this.escapeHTML}
|
||||
.messageObj=${message}
|
||||
@ -301,10 +471,10 @@ class ChatScroller extends LitElement {
|
||||
.addSeenMessage=${(val) => this.addSeenMessage(val)}
|
||||
.listSeenMessages=${this.listSeenMessages}
|
||||
chatId=${this.chatId}
|
||||
>
|
||||
</message-template>`
|
||||
)
|
||||
})}
|
||||
></message-template>`
|
||||
)}
|
||||
`
|
||||
)}
|
||||
<div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div>
|
||||
|
||||
<div style=${"height: 1px;"} id='downObserver'></div>
|
||||
@ -339,6 +509,7 @@ class ChatScroller extends LitElement {
|
||||
async getUpdateComplete() {
|
||||
await super.getUpdateComplete()
|
||||
const marginElements = Array.from(this.shadowRoot.querySelectorAll('message-template'))
|
||||
console.log({ marginElements })
|
||||
await Promise.all(marginElements.map(el => el.updateComplete))
|
||||
return true
|
||||
}
|
||||
@ -376,8 +547,7 @@ class ChatScroller extends LitElement {
|
||||
this.upElementObserver()
|
||||
this.downElementObserver()
|
||||
this.bottomObserver()
|
||||
await this.getUpdateComplete()
|
||||
this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
|
||||
|
||||
|
||||
this.clearConsole()
|
||||
setInterval(() => {
|
||||
@ -410,13 +580,12 @@ class ChatScroller extends LitElement {
|
||||
this.getAfterMessages(_scrollElement)
|
||||
}
|
||||
|
||||
_getOldMessageAfter(_scrollElement) {
|
||||
this.getOldMessageAfter(_scrollElement)
|
||||
}
|
||||
|
||||
|
||||
_upObserverhandler(entries) {
|
||||
|
||||
if (entries[0].isIntersecting) {
|
||||
if (this.messages.length < 20) {
|
||||
if (this.isLoadingMessages) {
|
||||
return
|
||||
}
|
||||
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) {
|
||||
} else {
|
||||
let _scrollElement = entries[0].target.previousElementSibling
|
||||
@ -453,7 +625,7 @@ class ChatScroller extends LitElement {
|
||||
|
||||
downElementObserver() {
|
||||
const options = {
|
||||
|
||||
|
||||
}
|
||||
// identify an element to observe
|
||||
const elementToObserve = this.downObserverElement
|
||||
@ -465,7 +637,7 @@ class ChatScroller extends LitElement {
|
||||
}
|
||||
bottomObserver() {
|
||||
const options = {
|
||||
|
||||
|
||||
}
|
||||
// identify an element to observe
|
||||
const elementToObserve = this.bottomObserverForFetchingMessages
|
||||
@ -631,7 +803,7 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
|
||||
const hidemsg = this.hideMessages
|
||||
let message = ""
|
||||
let messageVersion2 = ""
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user