@innovastudio/contentbox 1.5.73 → 1.5.75

package/public/contentbox/contentbox.esm.js

@@ -11104,7 +11104,7 @@ class EditBox {
     // '</div>';
 
     html += `
-        <form class="is-cover-upload-central" data-tooltip-top title="${out('Background Image')}" data-title="${out('Background Image')}" style="opacity:1;position:absolute;width:40px;height:40px;" target="target-upload-cover" method="post" action="${this.builder.coverImageHandler}" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">
+        <form class="is-cover-upload-central" data-tooltip-top title="${out('Change Background')}" data-title="${out('Change Background')}" style="opacity:1;position:absolute;width:40px;height:40px;" target="target-upload-cover" method="post" action="${this.builder.coverImageHandler}" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">
             <input type="file" tabindex="-1" class="input-file-cover-central" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>
             <input tabindex="-1" class="input-custom-value-central" name="hidcustomval" type="hidden" value="${this.builder.customval}" />
         </form>
@@ -11134,7 +11134,7 @@ class EditBox {
     html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:25px">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div style="display:none;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button>' + '<button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button>' + '<button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button>' + '<button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button>' + '<button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button>' + '<button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button>' + '<button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button>' + '<button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-spacing" data-value="">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;padding-bottom:0;">' + out('Content Spacing') + ':</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:10px;padding-bottom: 3px;">' + out('Top') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-topspacing on" data-value="0" style="width:40px">0</button>' + '<button title="10" class="cmd-box-content-topspacing" data-value="10" style="width:40px">10</button>' + '<button title="20" class="cmd-box-content-topspacing" data-value="20" style="width:40px">20</button>' + '<button title="30" class="cmd-box-content-topspacing" data-value="30" style="width:40px">30</button>' + '<button title="40" class="cmd-box-content-topspacing" data-value="40" style="width:40px">40</button>' + '<button title="50" class="cmd-box-content-topspacing" data-value="50" style="width:40px">50</button>' + '<button title="60" class="cmd-box-content-topspacing" data-value="60" style="width:40px">60</button>' + // '<button title="80" class="cmd-box-content-topspacing" data-value="80" style="width:40px">80</button>' +
     '<button title="' + out('Not Set') + '" class="cmd-box-content-topspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:10px;padding-bottom: 3px;">' + out('Bottom') + ':</div>' + '<div style="display:flex">' + '<button title="0" class="cmd-box-content-bottomspacing on" data-value="0" style="width:40px;">0</button>' + '<button title="10" class="cmd-box-content-bottomspacing" data-value="10" style="width:40px">10</button>' + '<button title="20" class="cmd-box-content-bottomspacing" data-value="20" style="width:40px">20</button>' + '<button title="30" class="cmd-box-content-bottomspacing" data-value="30" style="width:40px">30</button>' + '<button title="40" class="cmd-box-content-bottomspacing" data-value="40" style="width:40px">40</button>' + '<button title="50" class="cmd-box-content-bottomspacing" data-value="50" style="width:40px">50</button>' + '<button title="60" class="cmd-box-content-bottomspacing" data-value="60" style="width:40px">60</button>' + // '<button title="80" class="cmd-box-content-bottomspacing" data-value="80" style="width:40px">80</button>' +
     '<button title="' + out('Not Set') + '" class="cmd-box-content-bottomspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>';
-    html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') +
+    html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' +
     /*
     '<label for="rdoKenBurns" style="display:flex;align-items:center;margin-bottom:10px;">' +
         '<input type="radio" id="rdoKenBurns" name="boxbganim" value="1" style="margin: 0 10px 0 5px;">' +
@@ -12421,13 +12421,7 @@ class EditBox {
 
         this.builder.settings.onChange();
       });
-    }); //added by jack
-
-    const btnBoxSelectAsset = modalEditBox.querySelector('.cmd-box-selectasset');
-    if (btnBoxSelectAsset) btnBoxSelectAsset.addEventListener('click', () => {
-      this.boxSelectAsset();
-    }); //end of added by jack
-
+    });
     const selBoxAnimate = modalEditBox.querySelector('.cmd-box-animate');
     selBoxAnimate.addEventListener('change', () => {
       const activeBox = this.builder.activeBox;
@@ -14294,6 +14288,8 @@ class EditBox {
       activeBox.classList.remove('box-active');
     }, 1000);
     modalEditBox.style.display = 'flex';
+    document.body.classList.add('box-modal-open'); // see .box-modal-open (gives outline to div.is-container when Box Settings is opened)
+
     /*
     // Experimental
     modalEditBox.style.display = 'flex';
@@ -14992,23 +14988,7 @@ class EditBox {
     }
 
     return false;
-  } //added by jack
-
-
-  boxSelectAsset() {
-    let activeBox = this.builder.activeBox;
-    let overlay = activeBox.querySelector('.is-overlay');
-    if (!overlay) return;
-    let overlayBg = overlay.querySelector('.is-overlay-bg');
-    if (!overlayBg) return;
-
-    if (this.builder.settings.onCoverImageSelectClick) {
-      this.builder.settings.onCoverImageSelectClick(overlayBg);
-    }
-
-    return false;
-  } //end of added by jack
-
+  }
 
   boxImage(url, err) {
     // Remove Waiting Indicator
@@ -20691,13 +20671,13 @@ class Util$1 {
     localStorage.removeItem('_dictation');
     localStorage.removeItem('_mic');
     localStorage.removeItem('_autosendcommand');
-    localStorage.removeItem('_sampleshown');
     localStorage.removeItem('_disclaimershown');
     localStorage.removeItem('_temp');
     localStorage.removeItem('_top_p');
     localStorage.removeItem('_autosend_delay');
     localStorage.removeItem('_auto_editblock');
     localStorage.removeItem('_command_lang');
+    localStorage.removeItem('_ai_panel_open');
 
     //NOT USED
     localStorage.removeItem('_scrollableeditor');
@@ -20708,6 +20688,7 @@ class Util$1 {
     localStorage.removeItem('_advancedhtmleditor');
     localStorage.removeItem('_hidecolhtmleditor');
     localStorage.removeItem('_hiderowhtmleditor');
+    localStorage.removeItem('_sampleshown');
   }
 
   // source: http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div */
@@ -29541,9 +29522,9 @@ class HtmlUtil {
             </div>
 
             <div class="is-modal viewhtmlmonaco" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width: 55vw;padding:0">
+                <div class="is-modal-content" style="width:${this.builder.blockCodeEditorWidth};max-width:${this.builder.blockCodeEditorMaxWidth};padding:0">
                     <textarea style="position:absolute;display:none;"></textarea>
-                    <div class="input-code-editor" style="width:100%;height:65vh;"></div>
+                    <div class="input-code-editor" style="width:100%;height:${this.builder.blockCodeEditorHeight};"></div>
                     <div class="is-modal-footer" style="display:flex;justify-content:flex-end;border-top:1px solid ${this.builder.styleSeparatorColor};">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                         <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -29552,8 +29533,8 @@ class HtmlUtil {
             </div>
 
             <div class="is-modal viewhtmlexternal" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width: 55vw;padding:0">
-                    <div class="input-code-editor" style="width:100%;height:65vh;"></div>
+                <div class="is-modal-content" style="width:${this.builder.codeEditorWidth};max-width:${this.builder.codeEditorMaxWidth};padding:0">
+                    <div class="input-code-editor" style="width:100%;height:${this.builder.codeEditorHeight};"></div>
                     <div class="is-modal-footer" style="display:flex;justify-content:flex-end;border-top:1px solid ${this.builder.styleSeparatorColor};">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                         <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -29920,6 +29901,16 @@ class HtmlUtil {
     this.builder.codeEditorArea = area;
     let codeEditor = viewhtml.querySelector('.input-code-editor');
     codeEditor.style.opacity = '';
+    let modelContent = viewhtml.querySelector('.is-modal-content');
+    if (mode === 'full') {
+      modelContent.style.width = this.builder.codeEditorWidth;
+      modelContent.style.maxWidth = this.builder.codeEditorMaxWidth;
+      codeEditor.style.height = this.builder.codeEditorHeight;
+    } else {
+      modelContent.style.width = this.builder.blockCodeEditorWidth;
+      modelContent.style.maxWidth = this.builder.blockCodeEditorMaxWidth;
+      codeEditor.style.height = this.builder.blockCodeEditorHeight;
+    }
   }
   fromViewToActual(html) {
     for (var key in hash$1) {
@@ -31023,10 +31014,6 @@ const prepareSvgIcons = builder => {
                 <path d="M4 12h4"></path>
                 <path d="M4 18h4"></path>
             </symbol>
-            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
-            </symbol>
             <symbol id="icon-folder-media" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
@@ -31095,6 +31082,23 @@ const prepareSvgIcons = builder => {
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                 <path d="M20.2 20.2l1.8 1.8"></path>
             </symbol>
+
+            <symbol id="icon-folder-old" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
+            </symbol>
+            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M20.2 20.2l1.8 1.8"></path>
+            </symbol>
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M20.2 20.2l1.8 1.8"></path>
+            </symbol>
             
             </defs>
         </svg>`;
@@ -64688,6 +64692,7 @@ class Image$1 {
                         <input title="${util.out('Change Image')}" data-title="${util.out('Change Image')}" id="fileEmbedImage" type="file" accept="image/*" style="position:absolute;top:-20px;left:0;width:40px;height:60px;opacity: 0;cursor: pointer;"/>
                     </div>
                     <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-link"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#fff"><use xlink:href="#icon-folder2"></use></svg></button> 
                     <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-android-create"></use></svg></button>
                 </div>
                 <div id="divImageProgress">
@@ -64775,13 +64780,13 @@ class Image$1 {
                 </div>
 
                 <div class="is-modal imageselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                    <div style="max-width:${this.builder.imageSelectWidth};height:${this.builder.imageSelectHeight};padding:0;">
+                    <div style="width:${this.builder.imageSelectWidth};max-width:${this.builder.imageSelectMaxWidth};height:${this.builder.imageSelectHeight};padding:0;">
                         <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                     </div>
                 </div>
 
                 <div class="is-modal mediaselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                    <div style="max-width:${this.builder.mediaSelectWidth};height:${this.builder.mediaSelectHeight};padding:0;">
+                    <div style="width:${this.builder.mediaSelectWidth};max-width:${this.builder.mediaSelectMaxWidth};height:${this.builder.mediaSelectHeight};padding:0;">
                         <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                     </div>
                 </div>
@@ -65204,6 +65209,37 @@ class Image$1 {
         util.hideModal(modalImageLink);
         this.builder.elmTool.refresh();
       });
+      const btnOpenAsset = imageTool.querySelector('.open-asset');
+      if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect) {
+        btnOpenAsset.style.display = 'block';
+        dom.addEventListener(btnOpenAsset, 'click', () => {
+          let img = this.builder.activeImage;
+          let currentSrc = img ? img.getAttribute('src') : '';
+          this.builder.openImageSelect(src => {
+            this.builder.uo.saveForUndo();
+            let img = this.builder.activeImage;
+            img.setAttribute('src', src);
+            setTimeout(() => {
+              img.click();
+              let divImageResizer = document.querySelector('#divImageResizer');
+              if (divImageResizer) divImageResizer.click();
+              setTimeout(() => {
+                img.click();
+                let divImageResizer = document.querySelector('#divImageResizer');
+                if (divImageResizer) divImageResizer.click();
+              }, 600);
+            }, 10);
+
+            //Trigger Change event
+            this.builder.opts.onChange();
+
+            //Trigger Render event
+            this.builder.opts.onRender();
+          }, currentSrc);
+        });
+      } else {
+        btnOpenAsset.style.display = 'none';
+      }
 
       // Select image (opens Asset Manager plugin or custom dialog)
       let divImageSrc = modalImageLink.querySelector('.image-src');
@@ -67825,12 +67861,12 @@ class Hyperlink {
             </div>
             
             <div class="is-modal fileselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width:${this.builder.fileSelectWidth};height:${this.builder.fileSelectHeight};padding:0;">
+                <div class="is-modal-content" style="width:${this.builder.fileSelectWidth};max-width:${this.builder.fileSelectMaxWidth};height:${this.builder.fileSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
             <div class="is-modal otherselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width:${this.builder.otherSelectWidth};height:${this.builder.otherSelectHeight};padding:0;">
+                <div class="is-modal-content" style="width:${this.builder.otherSelectWidth};max-width:${this.builder.otherSelectMaxWidth};height:${this.builder.otherSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -69943,7 +69979,7 @@ class Video {
             </div>
 
             <div class="is-modal videoselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div style="max-width:${this.builder.videoSelectWidth};height:${this.builder.videoSelectHeight};padding:0;">
+                <div style="width:${this.builder.videoSelectWidth};max-width:${this.builder.videoSelectMaxWidth};height:${this.builder.videoSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -70154,7 +70190,7 @@ class Audio {
             </div>
 
             <div class="is-modal audioselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div style="max-width:${this.builder.audioSelectWidth};height:${this.builder.audioSelectHeight};padding:0;">
+                <div style="width:${this.builder.audioSelectWidth};max-width:${this.builder.audioSelectMaxWidth};height:${this.builder.audioSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -75206,6 +75242,8 @@ class ColumnTool {
         const inpSrc = this.cellSettings.querySelector('.input-src');
         elm = this.divCellClick.querySelector('.input-select');
         if (elm) dom.addEventListener(elm, 'click', () => {
+          //TODO: Simplify using openAsset
+
           //---default
           this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
           this.builder.targetCallback = () => {
@@ -92882,6 +92920,7 @@ class Dictation {
                         <button class="scope-section on" title="${util.out('General')}" data-value="general" style="margin-right:5px">${util.out('General')}</button> 
                         <button class="scope-others" title="${util.out('Ask Questions')}" data-value="others">${util.out('Ask Questions')}</button>
                         <button class="scope-block" title="${util.out('Edit Selected Block')}" data-value="block" style="">${util.out('Edit Selected Block')}</button>
+                        <button class="scope-image" title="${util.out('Image')}" data-value="image" style="display:none;margin-right:5px">${util.out('Image')}</button> 
                     </div>
                 </div>
                 <textarea class="inp-command"></textarea>
@@ -93013,15 +93052,12 @@ class Dictation {
     info += '</ul>';
     divInfo.innerHTML = info;
     const inpCommand = this.builderStuff.querySelector('.inp-command');
-    if (localStorage.getItem('_sampleshown') === null) {
-      inpCommand.setAttribute('placeholder', this.builder.commandPlaceholderText);
-      localStorage.setItem('_sampleshown', true);
-    }
     this.builder.commandText = '';
     this.builder.autoSendCommand = false;
     if (localStorage.getItem('_dictation') !== null) {
       if (localStorage.getItem('_dictation') === '1') {
         this.modalCommand.classList.add('active');
+        this.doOpen();
         if (localStorage.getItem('_mic') !== null) {
           if (localStorage.getItem('_mic') === '1') {
             this.startDictation();
@@ -93122,28 +93158,34 @@ class Dictation {
     btnCommandList.addEventListener('click', () => {
       let htmlList = '';
       const commandInfo = this.builder.commandInfo;
+      let bImageGeneration = false;
+      if (this.builder.textToImageUrl) {
+        bImageGeneration = true;
+      }
       for (const key in commandInfo) {
         if (Object.prototype.hasOwnProperty.call(commandInfo, key)) {
-          const {
-            title,
-            description,
-            list,
-            width
-          } = commandInfo[key];
-          if (!this.builder.enableShortCommands) {
-            if (description) {
-              htmlList += `<h2>${title}</h2>`;
-              htmlList += `<p>${description}</p>`;
+          if (key !== 'image' || key === 'image' && bImageGeneration) {
+            const {
+              title,
+              description,
+              list,
+              width
+            } = commandInfo[key];
+            if (!this.builder.enableShortCommands) {
+              if (description) {
+                htmlList += `<h2>${title}</h2>`;
+                htmlList += `<p>${description}</p>`;
+              } else {
+                htmlList += `<h2 style="margin-bottom:30px">${title}</h2>`;
+              }
+              for (const item of list) {
+                if (width) htmlList += `<div role="button" tabindex="0" class="command-item" style="width:${width}">${item}</div>`;else htmlList += `<div role="button" tabindex="0" class="command-item">${item}</div>`;
+              }
             } else {
-              htmlList += `<h2 style="margin-bottom:30px">${title}</h2>`;
-            }
-            for (const item of list) {
-              if (width) htmlList += `<div role="button" tabindex="0" class="command-item" style="width:${width}">${item}</div>`;else htmlList += `<div role="button" tabindex="0" class="command-item">${item}</div>`;
-            }
-          } else {
-            htmlList += `<h2>${title}</h2>`;
-            for (const item of list) {
-              if (width) htmlList += `<div role="button" tabindex="0" class="command-item" style="width:${width}">${item}</div>`;else htmlList += `<div role="button" tabindex="0" class="command-item">${item}</div>`;
+              htmlList += `<h2>${title}</h2>`;
+              for (const item of list) {
+                if (width) htmlList += `<div role="button" tabindex="0" class="command-item" style="width:${width}">${item}</div>`;else htmlList += `<div role="button" tabindex="0" class="command-item">${item}</div>`;
+              }
             }
           }
         }
@@ -93253,7 +93295,10 @@ class Dictation {
     const btnScopeSection = this.modalCommand.querySelector('.scope-section');
     const btnScopeBlock = this.modalCommand.querySelector('.scope-block');
     const btnScopeOthers = this.modalCommand.querySelector('.scope-others');
+    const btnScopeImage = this.modalCommand.querySelector('.scope-image');
     btnScopeBlock.disabled = true;
+    if (this.builder.textToImageUrl) btnScopeImage.style.display = ''; // show generate image button
+
     const assistModeBtns = modalCommand.querySelectorAll('.div-assistant-mode button');
     assistModeBtns.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -93262,7 +93307,21 @@ class Dictation {
         });
         btn.classList.add('on');
         const val = btn.getAttribute('data-value');
-        this.builder.assistantMode = val; // general, block, others
+        this.builder.assistantMode = val; // general, block, others, image
+
+        if (this.builder.hidePlaceholder) {
+          inpCommand.setAttribute('placeholder', '');
+        } else {
+          if (val === 'general') {
+            inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.general || '');
+          } else if (val === 'block') {
+            inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.edit_block || '');
+          } else if (val === 'others') {
+            inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.ask_questions || '');
+          } else if (val === 'image') {
+            inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.generate_image || '');
+          }
+        }
 
         /*
         // ContentBox
@@ -93293,17 +93352,20 @@ class Dictation {
           btnScopeBlock.classList.add('on');
           btnScopeSection.classList.remove('on');
           btnScopeOthers.classList.remove('on');
+          btnScopeImage.classList.remove('on');
         }
         btnScopeBlock.removeAttribute('disabled');
       } else {
         btnScopeBlock.disabled = true;
         if (btnScopeOthers.classList.contains('on')) return;
+        if (btnScopeImage.classList.contains('on')) return;
 
         // change
         this.builder.assistantMode = 'general';
         btnScopeSection.classList.add('on');
         btnScopeBlock.classList.remove('on');
         btnScopeOthers.classList.remove('on');
+        btnScopeImage.classList.remove('on');
       }
     };
     this.initialStart = false; // for Safari
@@ -93378,7 +93440,32 @@ class Dictation {
       return true;
     }
   }
+  doOpen() {
+    this.builder.hidePlaceholder = false;
+    const numeOfOpenToHidePlaceholderText = 4;
+    if (localStorage.getItem('_ai_panel_open') === null) {
+      localStorage.setItem('_ai_panel_open', 1);
+    } else {
+      let count = parseInt(localStorage.getItem('_ai_panel_open'));
+      if (count < numeOfOpenToHidePlaceholderText) {
+        count++;
+        localStorage.setItem('_ai_panel_open', count);
+      }
+    }
+    const inpCommand = this.builderStuff.querySelector('.inp-command');
+    if (localStorage.getItem('_ai_panel_open') === `${numeOfOpenToHidePlaceholderText}`) {
+      this.builder.hidePlaceholder = true;
+      inpCommand.setAttribute('placeholder', '');
+    } else {
+      if (!this.builder.commandPlaceholders) {
+        this.builder.commandPlaceholders = {};
+        this.builder.commandPlaceholders.general = '';
+      }
+      inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.general || '');
+    }
+  }
   openDictation() {
+    this.doOpen();
     const inpCommand = this.modalCommand.querySelector('.inp-command');
     if (this.modalCommand.classList.contains('active')) {
       setTimeout(() => {
@@ -94015,18 +94102,30 @@ class ContentBuilder {
       otherSelectCaption: 'Select Document',
       // otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-folder-outline"></use></svg>',
       otherSelectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-list-search"></use></svg>',
-      imageSelectWidth: '1024px',
+      imageSelectWidth: '80vw',
       imageSelectHeight: '80vh',
-      fileSelectWidth: '1024px',
+      fileSelectWidth: '80vw',
       fileSelectHeight: '80vh',
-      videoSelectWidth: '1024px',
+      videoSelectWidth: '80vw',
       videoSelectHeight: '80vh',
-      audioSelectWidth: '1024px',
+      audioSelectWidth: '80vw',
       audioSelectHeight: '80vh',
-      mediaSelectWidth: '1024px',
+      mediaSelectWidth: '80vw',
       mediaSelectHeight: '80vh',
-      otherSelectWidth: '1024px',
+      otherSelectWidth: '80vw',
       otherSelectHeight: '80vh',
+      imageSelectMaxWidth: '1600px',
+      fileSelectMaxWidth: '1600px',
+      videoSelectMaxWidth: '1600px',
+      audioSelectMaxWidth: '1600px',
+      mediaSelectMaxWidth: '1600px',
+      otherSelectMaxWidth: '1600px',
+      codeEditorWidth: '80vw',
+      codeEditorHeight: '80vh',
+      codeEditorMaxWidth: '1600px',
+      blockCodeEditorWidth: '80vw',
+      blockCodeEditorHeight: '45vh',
+      blockCodeEditorMaxWidth: '960px',
       assetRefresh: false,
       // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
       customTags: [],
@@ -94462,7 +94561,6 @@ class ContentBuilder {
       onlineDemo: false,
       autoSendDelay: 4000,
       autoEditBlock: false,
-      commandPlaceholderText: '',
       enableShortCommands: true,
       speechRecognitionLang: 'en-US',
       assistantMode: 'general',
@@ -95159,6 +95257,7 @@ class ContentBuilder {
     window.selectAsset = this.selectAsset.bind(this);
     window.assetType = this.assetType.bind(this);
     window.hideModal = this.hideModal.bind(this);
+    window.generateImage = this.generateImage.bind(this);
     setTimeout(() => {
       // Remember UI
       if (localStorage.getItem('_livepreview') != null) {
@@ -95983,6 +96082,35 @@ class ContentBuilder {
     return this.targetAssetType; // not used yet
   }
 
+  openImageSelect(callback, defaultValue) {
+    const inpUrl = document.createElement('input');
+
+    // dummy button (for the openAsset() method, for the old Asset Manager. Not needed for the new.)
+    const btn = document.createElement('button');
+    this.openAsset(inpUrl, 'image', btn, defaultValue);
+    let out = s => this.util.out(s);
+    const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+    Object.defineProperty(inpUrl, 'value', {
+      get: desc.get,
+      set: function (s) {
+        // Additional protection if normal selectAsset() is not used in asset dialog.
+        // This is used if onImageSelectClick or onFileSelectClick are used.
+        const filename = s.substring(s.lastIndexOf('/') + 1);
+        let extension = filename.split('.').pop();
+        extension = extension.toLowerCase();
+        let ok = false;
+        if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
+          ok = true;
+        } else {
+          alert(out('Please select an image file.'));
+        }
+        if (ok) {
+          if (callback) callback(s);
+        }
+        desc.set.call(this, s);
+      }
+    });
+  }
   renderSelectAsset(btn, targetAssetType, callback) {
     const _id = 'inp_' + this.util.makeId();
     btn.insertAdjacentHTML('afterend', `<input type="hidden" id="${_id}">`);
@@ -96052,7 +96180,9 @@ class ContentBuilder {
       this.targetAssetType = targetAssetType;
     }
   }
-  openAsset(targetInput, targetAssetType, theTrigger) {
+  openAsset(targetInput, targetAssetType, theTrigger, defaultValue) {
+    let iframe;
+    let modal;
     if (targetAssetType === 'media' && (this.opts.onMediaSelectClick || this.opts.onImageSelectClick)) {
       if (this.opts.onMediaSelectClick) {
         this.opts.onMediaSelectClick({
@@ -96086,8 +96216,6 @@ class ContentBuilder {
         theTrigger: theTrigger
       });
     } else {
-      let iframe;
-      let modal;
       if (targetAssetType === 'media') {
         modal = this.builderStuff.querySelector('.is-modal.mediaselect');
         iframe = modal.querySelector('iframe');
@@ -96116,6 +96244,23 @@ class ContentBuilder {
       this.targetCallback = null;
       this.targetAssetType = targetAssetType;
     }
+    if (!defaultValue) defaultValue = '';
+    if (targetInput && targetInput.value) {
+      defaultValue = targetInput.value;
+    }
+    if (this.onAssetOpen) {
+      if (iframe) {
+        if (iframe.contentWindow.document.body.innerHTML !== '') {
+          this.onAssetOpen(defaultValue, iframe.contentWindow);
+        } else {
+          iframe.addEventListener('load', () => {
+            this.onAssetOpen(defaultValue, iframe.contentWindow);
+          });
+        }
+      } else {
+        this.onAssetOpen(defaultValue, iframe);
+      }
+    }
   }
 
   // Grid
@@ -96952,6 +97097,151 @@ class ContentBuilder {
       }
     }
   }
+  async generateImage(prompt, callback) {
+    this.controller = new AbortController(); // Create a new AbortController
+    this.signal = this.controller.signal; // Get a new signal object
+
+    let model = 'realistic-vision-v3';
+    let negative_prompt = '';
+    if (model.includes('realistic-vision')) {
+      if (negative_prompt === '') negative_prompt = 'duplicate, (deformed iris, deformed pupils, semi-realistic, cgi, 3d, render, sketch, cartoon, drawing, anime:1.4), text, close up, cropped, out of frame, worst quality, low quality, jpeg artifacts, ugly, duplicate, morbid, mutilated, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, mutation, deformed, blurry, dehydrated, bad anatomy, bad proportions, extra limbs, cloned face, disfigured, gross proportions, malformed limbs, missing arms, missing legs, extra arms, extra legs, fused fingers, too many fingers, long neck, bad_prompt_version2, bad-hands-5, badhandv4, bad anatomy, deformed, mutated, amputated, missing finger, extra finger, fused fingers, missing leg, extra leg, fused legs, missing digit, extra digit, fused digits, missing hand, extra hand, fused hands, missing arm, extra arm, fused arms, missing limb, extra limb, fused limbs, fused bodies, merged bodies, extra bodies, dual bodies, extra navel, elongated body, missing joint, extra joint, fused joints, deformed hip, twisted limbs, twisted legs, twisted arms, missing head, extra head, double head, twins, missing ear, extra ear, deformed ear, black and white, monochrome, multiple views, blurry, text, signature, head out of frame, paintings, sketches, (worst quality:2), (low quality:2), (normal quality:2), lowres, grayscale, glans, bad hands, error, extra digit, fewer digits, cropped, jpeg artifacts, watermark, username, bad feet, poorly drawn hands, poorly drawn face, mutation, too many fingers, long neck, long body, long arms, cross-eyed, mutated hands, polar lowres, bad body, bad proportions, gross proportions, cropped head , bad eyes, extra breast, missing breast, fused breasts, unnatural proportions, necklace';
+    }
+    let width = 1024;
+    let height = 1024;
+    let steps = 25;
+    let guidance = 7.5;
+    let scheduler = 'dpmsolver++';
+    let output_format = 'jpeg';
+    const messages = {
+      model: 'realistic-vision-v3',
+      prompt: prompt,
+      negative_prompt: negative_prompt,
+      width: width,
+      height: height,
+      steps: steps,
+      guidance: guidance,
+      scheduler: scheduler,
+      output_format: output_format,
+      folder_path: ''
+    };
+    try {
+      let url = this.textToImageUrl;
+      const response = await fetch(url, {
+        signal: this.signal,
+        // Abort
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(messages)
+      });
+      const result = await response.json();
+      if (result.error) {
+        console.log('Error:\n' + result.error);
+        return;
+      }
+      const imageUrl = result.url;
+      callback([imageUrl]);
+    } catch (error) {
+      if (error.name === 'AbortError') ; else {
+        // CORS or code errors goes here
+        console.error('Error:', error);
+        // console.log('Error:\n'+error);
+
+        this.dictation.finish(); // Must be called after finished
+      }
+    }
+  }
+
+  /* OpenAI
+  // Requires:
+  // generateImageUrl: '/generateimage',
+  // uploadBase64Url:'/uploadbase64',
+   async generateImage(prompt, num, callback) {
+       if(!(this.generateImageUrl && this.uploadBase64Url)) return;
+       this.controller = new AbortController(); // Create a new AbortController
+      this.signal = this.controller.signal; // Get a new signal object
+       const messages = { prompt, num };
+       try {
+           const response = await fetch(this.generateImageUrl, {
+              signal: this.signal, // Abort
+              method: 'POST',
+              headers: {
+                  'Content-Type': 'application/json',
+              },
+              body: JSON.stringify(messages),
+          });
+  
+          const result = await response.json();
+  
+          if(result.error) {
+              console.log('Error:\n'+result.error);
+              return;
+          }
+  
+          const filename = result.filename;
+  
+          let images = [];
+  
+          const numOfImages = result.data.data.length;
+  
+          const imageList = result.data.data;
+          imageList.forEach(item=>{
+              const base64 = item.b64_json;
+              const src = `data:image/jpeg;base64,${base64}`;
+  
+              var newWidth = 1024;
+              var newHeight = 1024;
+              var img = new Image();
+              img.src = src;
+              img.onload = () => {
+  
+                  var canvas = document.createElement('canvas');
+                  canvas.width = newWidth;
+                  canvas.height = newHeight;
+  
+                  var ctx = canvas.getContext('2d');
+                  ctx.drawImage(img, 0, 0, newWidth, newHeight);
+                  var resizedBase64 = canvas.toDataURL('image/jpeg');
+  
+                  let image = resizedBase64;
+                  image = image.replace(/^data:image\/(png|jpeg);base64,/, '');
+  
+                  const reqBody = { image: image, filename: filename };
+                  fetch(this.uploadBase64Url, {
+                      method:'POST',
+                      body: JSON.stringify(reqBody),
+                      headers: {
+                          'Content-Type': 'application/json',
+                      }
+                  })
+                      .then(response=>response.json())
+                      .then(response=>{
+                          if(!response.error) { 
+                              const uploadedImageUrl = response.url;
+                              images.push(uploadedImageUrl);
+                              if(images.length===numOfImages) {
+                                  callback(images);
+                              }
+                          }
+                      });
+              };
+  
+          });
+       } catch (error) {
+          if (error.name === 'AbortError') {
+              // Do Nothing
+              // console.log('Request aborted by user.');
+          } else {
+              // CORS or code errors goes here
+              console.error('Error:', error);
+              // console.log('Error:\n'+error);
+               this.dictation.finish(); // Must be called after finished
+          }
+      }
+  }
+  */
+
   lightboxOpen(col) {
     // Open Lightbox
     if (this.useLightbox) {
@@ -109518,6 +109808,11 @@ class Lib {
             type: 'boolean',
             description: 'User request an information to be added to the current content.'
           },
+          // Add new Column or Block (in General Mode)
+          add_column_or_block: {
+            type: 'boolean',
+            description: 'User requests to add a column or a block.'
+          },
 
           /*
               To make 2 columns not mixed with 2 boxes, each has to be identified separately
@@ -109644,6 +109939,23 @@ class Lib {
             type: 'string',
             description: 'User requests to align the whole text/content. Possible value: left, center or right'
           },
+          // Block Mode (in General Mode)
+          block_task: {
+            type: 'string',
+            description: 'User requests to move, duplicate, or delete block/row. Possible values: move-up, move-down, duplicate, remove'
+          },
+          column_task: {
+            type: 'string',
+            description: 'User requests to duplicate column, or delete column. Possible values: duplicate, remove'
+          },
+          move_column: {
+            type: 'string',
+            description: 'User requests to move column. Possible values: move-up, move-down, move-left, move-right'
+          },
+          increase_decrease_column: {
+            type: 'string',
+            description: 'User requests to increase/enlarge or decrease/reduce column size/width. Possible values: increase, decrease'
+          },
           move_content_left: {
             type: 'boolean',
             description: 'Move content to the left'
@@ -110939,6 +111251,19 @@ Example: To create a block with a headline and a paragraph:
     </div>
                         
 `;
+        } else if (numberOfIntents === 1 && (args.new_column_onright || args.new_column_onleft)) {
+          // single intent => no content details
+          systemCmd = 'You will be asked to create a single HTML block/column and return the HTML without any additional explanation.';
+          context = `To create a column, create single 'div.column' element and add a paragraph inside it.
+
+Example:
+
+    <div class="column">
+        <p>Paragraph here.</p>
+    </div>
+  
+`;
+          question = `${question}.  No talk; just do. You must return only one 'div.column'.`;
         } else if (args.new_column_onright || args.new_column_onleft) {
           systemCmd = 'You will be asked to create content (in HTML) and return the HTML without any additional explanation.';
           context = `To add a column that contains a content:
@@ -111050,6 +111375,43 @@ ${blockContent}
       });
     };
 
+    const sendImageCommand = async prompt => {
+      let activeBox = this.builder.activeBox;
+
+      if (!activeBox) {
+        this.builder.showMessage(out('Please select a box.'));
+        this.dictation.finish(); // Must be called after finished
+
+        return;
+      }
+
+      this.dictation.startSending(); // Shows sending status & Abort button
+
+      const displayImage = src => {
+        this.builder.editor.saveForUndo();
+        let elm = this.builder.editor.activeElement;
+
+        if (elm && elm.tagName) {
+          const tagName = elm.tagName.toLowerCase();
+
+          if (tagName === 'img') {
+            this.builder.editor.saveForUndo();
+            elm.setAttribute('src', src); //Trigger Change event
+
+            this.builder.onChange();
+          } else {
+            this.builder.boxImage(src);
+          }
+        } else {
+          this.builder.boxImage(src);
+        }
+
+        this.dictation.finish();
+      };
+
+      this.builder.editor.generateImage(prompt, displayImage);
+    };
+
     const sendOtherCommand = async question => {
       let systemCmd = '';
       let context = 'You are a helpful assistant. You don\'t need to answer \'Sure!\' or \'Certainly\'. You will just provide direct answers without a prologue. No talk; just do.';
@@ -111206,6 +111568,78 @@ ${answer}
       this.sendCommand('assistant', question, context, systemCmd, [], callback);
     };
 
+    const numOfIntents = args => {
+      let trueCount = 0;
+
+      for (const key in args) {
+        if (args[key] === true) {
+          trueCount++;
+        }
+      }
+
+      return trueCount;
+    }; // Update Column or Block (in General Mode)
+
+
+    const sendUpdateBlockCommand = async (question, args) => {
+      let block = this.builder.editor.activeCol;
+
+      if (!block) {
+        this.builder.showMessage(out('Please select a block or content.'));
+        this.dictation.finish(); // Must be called after finished
+
+        return;
+      }
+
+      let blockContent = block.innerHTML;
+      const systemCmd = 'You will be asked to modify content (in HTML) and return only the modified HTML without any additional explanation.'; // Update prompt
+
+      question = `${question}. Modify my content according to this instruction and returns the modified content HTML.
+            
+This is my content:
+                
+${blockContent}
+`; // let context = this.lib.elementContext(context, args);
+
+      let context = this.lib.addElementContext('', args);
+
+      if (this.builder.consoleLog) {
+        console.log(systemCmd);
+        console.log(question);
+        console.log(context);
+      }
+
+      const callback = answer => {
+        if (this.builder.consoleLog) console.log(answer);
+        html = this.fixHtmlBlock(answer);
+
+        if (!html) {
+          this.dictation.finish(true);
+          return false;
+        }
+
+        this.builder.editor.saveForUndo();
+        block.innerHTML = html;
+        let elmActive = block.querySelector('.elm-active');
+
+        if (elmActive) {
+          this.builder.editor.activeElement = elmActive;
+          elmActive.focus();
+        } // See addContent() in ContentBuilder's util.js
+
+
+        let builderActive = this.builder.doc.querySelector('.builder-active');
+        if (builderActive) this.builder.editor.applyBehaviorOn(builderActive); //Trigger Change event
+
+        this.builder.settings.onChange(); //Trigger Render event
+
+        this.builder.settings.onRender();
+        this.dictation.finish();
+      };
+
+      this.sendCommand('assistant', question, context, systemCmd, [], callback);
+    };
+
     const sendGeneralCommand = async question => {
       // Get Selected
       let activeBox = this.builder.activeBox;
@@ -111242,12 +111676,37 @@ ${answer}
           if (this.builder.consoleLog) console.log('write_based_on_the_current_content');
           sendRewriteCommand(question);
           return;
-        } // SIMPLE/SINGLE INTENT (like Short Commands)
+        } // const numberOfIntents = Object.keys(args).length;
 
 
-        const numberOfIntents = Object.keys(args).length;
+        const numberOfIntents = numOfIntents(args); // SIMPLE (1 or 2) INTENTS
+
+        const activeCol = this.builder.editor.activeCol;
+
+        if (activeCol) {
+          // && numberOfIntents<=2) {
+          // Update Column or Block (in General Mode)
+          if (args.align_individual_text || args.font_size_individual_text || args.line_height_individual_text) {
+            sendUpdateBlockCommand(question, args);
+            return;
+          } // Add new Column or Block (in General Mode)
+
+
+          if (args.add_column_or_block) {
+            sendBlockCommand(question);
+            return;
+          }
+        } // SIMPLE/SINGLE INTENT (like Short Commands)
+
 
         if (activeBox && numberOfIntents === 1) {
+          // Block Mode (in General Mode)
+          let result = this.blockAction(args);
+
+          if (result) {
+            this.dictation.finish();
+            return;
+          }
           /*
           // If single intent creates new section:
            if(activeBox && (args.move_content_left || args.move_content_center || args.move_content_right ||
@@ -111268,6 +111727,8 @@ ${answer}
                   return;
           }
           */
+
+
           const moveContent = this.lib.processContent(args, activeBox);
 
           if (moveContent) {
@@ -111480,7 +111941,7 @@ ${answer}
             }
           }
 
-          const result = this.quickAction(args);
+          result = this.quickAction(args);
 
           if (result) {
             this.dictation.finish();
@@ -111830,6 +112291,11 @@ ${currentHtml}
 
       if (!activeBox) {
         this.builder.selectSection();
+      }
+
+      if (this.builder.editor.assistantMode === 'image') {
+        sendImageCommand(question);
+        return;
       } // Local Process
 
 
@@ -111846,7 +112312,13 @@ ${currentHtml}
     };
 
     this.dictation.opts.abort = () => {
-      this.controller.abort();
+      if (this.controller) this.controller.abort();
+
+      if (this.builder.editor.controller) {
+        // Abort for image
+        this.builder.editor.controller.abort();
+      }
+
       this.dictation.finish(true); // Must be called after finished (true = do not clear command text)
     };
   }
@@ -113848,6 +114320,16 @@ ${currentHtml}
     imgs.forEach(img => {
       img.setAttribute('src', imageUrl);
     });
+    const cols = doc.querySelectorAll('.column');
+    cols.forEach(col => {
+      // Add spacer in an empty column
+      if (col.innerHTML.trim() === '') {
+        const spacer = document.createElement('div');
+        spacer.classList.add('spacer');
+        spacer.classList.add('height-40');
+        col.appendChild(spacer);
+      }
+    });
     return doc.documentElement.innerHTML;
   }
 
@@ -114867,22 +115349,35 @@ class ContentBox {
       otherSelectCaption: 'Select Document',
       // otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-folder-outline"></use></svg>',
       otherSelectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-list-search"></use></svg>',
-      imageSelectWidth: '1024px',
+      imageSelectWidth: '80vw',
       imageSelectHeight: '80vh',
-      fileSelectWidth: '1024px',
+      fileSelectWidth: '80vw',
       fileSelectHeight: '80vh',
-      videoSelectWidth: '1024px',
+      videoSelectWidth: '80vw',
       videoSelectHeight: '80vh',
-      audioSelectWidth: '1024px',
+      audioSelectWidth: '80vw',
       audioSelectHeight: '80vh',
-      mediaSelectWidth: '1024px',
+      mediaSelectWidth: '80vw',
       mediaSelectHeight: '80vh',
+      otherSelectWidth: '80vw',
+      otherSelectHeight: '80vh',
+      imageSelectMaxWidth: '1600px',
+      fileSelectMaxWidth: '1600px',
+      videoSelectMaxWidth: '1600px',
+      audioSelectMaxWidth: '1600px',
+      mediaSelectMaxWidth: '1600px',
+      otherSelectMaxWidth: '1600px',
+      codeEditorWidth: '80vw',
+      codeEditorHeight: '80vh',
+      codeEditorMaxWidth: '1600px',
+      blockCodeEditorWidth: '80vw',
+      blockCodeEditorHeight: '45vh',
+      blockCodeEditorMaxWidth: '960px',
       assetRefresh: false,
       slider: '',
       navbar: false,
       onRender: function () {},
       onChange: function () {},
-      onCoverImageSelectClick: null,
       // onImageBrowseClick: function () { },
       // onImageSettingClick: function () { },
       // onImageSelectClick: function () { },
@@ -117279,6 +117774,19 @@ class ContentBox {
       AIToolbar: true,
       sendCommandUrl: '',
       // http://localhost:8081/answer
+
+      /* To enable asset manager */
+      // listFilesUrl: '',
+      // listFoldersUrl: '',
+      // deleteFilesUrl: '',
+      // moveFilesUrl: '',
+      // createFolderUrl: '',
+      // uploadFilesUrl: '',
+      // renameFileUrl: '',
+      // getMmodelsUrl: '',
+      // textToImageUrl: '', // To enable AI image generation
+      // upscaleImageUrl: '',
+      // controlNetUrl: '',
       speechTranscribeUrl: '',
       // http://localhost:8081
       autoSendDelay: 4000,
@@ -117292,7 +117800,12 @@ class ContentBox {
       useMediaRecorder: true,
       // do not change
       encoderPath: '',
-      commandPlaceholderText: 'Create a section containing a short article with ideas for outdoor activities.',
+      commandPlaceholders: {
+        general: 'Create a section containing a short article with ideas for outdoor activities.',
+        ask_questions: 'Can you explain our galaxy in a beginner-friendly and interesting way?',
+        edit_block: 'Align the headline to the center',
+        generate_image: 'City view from the window, sunset, realistic photo'
+      },
       disclaimerAI: `The feature you're about to use utilizes AI in some of its processes. 
             It's important to understand that AI systems have limitations.
             There may be instances where the results are not 100% accurate or may provide unexpected responses or information.
@@ -117530,9 +118043,15 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         block: {
           title: 'Edit Selected Block',
           description: 'Specifically target the selected block for editing, providing more precise results.',
-          list: ['Enhance the content by including introductory paragraphs after the title.', 'Add a space between the title and the button.', 'Increase the space between the title and the paragraph.', 'Apply a gradient text color from red to orange horizontally to the title.', 'Paraphrase the title.', 'Reduce the title font size.', // 'Align the text to the center.',
+          list: ['Enhance the content by including introductory paragraphs after the title.', 'Add a space between the title and the button.', 'Increase the space between the title and the paragraph.', 'Apply a gradient text color from red to orange horizontally to the title.', // 'Paraphrase the title.',
+          'Rewrite the headline with alternative ideas', 'Reduce the title font size.', // 'Align the text to the center.',
           'Add a link on the text \'Download\' that directs to: https://example.com/download', 'Add a new block containing a Google map showing local cafes in the Perth city area.']
         },
+        image: {
+          title: 'Image',
+          description: 'Generate image for the selected image or background',
+          list: ['A small, minimalist wood cabin, situated atop a hill, seen from a distance']
+        },
         selection: {
           title: 'Selection & Layout',
           list: ['Select the headline', // 'Select the paragraph',
@@ -117817,10 +118336,21 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       enableShortCommands: this.settings.enableShortCommands,
       shortCommandList: this.settings.shortCommandList,
       commandInfo: this.settings.commandInfo,
-      commandPlaceholderText: this.settings.commandPlaceholderText,
+      commandPlaceholders: this.settings.commandPlaceholders,
       similarityThreshold: this.settings.similarityThreshold,
       useMediaRecorder: this.settings.useMediaRecorder,
       encoderPath: this.settings.encoderPath,
+      listFilesUrl: this.settings.listFilesUrl,
+      listFoldersUrl: this.settings.listFoldersUrl,
+      deleteFilesUrl: this.settings.deleteFilesUrl,
+      moveFilesUrl: this.settings.moveFilesUrl,
+      createFolderUrl: this.settings.createFolderUrl,
+      uploadFilesUrl: this.settings.uploadFilesUrl,
+      renameFileUrl: this.settings.renameFileUrl,
+      getMmodelsUrl: this.settings.getMmodelsUrl,
+      textToImageUrl: this.settings.textToImageUrl,
+      upscaleImageUrl: this.settings.upscaleImageUrl,
+      controlNetUrl: this.settings.controlNetUrl,
       container: '.is-container',
       page: '.is-wrapper',
       deleteConfirm: this.settings.deleteConfirm,
@@ -118034,6 +118564,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       videoSelect: this.settings.videoSelect,
       audioSelect: this.settings.audioSelect,
       mediaSelect: this.settings.mediaSelect,
+      onAssetOpen: this.settings.onAssetOpen,
       selectIcon: this.settings.selectIcon,
       otherSelect: this.settings.otherSelect,
       otherSelectCaption: this.settings.otherSelectCaption,
@@ -118048,6 +118579,20 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       audioSelectHeight: this.settings.audioSelectHeight,
       mediaSelectWidth: this.settings.mediaSelectWidth,
       mediaSelectHeight: this.settings.mediaSelectHeight,
+      otherSelectWidth: this.settings.otherSelectWidth,
+      otherSelectHeight: this.settings.otherSelectHeight,
+      imageSelectMaxWidth: this.settings.imageSelectMaxWidth,
+      fileSelectMaxWidth: this.settings.fileSelectMaxWidth,
+      videoSelectMaxWidth: this.settings.videoSelectMaxWidth,
+      audioSelectMaxWidth: this.settings.audioSelectMaxWidth,
+      mediaSelectMaxWidth: this.settings.mediaSelectMaxWidth,
+      otherSelectMaxWidth: this.settings.otherSelectMaxWidth,
+      codeEditorWidth: this.settings.codeEditorWidth,
+      codeEditorHeight: this.settings.codeEditorHeight,
+      codeEditorMaxWidth: this.settings.codeEditorMaxWidth,
+      blockCodeEditorWidth: this.settings.blockCodeEditorWidth,
+      blockCodeEditorHeight: this.settings.blockCodeEditorHeight,
+      blockCodeEditorMaxWidth: this.settings.blockCodeEditorMaxWidth,
       assetRefresh: this.settings.assetRefresh,
       onContentClick: e => {
         if (this.settings.onContentClick) this.settings.onContentClick(e);
@@ -118749,6 +119294,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
 
           if (this.timeline.modalTimeline.classList.contains('active')) this.timeline.clearSettings();
         }
+
+        document.body.classList.remove('box-modal-open'); // Remove added 'box-modal-open' by Box Settings open
       } //--- 
 
 
@@ -119124,7 +119671,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
   boxSetup(box) {
     let tool = box.querySelector('.is-box-tool');
     if (tool) tool.parentNode.removeChild(tool);
-    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<div role="button" class="is-cover-upload" data-tooltip-top title="' + out('Background Image') + '" data-title="' + out('Background Image') + '" target="target-upload-cover" method="post" action="' + this.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" tabindex="-1" class="input-file-cover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input tabindex="-1" class="input-custom-value" name="hidcustomval" type="hidden" value="" />' + '</div>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>');
+    dom.appendHtml(box, '<div class="is-box-tool" data-tool="1">' + '<div role="button" class="is-cover-upload" data-tooltip-top title="' + out('Change Background') + '" data-title="' + out('Change Background') + '" target="target-upload-cover" method="post" action="' + this.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);background:rgb(78 170 57)">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" tabindex="-1" class="input-file-cover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input tabindex="-1" class="input-custom-value" name="hidcustomval" type="hidden" value="" />' + '</div>' + '<button type="button" class="is-select-image" tabindex="-1" data-tooltip-top data-title="' + out('Select') + '" title="' + out('Select') + '" style="background:rgb(251 173 27)"><svg class="is-icon-flex" style="color:#fff;width:17px;height:17px;"><use style="color: #fff;" xlink:href="#icon-folder2"></use></svg></button>' + '<button type="button" class="is-box-edit" tabindex="-1" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button type="button" class="is-module-edit" tabindex="-1" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '" style="background:rgb(135 116 215)"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>');
     let info = box.querySelector('.is-box-info');
     if (info) info.parentNode.removeChild(info);
 
@@ -119224,6 +119771,25 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       this.editsection.close();
       this.editbox.edit();
     });
+    const btnSelectImage = box.querySelector('.is-select-image');
+    if (btnSelectImage) btnSelectImage.addEventListener('click', () => {
+      this.editsection.close();
+      let currentImageUrl;
+      const activeBox = this.activeBox;
+      let overlay = activeBox.querySelector('.is-overlay');
+      const overlayBg = overlay.querySelector('.is-overlay-bg');
+      if (overlayBg) if (overlayBg.style.backgroundImage) {
+        if (overlayBg.style.backgroundImage.indexOf('url(') !== -1) {
+          currentImageUrl = overlayBg.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+        }
+      }
+      this.editor.openImageSelect(src => {
+        this.editor.saveForUndo();
+        this.boxImage(src); //Trigger Change event
+
+        this.onChange();
+      }, currentImageUrl);
+    });
     const btnModuleEdit = box.querySelector('.is-module-edit');
     if (btnModuleEdit) btnModuleEdit.addEventListener('click', () => {
       this.editbox.editModule();
@@ -119337,17 +119903,19 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
     let contentClass = contentCss.replace('.css', '');
     let contentStylePath = this.settings.contentStylePath; //Add contentCss
 
-    let exist = false;
+    if (contentCss) {
+      let exist = false;
 
-    let links = window.parent._cb.doc.getElementsByTagName('link');
+      let links = window.parent._cb.doc.getElementsByTagName('link');
 
-    for (let i = 0; i < links.length; i++) {
-      let src = links[i].href.toLowerCase();
-      if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
-    }
+      for (let i = 0; i < links.length; i++) {
+        let src = links[i].href.toLowerCase();
+        if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
+      }
 
-    if (!exist) {
-      this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+      if (!exist) {
+        this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+      }
     }
 
     return newSection;
@@ -119899,7 +120467,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       newSection.classList.add('section-select');
       this.activeSection = newSection; // Select
 
-      this.positionTool(newSection);
+      this.positionTool(box);
     }
   }
 
@@ -120110,6 +120678,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
       boxTool.style.transform = 'scale(' + 1 / zoom + ')';
       boxTool.style.transformOrigin = 'center bottom'; // boxTool.style.marginTop = (-(boxTool.offsetHeight * 1/zoom)) + 'px';
 
+      box.querySelector('.is-select-image').style.display = 'none';
+
       if (boxSlider) {
         box.querySelector('.is-cover-upload').style.display = 'none';
         box.querySelector('.is-box-edit').style.display = 'inline-block';
@@ -120128,12 +120698,31 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         box.querySelector('.is-module-edit').style.display = 'inline-block';
         boxTool.style.width = '120px';
         boxTool.style.left = 'calc(50% - 60px)';
+
+        if (this.onImageSelectClick || this.imageselect) {
+          boxTool.style.width = '160px';
+          box.querySelector('.is-select-image').style.display = 'inline-block';
+          boxTool.style.left = 'calc(50% - 80px)';
+        }
+
+        if (box.querySelector('.is-overlay-content[data-module]').getAttribute('data-module') === 'video-bg') {
+          box.querySelector('.is-cover-upload').style.display = 'none';
+          box.querySelector('.is-select-image').style.display = 'none';
+          boxTool.style.width = '80px';
+          boxTool.style.left = 'calc(50% - 40px)';
+        }
       } else {
         box.querySelector('.is-cover-upload').style.display = 'block';
         box.querySelector('.is-box-edit').style.display = 'inline-block';
         box.querySelector('.is-module-edit').style.display = 'none';
         boxTool.style.width = '80px';
         boxTool.style.left = 'calc(50% - 40px)';
+
+        if (this.onImageSelectClick || this.imageselect) {
+          boxTool.style.width = '120px';
+          box.querySelector('.is-select-image').style.display = 'inline-block';
+          boxTool.style.left = 'calc(50% - 60px)';
+        }
       }
     } // box info