|
|
@ -46,7 +46,7 @@ class ChatPage extends LitElement { |
|
|
|
hideNewMesssageBar: { attribute: false }, |
|
|
|
hideNewMesssageBar: { attribute: false }, |
|
|
|
chatEditorPlaceholder: { type: String }, |
|
|
|
chatEditorPlaceholder: { type: String }, |
|
|
|
messagesRendered: { type: Array }, |
|
|
|
messagesRendered: { type: Array }, |
|
|
|
repliedToSignature: { type: String }, |
|
|
|
repliedToMessageObj: { type: Object }, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -64,12 +64,11 @@ class ChatPage extends LitElement { |
|
|
|
|
|
|
|
|
|
|
|
.chat-text-area .typing-area { |
|
|
|
.chat-text-area .typing-area { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
flex-direction: column; |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 98%; |
|
|
|
width: 98%; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 5px; |
|
|
|
|
|
|
|
margin-bottom: 8px; |
|
|
|
margin-bottom: 8px; |
|
|
|
border: 1px solid var(--black); |
|
|
|
border: 1px solid var(--black); |
|
|
|
border-radius: 10px; |
|
|
|
border-radius: 10px; |
|
|
@ -91,10 +90,67 @@ class ChatPage extends LitElement { |
|
|
|
border: none; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.repliedTo-container { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
padding: 10px 20px 8px 10px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.repliedTo-subcontainer { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
gap: 15px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.repliedTo-message { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
gap: 5px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.senderName { |
|
|
|
|
|
|
|
margin: 0; |
|
|
|
|
|
|
|
color: var(--mdc-theme-primary); |
|
|
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.original-message { |
|
|
|
|
|
|
|
margin: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.reply-icon { |
|
|
|
|
|
|
|
width: 20px; |
|
|
|
|
|
|
|
color: var(--mdc-theme-primary); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.close-icon { |
|
|
|
|
|
|
|
color: #676b71; |
|
|
|
|
|
|
|
width: 25px; |
|
|
|
|
|
|
|
transition: all 0.1s ease-in-out; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.close-icon:hover { |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
color: #494c50; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.chat-text-area .typing-area .chatbar { |
|
|
|
|
|
|
|
width: auto; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
height: auto; |
|
|
|
|
|
|
|
padding: 5px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.chat-text-area .typing-area .emoji-button { |
|
|
|
.chat-text-area .typing-area .emoji-button { |
|
|
|
width: 45px; |
|
|
|
width: 45px; |
|
|
|
height: 40px; |
|
|
|
height: 40px; |
|
|
|
padding: 5px; |
|
|
|
padding-top: 4px; |
|
|
|
border: none; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
outline: none; |
|
|
|
background: transparent; |
|
|
|
background: transparent; |
|
|
@ -136,20 +192,38 @@ class ChatPage extends LitElement { |
|
|
|
this.isPasteMenuOpen = false |
|
|
|
this.isPasteMenuOpen = false |
|
|
|
this.chatEditorPlaceholder = this.renderPlaceholder() |
|
|
|
this.chatEditorPlaceholder = this.renderPlaceholder() |
|
|
|
this.messagesRendered = [] |
|
|
|
this.messagesRendered = [] |
|
|
|
this.repliedToSignature = '' |
|
|
|
this.repliedToMessageObj = null |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
render() { |
|
|
|
|
|
|
|
|
|
|
|
return html` |
|
|
|
return html` |
|
|
|
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)} |
|
|
|
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)} |
|
|
|
<div class="chat-text-area"> |
|
|
|
<div class="chat-text-area"> |
|
|
|
<div class="typing-area"> |
|
|
|
<div class="typing-area"> |
|
|
|
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> |
|
|
|
${this.repliedToMessageObj && html` |
|
|
|
<iframe class="chat-editor" id="_chatEditorDOM" tabindex="-1"></iframe> |
|
|
|
<div class="repliedTo-container"> |
|
|
|
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> |
|
|
|
<div class="repliedTo-subcontainer"> |
|
|
|
${this.isLoading === false ? html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg">` : html`<paper-spinner-lite active></paper-spinner-lite>`} |
|
|
|
<vaadin-icon class="reply-icon" icon="vaadin:reply" slot="icon"></vaadin-icon> |
|
|
|
</button> |
|
|
|
<div class="repliedTo-message"> |
|
|
|
|
|
|
|
<p class="senderName">${this.repliedToMessageObj.senderName ? this.repliedToMessageObj.senderName : this.repliedToMessageObj.sender}</p> |
|
|
|
|
|
|
|
<p class="original-message">${this.repliedToMessageObj.decodedMessage}</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<vaadin-icon |
|
|
|
|
|
|
|
class="close-icon" |
|
|
|
|
|
|
|
icon="vaadin:close-big" |
|
|
|
|
|
|
|
slot="icon" |
|
|
|
|
|
|
|
@click=${() => this.closeRepliedToContainer()} |
|
|
|
|
|
|
|
></vaadin-icon> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
`}
|
|
|
|
|
|
|
|
<div class="chatbar"> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
<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>`} |
|
|
|
|
|
|
|
</button> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
` |
|
|
|
` |
|
|
@ -291,8 +365,8 @@ class ChatPage extends LitElement { |
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
.escapeHTML=${escape}
|
|
|
|
.escapeHTML=${escape}
|
|
|
|
.getOldMessage=${this.getOldMessage} |
|
|
|
.getOldMessage=${this.getOldMessage} |
|
|
|
.setRepliedToSignature=${this.setRepliedToSignature} |
|
|
|
.setRepliedToMessageObj=${(val) => this.setRepliedToMessageObj(val)} |
|
|
|
.repliedToSignature=${this.repliedToSignature} |
|
|
|
.focusChatEditor=${() => this.focusChatEditor()} |
|
|
|
> |
|
|
|
> |
|
|
|
</chat-scroller>` |
|
|
|
</chat-scroller>` |
|
|
|
} |
|
|
|
} |
|
|
@ -397,10 +471,22 @@ class ChatPage extends LitElement { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async setRepliedToMessageObj(messageObj) { |
|
|
|
|
|
|
|
console.log(messageObj, "Replied To Message Object Here") |
|
|
|
|
|
|
|
this.repliedToMessageObj = {...messageObj}; |
|
|
|
|
|
|
|
this.requestUpdate(); |
|
|
|
|
|
|
|
await this.updateComplete; |
|
|
|
|
|
|
|
console.log(this.repliedToMessageObj); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setRepliedToSignature(messageSignature) { |
|
|
|
closeRepliedToContainer() { |
|
|
|
console.log(messageSignature, "Replied To Message Signature Here") |
|
|
|
this.repliedToMessageObj = null; |
|
|
|
this.repliedToSignature = messageSignature; |
|
|
|
this.requestUpdate(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
focusChatEditor() { |
|
|
|
|
|
|
|
this.chatEditor.focus(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
@ -454,10 +540,6 @@ class ChatPage extends LitElement { |
|
|
|
async renderNewMessage(newMessage) { |
|
|
|
async renderNewMessage(newMessage) { |
|
|
|
|
|
|
|
|
|
|
|
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement'); |
|
|
|
const viewElement = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('viewElement'); |
|
|
|
const downObserver = this.shadowRoot.querySelector('chat-scroller').shadowRoot.getElementById('downObserver'); |
|
|
|
|
|
|
|
const li = document.createElement('li'); |
|
|
|
|
|
|
|
li.innerHTML = this.chatMessageTemplate(newMessage); |
|
|
|
|
|
|
|
li.id = newMessage.signature; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (newMessage.sender === this.selectedAddress.address) { |
|
|
|
if (newMessage.sender === this.selectedAddress.address) { |
|
|
|
|
|
|
|
|
|
|
@ -683,11 +765,11 @@ class ChatPage extends LitElement { |
|
|
|
this.chatEditor.enable(); |
|
|
|
this.chatEditor.enable(); |
|
|
|
let err1string = get("chatpage.cchange24"); |
|
|
|
let err1string = get("chatpage.cchange24"); |
|
|
|
parentEpml.request('showSnackBar', `${err1string}`); |
|
|
|
parentEpml.request('showSnackBar', `${err1string}`); |
|
|
|
} else if(this.repliedToSignature) { |
|
|
|
} else if (this.repliedToMessageObj) { |
|
|
|
const messageObject = { |
|
|
|
const messageObject = { |
|
|
|
messageText, |
|
|
|
messageText, |
|
|
|
images: [''], |
|
|
|
images: [''], |
|
|
|
repliedTo: this.repliedToSignature, |
|
|
|
repliedTo: this.repliedToMessageObj.signature, |
|
|
|
version: 1 |
|
|
|
version: 1 |
|
|
|
} |
|
|
|
} |
|
|
|
const stringifyMessageObject = JSON.stringify(messageObject) |
|
|
|
const stringifyMessageObject = JSON.stringify(messageObject) |
|
|
|