diff --git a/qortal-ui-core/package.json b/qortal-ui-core/package.json index e2852edb..16b78477 100644 --- a/qortal-ui-core/package.json +++ b/qortal-ui-core/package.json @@ -59,11 +59,11 @@ "@rollup/plugin-node-resolve": "15.0.1", "@rollup/plugin-replace": "5.0.2", "@rollup/plugin-terser": "0.4.0", - "@vaadin/button": "23.3.6", - "@vaadin/grid": "23.3.6", - "@vaadin/icons": "23.3.6", - "@vaadin/password-field": "23.3.6", - "@vaadin/tooltip": "23.3.6", + "@vaadin/button": "23.3.7", + "@vaadin/grid": "23.3.7", + "@vaadin/icons": "23.3.7", + "@vaadin/password-field": "23.3.7", + "@vaadin/tooltip": "23.3.7", "asmcrypto.js": "2.3.2", "bcryptjs": "2.4.3", "epml": "0.3.3", @@ -83,4 +83,4 @@ "engines": { "node": ">=16.17.1" } -} \ No newline at end of file +} diff --git a/qortal-ui-plugins/package.json b/qortal-ui-plugins/package.json index f2b3b44c..d9d0e0d9 100644 --- a/qortal-ui-plugins/package.json +++ b/qortal-ui-plugins/package.json @@ -71,11 +71,11 @@ "@rollup/plugin-node-resolve": "15.0.1", "@rollup/plugin-replace": "5.0.2", "@rollup/plugin-terser": "0.4.0", - "@vaadin/avatar": "23.3.6", - "@vaadin/button": "23.3.6", - "@vaadin/grid": "23.3.6", - "@vaadin/icons": "23.3.6", - "@vaadin/tooltip": "23.3.6", + "@vaadin/avatar": "23.3.7", + "@vaadin/button": "23.3.7", + "@vaadin/grid": "23.3.7", + "@vaadin/icons": "23.3.7", + "@vaadin/tooltip": "23.3.7", "epml": "0.3.3", "file-saver": "2.0.5", "highcharts": "10.3.3", @@ -86,9 +86,10 @@ "rollup-plugin-node-globals": "1.4.0", "rollup-plugin-progress": "1.1.2", "rollup-plugin-web-worker-loader": "1.6.1", - "passive-events-support": "1.0.33" + "passive-events-support": "1.0.33", + "axios": "1.3.2" }, "engines": { "node": ">=16.17.1" } -} \ No newline at end of file +} diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index ca5f4963..fe429bfd 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -348,10 +348,12 @@ class MessageTemplate extends LitElement { } async downloadAttachment(attachment) { + const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; + const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; try{ - const res = await axios.get(`${nodeUrl}/arbitrary/QCHAT_ATTACHMENT/${attachment.name}/${attachment.identifier}`, { responseType: 'blob' }) + axios.get(`${nodeUrl}/arbitrary/QCHAT_ATTACHMENT/${attachment.name}/${attachment.identifier}?apiKey=${myNode.apiKey}`, { responseType: 'blob'}) .then(response =>{ let filename = attachment.attachmentName; let blob = new Blob([response.data], { type:"application/octet-stream" }); diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 54fcbcc6..0ca49c54 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -15,9 +15,10 @@ class ChatTextEditor extends LitElement { isLoadingMessages: { type: Boolean }, _sendMessage: { attribute: false }, placeholder: { type: String }, - imageFile: { type: Object }, attachment: { type: Object }, insertFile: { attribute: false }, + imageFile: { type: Object }, + insertImage: { attribute: false }, iframeHeight: { type: Number }, editedMessageObj: { type: Object }, repliedToMessageObj: {type: Object}, @@ -166,32 +167,30 @@ class ChatTextEditor extends LitElement { color: var(--black); padding: 0px 10px; height: 100%; - display: flex; - align-items: center; + display: flex; + align-items: center; } - .element::-webkit-scrollbar-track { - background-color: whitesmoke; - border-radius: 7px; - } - - .element::-webkit-scrollbar { - width: 6px; - border-radius: 7px; - background-color: whitesmoke; - } - - .element::-webkit-scrollbar-thumb { - background-color: rgb(180, 176, 176); - border-radius: 7px; - transition: all 0.3s ease-in-out; - } - - .element::-webkit-scrollbar-thumb:hover { - background-color: rgb(148, 146, 146); - cursor: pointer; - } - + background-color: whitesmoke; + border-radius: 7px; + } + + .element::-webkit-scrollbar { + width: 6px; + border-radius: 7px; + background-color: whitesmoke; + } + + .element::-webkit-scrollbar-thumb { + background-color: rgb(180, 176, 176); + border-radius: 7px; + transition: all 0.3s ease-in-out; + } + + .element::-webkit-scrollbar-thumb:hover { + background-color: rgb(148, 146, 146); + cursor: pointer; + } .ProseMirror:focus { outline: none; } @@ -200,45 +199,57 @@ class ChatTextEditor extends LitElement { background-color: var(--white) } - .ProseMirror > * + * { - margin-top: 0.75em; - outline: none; + .ProseMirror > * + * { + margin-top: 0.75em; + outline: none; } - .ProseMirror ul, - ol { - padding: 0 1rem; + .ProseMirror ul, + ol { + padding: 0 1rem; + } + + .ProseMirror h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 1.1; + } + + .ProseMirror code { + background-color: rgba(#616161, 0.1); + color: #616161; + } + + .ProseMirror pre { + background: #0D0D0D; + color: #FFF; + font-family: 'JetBrainsMono', monospace; + padding: 0.75rem 1rem; + border-radius: 0.5rem; + white-space: pre-wrap; + } + .ProseMirror pre code { + color: inherit; + padding: 0; + background: none; + font-size: 0.8rem; } - .ProseMirror h1, - h2, - h3, - h4, - h5, - h6 { - line-height: 1.1; - } - .ProseMirror code { - background-color: rgba(#616161, 0.1); - color: #616161; - } + .ProseMirror img { + width: 1.7em; + height: 1.5em; + margin: 0px; - .ProseMirror pre { - background: #0D0D0D; - color: #FFF; - font-family: 'JetBrainsMono', monospace; - padding: 0.75rem 1rem; - border-radius: 0.5rem; - white-space: pre-wrap; - } - .ProseMirror pre code { - color: inherit; - padding: 0; - background: none; - font-size: 0.8rem; - } + } + .ProseMirror blockquote { + padding-left: 1rem; + border-left: 2px solid rgba(#0D0D0D, 0.1); + } .ProseMirror hr { border: none; @@ -270,12 +281,35 @@ class ChatTextEditor extends LitElement { } - + .chatbar-buttons { + margin-bottom: 5px; + flex-shrink: 0; + } - .ProseMirror blockquote { - padding-left: 1rem; - border-left: 2px solid rgba(#0D0D0D, 0.1); - } + .show-chatbar-buttons { + display: flex; + align-items: center; + justify-content: center; + } + :host(:hover) .chatbar-button-single { + + display: flex; + align-items: center; + justify-content: center; + } + .ProseMirror p.is-editor-empty:first-child::before { + color: #adb5bd; + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; +} +.ProseMirror p { + font-size: 18px; + margin-block-start: 0px; + margin-block-end: 0px; + overflow-wrap: anywhere; +} .ProseMirror { width: 100%; @@ -283,64 +317,28 @@ class ChatTextEditor extends LitElement { word-break: break-word; } - .chatbar-buttons { - margin-bottom: 5px; - flex-shrink: 0; - } +.ProseMirror mark { + background-color: #ffe066; + border-radius: 0.25em; + box-decoration-break: clone; + padding: 0.125em 0; +} - .show-chatbar-buttons { - display: flex; - align-items: center; - justify-content: center; - } - :host(:hover) .chatbar-button-single { - - display: flex; - align-items: center; - justify-content: center; - } - .ProseMirror p.is-editor-empty:first-child::before { - color: #adb5bd; - content: attr(data-placeholder); - float: left; - height: 0; - pointer-events: none; - } - .ProseMirror p { - font-size: 18px; - margin-block-start: 0px; - margin-block-end: 0px; - overflow-wrap: anywhere; - } +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; - .ProseMirror { - width: 100%; - box-sizing: border-box; - word-break: break-all; - } - - .ProseMirror mark { - background-color: #ffe066; - border-radius: 0.25em; - box-decoration-break: clone; - padding: 0.125em 0; - } - - .material-icons { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 24px; - /* Preferred icon size */ - display: inline-block; - line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; - - } +} .material-symbols-outlined { font-family: 'Material Symbols Outlined'; @@ -530,7 +528,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b html`
${this.isLoading === false ? html` @@ -560,66 +558,6 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b ` : html``}
- -
- - ${this.editedMessageObj ? ( - html` -
- ${this.isLoading === false ? html` - { - this.sendMessageFunc(); - }} - > - - ` : - html` - - `} -
- ` - ) : - html` -
- ${this.isLoading === false ? html` - send-icon { - this.sendMessageFunc(); - }} - /> - ` : - html` - - `} -
- ` - } - - ${this.chatMessageSize >= 750 ? - html` -
-
- ${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`} -
-
- ` : - html``} - ` } @@ -630,7 +568,14 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b } } + + + + async firstUpdated() { + + + window.addEventListener('storage', () => { const checkTheme = localStorage.getItem('qortalTheme'); const chatbar = this.shadowRoot.querySelector('.element') @@ -647,6 +592,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); + this.chatMessageInput = this.shadowRoot.querySelector('.element') this.emojiPicker = new EmojiPicker({ style: "twemoji", @@ -688,6 +634,10 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b if (changedProperties && changedProperties.has('placeholder') && this.updatePlaceholder && this.editor) { this.updatePlaceholder(this.editor, this.placeholder ) } + + if (changedProperties && changedProperties.has("imageFile")) { + this.chatMessageInput = "newChat"; + } } shouldUpdate(changedProperties) { @@ -709,7 +659,8 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b getMessageSize(message){ try { - const trimmedMessage = message; + + const trimmedMessage = message let messageObject = {}; if (this.repliedToMessageObj) { @@ -729,37 +680,37 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage); message = parsedMessageObj; } catch (error) { - message = this.messageObj.decodedMessage; + message = this.messageObj.decodedMessage } messageObject = { ...message, messageText: trimmedMessage, } - } else if (this.imageFile && this.iframeId === 'newChat') { + } else if(this.imageFile && this.iframeId === 'newChat') { messageObject = { messageText: trimmedMessage, images: [{ service: "QCHAT_IMAGE", name: '123456789123456789123456789', identifier: '123456' - }], + }], repliedTo: '', version: 2 }; } else if (this.attachment && this.iframeId === 'newAttachmentChat') { - messageObject = { - messageText: trimmedMessage, - attachments: [{ - service: "QCHAT_ATTACHMENT", - name: '123456789123456789123456789', - identifier: '123456', - attachmentName: "123456789123456789123456789", - attachmentSize: "123456" - }], - repliedTo: '', - version: 2 - }; - } else { + messageObject = { + messageText: trimmedMessage, + attachments: [{ + service: "QCHAT_ATTACHMENT", + name: '123456789123456789123456789', + identifier: '123456', + attachmentName: "123456789123456789123456789", + attachmentSize: "123456" + }], + repliedTo: '', + version: 2 + }; + } else { messageObject = { messageText: trimmedMessage, images: [''], @@ -767,6 +718,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b version: 2 }; } + const stringified = JSON.stringify(messageObject); const size = new Blob([stringified]).size; this.chatMessageSize = size; @@ -775,7 +727,8 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b } } + } -window.customElements.define("chat-text-editor", ChatTextEditor) +window.customElements.define("chat-text-editor", ChatTextEditor) \ No newline at end of file