|
|
|
|
@ -55,13 +55,20 @@ class ChatPage extends LitElement {
|
|
|
|
|
repliedToMessageObj: { type: Object }, |
|
|
|
|
editedMessageObj: { type: Object }, |
|
|
|
|
iframeHeight: { type: Number }, |
|
|
|
|
chatMessageSize: { type: Number}, |
|
|
|
|
imageFile: {type: Object} |
|
|
|
|
chatMessageSize: { type: Number }, |
|
|
|
|
imageFile: { type: Object }, |
|
|
|
|
caption: { type: String } |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
static get styles() { |
|
|
|
|
return css` |
|
|
|
|
* { |
|
|
|
|
/* Styling mdc dialog native props */ |
|
|
|
|
--mdc-dialog-min-width: 300px; |
|
|
|
|
--mdc-dialog-box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
html { |
|
|
|
|
scroll-behavior: smooth; |
|
|
|
|
} |
|
|
|
|
@ -194,6 +201,41 @@ class ChatPage extends LitElement {
|
|
|
|
|
color: var(--black); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.emoji-button-caption { |
|
|
|
|
width: 45px; |
|
|
|
|
height: 40px; |
|
|
|
|
padding-top: 4px; |
|
|
|
|
border: none; |
|
|
|
|
outline: none; |
|
|
|
|
background: transparent; |
|
|
|
|
cursor: pointer; |
|
|
|
|
max-height: 40px; |
|
|
|
|
color: var(--black); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.caption-container { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
height: auto; |
|
|
|
|
overflow: hidden; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.chatbar-caption { |
|
|
|
|
font-family: Roboto, sans-serif; |
|
|
|
|
width: 70%; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
outline: none; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
resize: none; |
|
|
|
|
border-top: 0; |
|
|
|
|
border-right: 0; |
|
|
|
|
border-left: 0; |
|
|
|
|
border-bottom: 1px solid #cac8c8; |
|
|
|
|
padding: 3px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.message-size-container { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
@ -334,13 +376,46 @@ class ChatPage extends LitElement {
|
|
|
|
|
input[type=file]::-webkit-file-upload-button {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mdc-dialog .mdc-dialog__surface { |
|
|
|
|
border-radius: 10px; |
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Add Image Modal Dialog Styling */ |
|
|
|
|
|
|
|
|
|
.dialog-container { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
flex-direction: column; |
|
|
|
|
height: 100%; |
|
|
|
|
padding: 18px 18px 0 18px; |
|
|
|
|
gap: 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.dialog-container:after { |
|
|
|
|
position: absolute; |
|
|
|
|
content: ""; |
|
|
|
|
bottom: -15px; |
|
|
|
|
height: 1px; |
|
|
|
|
width: 95%; |
|
|
|
|
background: #dddddd; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.dialog-image { |
|
|
|
|
width: 100%; |
|
|
|
|
border-radius: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.red { |
|
|
|
|
--mdc-theme-primary: #F44336; |
|
|
|
|
} |
|
|
|
|
` |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
constructor() { |
|
|
|
|
super() |
|
|
|
|
this.getMessageConfig = this.getMessageConfig.bind(this) |
|
|
|
|
this.getOldMessage = this.getOldMessage.bind(this) |
|
|
|
|
this._sendMessage = this._sendMessage.bind(this) |
|
|
|
|
this.insertImage = this.insertImage.bind(this) |
|
|
|
|
@ -371,6 +446,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
this.chatMessageSize = 0 |
|
|
|
|
this.imageFile = null |
|
|
|
|
this.uid = new ShortUniqueId() |
|
|
|
|
this.caption = "" |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
@ -392,40 +468,70 @@ class ChatPage extends LitElement {
|
|
|
|
|
</div> |
|
|
|
|
` :
|
|
|
|
|
this.renderChatScroller(this._initialMessages)} |
|
|
|
|
<mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile} @closed=${()=> { |
|
|
|
|
this.imageFile = null |
|
|
|
|
<mwc-dialog
|
|
|
|
|
id="showDialogPublicKey"
|
|
|
|
|
?open=${this.imageFile}
|
|
|
|
|
@closed=${()=> { |
|
|
|
|
this.chatEditor.enable(); |
|
|
|
|
this.caption = ""; |
|
|
|
|
this.imageFile = null; |
|
|
|
|
}}> |
|
|
|
|
<div class="dialog-header"></div> |
|
|
|
|
<div class="dialog-container"> |
|
|
|
|
<div class="dialog-container mdc-dialog mdc-dialog__surface"> |
|
|
|
|
${this.imageFile && html` |
|
|
|
|
<img src=${URL.createObjectURL(this.imageFile)} /> |
|
|
|
|
<img src=${URL.createObjectURL(this.imageFile)} alt="dialog-img" class="dialog-image" /> |
|
|
|
|
`}
|
|
|
|
|
</div> |
|
|
|
|
<!-- Replace by reusable chatbar component --> |
|
|
|
|
<div class="caption-container"> |
|
|
|
|
<textarea @change=${(e) => this.onCaptionChange(e.target.value)} .value=${this.caption} placeholder="Caption" class="chatbar-caption" tabindex='1' rows="1"></textarea> |
|
|
|
|
<div style="display:flex; ${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'margin-bottom: 5px' : "margin-bottom: 0"}"> |
|
|
|
|
${this.isLoading === false ? html` |
|
|
|
|
<img
|
|
|
|
|
src="/img/qchat-send-message-icon.svg"
|
|
|
|
|
alt="send-icon"
|
|
|
|
|
class="send-icon"
|
|
|
|
|
@click=${() => this._sendMessage()} /> |
|
|
|
|
` :
|
|
|
|
|
html` |
|
|
|
|
<paper-spinner-lite active></paper-spinner-lite> |
|
|
|
|
`}
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
${this.chatMessageSize >= 750 ?
|
|
|
|
|
html` |
|
|
|
|
<div class="message-size-container"> |
|
|
|
|
<div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}"> |
|
|
|
|
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
` :
|
|
|
|
|
html``} |
|
|
|
|
</div> |
|
|
|
|
<mwc-button |
|
|
|
|
slot="primaryAction" |
|
|
|
|
dialogAction="cancel" |
|
|
|
|
class="red" |
|
|
|
|
@click=${()=> { |
|
|
|
|
this._sendMessage({ |
|
|
|
|
type: 'image', |
|
|
|
|
imageFile: this.imageFile, |
|
|
|
|
caption: 'This is a caption' |
|
|
|
|
}) |
|
|
|
|
@click=${()=>{ |
|
|
|
|
|
|
|
|
|
this.imageFile = null |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
send |
|
|
|
|
${translate("chatpage.cchange29")} |
|
|
|
|
</mwc-button> |
|
|
|
|
<mwc-button |
|
|
|
|
slot="primaryAction" |
|
|
|
|
dialogAction="cancel" |
|
|
|
|
class="red" |
|
|
|
|
@click=${()=>{ |
|
|
|
|
|
|
|
|
|
this.imageFile = null |
|
|
|
|
@click=${()=> { |
|
|
|
|
// this._sendMessage({
|
|
|
|
|
// type: 'image',
|
|
|
|
|
// imageFile: this.imageFile,
|
|
|
|
|
// caption: 'This is a caption'
|
|
|
|
|
// })
|
|
|
|
|
console.log(this.caption); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
${translate("general.close")} |
|
|
|
|
</mwc-button> |
|
|
|
|
${translate("chatpage.cchange9")} |
|
|
|
|
</mwc-button> |
|
|
|
|
</mwc-dialog> |
|
|
|
|
</div> |
|
|
|
|
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}"> |
|
|
|
|
@ -483,7 +589,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> |
|
|
|
|
<iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}> |
|
|
|
|
<iframe id="_chatEditorDOM" 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}> |
|
|
|
|
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`} |
|
|
|
|
@ -539,21 +645,17 @@ class ChatPage extends LitElement {
|
|
|
|
|
` |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
insertImage(file){ |
|
|
|
|
|
|
|
|
|
if(file.type.includes('image')){ |
|
|
|
|
this.imageFile = file |
|
|
|
|
|
|
|
|
|
this.chatEditor.disable(); |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
parentEpml.request('showSnackBar', get("chatpage.cchange28")) |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async firstUpdated() { |
|
|
|
|
|
|
|
|
|
@ -562,8 +664,6 @@ class ChatPage extends LitElement {
|
|
|
|
|
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); |
|
|
|
|
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); |
|
|
|
|
this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM'); |
|
|
|
|
console.log(this.chatMessageInput); |
|
|
|
|
console.log(this.mirrorChatInput.clientHeight); |
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
|
|
if (!this.chatEditor.content.body.matches(':focus')) { |
|
|
|
|
// WARNING: Deprecated methods from KeyBoard Event
|
|
|
|
|
@ -681,12 +781,20 @@ class ChatPage extends LitElement {
|
|
|
|
|
if (changedProperties && changedProperties.has('chatMessageSize')) { |
|
|
|
|
console.log(this.chatMessageSize, "Chat Message Size"); |
|
|
|
|
} |
|
|
|
|
if(changedProperties && changedProperties.has("imageFile")) { |
|
|
|
|
this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption'); |
|
|
|
|
this.chatbarCaption.focus(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
calculateIFrameHeight(height) { |
|
|
|
|
this.iframeHeight = height; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onCaptionChange(e) { |
|
|
|
|
this.caption = e; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
changeLanguage() { |
|
|
|
|
const checkLanguage = localStorage.getItem('qortalLanguage') |
|
|
|
|
|
|
|
|
|
@ -803,14 +911,12 @@ class ChatPage extends LitElement {
|
|
|
|
|
|
|
|
|
|
if (isInitial) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const replacedMessages = await replaceMessagesEdited({ |
|
|
|
|
decodedMessages: decodedMessages, |
|
|
|
|
parentEpml, |
|
|
|
|
isReceipient: isReceipient, |
|
|
|
|
decodeMessageFunc: this.decodeMessage, |
|
|
|
|
_publicKey: this._publicKey |
|
|
|
|
parentEpml, |
|
|
|
|
isReceipient: isReceipient, |
|
|
|
|
decodeMessageFunc: this.decodeMessage, |
|
|
|
|
_publicKey: this._publicKey |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this._messages = replacedMessages.sort(function (a, b) { |
|
|
|
|
@ -818,17 +924,11 @@ class ChatPage extends LitElement {
|
|
|
|
|
- b.timestamp |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// TODO: Determine number of initial messages by screen height...
|
|
|
|
|
this._initialMessages = this._messages |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.messagesRendered = this._initialMessages |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.isLoadingMessages = false |
|
|
|
|
setTimeout(() => this.downElementObserver(), 500) |
|
|
|
|
this._initialMessages = this._messages; |
|
|
|
|
this.messagesRendered = this._initialMessages; |
|
|
|
|
this.isLoadingMessages = false; |
|
|
|
|
setTimeout(() => this.downElementObserver(), 500); |
|
|
|
|
} else { |
|
|
|
|
const replacedMessages = await replaceMessagesEdited({ |
|
|
|
|
decodedMessages: decodedMessages, |
|
|
|
|
@ -838,28 +938,19 @@ class ChatPage extends LitElement {
|
|
|
|
|
_publicKey: this._publicKey |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const renderEachMessage = replacedMessages.map(async(msg)=> { |
|
|
|
|
await this.renderNewMessage(msg) |
|
|
|
|
}) |
|
|
|
|
await Promise.all(renderEachMessage) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this.newMessages = this.newMessages.concat(_newMessages)
|
|
|
|
|
this.messagesRendered = [...this.messagesRendered].sort(function (a, b) { |
|
|
|
|
return a.timestamp |
|
|
|
|
- b.timestamp |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getMessageConfig() { |
|
|
|
|
const textAreaElement = this.shadowRoot.getElementById('messageBox'); |
|
|
|
|
return textAreaElement.value; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
getMessageSize(message){ |
|
|
|
|
try { |
|
|
|
|
const messageText = message; |
|
|
|
|
@ -1031,41 +1122,39 @@ class ChatPage extends LitElement {
|
|
|
|
|
*
|
|
|
|
|
*/ |
|
|
|
|
decodeMessage(encodedMessageObj, isReceipient, _publicKey ) { |
|
|
|
|
let isReceipientVar
|
|
|
|
|
let _publicKeyVar
|
|
|
|
|
let isReceipientVar; |
|
|
|
|
let _publicKeyVar; |
|
|
|
|
try { |
|
|
|
|
isReceipientVar = this.isReceipient === undefined ? isReceipient : this.isReceipient; |
|
|
|
|
_publicKeyVar = this._publicKey === undefined ? _publicKey : this._publicKey |
|
|
|
|
_publicKeyVar = this._publicKey === undefined ? _publicKey : this._publicKey; |
|
|
|
|
} catch (error) { |
|
|
|
|
isReceipientVar = isReceipient |
|
|
|
|
_publicKeyVar = _publicKey |
|
|
|
|
isReceipientVar = isReceipient; |
|
|
|
|
_publicKeyVar = _publicKey; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let decodedMessageObj = {} |
|
|
|
|
let decodedMessageObj = {}; |
|
|
|
|
|
|
|
|
|
if (isReceipientVar === true) { |
|
|
|
|
// direct chat
|
|
|
|
|
if (encodedMessageObj.isEncrypted === true && _publicKeyVar.hasPubKey === true && encodedMessageObj.data) { |
|
|
|
|
let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, _publicKeyVar.key, encodedMessageObj.reference) |
|
|
|
|
decodedMessageObj = { ...encodedMessageObj, decodedMessage } |
|
|
|
|
let decodedMessage = window.parent.decryptChatMessage(encodedMessageObj.data, window.parent.reduxStore.getState().app.selectedAddress.keyPair.privateKey, _publicKeyVar.key, encodedMessageObj.reference); |
|
|
|
|
decodedMessageObj = { ...encodedMessageObj, decodedMessage }; |
|
|
|
|
} else if (encodedMessageObj.isEncrypted === false && encodedMessageObj.data) { |
|
|
|
|
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) |
|
|
|
|
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) |
|
|
|
|
decodedMessageObj = { ...encodedMessageObj, decodedMessage } |
|
|
|
|
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data); |
|
|
|
|
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray); |
|
|
|
|
decodedMessageObj = { ...encodedMessageObj, decodedMessage }; |
|
|
|
|
} else { |
|
|
|
|
|
|
|
|
|
decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" } |
|
|
|
|
decodedMessageObj = { ...encodedMessageObj, decodedMessage: "Cannot Decrypt Message!" }; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} else { |
|
|
|
|
// group chat
|
|
|
|
|
|
|
|
|
|
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data) |
|
|
|
|
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray) |
|
|
|
|
decodedMessageObj = { ...encodedMessageObj, decodedMessage } |
|
|
|
|
let bytesArray = window.parent.Base58.decode(encodedMessageObj.data); |
|
|
|
|
let decodedMessage = new TextDecoder('utf-8').decode(bytesArray); |
|
|
|
|
decodedMessageObj = { ...encodedMessageObj, decodedMessage }; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return decodedMessageObj |
|
|
|
|
return decodedMessageObj; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
async fetchChatMessages(chatId) { |
|
|
|
|
@ -1321,7 +1410,7 @@ class ChatPage extends LitElement {
|
|
|
|
|
} |
|
|
|
|
const blob = b64toBlob(str, 'image/png'); |
|
|
|
|
|
|
|
|
|
await new Promise(resolve =>{ |
|
|
|
|
await new Promise(resolve => { |
|
|
|
|
new Compressor( blob, { |
|
|
|
|
quality: 0.6, |
|
|
|
|
maxWidth: 500, |
|
|
|
|
@ -1342,24 +1431,24 @@ class ChatPage extends LitElement {
|
|
|
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await publishData({ |
|
|
|
|
registeredName: userName , |
|
|
|
|
file : compressedFile , |
|
|
|
|
service: 'IMAGE', |
|
|
|
|
identifier : identifier, |
|
|
|
|
parentEpml, |
|
|
|
|
metaData: undefined, |
|
|
|
|
uploadType: 'file', |
|
|
|
|
selectedAddress: this.selectedAddress |
|
|
|
|
}) |
|
|
|
|
await publishData({ |
|
|
|
|
registeredName: userName, |
|
|
|
|
file : compressedFile, |
|
|
|
|
service: 'IMAGE', |
|
|
|
|
identifier : identifier, |
|
|
|
|
parentEpml, |
|
|
|
|
metaData: undefined, |
|
|
|
|
uploadType: 'file', |
|
|
|
|
selectedAddress: this.selectedAddress |
|
|
|
|
}) |
|
|
|
|
} catch (error) { |
|
|
|
|
console.error(error) |
|
|
|
|
console.error(error); |
|
|
|
|
} |
|
|
|
|
typeMessage = 'edit'; |
|
|
|
|
let chatReference = outSideMsg.editedMessageObj.reference; |
|
|
|
|
|
|
|
|
|
if(outSideMsg.editedMessageObj.chatReference){ |
|
|
|
|
chatReference = outSideMsg.editedMessageObj.chatReference |
|
|
|
|
chatReference = outSideMsg.editedMessageObj.chatReference; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let message = ""; |
|
|
|
|
@ -1389,9 +1478,9 @@ class ChatPage extends LitElement {
|
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
const id = this.uid(); |
|
|
|
|
const identifier = `qchat_${id}` |
|
|
|
|
let compressedFile = '' |
|
|
|
|
await new Promise(resolve =>{ |
|
|
|
|
const identifier = `qchat_${id}`; |
|
|
|
|
let compressedFile = ''; |
|
|
|
|
await new Promise(resolve => { |
|
|
|
|
new Compressor( outSideMsg.imageFile, { |
|
|
|
|
quality: .6, |
|
|
|
|
maxWidth: 500, |
|
|
|
|
@ -1408,41 +1497,38 @@ class ChatPage extends LitElement {
|
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const fileSize = compressedFile.size |
|
|
|
|
if(fileSize > 5000000){ |
|
|
|
|
parentEpml.request('showSnackBar', get("chatpage.cchange26")) |
|
|
|
|
const fileSize = compressedFile.size; |
|
|
|
|
if (fileSize > 5000000) { |
|
|
|
|
parentEpml.request('showSnackBar', get("chatpage.cchange26")); |
|
|
|
|
this.isLoading = false; |
|
|
|
|
this.chatEditor.enable(); |
|
|
|
|
return |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
console.log({userName, identifier }) |
|
|
|
|
|
|
|
|
|
await publishData({ |
|
|
|
|
registeredName: userName, |
|
|
|
|
file : compressedFile, |
|
|
|
|
service: 'IMAGE', |
|
|
|
|
identifier : identifier, |
|
|
|
|
parentEpml, |
|
|
|
|
metaData: undefined, |
|
|
|
|
uploadType: 'file', |
|
|
|
|
selectedAddress: this.selectedAddress |
|
|
|
|
}) |
|
|
|
|
const messageObject = { |
|
|
|
|
messageText: outSideMsg.caption, |
|
|
|
|
images: [{ |
|
|
|
|
service: "IMAGE", |
|
|
|
|
name: userName, |
|
|
|
|
identifier: identifier |
|
|
|
|
}], |
|
|
|
|
isImageDeleted: false, |
|
|
|
|
repliedTo: '', |
|
|
|
|
version: 1 |
|
|
|
|
} |
|
|
|
|
const stringifyMessageObject = JSON.stringify(messageObject) |
|
|
|
|
this.sendMessage(stringifyMessageObject, typeMessage); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
await publishData({ |
|
|
|
|
registeredName: userName, |
|
|
|
|
file : compressedFile, |
|
|
|
|
service: 'IMAGE', |
|
|
|
|
identifier : identifier, |
|
|
|
|
parentEpml, |
|
|
|
|
metaData: undefined, |
|
|
|
|
uploadType: 'file', |
|
|
|
|
selectedAddress: this.selectedAddress |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const messageObject = { |
|
|
|
|
messageText: outSideMsg.caption, |
|
|
|
|
images: [{ |
|
|
|
|
service: "IMAGE", |
|
|
|
|
name: userName, |
|
|
|
|
identifier: identifier |
|
|
|
|
}], |
|
|
|
|
isImageDeleted: false, |
|
|
|
|
repliedTo: '', |
|
|
|
|
version: 1 |
|
|
|
|
} |
|
|
|
|
const stringifyMessageObject = JSON.stringify(messageObject) |
|
|
|
|
this.sendMessage(stringifyMessageObject, typeMessage); |
|
|
|
|
|
|
|
|
|
} else if(outSideMsg && outSideMsg.type === 'reaction'){ |
|
|
|
|
typeMessage = 'edit' |
|
|
|
|
let chatReference = outSideMsg.editedMessageObj.reference |
|
|
|
|
@ -1857,7 +1943,6 @@ class ChatPage extends LitElement {
|
|
|
|
|
for (let i = 0; i < events.length; i++) { |
|
|
|
|
const event = events[i] |
|
|
|
|
editor.content.body.addEventListener(event, async function (e) { |
|
|
|
|
console.log("hello world12") |
|
|
|
|
if (e.type === 'click') { |
|
|
|
|
e.preventDefault(); |
|
|
|
|
e.stopPropagation(); |
|
|
|
|
@ -1900,12 +1985,9 @@ class ChatPage extends LitElement {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (e.type === 'keydown') { |
|
|
|
|
console.log("key pressed"); |
|
|
|
|
console.log(editorConfig.getMessageConfig(), "this is the chat input value"); |
|
|
|
|
console.log(editorConfig.editableElement.contentDocument.body.scrollHeight, "scroll height") |
|
|
|
|
console.log(editorConfig.mirrorElement.clientHeight, "client height") |
|
|
|
|
editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight); |
|
|
|
|
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML); |
|
|
|
|
|
|
|
|
|
// Handle Enter
|
|
|
|
|
if (e.keyCode === 13 && !e.shiftKey) { |
|
|
|
|
|
|
|
|
|
@ -1985,7 +2067,6 @@ class ChatPage extends LitElement {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const editorConfig = { |
|
|
|
|
getMessageConfig: this.getMessageConfig, |
|
|
|
|
getMessageSize: this.getMessageSize, |
|
|
|
|
calculateIFrameHeight: this.calculateIFrameHeight, |
|
|
|
|
mirrorElement: this.mirrorChatInput, |
|
|
|
|
|
Justin Ferrari
2 years ago