fix ui

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/button": "23.3.7",
-		"@vaadin/grid": "23.3.6",
+		"@vaadin/grid": "23.3.7",
-		"@vaadin/icons": "23.3.6",
+		"@vaadin/icons": "23.3.7",
-		"@vaadin/password-field": "23.3.6",
+		"@vaadin/password-field": "23.3.7",
-		"@vaadin/tooltip": "23.3.6",
+		"@vaadin/tooltip": "23.3.7",
 		"asmcrypto.js": "2.3.2",
 		"bcryptjs": "2.4.3",
 		"epml": "0.3.3",

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/avatar": "23.3.7",
-		"@vaadin/button": "23.3.6",
+		"@vaadin/button": "23.3.7",
-		"@vaadin/grid": "23.3.6",
+		"@vaadin/grid": "23.3.7",
-		"@vaadin/icons": "23.3.6",
+		"@vaadin/icons": "23.3.7",
-		"@vaadin/tooltip": "23.3.6",
+		"@vaadin/tooltip": "23.3.7",
 		"epml": "0.3.3",
 		"file-saver": "2.0.5",
 		"highcharts": "10.3.3",
@@ -86,7 +86,8 @@
 		"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"

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" });

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},
@@ -169,7 +170,6 @@ class ChatTextEditor extends LitElement {
     display: flex;
     align-items: center;
         }
-        
         .element::-webkit-scrollbar-track {
                         background-color: whitesmoke;
                         border-radius: 7px;
@@ -191,7 +191,6 @@ class ChatTextEditor extends LitElement {
                         background-color: rgb(148, 146, 146);
                         cursor: pointer;
                     } 
-
         .ProseMirror:focus {
             outline: none;
         }
@@ -240,6 +239,18 @@ class ChatTextEditor extends LitElement {
     }
 
 
+  .ProseMirror img {
+    width: 1.7em;
+    height: 1.5em;
+    margin: 0px;
+
+  }
+
+  .ProseMirror blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
   .ProseMirror hr {
     border: none;
     border-top: 2px solid rgba(#0D0D0D, 0.1);
@@ -270,19 +281,6 @@ class ChatTextEditor extends LitElement {
    
   }
 
-    
-
-    .ProseMirror blockquote {
-        padding-left: 1rem;
-        border-left: 2px solid rgba(#0D0D0D, 0.1);
-    }
-
-.ProseMirror {
-    width: 100%;
-    box-sizing: border-box;
-    word-break: break-word;
-}
-
   .chatbar-buttons {
     margin-bottom: 5px;
     flex-shrink: 0;
@@ -316,7 +314,7 @@ class ChatTextEditor extends LitElement {
 .ProseMirror {
     width: 100%;
     box-sizing: border-box;
-        word-break: break-all;
+    word-break: break-word;
 }
 
 .ProseMirror mark {
@@ -530,7 +528,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
                     html`
                         <div 
                         style="margin-bottom: 10px;
-                        ${this.iframeId === 'newChat'
+                        ${(this.iframeId === 'newChat'  || this.iframeId === "newAttachmentChat")
                         ? 'display: none;' 
                         : 'display: flex;'}">
                             ${this.isLoading === false ? html`
@@ -559,66 +557,6 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
                         </div>
                         ` : 
                     html``}
-            </div>
-            <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
-            <div id=${this.iframeId}
-            class=${["element", this.iframeId === "privateMessage" ? "privateMessageMargin" : ""].join(" ")}
-            ></div>
-            <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
-                ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
-            </button>
-            ${this.editedMessageObj ? (
-                html`
-                <div style="margin-bottom: 10px">
-                    ${this.isLoading === false ? html`
-                        <vaadin-icon
-                            class="checkmark-icon"
-                            icon="vaadin:check"
-                            slot="icon"
-                            @click=${() => {
-                                this.sendMessageFunc();
-                            }}
-                            >
-                        </vaadin-icon>
-                        ` :
-                        html`
-                        <paper-spinner-lite active></paper-spinner-lite>
-                    `}
-                </div>
-                    `
-            ) : 
-                html`
-                    <div 
-                    style="margin-bottom: 10px;
-                    ${this.iframeId === 'newChat' || this.iframeId === "newAttachmentChat"
-                    ? 'display: none;' 
-                    : 'display: flex;'}">
-                        ${this.isLoading === false ? html`
-                            <img 
-                            src="/img/qchat-send-message-icon.svg" 
-                            alt="send-icon" 
-                            class="send-icon" 
-                            @click=${() => {
-                                this.sendMessageFunc();
-                            }} 
-                            />
-                        ` : 
-                        html`
-                            <paper-spinner-lite active></paper-spinner-lite>
-                    `}
-                    </div>
-                    `
-                }
-            </div>
-                ${this.chatMessageSize >= 750 ? 
-                    html`
-                    <div class="message-size-container" style=${this.imageFile && "margin-top: 10px;"}>
-                        <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>
 		`
 	}
@@ -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,7 +680,7 @@ 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,
@@ -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;
@@ -776,6 +728,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
         
     }
 
+   
 }
 
 window.customElements.define("chat-text-editor", ChatTextEditor)