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

Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-11-03 10:37:35 +02:00
commit 2443071e8e
9 changed files with 338 additions and 263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
img/qchat-send-message-icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<path d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z" fill="#03a9f4"/>
<path d="M0 0h48v48h-48z" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 253 B

2
qortal-ui-core/font/switch-theme.css
View File

@ -7,6 +7,7 @@ html {
--border: #d0d6de; --border: #d0d6de;
--border2: #dde2e8; --border2: #dde2e8;
--copybutton: #707584; --copybutton: #707584;
--chat-bubble: #efefef73;
--sectxt: #576374; --sectxt: #576374;
--vdicon: #707b8a; --vdicon: #707b8a;
--tradehead: #6a6c75; --tradehead: #6a6c75;
@ -43,6 +44,7 @@ html[theme="dark"] {
--border: #0b305e; --border: #0b305e;
--border2: #0b305e; --border2: #0b305e;
--copybutton: #d0d6de; --copybutton: #d0d6de;
--chat-bubble: #9694941a;
--sectxt: #bbc3cd; --sectxt: #bbc3cd;
--vdicon: #d0d6de; --vdicon: #d0d6de;
--tradehead: #008fd5; --tradehead: #008fd5;

2
qortal-ui-core/src/styles/switch-theme.css
View File

@ -7,6 +7,7 @@ html {
--border: #d0d6de; --border: #d0d6de;
--border2: #dde2e8; --border2: #dde2e8;
--copybutton: #707584; --copybutton: #707584;
--chat-bubble: #efefef73;
--sectxt: #576374; --sectxt: #576374;
--vdicon: #707b8a; --vdicon: #707b8a;
--tradehead: #6a6c75; --tradehead: #6a6c75;
@ -42,6 +43,7 @@ html[theme="dark"] {
--border: #0b305e; --border: #0b305e;
--border2: #0b305e; --border2: #0b305e;
--copybutton: #d0d6de; --copybutton: #d0d6de;
--chat-bubble: #9694941a;
--sectxt: #bbc3cd; --sectxt: #bbc3cd;
--vdicon: #d0d6de; --vdicon: #d0d6de;
--tradehead: #008fd5; --tradehead: #008fd5;

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

@ -92,11 +92,11 @@ class ChatModals extends LitElement {
// Send Private Message // Send Private Message
_sendMessage() { _sendMessage() {
this.isLoading = true this.isLoading = true;
const recipient = this.shadowRoot.getElementById('sendTo').value const recipient = this.shadowRoot.getElementById('sendTo').value;
const messageBox = this.shadowRoot.getElementById('messageBox') const messageBox = this.shadowRoot.getElementById('messageBox');
const messageText = messageBox.value const messageText = messageBox.value;
if (recipient.length === 0) { if (recipient.length === 0) {
this.isLoading = false this.isLoading = false
@ -105,22 +105,21 @@ class ChatModals extends LitElement {
} else { } else {
this.sendMessage() this.sendMessage()
} }
} };
async sendMessage() { async sendMessage() {
this.isLoading = true this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
const _recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value let recipient;
let recipient
const validateName = async (receiverName) => { const validateName = async (receiverName) => {
let myRes let myRes;
let myNameRes = await parentEpml.request('apiCall', { let myNameRes = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/names/${receiverName}` url: `/names/${receiverName}`
}) });
if (myNameRes.error === 401) { if (myNameRes.error === 401) {
myRes = false myRes = false
@ -128,7 +127,7 @@ class ChatModals extends LitElement {
myRes = myNameRes myRes = myNameRes
} }
return myRes return myRes;
} }
const myNameRes = await validateName(_recipient) const myNameRes = await validateName(_recipient)
@ -139,7 +138,6 @@ class ChatModals extends LitElement {
recipient = myNameRes.owner recipient = myNameRes.owner
} }
let _reference = new Uint8Array(64); let _reference = new Uint8Array(64);
window.crypto.getRandomValues(_reference); window.crypto.getRandomValues(_reference);
@ -367,7 +365,11 @@ class ChatModals extends LitElement {
<p style='margin-bottom:0;'> <p style='margin-bottom:0;'>
<textarea class='textarea' @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id='messageBox' placeholder='${translate('welcomepage.wcchange5')}' rows='1'></textarea> <textarea class='textarea' @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id='messageBox' placeholder='${translate('welcomepage.wcchange5')}' rows='1'></textarea>
</p> </p>
<mwc-button ?disabled='${this.isLoading}' slot='primaryAction' @click=${this._sendMessage}>${translate('welcomepage.wcchange6')} <mwc-button ?disabled='${this.isLoading}' slot='primaryAction' @click=${() => {
console.log("here500");
this._sendMessage();
}
}>${translate('welcomepage.wcchange6')}
</mwc-button> </mwc-button>
<mwc-button <mwc-button
?disabled='${this.isLoading}' ?disabled='${this.isLoading}'

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

@ -8,7 +8,6 @@ registerTranslateConfig({
}) })
import ShortUniqueId from 'short-unique-id'; import ShortUniqueId from 'short-unique-id';
import Compressor from 'compressorjs'; import Compressor from 'compressorjs';
import { escape, unescape } from 'html-escaper'; import { escape, unescape } from 'html-escaper';
import { inputKeyCodes } from '../../utils/keyCodes.js' import { inputKeyCodes } from '../../utils/keyCodes.js'
import './ChatScroller.js' import './ChatScroller.js'
@ -17,7 +16,6 @@ import './NameMenu.js'
import './TimeAgo.js' import './TimeAgo.js'
import { EmojiPicker } from 'emoji-picker-js'; import { EmojiPicker } from 'emoji-picker-js';
import '@polymer/paper-spinner/paper-spinner-lite.js' import '@polymer/paper-spinner/paper-spinner-lite.js'
import '@material/mwc-button' import '@material/mwc-button'
import '@material/mwc-dialog' import '@material/mwc-dialog'
import '@material/mwc-icon' import '@material/mwc-icon'
@ -56,6 +54,7 @@ class ChatPage extends LitElement {
messagesRendered: { type: Array }, messagesRendered: { type: Array },
repliedToMessageObj: { type: Object }, repliedToMessageObj: { type: Object },
editedMessageObj: { type: Object }, editedMessageObj: { type: Object },
iframeHeight: { type: Number },
chatMessageSize: { type: Number}, chatMessageSize: { type: Number},
imageFile: {type: Object} imageFile: {type: Object}
} }
@ -67,17 +66,23 @@ class ChatPage extends LitElement {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
.chat-container {
display: grid;
grid-template-rows: minmax(6%, 92vh) minmax(40px, auto);
max-height: 100%;
}
.chat-text-area { .chat-text-area {
display: flex; display: flex;
justify-content: center; justify-content: center;
min-height: 60px;
max-height: 100%;
overflow: hidden; overflow: hidden;
} }
.chat-text-area .typing-area { .chat-text-area .typing-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: absolute;
bottom: 0;
width: 98%; width: 98%;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 8px; margin-bottom: 8px;
@ -92,10 +97,10 @@ class ChatPage extends LitElement {
} }
.chat-text-area .typing-area .chat-editor { .chat-text-area .typing-area .chat-editor {
display: flex;
max-height: -webkit-fill-available;
width: 100%;
border-color: transparent; border-color: transparent;
flex: 1;
max-height: 40px;
height: 40px;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
@ -127,6 +132,7 @@ class ChatPage extends LitElement {
margin: 0; margin: 0;
color: var(--mdc-theme-primary); color: var(--mdc-theme-primary);
font-weight: bold; font-weight: bold;
user-select: none;
} }
.original-message { .original-message {
@ -164,7 +170,8 @@ class ChatPage extends LitElement {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: auto; height: auto;
padding: 5px; padding: 5px 5px 5px 7px;
overflow-y: hidden;
} }
.chat-text-area .typing-area .emoji-button { .chat-text-area .typing-area .emoji-button {
@ -186,6 +193,27 @@ class ChatPage extends LitElement {
img { img {
border-radius: 25%; border-radius: 25%;
} }
.paperclip-icon {
color: #494949;
width: 25px;
}
.paperclip-icon:hover {
cursor: pointer;
}
.send-icon {
width: 30px;
margin-left: 5px;
transition: all 0.1s ease-in-out;
}
.send-icon:hover {
cursor: pointer;
filter: brightness(1.1);
}
` `
} }
@ -196,6 +224,7 @@ class ChatPage extends LitElement {
this.insertImage = this.insertImage.bind(this) this.insertImage = this.insertImage.bind(this)
this.getMessageSize = this.getMessageSize.bind(this) this.getMessageSize = this.getMessageSize.bind(this)
this._downObserverhandler = this._downObserverhandler.bind(this) this._downObserverhandler = this._downObserverhandler.bind(this)
this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this)
this.selectedAddress = {} this.selectedAddress = {}
this.chatId = '' this.chatId = ''
this.myAddress = '' this.myAddress = ''
@ -216,17 +245,19 @@ class ChatPage extends LitElement {
this.messagesRendered = [] this.messagesRendered = []
this.repliedToMessageObj = null this.repliedToMessageObj = null
this.editedMessageObj = null this.editedMessageObj = null
this.iframeHeight = 40
this.chatMessageSize = 5 this.chatMessageSize = 5
this.imageFile = null this.imageFile = null
this.uid = new ShortUniqueId(); this.uid = new ShortUniqueId()
} }
render() { render() {
return html` return html`
<div class="chat-container">
<div>
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)} ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
<mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile}> <mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile}>
<div class="dialog-header"> <div class="dialog-header">
</div> </div>
<div class="dialog-container"> <div class="dialog-container">
hello hello
@ -240,13 +271,10 @@ class ChatPage extends LitElement {
dialogAction="cancel" dialogAction="cancel"
class="red" class="red"
@click=${()=> { @click=${()=> {
this._sendMessage({ this._sendMessage({
type: 'image', type: 'image',
imageFile: this.imageFile, imageFile: this.imageFile,
caption: 'This is a caption' caption: 'This is a caption'
}) })
}} }}
> >
@ -264,7 +292,8 @@ class ChatPage extends LitElement {
${translate("general.close")} ${translate("general.close")}
</mwc-button> </mwc-button>
</mwc-dialog> </mwc-dialog>
<div class="chat-text-area"> </div>
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
<div class="typing-area"> <div class="typing-area">
${this.repliedToMessageObj && html` ${this.repliedToMessageObj && html`
<div class="repliedTo-container"> <div class="repliedTo-container">
@ -301,25 +330,46 @@ class ChatPage extends LitElement {
</div> </div>
`} `}
<div class="chatbar"> <div class="chatbar">
<vaadin-icon
class="paperclip-icon"
icon="vaadin:paperclip"
slot="icon"
@click=${() => this.closeEditMessageContainer()}
></vaadin-icon>
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe> <iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
</iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`} ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
</button> </button>
${this.editedMessageObj ? ( ${this.editedMessageObj ? (
html` html`
<div>
${this.isLoading === false ? html`
<vaadin-icon <vaadin-icon
class="checkmark-icon" class="checkmark-icon"
icon="vaadin:check" icon="vaadin:check"
slot="icon" slot="icon"
@click=${() => this._sendMessage()} @click=${() => this._sendMessage()}
></vaadin-icon> >
</vaadin-icon>
` :
html`
<paper-spinner-lite active></paper-spinner-lite>
`}
</div>
`
) :
html`
<div style="display:flex;">
${this.isLoading === false ? html`<img src="/img/qchat-send-message-icon.svg" alt="send-icon" class="send-icon" />` : html`<paper-spinner-lite active></paper-spinner-lite>`}
</div>
` `
) : html`<div></div>`
} }
</div> </div>
</div> </div>
</div> </div>
</div>
` `
} }
@ -336,8 +386,6 @@ class ChatPage extends LitElement {
async firstUpdated() { async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
// this.changeLanguage(); // this.changeLanguage();
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
@ -444,6 +492,7 @@ class ChatPage extends LitElement {
parentEpml.imReady(); parentEpml.imReady();
} }
async updated(changedProperties) { async updated(changedProperties) {
if (changedProperties.has('messagesRendered')) { if (changedProperties.has('messagesRendered')) {
const chatReference1 = this.isReceipient ? 'direct' : 'group'; const chatReference1 = this.isReceipient ? 'direct' : 'group';
@ -454,11 +503,15 @@ class ChatPage extends LitElement {
} }
if (changedProperties && changedProperties.has('editedMessageObj')) { if (changedProperties && changedProperties.has('editedMessageObj')) {
this.chatEditor.insertText(this.editedMessageObj.message) this.chatEditor.insertText(this.editedMessageObj.message)
} }
} }
calculateIFrameHeight(height) {
console.log(height, "height here")
this.iframeHeight = height;
}
changeLanguage() { changeLanguage() {
const checkLanguage = localStorage.getItem('qortalLanguage') const checkLanguage = localStorage.getItem('qortalLanguage')
@ -501,9 +554,6 @@ class ChatPage extends LitElement {
async getOldMessage(scrollElement) { async getOldMessage(scrollElement) {
if (this.isReceipient) { if (this.isReceipient) {
const getInitialMessages = await parentEpml.request('apiCall', { const getInitialMessages = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
@ -630,9 +680,6 @@ class ChatPage extends LitElement {
} }
} }
// set replied to message in chat editor
getMessageSize(message){ getMessageSize(message){
try { try {
@ -697,6 +744,8 @@ class ChatPage extends LitElement {
} }
// set replied to message in chat editor
setRepliedToMessageObj(messageObj) { setRepliedToMessageObj(messageObj) {
this.repliedToMessageObj = {...messageObj}; this.repliedToMessageObj = {...messageObj};
this.editedMessageObj = null; this.editedMessageObj = null;
@ -875,9 +924,6 @@ class ChatPage extends LitElement {
directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`; directSocketLink = `ws://${nodeUrl}/websockets/chat/messages?involving=${window.parent.reduxStore.getState().app.selectedAddress.address}&involving=${cid}`;
} }
const directSocket = new WebSocket(directSocketLink); const directSocket = new WebSocket(directSocketLink);
// Open Connection // Open Connection
@ -1653,13 +1699,11 @@ class ChatPage extends LitElement {
editorConfig.getMessageSize(editorConfig.mirrorElement.value) editorConfig.getMessageSize(editorConfig.mirrorElement.value)
if (e.type === 'click') { if (e.type === 'click') {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
if (e.type === 'paste') { if (e.type === 'paste') {
e.preventDefault(); e.preventDefault();
const item_list = await navigator.clipboard.read(); const item_list = await navigator.clipboard.read();
console.log({item_list}) console.log({item_list})
@ -1678,16 +1722,10 @@ class ChatPage extends LitElement {
}); });
editorConfig.insertImage(file) editorConfig.insertImage(file)
navigator.clipboard.readText().then(clipboardText => { navigator.clipboard.readText().then(clipboardText => {
let escapedText = editorConfig.escape(clipboardText); let escapedText = editorConfig.escape(clipboardText);
editor.insertText(escapedText); editor.insertText(escapedText);
}).catch(err => { }).catch(err => {
// Fallback if everything fails... // Fallback if everything fails...
let textData = (e.originalEvent || e).clipboardData.getData('text/plain'); let textData = (e.originalEvent || e).clipboardData.getData('text/plain');
editor.insertText(textData); editor.insertText(textData);
@ -1702,6 +1740,8 @@ class ChatPage extends LitElement {
} }
if (e.type === 'keydown') { if (e.type === 'keydown') {
console.log(editorConfig.mirrorElement.scrollHeight);
editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
// Handle Enter // Handle Enter
if (e.keyCode === 13 && !e.shiftKey) { if (e.keyCode === 13 && !e.shiftKey) {
@ -1783,6 +1823,7 @@ class ChatPage extends LitElement {
const editorConfig = { const editorConfig = {
getMessageSize: this.getMessageSize, getMessageSize: this.getMessageSize,
calculateIFrameHeight: this.calculateIFrameHeight,
mirrorElement: this.mirrorChatInput, mirrorElement: this.mirrorChatInput,
editableElement: this.chatMessageInput, editableElement: this.chatMessageInput,
sendFunc: this._sendMessage, sendFunc: this._sendMessage,

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

@ -41,7 +41,7 @@ export const chatStyles = css`
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 20px; padding: 20px 17px;
} }
.last-message-ref { .last-message-ref {
@ -67,7 +67,7 @@ export const chatStyles = css`
.chat-list { .chat-list {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
height: 92vh; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
@ -79,6 +79,7 @@ export const chatStyles = css`
.message-data-name { .message-data-name {
color: var(--black); color: var(--black);
user-select: none;
} }
.message-data-time { .message-data-time {
@ -86,6 +87,7 @@ export const chatStyles = css`
font-size: 13px; font-size: 13px;
padding-left: 6px; padding-left: 6px;
padding-bottom: 4px; padding-bottom: 4px;
user-select: none;
} }
.message-data-level { .message-data-level {
@ -93,6 +95,7 @@ export const chatStyles = css`
font-size: 13px; font-size: 13px;
padding-left: 8px; padding-left: 8px;
padding-bottom: 4px; padding-bottom: 4px;
user-select: none;
} }
.chat-bubble-container { .chat-bubble-container {
@ -102,16 +105,27 @@ export const chatStyles = css`
.message-container { .message-container {
position: relative; position: relative;
margin-bottom: 20px;
}
.message-subcontainer {
position: relative;
display: flex; display: flex;
background-color: #f3f3f3;
flex-grow: 0; flex-grow: 0;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
background-color: whitesmoke;
border-radius: 5px; border-radius: 5px;
padding: 10px 15px; padding: 10px 15px;
gap: 10px; gap: 10px;
margin-bottom: 20px; margin-bottom: 10px;
}
.message-reactions {
background-color: transparent;
width: 100%;
margin-left: 54px;
} }
.original-message { .original-message {
@ -122,10 +136,10 @@ export const chatStyles = css`
line-height: 19px; line-height: 19px;
overflow-wrap: break-word; overflow-wrap: break-word;
user-select: text; user-select: text;
font-size: 16px; font-size: 13px;
width: 90%; width: 90%;
border-radius: 5px; border-radius: 5px;
background-color: rgba(209, 209, 209, 0.79); background-color: rgba(232, 232, 232, 0.79);
padding: 8px 5px 8px 25px; padding: 8px 5px 8px 25px;
white-space: nowrap; white-space: nowrap;
} }
@ -171,12 +185,19 @@ export const chatStyles = css`
float: left; float: left;
} }
.message-parent:hover .chat-hover { .message-parent {
display: block; padding: 3px;
background: rgba(245, 245, 245, 0);
transition: all 0.1s ease-in-out;
} }
.message-parent:hover .message-container { .message-parent:hover {
filter:brightness(0.90); background: var(--chat-bubble);
border-radius: 8px;
}
.message-parent:hover .chat-hover {
display: block;
} }
.chat-hover { .chat-hover {
@ -194,16 +215,6 @@ export const chatStyles = css`
object-fit: contain; object-fit: contain;
} }
.my-message {
background: #d1d1d1;
border: 2px solid #eeeeee;
}
.other-message {
background: #f1f1f1;
border: 2px solid #dedede;
}
.align-left { .align-left {
text-align: left; text-align: left;
} }
@ -324,12 +335,18 @@ export const chatStyles = css`
} }
.reactions-bg { .reactions-bg {
background-color: #3C4048; background-color: #d5d5d5;
border-radius: 10px; border-radius: 10px;
padding: 4px; padding: 5px;
color: white; color: black;
margin-right: 10px; margin-right: 10px;
cursor: pointer transition: all 0.1s ease-in-out;
border: 0.5px solid transparent;
cursor: pointer;
}
.reactions-bg:hover {
border: 0.5px solid #6b6969;
} }
.image-container { .image-container {

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

@ -314,11 +314,10 @@ class MessageTemplate extends LitElement {
<div class="message-data-avatar"> <div class="message-data-avatar">
${avatarImg} ${avatarImg}
</div> </div>
<div class="message-container ${this.messageObj.sender === this.myAddress ? "my-message" : "other-message"}"> <div class="message-container">
<div class="message-subcontainer">
${repliedToData && html` ${repliedToData && html`
<div <div class="original-message">
class="original-message"
style=${this.messageObj.sender === this.myAddress && "background-color: rgb(179 179 179 / 79%)"}>
<p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p> <p class="original-message-sender">${repliedToData.sendName ?? repliedToData.sender}</p>
<p class="replied-message">${repliedToData.decodedMessage.messageText}</p> <p class="replied-message">${repliedToData.decodedMessage.messageText}</p>
</div> </div>
@ -339,13 +338,19 @@ class MessageTemplate extends LitElement {
<div id="messageContent" class="message"> <div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} ${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
</div> </div>
<div> </div>
<div class="message-reactions">
${reactions.map((reaction)=> { ${reactions.map((reaction)=> {
return html`<span @click=${() => this.sendMessage({ return html`
<span
@click=${() => this.sendMessage({
type: 'reaction', type: 'reaction',
editedMessageObj: this.messageObj, editedMessageObj: this.messageObj,
reaction: reaction.type, reaction: reaction.type,
})} class="reactions-bg" >${reaction.type} ${reaction.qty}</span>` })}
class="reactions-bg">
${reaction.type} ${reaction.qty}
</span>`
})} })}
</div> </div>
<chat-menu <chat-menu
@ -367,6 +372,7 @@ class MessageTemplate extends LitElement {
> >
</chat-menu> </chat-menu>
</div> </div>
</div>
</li> </li>
<chat-modals <chat-modals
.openDialogPrivateMessage=${this.openDialogPrivateMessage} .openDialogPrivateMessage=${this.openDialogPrivateMessage}

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

@ -230,7 +230,11 @@ class ChatWelcomePage extends LitElement {
<textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea> <textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea>
</p> </p>
<mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${this._sendMessage}>${translate("welcomepage.wcchange6")}</mwc-button> <mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${() => {
this._sendMessage();
}
}>
${translate("welcomepage.wcchange6")}</mwc-button>
<mwc-button <mwc-button
?disabled="${this.isLoading}" ?disabled="${this.isLoading}"
slot="secondaryAction" slot="secondaryAction"
@ -319,86 +323,80 @@ class ChatWelcomePage extends LitElement {
} }
_sendMessage() { _sendMessage() {
this.isLoading = true this.isLoading = true;
const recipient = this.shadowRoot.getElementById('sendTo').value;
const recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value
if (recipient.length === 0) { if (recipient.length === 0) {
this.isLoading = false this.isLoading = false;
} else if (messageText.length === 0) { } else if (messageText.length === 0) {
this.isLoading = false this.isLoading = false;
} else { } else {
this.sendMessage() this.sendMessage();
}
} }
};
async sendMessage(e) { async sendMessage() {
this.isLoading = true this.isLoading = true;
const _recipient = this.shadowRoot.getElementById('sendTo').value;
const _recipient = this.shadowRoot.getElementById('sendTo').value const messageBox = this.shadowRoot.getElementById('messageBox');
const messageBox = this.shadowRoot.getElementById('messageBox') const messageText = messageBox.value;
const messageText = messageBox.value let recipient;
let recipient
const validateName = async (receiverName) => { const validateName = async (receiverName) => {
let myRes let myRes;
let myNameRes = await parentEpml.request('apiCall', { let myNameRes = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/names/${receiverName}` url: `/names/${receiverName}`
}) });
if (myNameRes.error === 401) { if (myNameRes.error === 401) {
myRes = false myRes = false;
} else { } else {
myRes = myNameRes myRes = myNameRes;
} };
return myRes;
};
return myRes const myNameRes = await validateName(_recipient);
}
const myNameRes = await validateName(_recipient)
if (!myNameRes) { if (!myNameRes) {
recipient = _recipient;
recipient = _recipient
} else { } else {
recipient = myNameRes.owner;
recipient = myNameRes.owner };
}
let _reference = new Uint8Array(64); let _reference = new Uint8Array(64);
window.crypto.getRandomValues(_reference); window.crypto.getRandomValues(_reference);
let sendTimestamp = Date.now() let sendTimestamp = Date.now();
let reference = window.parent.Base58.encode(_reference) let reference = window.parent.Base58.encode(_reference);
const getAddressPublicKey = async () => { const getAddressPublicKey = async () => {
let isEncrypted let isEncrypted;
let _publicKey let _publicKey;
let addressPublicKey = await parentEpml.request('apiCall', { let addressPublicKey = await parentEpml.request('apiCall', {
type: 'api', type: 'api',
url: `/addresses/publickey/${recipient}` url: `/addresses/publickey/${recipient}`
}) })
if (addressPublicKey.error === 102) { if (addressPublicKey.error === 102) {
_publicKey = false _publicKey = false;
// Do something here... // Do something here...
let err1string = get("welcomepage.wcchange7") let err1string = get("welcomepage.wcchange7");
parentEpml.request('showSnackBar', `${err1string}`) parentEpml.request('showSnackBar', `${err1string}`);
this.isLoading = false this.isLoading = false;
} else if (addressPublicKey !== false) { } else if (addressPublicKey !== false) {
isEncrypted = 1 isEncrypted = 1;
_publicKey = addressPublicKey _publicKey = addressPublicKey;
sendMessageRequest(isEncrypted, _publicKey) sendMessageRequest(isEncrypted, _publicKey);
} else { } else {
isEncrypted = 0 isEncrypted = 0;
_publicKey = this.selectedAddress.address _publicKey = this.selectedAddress.address;
sendMessageRequest(isEncrypted, _publicKey) sendMessageRequest(isEncrypted, _publicKey);
} };
}; };
const sendMessageRequest = async (isEncrypted, _publicKey) => { const sendMessageRequest = async (isEncrypted, _publicKey) => {
@ -407,8 +405,8 @@ class ChatWelcomePage extends LitElement {
images: [''], images: [''],
repliedTo: '', repliedTo: '',
version: 1 version: 1
} };
const stringifyMessageObject = JSON.stringify(messageObject) 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,
@ -424,7 +422,6 @@ class ChatWelcomePage extends LitElement {
isText: 1 isText: 1
} }
}) })
_computePow(chatResponse) _computePow(chatResponse)
} }

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

@ -232,7 +232,11 @@ class NameMenu extends LitElement {
<p style="margin-bottom:0;"> <p style="margin-bottom:0;">
<textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea> <textarea class="textarea" @keydown=${(e) => this._textArea(e)} ?disabled=${this.isLoading} id="messageBox" placeholder="${translate("welcomepage.wcchange5")}" rows="1"></textarea>
</p> </p>
<mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${this._sendMessage}>${translate("welcomepage.wcchange6")}</mwc-button> <mwc-button ?disabled="${this.isLoading}" slot="primaryAction" @click=${() => {
this._sendMessage();
}
}>
${translate("welcomepage.wcchange6")}</mwc-button>
<mwc-button <mwc-button
?disabled="${this.isLoading}" ?disabled="${this.isLoading}"
slot="secondaryAction" slot="secondaryAction"