AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

update msg formats

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-10-26 10:55:59 +03:00
parent 912bfffabd
commit a7ef3f01ca
6 changed files with 141 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
qortal-ui-plugins/plugins/core/components/ChatModals.js
View File

@ -175,7 +175,13 @@ class ChatModals extends LitElement {
}; };
const sendMessageRequest = async (isEncrypted, _publicKey) => { const sendMessageRequest = async (isEncrypted, _publicKey) => {
const messageObject = {
messageText,
images: [''],
repliedTo: '',
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject)
let chatResponse = await parentEpml.request('chat', { let chatResponse = await parentEpml.request('chat', {
type: 18, type: 18,
nonce: this.selectedAddress.nonce, nonce: this.selectedAddress.nonce,
@ -184,7 +190,7 @@ class ChatModals extends LitElement {
recipient: recipient, recipient: recipient,
recipientPublicKey: _publicKey, recipientPublicKey: _publicKey,
hasChatReference: 0, hasChatReference: 0,
message: messageText, message: stringifyMessageObject,
lastReference: reference, lastReference: reference,
proofOfWorkNonce: 0, proofOfWorkNonce: 0,
isEncrypted: isEncrypted, isEncrypted: isEncrypted,

150
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -221,7 +221,7 @@ class ChatPage extends LitElement {
<vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon> <vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon>
<div class="repliedTo-message"> <div class="repliedTo-message">
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p> <p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p>
<p class="original-message">${this.repliedToMessageObj.decodedMessage}</p> <p class="original-message">${this.repliedToMessageObj.message}</p>
</div> </div>
</div> </div>
<vaadin-icon <vaadin-icon
@ -238,7 +238,7 @@ class ChatPage extends LitElement {
<vaadin-icon class="reply-icon" icon="vaadin:pencil" slot="icon"></vaadin-icon> <vaadin-icon class="reply-icon" icon="vaadin:pencil" slot="icon"></vaadin-icon>
<div class="repliedTo-message"> <div class="repliedTo-message">
<p class="senderName">${translate("chatpage.cchange25")}</p> <p class="senderName">${translate("chatpage.cchange25")}</p>
<p class="original-message">${this.editedMessageObj.decodedMessage}</p> <p class="original-message">${this.editedMessageObj.message}</p>
</div> </div>
</div> </div>
<vaadin-icon <vaadin-icon
@ -274,7 +274,7 @@ class ChatPage extends LitElement {
async firstUpdated() { async firstUpdated() {
const keys = await messagesCache.keys() const keys = await messagesCache.keys()
console.log({ keys })
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
@ -389,8 +389,7 @@ class ChatPage extends LitElement {
async updated(changedProperties) { async updated(changedProperties) {
if (changedProperties.has('messagesRendered')) { if (changedProperties.has('messagesRendered')) {
let data = {} let data = {}
console.log('chatId', this._chatId)
console.log(this.isReceipient)
const chatReference1 = this.isReceipient ? 'direct' : 'group'; const chatReference1 = this.isReceipient ? 'direct' : 'group';
const chatReference2 = this._chatId const chatReference2 = this._chatId
if (chatReference1 && chatReference2) { if (chatReference1 && chatReference2) {
@ -399,8 +398,8 @@ class ChatPage extends LitElement {
} }
if (changedProperties && changedProperties.has('editedMessageObj')) { if (changedProperties && changedProperties.has('editedMessageObj')) {
console.log('yo123')
this.chatEditor.insertText(this.editedMessageObj.decodedMessage) this.chatEditor.insertText(this.editedMessageObj.message)
} }
} }
@ -451,7 +450,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}`, url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${this._chatId}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}&haschatreference=false`,
}); });
const decodeMsgs = getInitialMessages.map((eachMessage) => { const decodeMsgs = getInitialMessages.map((eachMessage) => {
@ -475,7 +474,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}`, url: `/chat/messages?txGroupId=${Number(this._chatId)}&limit=20&reverse=true&before=${scrollElement.messageObj.timestamp}&haschatreference=false`,
}); });
@ -504,7 +503,7 @@ class ChatPage extends LitElement {
async processMessages(messages, isInitial) { async processMessages(messages, isInitial) {
const findNewMessages = messages.map(async(msg)=> { const findNewMessages = messages.map(async(msg)=> {
console.log({msg})
let msgItem = msg let msgItem = msg
try { try {
const response = await parentEpml.request('apiCall', { const response = await parentEpml.request('apiCall', {
@ -521,7 +520,7 @@ class ChatPage extends LitElement {
editedTimestamp : response[0].timestamp editedTimestamp : response[0].timestamp
} }
} }
console.log({response})
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
@ -547,7 +546,7 @@ class ChatPage extends LitElement {
const findNewMessages2 = decodedMessages.map(async(msg)=> { const findNewMessages2 = decodedMessages.map(async(msg)=> {
console.log({msg})
let parsedMessageObj = msg let parsedMessageObj = msg
try { try {
parsedMessageObj = JSON.parse(msg.decodedMessage) parsedMessageObj = JSON.parse(msg.decodedMessage)
@ -622,15 +621,58 @@ class ChatPage extends LitElement {
setTimeout(() => this.downElementObserver(), 500) setTimeout(() => this.downElementObserver(), 500)
} else { } else {
messages.forEach((eachMessage) => {
const findNewMessages2 = messages.map(async(msg)=> {
const _eachMessage = this.decodeMessage(eachMessage) const _eachMessage = this.decodeMessage(msg)
let parsedMessageObj = _eachMessage
try {
this.renderNewMessage(_eachMessage) parsedMessageObj = JSON.parse(_eachMessage.decodedMessage)
} catch (error) {
return msg
}
let msgItem = _eachMessage
try {
if(parsedMessageObj.repliedTo){
const response = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?chatreference=${parsedMessageObj.repliedTo}&reverse=true&involving=${_eachMessage.recipient}&involving=${_eachMessage.sender}`,
});
if(response && Array.isArray(response) && response.length !== 0){
msgItem = {
..._eachMessage,
repliedToData : this.decodeMessage(response[0])
}
} else {
const response2 = await parentEpml.request('apiCall', {
type: 'api',
url: `/chat/messages?reference=${parsedMessageObj.repliedTo}&reverse=true&involving=${_eachMessage.recipient}&involving=${_eachMessage.sender}`,
});
if(response2 && Array.isArray(response2) && response2.length !== 0){
msgItem = {
..._eachMessage,
repliedToData : this.decodeMessage(response2[0])
}
}
}
}
} catch (error) {
console.log(error)
}
this.renderNewMessage(msgItem)
}) })
await Promise.all(findNewMessages2)
// this.newMessages = this.newMessages.concat(_newMessages) // this.newMessages = this.newMessages.concat(_newMessages)
@ -654,11 +696,9 @@ class ChatPage extends LitElement {
// set edited message in chat editor // set edited message in chat editor
setEditedMessageObj(messageObj) { setEditedMessageObj(messageObj) {
console.log(messageObj, "Edited Message Object Here")
this.editedMessageObj = {...messageObj}; this.editedMessageObj = {...messageObj};
this.repliedToMessageObj = null; this.repliedToMessageObj = null;
this.requestUpdate(); this.requestUpdate();
console.log(this.editedMessageObj);
} }
closeEditMessageContainer() { closeEditMessageContainer() {
@ -725,7 +765,17 @@ class ChatPage extends LitElement {
} }
async renderNewMessage(newMessage) { async renderNewMessage(newMessage) {
if(newMessage.chatReference){
const findOriginalMessageIndex = this.messagesRendered.findIndex(msg=> msg.reference === newMessage.chatReference || (msg.chatReference && msg.chatReference === newMessage.chatReference) )
if(findOriginalMessageIndex !== -1){
const newMessagesRendered = [...this.messagesRendered]
newMessagesRendered[findOriginalMessageIndex] = {...newMessage, timestamp: newMessagesRendered[findOriginalMessageIndex].timestamp, editedTimestamp: newMessage.timestamp }
this.messagesRendered = newMessagesRendered
await this.getUpdateComplete();
}
return
}
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement'); const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement');
if (newMessage.sender === this.selectedAddress.address) { if (newMessage.sender === this.selectedAddress.address) {
@ -761,11 +811,11 @@ class ChatPage extends LitElement {
if (this.isReceipient === true) { if (this.isReceipient === true) {
// direct chat // direct chat
if (encodedMessageObj.isEncrypted === true && this._publicKey.hasPubKey === true) { if (encodedMessageObj.isEncrypted === true && this._publicKey.hasPubKey === true && encodedMessageObj.data) {
let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, this._publicKey.key, encodedMessageObj.reference) let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, this._publicKey.key, encodedMessageObj.reference)
decodedMessageObj = { ...encodedMessageObj, decodedMessage } decodedMessageObj = { ...encodedMessageObj, decodedMessage }
} else if (encodedMessageObj.isEncrypted === false) { } else if (encodedMessageObj.isEncrypted === false && encodedMessageObj.data) {
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) let bytesArray = window.parent.Base58.decode(encodedMessageObj.data)
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) let decodedMessage = new TextDecoder('utf-8').decode(bytesArray)
@ -821,7 +871,6 @@ class ChatPage extends LitElement {
// Message Event // Message Event
directSocket.onmessage = async (e) => { directSocket.onmessage = async (e) => {
if (initial === 0) { if (initial === 0) {
const isReceipient = this.chatId.includes('direct') const isReceipient = this.chatId.includes('direct')
@ -835,13 +884,13 @@ class ChatPage extends LitElement {
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}`, url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true&after=${lastMessage.timestamp}&haschatreference=false`,
}); });
getInitialMessages = [...cachedData, ...newMessages] getInitialMessages = [...cachedData, ...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`, url: `/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}&limit=20&reverse=true&haschatreference=false`,
}); });
@ -852,8 +901,10 @@ class ChatPage extends LitElement {
initial = initial + 1 initial = initial + 1
} else { } else {
if(e.data){
this.processMessages(JSON.parse(e.data), false) this.processMessages(JSON.parse(e.data), false)
}
} }
} }
@ -921,14 +972,14 @@ class ChatPage extends LitElement {
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}`, url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true&after=${lastMessage.timestamp}&haschatreference=false`,
}); });
getInitialMessages = [...cachedData, ...newMessages] getInitialMessages = [...cachedData, ...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`, url: `/chat/messages?txGroupId=${groupId}&limit=20&reverse=true&haschatreference=false`,
}); });
@ -939,8 +990,10 @@ class ChatPage extends LitElement {
initial = initial + 1 initial = initial + 1
} else { } else {
if(e.data){
this.processMessages(JSON.parse(e.data), false) this.processMessages(JSON.parse(e.data), false)
}
} }
} }
@ -991,12 +1044,11 @@ class ChatPage extends LitElement {
this.isLoading = true; this.isLoading = true;
this.chatEditor.disable(); this.chatEditor.disable();
const messageText = this.mirrorChatInput.value; const messageText = this.mirrorChatInput.value;
// Format and Sanitize Message // Format and Sanitize Message
const sanitizedMessage = messageText.replace(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n'); const sanitizedMessage = messageText.replace(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
const trimmedMessage = sanitizedMessage.trim(); const trimmedMessage = sanitizedMessage.trim();
console.log('is replied', this.repliedToMessageObj)
if (/^\s*$/.test(trimmedMessage)) { if (/^\s*$/.test(trimmedMessage)) {
this.isLoading = false; this.isLoading = false;
@ -1014,7 +1066,7 @@ class ChatPage extends LitElement {
} }
typeMessage = 'reply' typeMessage = 'reply'
const messageObject = { const messageObject = {
messageText, messageText: trimmedMessage,
images: [''], images: [''],
repliedTo: chatReference, repliedTo: chatReference,
version: 1 version: 1
@ -1022,23 +1074,31 @@ class ChatPage extends LitElement {
const stringifyMessageObject = JSON.stringify(messageObject) const stringifyMessageObject = JSON.stringify(messageObject)
this.sendMessage(stringifyMessageObject, typeMessage ); this.sendMessage(stringifyMessageObject, typeMessage );
} else if (this.editedMessageObj) { } else if (this.editedMessageObj) {
let chatReference = this.repliedToMessageObj.reference typeMessage = 'edit'
let chatReference = this.editedMessageObj.reference
if(this.repliedToMessageObj.chatReference){ if(this.editedMessageObj.chatReference){
chatReference = this.repliedToMessageObj.chatReference chatReference = this.editedMessageObj.chatReference
} }
typeMessage = 'reply'
let message = ""
try {
const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage)
message = parsedMessageObj
} catch (error) {
message = this.messageObj.decodedMessage
}
const messageObject = { const messageObject = {
messageText, ...message,
images: [''], messageText: trimmedMessage,
repliedTo: chatReference,
version: 1
} }
const stringifyMessageObject = JSON.stringify(messageObject) const stringifyMessageObject = JSON.stringify(messageObject)
this.sendMessage(stringifyMessageObject, typeMessage, chatReference); this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
} else { } else {
const messageObject = { const messageObject = {
messageText, messageText: trimmedMessage,
images: [''], images: [''],
repliedTo: '', repliedTo: '',
version: 1 version: 1
@ -1049,7 +1109,7 @@ class ChatPage extends LitElement {
} }
async sendMessage(messageText, typeMessage, chatReference) { async sendMessage(messageText, typeMessage, chatReference) {
console.log({messageText}, 'hello')
this.isLoading = true; this.isLoading = true;
let _reference = new Uint8Array(64); let _reference = new Uint8Array(64);
@ -1074,7 +1134,7 @@ class ChatPage extends LitElement {
isText: 1 isText: 1
} }
}); });
console.log({chatResponse})
_computePow(chatResponse) _computePow(chatResponse)
} else { } else {
let groupResponse = await parentEpml.request('chat', { let groupResponse = await parentEpml.request('chat', {

6
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -44,7 +44,6 @@ class ChatScroller extends LitElement {
render() { render() {
console.log({messages: this.messages})
return html` return html`
<ul id="viewElement" class="chat-list clearfix"> <ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div> <div id="upObserver"></div>
@ -219,7 +218,10 @@ class MessageTemplate extends LitElement {
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}` const avatarUrl = `${nodeUrl}/arbitrary/THUMBNAIL/${this.messageObj.senderName}/qortal_avatar?async=true&apiKey=${myNode.apiKey}`
avatarImg = html`<img src="${avatarUrl}" style="max-width:100%; max-height:100%;" onerror="this.onerror=null; this.src='/img/incognito.png';" />` avatarImg = html`<img src="${avatarUrl}" style="max-width:100%; max-height:100%;" onerror="this.onerror=null; this.src='/img/incognito.png';" />`
} else {
avatarImg = html`<img src='/img/incognito.png' style="max-width:100%; max-height:100%;" onerror="this.onerror=null;" />`
} }
if (this.messageObj.sender === this.myAddress) { if (this.messageObj.sender === this.myAddress) {
nameMenu = html`<span style="color: #03a9f4;">${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>` nameMenu = html`<span style="color: #03a9f4;">${this.messageObj.senderName ? this.messageObj.senderName : this.messageObj.sender}</span>`
@ -265,7 +267,7 @@ class MessageTemplate extends LitElement {
.showBlockUserModal=${() => this.showBlockUserModal()} .showBlockUserModal=${() => this.showBlockUserModal()}
.showBlockIconFunc=${(props) => this.showBlockIconFunc(props)} .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}
.showBlockAddressIcon=${this.showBlockAddressIcon} .showBlockAddressIcon=${this.showBlockAddressIcon}
.originalMessage=${this.messageObj} .originalMessage=${{...this.messageObj, message}}
.setRepliedToMessageObj=${this.setRepliedToMessageObj} .setRepliedToMessageObj=${this.setRepliedToMessageObj}
.setEditedMessageObj=${this.setEditedMessageObj} .setEditedMessageObj=${this.setEditedMessageObj}
.focusChatEditor=${this.focusChatEditor} .focusChatEditor=${this.focusChatEditor}

10
qortal-ui-plugins/plugins/core/components/ChatWelcomePage.js
View File

@ -402,7 +402,13 @@ class ChatWelcomePage extends LitElement {
}; };
const sendMessageRequest = async (isEncrypted, _publicKey) => { const sendMessageRequest = async (isEncrypted, _publicKey) => {
const messageObject = {
messageText,
images: [''],
repliedTo: '',
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject)
let chatResponse = await parentEpml.request('chat', { let chatResponse = await parentEpml.request('chat', {
type: 18, type: 18,
nonce: this.selectedAddress.nonce, nonce: this.selectedAddress.nonce,
@ -411,7 +417,7 @@ class ChatWelcomePage extends LitElement {
recipient: recipient, recipient: recipient,
recipientPublicKey: _publicKey, recipientPublicKey: _publicKey,
hasChatReference: 0, hasChatReference: 0,
message: messageText, message: stringifyMessageObject,
lastReference: reference, lastReference: reference,
proofOfWorkNonce: 0, proofOfWorkNonce: 0,
isEncrypted: isEncrypted, isEncrypted: isEncrypted,

10
qortal-ui-plugins/plugins/core/components/NameMenu.js
View File

@ -521,7 +521,13 @@ class NameMenu extends LitElement {
}; };
const sendMessageRequest = async (isEncrypted, _publicKey) => { const sendMessageRequest = async (isEncrypted, _publicKey) => {
const messageObject = {
messageText,
images: [''],
repliedTo: '',
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject)
let chatResponse = await parentEpml.request('chat', { let chatResponse = await parentEpml.request('chat', {
type: 18, type: 18,
nonce: this.selectedAddress.nonce, nonce: this.selectedAddress.nonce,
@ -530,7 +536,7 @@ class NameMenu extends LitElement {
recipient: recipient, recipient: recipient,
recipientPublicKey: _publicKey, recipientPublicKey: _publicKey,
hasChatReference: 0, hasChatReference: 0,
message: messageText, message: stringifyMessageObject,
lastReference: reference, lastReference: reference,
proofOfWorkNonce: 0, proofOfWorkNonce: 0,
isEncrypted: isEncrypted, isEncrypted: isEncrypted,

10
qortal-ui-plugins/plugins/core/messaging/q-chat/q-chat.src.js
View File

@ -811,7 +811,13 @@ class Chat extends LitElement {
}; };
const sendMessageRequest = async (isEncrypted, _publicKey) => { const sendMessageRequest = async (isEncrypted, _publicKey) => {
const messageObject = {
messageText,
images: [''],
repliedTo: '',
version: 1
}
const stringifyMessageObject = JSON.stringify(messageObject)
let chatResponse = await parentEpml.request('chat', { let chatResponse = await parentEpml.request('chat', {
type: 18, type: 18,
nonce: this.selectedAddress.nonce, nonce: this.selectedAddress.nonce,
@ -820,7 +826,7 @@ class Chat extends LitElement {
recipient: recipient, recipient: recipient,
recipientPublicKey: _publicKey, recipientPublicKey: _publicKey,
hasChatReference: 0, hasChatReference: 0,
message: messageText, message: stringifyMessageObject,
lastReference: reference, lastReference: reference,
proofOfWorkNonce: 0, proofOfWorkNonce: 0,
isEncrypted: isEncrypted, isEncrypted: isEncrypted,