@innovastudio/contentbox 1.5.68 → 1.5.70

package/public/contentbox/contentbox.esm.js

@@ -20692,6 +20692,12 @@ class Util$1 {
     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');
 
     //NOT USED
     localStorage.removeItem('_scrollableeditor');
@@ -66786,16 +66792,16 @@ class ButtonEditor {
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
           if (val === 'auto') {
-            dom.removeClass(activeButton, 'flex');
-            dom.removeClass(activeButton, 'justify-center');
-            dom.removeClass(activeButton, 'items-center');
-            dom.addClass(activeButton, 'inline-block');
+            activeButton.classList.remove('flex');
+            activeButton.classList.remove('justify-center');
+            activeButton.classList.remove('items-center');
+            activeButton.classList.add('inline-block');
           }
           if (val === 'full') {
-            dom.removeClass(activeButton, 'inline-block');
-            dom.addClass(activeButton, 'flex');
-            dom.addClass(activeButton, 'justify-center');
-            dom.addClass(activeButton, 'items-center');
+            activeButton.classList.remove('inline-block');
+            activeButton.classList.add('flex');
+            activeButton.classList.add('justify-center');
+            activeButton.classList.add('items-center');
           }
           this.applyDefault(activeButton);
 
@@ -91964,6 +91970,7 @@ class Lib$1 {
       activeBox.classList.add('is-content-bottom');
       activeBox.classList.add('edge-y-2');
     }
+    this.builder.hideElementTools();
   }
   updateContentSize(activeBox, val) {
     const container = activeBox.querySelector('.is-container');
@@ -92563,6 +92570,81 @@ class Lib$1 {
     }
     return null;
   }
+  moveBlockContent(target) {
+    const cell = this.builder.activeCol;
+    if (!cell) return false;
+    if (!(target === 'top' || target === 'bottom' || target === 'left' || target === 'right' || target === 'topleft' || target === 'topcenter' || target === 'topright' || target === 'bottomleft' || target === 'bottomcenter' || target === 'bottomright' || target === 'center')) return;
+    this.builder.saveForUndo();
+    const dom = this.builder.dom;
+    let classes = this.builder.cssClasses.display;
+    dom.addCssClass(cell, classes.flex, classes);
+    classes = this.builder.cssClasses.flexDirection;
+    dom.addCssClass(cell, classes.column, classes);
+    if (target === 'top') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.start, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.center, classes);
+    } else if (target === 'bottom') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.end, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.center, classes);
+    } else if (target === 'left') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.center, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.start, classes);
+    } else if (target === 'right') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.center, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.end, classes);
+    } else if (target === 'topleft') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.start, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.start, classes);
+    } else if (target === 'topcenter') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.start, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.center, classes);
+    } else if (target === 'topright') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.start, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.end, classes);
+    } else if (target === 'bottomleft') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.end, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.start, classes);
+    } else if (target === 'bottomcenter') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.end, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.center, classes);
+    } else if (target === 'bottomright') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.end, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.end, classes);
+    } else if (target === 'center') {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.center, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.center, classes);
+    } else {
+      let classes = this.builder.cssClasses.justifyContent;
+      dom.addCssClass(cell, classes.center, classes);
+      classes = this.builder.cssClasses.alignItems;
+      dom.addCssClass(cell, classes.center, classes);
+    }
+    cell.style.justifyContent = '';
+    cell.style.alignItems = '';
+    this.builder.onChange();
+  }
 }
 
 // import RecordRTC  from 'recordrtc';
@@ -92585,32 +92667,56 @@ class Dictation {
     }
 
     this.builder.isInProgress = false;
-    const commandInfo = this.builder.commandInfo;
-    let htmlList = '';
-    for (const key in commandInfo) {
-      if (Object.prototype.hasOwnProperty.call(commandInfo, key)) {
-        const {
-          title,
-          list,
-          width
-        } = commandInfo[key];
-        if (!this.builder.enableShortCommands) {
-          if (key === 'general') {
-            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>`;
-            }
-          }
-        } 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>`;
-          }
-        }
-      }
-    }
     let html = `
         <style>
+            #_cbhtml .is-modal.page-command {
+                width: 25vw;
+                min-width: 393px;
+                max-width: 600px;
+                height: 230px; 
+                top: auto; 
+                bottom: 30px; 
+                left: auto; 
+                right: 30px; 
+                z-index: 10005;
+                font-size: 12px;
+                border-radius: 6px;
+            }
+            #_cbhtml .is-modal.page-command textarea {
+                border:none;border-top: rgb(133 133 133 / 14%) 1px solid;resize:none;width:100%;
+                height:170px;outline:none;background:transparent;line-height: 1.2;
+                font-family: sans-serif;font-weight: 300;font-size: 17px;padding-top:12px;
+            }
+            .page-command-overlay {
+                position: fixed;
+                background: rgb(148 148 148 / 22%);
+                display: none;
+                z-index: 10004;
+                justify-content: center;
+                align-items:center;
+            }
+            #_cbhtml .div-assistant-mode button {
+                padding: 0 17px;height:26px;border-radius:20px;box-shadow:none;
+            }
+            #_cbhtml .div-assistant-mode button[disabled] {
+                pointer-events: none;
+                opacity: 0.5;
+                background: transparent;
+            }
+            /*
+            .is-modal.commandconfig, 
+            #_cbhtml .is-modal.commandconfig label {
+                font-size: 14px;
+            }
+            */
+            .is-modal.commandconfig ul {
+                margin: 0;
+                padding: 0 0 0 16px;
+            }
+            .is-modal.commandconfig ul li {
+                font-size: inherit;
+                line-height: 1.2;
+            }
             .is-modal.commandlist {
                 z-index: 10005 !important
             }
@@ -92650,9 +92756,18 @@ class Dictation {
                 flex: none;
                 font-family: "Open Sans", sans-serif;
                 font-weight: 300;
-                margin-bottom: 30px;
+                margin-bottom: 10px;
                 font-size: 28px;
             }
+            .is-modal.commandlist .is-modal-content > div > p {
+                display: block;
+                width: 100%;
+                flex: none;
+                font-family: "Open Sans", sans-serif;
+                font-weight: 300;
+                font-size: 17px !important;
+                margin: 0 0 30px;
+            }
             .is-modal.commandlist .is-modal-content > div > div {
                 margin-right: 2.2rem;
                 margin-bottom: 2.2rem;
@@ -92681,24 +92796,6 @@ class Dictation {
             .dark .is-modal.commandlist .is-modal-content > div > div:hover {
                 background: rgba(255, 255, 255, 0.05);
             }
-            .is-modal.page-command {
-                width: 340px !important; 
-                height: 200px !important; 
-                top: auto !important; 
-                bottom: 30px !important; 
-                left: auto !important; 
-                right: 30px !important; 
-                z-index: 10005 !important;
-                font-size: 12px;
-            }
-            .page-command-overlay {
-                position: fixed;
-                background: rgb(148 148 148 / 22%);
-                display: none;
-                z-index: 10004;
-                justify-content: center;
-                align-items:center;
-            }
 
             .spinner {
                 -webkit-animation: rotator 1.4s linear infinite;
@@ -92757,6 +92854,11 @@ class Dictation {
             .inp-command::placeholder {
                 color: #aaa;
             }
+
+            .label-chk-autosend-command,
+            .label-input-autosend-command {
+                display: none !important;
+            }
         </style>
         <div class="is-overlay page-command-overlay">
             <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
@@ -92769,25 +92871,36 @@ class Dictation {
                 justify-content: center;
                 align-items: center;">
                     ${util.out('AI Assistant')}</span>
+    
                 <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
-                    <svg class="is-icon-flex"style="width:20px;height:20px"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    <svg class="is-icon-flex"style="width:22px;height:22px"><use xlink:href="#ion-ios-close-empty"></use></svg>
                 </button>
             </div>
             <div style="display:flex;flex-direction:column;justify-content:space-between;position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
-            
-                <textarea class="inp-command" style="resize:none;width:100%;height:121px;border:none;outline:none;background:transparent;line-height: 1.2;
-                font-family: sans-serif;font-weight: 300;font-size: 17px;"></textarea>
-                <div style="display:flex">
+                <div style="display:flex;align-items:center;justify-content:center;padding: 2px 13px 10px;">
+                    <div class="div-assistant-mode" style="display:flex;align-items: center;">
+                        <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>
+                    </div>
+                </div>
+                <textarea class="inp-command"></textarea>
+                <div style="display:flex;padding-left:3px;">
+                    <button title="${util.out('Settings')}" class="cmd-command-config classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
+                        <svg class="is-icon-flex" style="width:15px;height:15px;flex:none;"><use xlink:href="#icon-settings"></use></svg>
+                    </button>
                     <button title="${util.out('Mic')}" class="cmd-enable-dictation classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-microphone"></use></svg> 
                     </button>
-                    <button title="${util.out('Commands')}" class="cmd-command-list classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
+                    <button title="${util.out('Command Examples')}" class="cmd-command-list classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-message-search"></use></svg> 
                     </button>
-                    <button title="${util.out('Clear')}" class="cmd-clear-command classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
+                    <button title="${util.out('Clear')}" class="cmd-clear-command classic-secondary" style="margin-right:6px;width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-eraser"></use></svg> 
                     </button>
-                    <label for="chkAutoSendCommand" style="margin:0;display:flex;padding-left:10px;padding-right:10px;white-space:nowrap;width:100%;align-items:center;letter-spacing:0"><input id="chkAutoSendCommand" type="checkbox"> <span style="margin-left:3px">${util.out('Auto Send')}</span></label>
+
+                    <label class="label-chk-autosend-command" for="chkAutoSendCommand" style="margin:0;display:flex;padding-left:10px;padding-right:25px;white-space:nowrap;align-items:center;letter-spacing:0"><input id="chkAutoSendCommand" type="checkbox"> <span style="margin-left:3px">${util.out('Auto Send')}</span></label>
+                    
                     <button title="${util.out('Send')}" class="cmd-send-command classic-primary" style="width:100%;padding-left:5px;padding-right:5px;height:43px;outline-offset:-2px;">Send</button>
                 </div>
             </div>
@@ -92800,10 +92913,55 @@ class Dictation {
                 <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
                     <svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg>
                 </button>
-                <div>
+                <div class="div-command-list">
 
-                    ${htmlList}
+                </div>
+            </div>
+        </div>
 
+        <div class="is-modal commandconfig" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="is-modal-content" style="max-width:380px;padding:55px 40px 35px;">
+                <div class="is-modal-bar is-draggable">
+                    ${util.out('Settings')}
+                    <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
+                </div>
+              
+                <div class="is-label"><span>${util.out('Temperature')}</span>: <span class="val-temp">0.6</span></div>
+                <div style="padding-top:4px">
+                    <input type="range" min="0" max="2" step="0.01" value="0.6" class="temperature-slider is-rangeslider" style="margin:0 !important;">
+                </div>
+                
+                <div class="is-label" style="margin-top:15px"><span>${util.out('Top P')}</span>: <span class="val-top-p">0.9</span></div>
+                <div style="padding-top:4px">
+                    <input type="range" min="0" max="1" step="0.01" value="0.9" class="top-p-slider is-rangeslider" style="margin:0 !important;">
+                </div>
+
+                <div style="text-align:right">
+                    <button title="${util.out('Reset')}" class="input-reset classic-secondary" style="text-decoration: underline;padding: 0;box-shadow: none;">${util.out('Reset')}</button>
+                </div>
+
+                <label for="chkAutoEditBlock" style="margin:0;display:flex;align-items:center;letter-spacing:0">
+                    <input id="chkAutoEditBlock" type="checkbox" style="margin:0 5px 0 0;"> 
+                    <span style="line-height: 1;">${util.out('Auto select \'Edit Selected Block\' mode.')}</span>
+                </label>
+
+                <label class="label-input-autosend-command" style="margin:18px 0 0 0;display:flex;align-items:center;letter-spacing:0">
+                    <span>${util.out('Auto send command delay')}</soan>:
+                    <input class="input-autosend-delay" style="width:60px;text-align:center;padding-left:0;height:33px;margin-right:3px;" type="text" value="4000"> <span>ms</span>
+                </label>
+
+                <div class="command-settings-info" style="display:none"></div>
+
+                <label class="label-input-command-lang" style="display:none;flex-direction:column;letter-spacing:0;margin:18px 0 0 0;">
+                    <span>${util.out('Language')}:</span>
+                    <div style="display:flex; align-items: baseline;flex-direction: row;">
+                        <input class="input-command-lang" style="width:70px;text-align:center;padding-left:0;height:33px;margin-top:5px;margin-right:10px" type="text" value="en-us">
+                        <span>(${util.out('BCP-47 format')})</span>
+                    </div>
+                </label>
+
+                <div style="text-align:right;margin-top:25px;">
+                    <button title="${util.out('Ok')}" class="input-ok classic-primary" style="width:100%;">${util.out('Ok')}</button>
                 </div>
             </div>
         </div>
@@ -92813,10 +92971,47 @@ class Dictation {
     this.modalCommand = modalCommand;
     const modalCommandList = builderStuff.querySelector('.commandlist');
     this.modalCommandList = modalCommandList;
+    const modalConfig = builderStuff.querySelector('.commandconfig');
+    this.modalConfig = modalConfig;
+    const btnConfig = builderStuff.querySelector('.cmd-command-config');
     const btnDictation = builderStuff.querySelector('.cmd-enable-dictation');
     const btnClear = builderStuff.querySelector('.cmd-clear-command');
     const chkAutoSend = builderStuff.querySelector('#chkAutoSendCommand');
     const btnCommandList = builderStuff.querySelector('.cmd-command-list');
+    const divInfo = builderStuff.querySelector('.command-settings-info');
+    let info = `
+        <div style="font-weight:500;margin: 25px 0 7px;">${util.out('Dictation')}</div>
+        <div style="line-height: 1.4;margin: 0 0 7px;">${util.out('These words trigger command actions')}:</div>
+        <ul>`;
+    const triggerWords = this.builder.triggerWords;
+    for (const key in triggerWords) {
+      if (key === 'send') {
+        let s = '';
+        triggerWords[key].forEach(word => {
+          s += `, ${word}`;
+        });
+        s = s.substring(1);
+        info += `<li><span>${s}</span></li>`;
+      }
+      if (key === 'abort') {
+        let s = '';
+        triggerWords[key].forEach(word => {
+          s += `, ${word}`;
+        });
+        s = s.substring(1);
+        info += `<li><span>${s}</span></li>`;
+      }
+      if (key === 'clear') {
+        let s = '';
+        triggerWords[key].forEach(word => {
+          s += `, ${word}`;
+        });
+        s = s.substring(1);
+        info += `<li><span>${s}</span></li>`;
+      }
+    }
+    info += '</ul>';
+    divInfo.innerHTML = info;
     const inpCommand = this.builderStuff.querySelector('.inp-command');
     if (localStorage.getItem('_sampleshown') === null) {
       inpCommand.setAttribute('placeholder', this.builder.commandPlaceholderText);
@@ -92840,7 +93035,6 @@ class Dictation {
       if (localStorage.getItem('_mic') === '0') {
         btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
         chkAutoSend.parentNode.style.display = 'none';
-        btnClear.style.marginRight = '6px';
       }
     }
     if (localStorage.getItem('_autosendcommand') !== null) {
@@ -92854,48 +93048,148 @@ class Dictation {
       util.saveSelection(); // must be called in case used by formatText()
     });
 
+    btnConfig.addEventListener('click', () => {
+      this.config();
+
+      // util.showModal(this.modalConfig, false, ()=>{
+
+      //     btnConfig.removeAttribute('data-focus');
+      //     btnConfig.focus();
+
+      // }, false);
+
+      // btnConfig.setAttribute('data-focus',true);
+    });
+
+    if (localStorage.getItem('_temp') !== null) {
+      let val = localStorage.getItem('_temp');
+      this.builder.temperature = val;
+    }
+    if (localStorage.getItem('_top_p') !== null) {
+      let val = localStorage.getItem('_top_p');
+      this.builder.topP = val;
+    }
+    if (localStorage.getItem('_autosend_delay') !== null) {
+      let val = localStorage.getItem('_autosend_delay');
+      this.builder.autoSendDelay = val;
+    }
+    if (localStorage.getItem('_auto_editblock') !== null) {
+      let val = localStorage.getItem('_auto_editblock');
+      this.builder.autoEditBlock = val;
+    }
+    if (localStorage.getItem('_command_lang') !== null) {
+      let val = localStorage.getItem('_command_lang');
+      this.builder.speechRecognitionLang = val;
+    }
+    const btnConfigOk = this.modalConfig.querySelector('.input-ok');
+    btnConfigOk.addEventListener('click', () => {
+      const tempSlider = this.modalConfig.querySelector('.temperature-slider');
+      localStorage.setItem('_temp', tempSlider.value);
+      this.builder.temperature = tempSlider.value;
+      const topPSlider = this.modalConfig.querySelector('.top-p-slider');
+      localStorage.setItem('_top_p', topPSlider.value);
+      this.builder.topP = topPSlider.value;
+      const chkAutoEditBlock = this.modalConfig.querySelector('#chkAutoEditBlock');
+      if (chkAutoEditBlock.checked) {
+        localStorage.setItem('_auto_editblock', 1);
+        this.builder.autoEditBlock = true;
+      } else {
+        localStorage.setItem('_auto_editblock', 0);
+        this.builder.autoEditBlock = false;
+      }
+      const inpAutoSendDelay = this.modalConfig.querySelector('.input-autosend-delay');
+      localStorage.setItem('_autosend_delay', inpAutoSendDelay.value);
+      this.builder.autoSendDelay = inpAutoSendDelay.value;
+      const inpCommandLang = this.modalConfig.querySelector('.input-command-lang');
+      localStorage.setItem('_command_lang', inpCommandLang.value);
+      this.builder.speechRecognitionLang = inpCommandLang.value;
+      this.builder.hideModal(this.modalConfig);
+    });
+    const btnConfigReset = this.modalConfig.querySelector('.input-reset');
+    btnConfigReset.addEventListener('click', () => {
+      this.resetConfig();
+    });
+    const valTemp = this.modalConfig.querySelector('.val-temp');
+    const tempSlider = this.modalConfig.querySelector('.temperature-slider');
+    tempSlider.oninput = () => {
+      valTemp.innerHTML = tempSlider.value;
+    };
+    const valTopP = this.modalConfig.querySelector('.val-top-p');
+    const topPSlider = this.modalConfig.querySelector('.top-p-slider');
+    topPSlider.oninput = () => {
+      valTopP.innerHTML = topPSlider.value;
+    };
     btnCommandList.addEventListener('click', () => {
+      let htmlList = '';
+      const commandInfo = this.builder.commandInfo;
+      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>`;
+            } 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>`;
+            }
+          }
+        }
+      }
+      const divCommandList = this.modalCommandList.querySelector('.div-command-list');
+      divCommandList.innerHTML = htmlList;
+      const handleSelect = s => {
+        const inpCommand = this.builderStuff.querySelector('.inp-command');
+        inpCommand.value = s;
+        this.builder.commandText = inpCommand.value;
+        util.hideModal(this.modalCommandList);
+      };
+      let items = this.modalCommandList.querySelectorAll('.command-item');
+      items.forEach(elm => {
+        elm.addEventListener('click', () => {
+          handleSelect(elm.innerText);
+          inpCommand.focus();
+        });
+        elm.addEventListener('keydown', e => {
+          if (e.which === 13 && !e.shiftKey) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            handleSelect(elm.innerText);
+            setTimeout(() => {
+              inpCommand.focus();
+            }, 300);
+          }
+        });
+      });
       util.showModal(this.modalCommandList, false, () => {
         btnCommandList.removeAttribute('data-focus');
         btnCommandList.focus();
       }, false);
       btnCommandList.setAttribute('data-focus', true);
     });
-    const handleSelect = s => {
-      const inpCommand = this.builderStuff.querySelector('.inp-command');
-      inpCommand.value = s;
-      util.hideModal(this.modalCommandList);
-    };
-    let items = modalCommandList.querySelectorAll('.command-item');
-    items.forEach(elm => {
-      elm.addEventListener('click', () => {
-        handleSelect(elm.innerText);
-        inpCommand.focus();
-      });
-      elm.addEventListener('keydown', e => {
-        if (e.which === 13 && !e.shiftKey) {
-          e.preventDefault();
-          e.stopImmediatePropagation();
-          handleSelect(elm.innerText);
-          setTimeout(() => {
-            inpCommand.focus();
-          }, 300);
-        }
-      });
-    });
     btnDictation.addEventListener('click', () => {
       if (!this.checkMic()) {
         this.startDictation();
         btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone"></use></svg>';
         localStorage.setItem('_mic', '1');
         chkAutoSend.parentNode.style.display = 'flex';
-        btnClear.style.marginRight = '';
       } else {
         this.stopDictation();
         btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
         localStorage.setItem('_mic', '0');
         chkAutoSend.parentNode.style.display = 'none';
-        btnClear.style.marginRight = '6px';
       }
     });
     chkAutoSend.addEventListener('change', () => {
@@ -92919,6 +93213,8 @@ class Dictation {
         // Abort
 
         this.opts.abort();
+        const inpCommand = this.builderStuff.querySelector('.inp-command');
+        this.builder.commandText = inpCommand.value;
         return;
       }
       const inpCommand = this.modalCommand.querySelector('.inp-command');
@@ -92930,6 +93226,8 @@ class Dictation {
 
       // this.startSending();
 
+      // Clear
+      this.builder.commandText = '';
       this.opts.send(question);
     });
     inpCommand.addEventListener('keydown', e => {
@@ -92952,9 +93250,123 @@ class Dictation {
       this.stopDictation();
       localStorage.setItem('_dictation', '0');
     });
+    const btnScopeSection = this.modalCommand.querySelector('.scope-section');
+    const btnScopeBlock = this.modalCommand.querySelector('.scope-block');
+    const btnScopeOthers = this.modalCommand.querySelector('.scope-others');
+    btnScopeBlock.disabled = true;
+    const assistModeBtns = modalCommand.querySelectorAll('.div-assistant-mode button');
+    assistModeBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        assistModeBtns.forEach(item => {
+          item.classList.remove('on');
+        });
+        btn.classList.add('on');
+        const val = btn.getAttribute('data-value');
+        this.builder.assistantMode = val; // general, block, others
+
+        /*
+        // ContentBox
+        if(val==='general') {
+            if(!this.builder.activeCol) return;
+            const box = this.builder.activeCol.closest('.is-box');
+            const section = this.builder.activeCol.closest('.is-section');
+            const wrapper = this.builder.activeCol.closest('.is-wrapper');
+             if(!(box && section && wrapper)) return;
+            
+            box.click();
+            
+            if(!wrapper.classList.contains('hard-select')) box.click();
+        }
+        */
+      });
+    });
+
+    //Extend onSelectionChange 
+    let old = this.builder.settings.onSelectionChange;
+    this.builder.settings.onSelectionChange = () => {
+      if (old) old.call(this); // call user's defined onRender
+
+      if (this.builder.activeCol) {
+        if (this.builder.autoEditBlock) {
+          // change
+          this.builder.assistantMode = 'block';
+          btnScopeBlock.classList.add('on');
+          btnScopeSection.classList.remove('on');
+          btnScopeOthers.classList.remove('on');
+        }
+        btnScopeBlock.removeAttribute('disabled');
+      } else {
+        btnScopeBlock.disabled = true;
+        if (btnScopeOthers.classList.contains('on')) return;
+
+        // change
+        this.builder.assistantMode = 'general';
+        btnScopeSection.classList.add('on');
+        btnScopeBlock.classList.remove('on');
+        btnScopeOthers.classList.remove('on');
+      }
+    };
     this.initialStart = false; // for Safari
   }
 
+  resetConfig() {
+    const tempSlider = this.modalConfig.querySelector('.temperature-slider');
+    const valTemp = this.modalConfig.querySelector('.val-temp');
+    tempSlider.value = this.builder.temperature;
+    valTemp.innerHTML = this.builder.temperature;
+    const topPSlider = this.modalConfig.querySelector('.top-p-slider');
+    const valTopP = this.modalConfig.querySelector('.val-top-p');
+    topPSlider.value = this.builder.topP;
+    valTopP.innerHTML = this.builder.topP;
+  }
+  config() {
+    this.builder.showModal(this.modalConfig, false);
+    const tempSlider = this.modalConfig.querySelector('.temperature-slider');
+    const valTemp = this.modalConfig.querySelector('.val-temp');
+    if (localStorage.getItem('_temp') !== null) {
+      let val = localStorage.getItem('_temp');
+      tempSlider.value = val;
+      valTemp.innerHTML = val;
+    } else {
+      tempSlider.value = this.builder.temperature;
+      valTemp.innerHTML = this.builder.temperature;
+    }
+    const topPSlider = this.modalConfig.querySelector('.top-p-slider');
+    const valTopP = this.modalConfig.querySelector('.val-top-p');
+    if (localStorage.getItem('_top_p') !== null) {
+      let val = localStorage.getItem('_top_p');
+      topPSlider.value = val;
+      valTopP.innerHTML = val;
+    } else {
+      topPSlider.value = this.builder.topP;
+      valTopP.innerHTML = this.builder.topP;
+    }
+    const chkAutoEditBlock = this.modalConfig.querySelector('#chkAutoEditBlock');
+    if (localStorage.getItem('_auto_editblock') !== null) {
+      let val = localStorage.getItem('_auto_editblock');
+      if (val === '1') {
+        chkAutoEditBlock.checked = true;
+      } else {
+        chkAutoEditBlock.checked = false;
+      }
+    } else {
+      chkAutoEditBlock.checked = this.builder.autoEditBlock;
+    }
+    const inpAutoSendDelay = this.modalConfig.querySelector('.input-autosend-delay');
+    if (localStorage.getItem('_autosend_delay') !== null) {
+      let val = localStorage.getItem('_autosend_delay');
+      inpAutoSendDelay.value = val;
+    } else {
+      inpAutoSendDelay.value = this.builder.autoSendDelay;
+    }
+    const inpCommandLang = this.modalConfig.querySelector('.input-command-lang');
+    if (localStorage.getItem('_command_lang') !== null) {
+      let val = localStorage.getItem('_command_lang');
+      inpCommandLang.value = val;
+    } else {
+      inpCommandLang.value = this.builder.speechRecognitionLang;
+    }
+  }
   checkMic() {
     if (localStorage.getItem('_mic') !== null) {
       if (localStorage.getItem('_mic') === '0') {
@@ -92979,16 +93391,13 @@ class Dictation {
     inpCommand.focus();
     localStorage.setItem('_dictation', '1');
     const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
-    const btnClear = this.builderStuff.querySelector('.cmd-clear-command');
     if (this.checkMic()) {
       // Do Nothing
       chkAutoSend.parentNode.style.display = 'flex';
-      btnClear.style.marginRight = '';
     } else {
       const btnDictation = this.builderStuff.querySelector('.cmd-enable-dictation');
       btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
       chkAutoSend.parentNode.style.display = 'none';
-      btnClear.style.marginRight = '6px';
       return;
     }
     this.startDictation();
@@ -93024,13 +93433,11 @@ class Dictation {
     if (this.builder.onlineDemo) {
       setTimeout(() => {
         const btnDictation = this.builderStuff.querySelector('.cmd-enable-dictation');
-        const btnClear = this.builderStuff.querySelector('.cmd-clear-command');
         const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
         this.stopDictation();
         btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
         localStorage.setItem('_mic', '0');
         chkAutoSend.parentNode.style.display = 'none';
-        btnClear.style.marginRight = '6px';
       }, 1); // to give delay from the btnDictation click
 
       //Show info
@@ -93048,13 +93455,11 @@ class Dictation {
       } catch (e) {
         setTimeout(() => {
           const btnDictation = this.builderStuff.querySelector('.cmd-enable-dictation');
-          const btnClear = this.builderStuff.querySelector('.cmd-clear-command');
           const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
           this.stopDictation();
           btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
           localStorage.setItem('_mic', '0');
           chkAutoSend.parentNode.style.display = 'none';
-          btnClear.style.marginRight = '6px';
         }, 1); // to give delay from the btnDictation click
 
         //Show info
@@ -93075,10 +93480,6 @@ class Dictation {
           this.mediaRecorder = new MediaRecorder(stream);
           this.mediaRecorder.addEventListener('dataavailable', event => {
             if (this.aborted) return;
-
-            // console.log(event.data);
-            // if (event.data.size > 0) {
-            // }
             this.websocket.send(event.data);
           });
 
@@ -93130,6 +93531,7 @@ class Dictation {
           this.startDictation();
         }, 2000);
       }
+      this.builder.commandText = '';
       let finalTranscripts = '';
       let speechTimeout;
       this.websocket.onmessage = event => {
@@ -93143,28 +93545,74 @@ class Dictation {
               this.recorder.start(); // Using Recorder
             } */
 
-          // console.log('Start Dictation');
           this.aborted = false;
         }
         if (message.event === 'transcript-result') {
+          const transcript = message.data.channel.alternatives[0].transcript;
+
+          // Actions
+          const triggerWords = this.builder.triggerWords;
+          const findMatchingTrigger = transcript => {
+            transcript = transcript.toLowerCase();
+            transcript = transcript.replace('.', '');
+            for (const key in triggerWords) {
+              if (triggerWords[key].some(word => transcript.includes(word))) {
+                return key;
+              }
+              let result;
+              triggerWords[key].forEach(word => {
+                const similarity = this.builder.similarity.checkSimilarity(transcript, word);
+                if (similarity > 0.5) {
+                  result = key;
+                  return;
+                }
+              });
+              if (result) return result;
+            }
+            return null; // No match found
+          };
+
+          if (transcript && message.data.is_final) {
+            const matchingKey = findMatchingTrigger(transcript);
+            if (matchingKey) {
+              if (matchingKey === 'send') {
+                if (inpCommand.value.trim() === '') return;
+                const btnSend = this.modalCommand.querySelector('.cmd-send-command');
+                btnSend.click();
+                return;
+              } else if (matchingKey === 'abort') {
+                if (this.builder.isInProgress) {
+                  // Abort
+                  this.opts.abort();
+                  const inpCommand = this.builderStuff.querySelector('.inp-command');
+                  this.builder.commandText = inpCommand.value;
+                }
+                return;
+              } else if (matchingKey === 'clear') {
+                this.builder.commandText = '';
+                inpCommand.value = '';
+                return;
+              }
+            }
+          }
           if (this.builder.isInProgress || this.aborted) {
             return;
           }
-          const transcript = message.data.channel.alternatives[0].transcript;
+          finalTranscripts = this.builder.commandText;
           if (transcript && message.data.is_final) {
-            finalTranscripts += ' ' + transcript;
+            finalTranscripts += ' ' + transcript.trim();
           }
 
           // Format
           finalTranscripts = finalTranscripts.charAt(0).toUpperCase() + finalTranscripts.slice(1);
           finalTranscripts = finalTranscripts.trim();
-          inpCommand.value = finalTranscripts;
+          this.builder.commandText = finalTranscripts;
+          if (transcript && message.data.is_final) {
+            this.builder.commandText = finalTranscripts;
+            inpCommand.value = finalTranscripts;
+          }
           clearTimeout(speechTimeout);
-          console.log('Writing..');
           speechTimeout = setTimeout(() => {
-            console.log('Clear');
-            this.builder.commandText = '';
-            finalTranscripts = '';
             if (this.builder.autoSendCommand) {
               if (inpCommand.value.trim() === '') return;
               const btnSend = this.modalCommand.querySelector('.cmd-send-command');
@@ -93184,30 +93632,71 @@ class Dictation {
         this.recognition.start();
         this.speechTimeout;
         this.builder.commandText = '';
+        let finalTranscripts = '';
         this.recognition.onresult = event => {
-          if (this.builder.isInProgress) {
-            return;
-          }
-          let interimTranscripts = '';
-          let finalTranscripts = '';
+          let transcript = '';
           for (var i = event.resultIndex; i < event.results.length; ++i) {
             if (event.results[i].isFinal) {
-              finalTranscripts += event.results[i][0].transcript;
-            } else {
-              interimTranscripts += event.results[i][0].transcript;
+              transcript = event.results[i][0].transcript;
             }
           }
-          if (interimTranscripts.indexOf('send') !== -1 || finalTranscripts.indexOf('send') !== -1) {
-            const btnSend = this.modalCommand.querySelector('.cmd-send-command');
-            btnSend.click();
+          if (!transcript) return;
+
+          // Actions
+          const triggerWords = this.builder.triggerWords;
+          const findMatchingTrigger = transcript => {
+            transcript = transcript.toLowerCase();
+            for (const key in triggerWords) {
+              if (triggerWords[key].some(word => transcript.includes(word))) {
+                return key;
+              }
+              let result;
+              triggerWords[key].forEach(word => {
+                const similarity = this.builder.similarity.checkSimilarity(transcript, word);
+                if (similarity > 0.5) {
+                  result = key;
+                  return;
+                }
+              });
+              if (result) return result;
+            }
+            return null; // No match found
+          };
+
+          const matchingKey = findMatchingTrigger(transcript);
+          if (matchingKey) {
+            if (matchingKey === 'send') {
+              if (inpCommand.value.trim() === '') return;
+              const btnSend = this.modalCommand.querySelector('.cmd-send-command');
+              btnSend.click();
+              return;
+            } else if (matchingKey === 'abort') {
+              if (this.builder.isInProgress) {
+                // Abort
+                this.opts.abort();
+                const inpCommand = this.builderStuff.querySelector('.inp-command');
+                this.builder.commandText = inpCommand.value;
+              }
+              return;
+            } else if (matchingKey === 'clear') {
+              this.builder.commandText = '';
+              inpCommand.value = '';
+              return;
+            }
+          }
+          if (this.builder.isInProgress) {
             return;
           }
-          this.builder.commandText += finalTranscripts; // + '<i style="color:#999">' + interimTranscripts + '</i>';
+          finalTranscripts = this.builder.commandText;
+          finalTranscripts += ' ' + transcript.trim();
 
-          inpCommand.value = this.builder.commandText;
+          // Format
+          finalTranscripts = finalTranscripts.trim();
+          finalTranscripts = finalTranscripts.charAt(0).toUpperCase() + finalTranscripts.slice(1);
+          this.builder.commandText = finalTranscripts;
+          inpCommand.value = finalTranscripts;
           clearTimeout(this.speechTimeout);
           this.speechTimeout = setTimeout(() => {
-            this.builder.commandText = '';
             if (this.builder.autoSendCommand) {
               if (inpCommand.value.trim() === '') return;
               const btnSend = this.modalCommand.querySelector('.cmd-send-command');
@@ -93228,13 +93717,11 @@ class Dictation {
         // See btnDictation click
         setTimeout(() => {
           const btnDictation = this.builderStuff.querySelector('.cmd-enable-dictation');
-          const btnClear = this.builderStuff.querySelector('.cmd-clear-command');
           const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
           this.stopDictation();
           btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
           localStorage.setItem('_mic', '0');
           chkAutoSend.parentNode.style.display = 'none';
-          btnClear.style.marginRight = '6px';
         }, 1); // to give delay from the btnDictation click
 
         //Show info
@@ -93312,6 +93799,12 @@ class Similarity {
   constructor(builder) {
     this.builder = builder;
   }
+  checkSimilarity(word1, word2) {
+    word1 = word1.toLowerCase();
+    word2 = word2.toLowerCase();
+    const similarity = stringSimilarity.stringSimilarity(word1, word2);
+    return similarity;
+  }
   check(command) {
     const {
       commandList
@@ -93968,9 +94461,20 @@ class ContentBuilder {
       // speechTranscribeUrl: 'http://192.168.1.7:8081',
       onlineDemo: false,
       autoSendDelay: 4000,
+      autoEditBlock: false,
       commandPlaceholderText: '',
       enableShortCommands: true,
       speechRecognitionLang: 'en-US',
+      assistantMode: 'general',
+      triggerWords: {
+        send: ['send', 'okay', 'execute', 'run'],
+        abort: ['abort', 'cancel'],
+        clear: ['clear', 'erase']
+      },
+      temperature: 0.6,
+      //0.4,
+      topP: 0.9,
+      //0.6,
       useMediaRecorder: true,
       // do not change
       encoderPath: '',
@@ -94578,6 +95082,7 @@ class ContentBuilder {
             if (this.toolbarDisplay !== 'auto') {
               this.rte.showDefaultToolbar();
             }
+            if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
           }
         }
         this.element.hyperlink.buttonEditor.hide();
@@ -96622,6 +97127,7 @@ class ContentBuilder {
         this.resize.enable();
       }
     }
+    if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
   }
   handleCellKeypress(e) {
     if (e.ctrlKey || e.metaKey) {
@@ -97684,6 +98190,19 @@ class ContentBuilder {
       });
     }
   }
+  hideElementTools() {
+    let elmTool = document.querySelector('.is-element-tool');
+    let divImageTool = document.querySelector('#divImageTool');
+    let divImageResizer = document.querySelector('#divImageResizer');
+    if (divImageTool) if (divImageTool.style.display === 'flex') {
+      if (this.editor.moveable) this.editor.moveable.updateRect();
+      let controlBox = this.doc.querySelector('.moveable-control-box');
+      if (controlBox) controlBox.style.display = 'none';
+    }
+    if (elmTool) elmTool.style.display = '';
+    if (divImageTool) divImageTool.style.display = '';
+    if (divImageResizer) divImageResizer.style.display = '';
+  }
 }
 
 var pace = {exports: {}};
@@ -101754,6 +102273,7 @@ class AnimateScroll {
       if (box) {
         box.classList.add('box-select');
         box.removeAttribute('data-save-box');
+        this.builder.activeBox = box;
       }
 
       let section = this.builder.doc.querySelector('[data-save-section]');
@@ -101761,6 +102281,7 @@ class AnimateScroll {
       if (section) {
         section.classList.add('section-select');
         section.removeAttribute('data-save-section');
+        this.builder.activeSection = section;
       }
 
       if (reOpen) {
@@ -106261,7 +106782,7 @@ const contextList = {
   new_section_with_list: `
 To create a section with a list:
 - Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 - For 3 list items, use 3 columns in a row. For 2 or 4 list items, use 2 columns per row.
     
 Example:
@@ -106318,7 +106839,7 @@ Example:
   new_section_with_list_numbering: [`
 To create a section with a list and numbering:
 - Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 - For 3 list items, use 3 columns in a row. For 2 or 4 list items, use 2 columns per row.
 
 Example:
@@ -106370,7 +106891,7 @@ Example:
 `, `
 To create a section with a list and numbering:
 - Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 - For 3 list items, use 3 columns in a row. For 2 or 4 list items, use 2 columns per row.
 
 Example:
@@ -106420,7 +106941,7 @@ Example:
 To create a section with list icons:
 - Use the example below as a template.
 - For 3 list items, use 3 columns in a row. For 2 or 4 list items, use 2 columns per row.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
         
 Example:
 
@@ -106440,7 +106961,7 @@ Example:
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-140"></div>
+                <div class="spacer height-80"></div>
             </div>
         </div>
         <div class="row">
@@ -106476,7 +106997,7 @@ Example:
 To create a section with a list of photos or a photo gallery:
 - Use the example below as a template.
 - Images must use this image URL: '{{_IMAGEURL}}'. Replace the {{IMAGEURL}} with this URL.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
     
 Example:
     
@@ -106544,7 +107065,7 @@ Example:
 To create a section: 
 - Use the example below as a template.
 - Images must use this image URL: '{{_IMAGEURL}}'. Replace the {{IMAGEURL}} with this URL.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -106581,7 +107102,7 @@ Example:
 To create a section with a list of photos or a photo gallery:
 - Use the example below as a template.
 - Images must use this image URL: '{{_IMAGEURL}}'. Replace the {{IMAGEURL}} with this URL.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -106621,7 +107142,7 @@ Example:
   new_section: [`
 To create a section: 
 - Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -106652,39 +107173,45 @@ Example:
 </div>
 
 `],
-  new_section_others: `
-To create a section: 
-- Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+  new_section_others: `Use one of these templates that is more suitable:
 
-Example:
+
+Template 1: (Suitable for one short paragraph content, a tweet, quick information.)
 
 <div class="is-section is-box type-poppins box-autofit min-height-60 is-section-100">
     <div class="is-overlay"></div>
-    <div class="is-container v2 leading-13 size-19 is-content-800 content-pt-50 content-pb-50">
+    <div class="is-container v2 leading-13 size-19 is-content-800 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                <div class="spacer height-100"></div>
+                <p class="size-32">{{CONTENT}}</p>
             </div>
         </div>
+    </div>
+</div>
+
+Template 2: (Suitable for short content with a title and paragraph content. Ensure that there is a space between the title and the content.)
+
+<div class="is-section is-box type-poppins box-autofit min-height-60 is-section-100">
+    <div class="is-overlay"></div>
+    <div class="is-container v2 leading-13 size-19 is-content-800 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                <h1 class="font-normal leading-11 size-64">A forward thinking studio delivering digital solutions that help your business.</h1>
+                <div class="spacer height-100"></div>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-80"></div>
+                <h1 class="font-normal leading-11 size-64">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                <div class="spacer height-20"></div>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                <p>{{CONTENT}}</p>
             </div>
         </div>
         <div class="row">
@@ -106695,16 +107222,12 @@ Example:
     </div>
 </div>
 
-`,
-  new_section_article: [`To create a section: 
-- Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
 
-Example:
+Template 3:  (Suitable for long content with multiple subtopics. Ensure that there is a space between subtopics.)
 
 <div class="is-section is-box type-poppins box-autofit min-height-60 is-section-100">
     <div class="is-overlay"></div>
-    <div class="is-container v2 leading-13 size-19 is-content-800 content-pt-50 content-pb-50">
+    <div class="is-container v2 leading-13 size-19 is-content-800 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
                 <div class="spacer height-100"></div>
@@ -106712,29 +107235,28 @@ Example:
         </div>
         <div class="row">
             <div class="column">
-                <h1 class="font-normal leading-11 size-64">Title here</h1>
+                <h1 class="font-normal leading-11 size-64">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-80"></div>
+                <div class="spacer height-20"></div>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                <p>{{CONTENT}}</p>
             </div>
         </div>
-
         <div class="row">
             <div class="column">
-                <div class="spacer height-60"></div>
+                <div class="spacer height-20"></div>
             </div>
         </div>
-
         <div class="row">
             <div class="column">
-                <h2 class="size-28 font-normal">Sub Topic Title here</h2>
+                <h2>{{SUBTITLE}}</h2>
+                <p>{{CONTENT}}</p>
             </div>
         </div>
         <div class="row">
@@ -106744,18 +107266,70 @@ Example:
         </div>
         <div class="row">
             <div class="column">
-                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                <h2>{{SUBTITLE}}</h2>
+                <p>{{CONTENT}}</p>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                <div class="spacer height-80"></div>
             </div>
         </div>
+    </div>
+</div>
+
+`,
+  // same as new_section_others (Ensure that there is a space between subtopics.)
+  new_section_article: [`This is the template:
 
+<div class="is-section is-box type-poppins box-autofit min-height-60 is-section-100">
+    <div class="is-overlay"></div>
+    <div class="is-container v2 leading-13 size-19 is-content-800 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                <div class="spacer height-60"></div>
+                <div class="spacer height-100"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <h1 class="font-normal leading-11 size-64">{{TITLE}}</h1>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <div class="spacer height-20"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <p>{{CONTENT}}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <div class="spacer height-20"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <h2>{{SUBTITLE}}</h2>
+                <p>{{CONTENT}}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <div class="spacer height-20"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <h2>{{SUBTITLE}}</h2>
+                <p>{{CONTENT}}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <div class="spacer height-80"></div>
             </div>
         </div>
     </div>
@@ -106765,7 +107339,7 @@ Example:
   new_section_article_with_image: [`To create a section: 
 - Use the example below as a template.
 - Images must use this image URL: '{{_IMAGEURL}}'. Replace the {{IMAGEURL}} with this URL.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -106845,7 +107419,7 @@ Example:
 To create a section: 
 - Use the example below as a template.
 - Images must use this image URL: '{{_IMAGEURL}}'. Replace the {{IMAGEURL}} with this URL.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -106934,7 +107508,7 @@ Example:
 To create a section with 2 boxes: 
 - Create one section with 'div.is-section' element and add 2 'div.is-box' elements inside it.
 - Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example result:
 
@@ -106992,7 +107566,7 @@ Example result:
 To create a section with 3 boxes: 
 - Create 1 (one) section with 'div.is-section' element and add 3 'div.is-box' elements inside it.
 - Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example result:
 
@@ -107063,7 +107637,7 @@ Example result:
   new_section_four_boxes: `To create a section with 4 boxes: 
 - Create 1 (one) section with 'div.is-section' element and add 4 'div.is-box' elements inside it.
 - Use the example below as a template.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example result:
 
@@ -107248,19 +107822,22 @@ Important: include all images from the original section in the returned result!
 `],
   redesign_layout: [
   /* 1 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-54 font-medium leading-none'.
-        
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
+
 This is the template:
 
 <div class="is-section is-box is-section-100 box-autofit min-height-70 type-poppins">
     <div class="is-overlay" style="background-color: rgb(255, 255, 255);">
     </div>
-    <div class="is-container v2 leading-14 content-py-40 is-content-1100 size-18">
+    <div class="is-container v2 leading-14 is-content-1100 size-18 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-54 font-medium leading-none">{{TITLE}}</h1>
+            </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107289,7 +107866,7 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-60"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
@@ -107297,18 +107874,31 @@ This is the template:
 
 `,
   /* 2 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-116 font-extrabold leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
-<div class="is-section is-box is-section-100 type-poppins-lekton min-height-60">
+<div class="is-section is-box is-section-100 type-heebo-ibmplexmono min-height-60">
     <div class="is-overlay"></div>
-    <div class="is-container v2 is-content-1740 size-19 leading-13">
+    <div class="is-container v2 is-content-1100 size-18 leading-13 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                <div class="spacer height-40"></div>
+                <h1 class="size-116 font-medium leading-09">{{TITLE}}</h1>
+            </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
             </div>
             <div class="column">
                 {{CONTENT}}
@@ -107316,7 +107906,7 @@ This is the template:
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-80"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107327,45 +107917,57 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-40"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
 </div>
 
 `,
-  /* 3 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must change the title class with 'size-76 font-normal leading-none'.
+  /* 3 (very good) */
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 type-poppins-lekton min-height-60">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 is-content-1100 size-18 leading-13 content-py-40">
-        <div class="row clearfix">
+    <div class="is-container v2 is-content-1100 size-18 leading-13 content-pt-60 content-pb-60">
+        <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-76 font-normal leading-none">{{TITLE}}</h1>
+            </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-40"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
             <div class="column">
                 {{CONTENT}}
             </div>
+            <div class="column">
+                {{CONTENT}}
+            </div>
         </div>
-        <div class="row clearfix">
+        <div class="row">
             <div class="column">
-                <div class="spacer height-40"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
-        <div class="row clearfix">
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
+            <div class="column">
+                {{CONTENT}}
+            </div>
             <div class="column">
                 {{CONTENT}}
             </div>
@@ -107375,17 +107977,33 @@ This is the template:
 
 `,
   /* 4 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'uppercase size-72 font-semibold leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 type-raleway-lato box-autofit min-height-70">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 h-full flex flex-col justify-between size-19 leading-none content-py-50 is-content-1000">
+    <div class="is-container v2 h-full flex flex-col justify-between size-19 leading-none is-content-1000 content-pt-60 content-pb-60">
+        <div class="row">
+            <div class="column">
+                <h1 class="uppercase size-72 font-semibold leading-09">{{TITLE}}</h1>
+            </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
         <div class="row">
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
             <div class="column">
                 {{CONTENT}}
             </div>
@@ -107403,7 +108021,7 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-40"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
@@ -107411,24 +108029,40 @@ This is the template:
 
 `,
   /* 5 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-96 font-normal leading-none'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 type-alegreya-lato min-height-60">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 leading-13 size-19 is-content-1600">
+    <div class="is-container v2 leading-13 size-18 is-content-1000 content-pt-60 content-pb-60">
+        <div class="row">
+            <div class="column">
+                <h1 class="size-76 font-normal leading-none">{{TITLE}}</h1>
+            </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
         <div class="row">
             <div class="column">
                 {{CONTENT}}
             </div>
+            <div class="column">
+                {{CONTENT}}
+            </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-80"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107439,7 +108073,7 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-40"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
@@ -107447,20 +108081,23 @@ This is the template:
 
 `,
   /* 6 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'text-left size-64 font-medium leading-none tracking-tight'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 type-montserrat-roboto is-content-top edge-y-1 min-height-60">
     <div class="is-overlay"></div>
-    <div class="is-container v2 size-18 leading-12 is-content-1200 is-content-left edge-x-1">
+    <div class="is-container v2 size-18 leading-12 is-content-1000 is-content-left edge-x-1">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="text-left size-64 font-medium leading-none tracking-tight">{{TITLE}}</h1>
                 <p style="border-bottom: 2px solid #333; width: 80px;"></p>
             </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
         </div>
         <div class="row">
             <div class="column">
@@ -107474,28 +108111,44 @@ This is the template:
             <div class="column">
                 {{CONTENT}}
             </div>
+        </div>
+        <div class="row">
             <div class="column">
                 <div class="spacer height-60"></div>
             </div>
         </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
+            <div class="column">
+                {{CONTENT}}
+            </div>
+            <div class="column">
+                {{CONTENT}}
+            </div>
+        </div>
     </div>
 </div>
 
 `,
   /* 7 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-88 font-medium leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 type-poppins box-autofit min-height-70">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 is-content-1300 size-18 leading-13">
+    <div class="is-container v2 is-content-1300 size-18 leading-13 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-88 font-medium leading-09">{{TITLE}}</h1>
+            </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107524,7 +108177,7 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-60"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
@@ -107532,19 +108185,22 @@ This is the template:
 
 `,
   /* 08 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-68 font-normal leading-09 racking-tighter'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 type-frankruhllibre-lato box-autofit min-height-70">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 is-content-1200 leading-12 content-py-40 size-19">
+    <div class="is-container v2 is-content-1100 leading-12 size-19 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-68 font-normal leading-09 tracking-tighter">{{TITLE}}</h1>
+            </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107559,42 +108215,68 @@ This is the template:
             <div class="column">
                 {{CONTENT}}
             </div>
+        </div>
+        <div class="row">
             <div class="column">
                 <div class="spacer height-60"></div>
             </div>
         </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
+            <div class="column">
+                {{CONTENT}}
+            </div>
+            <div class="column">
+                {{CONTENT}}
+            </div>
+        </div>
     </div>
 </div>
 
 `,
   /* 09 (very good) */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-68 font-normal leading-none tracking-tighter'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 min-height-60 type-alegreyasanssc-hind">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 is-content-1000 content-py-40 size-19 leading-12">
+    <div class="is-container v2 is-content-1000 size-19 leading-12 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-68 font-normal leading-none tracking-tighter">{{TITLE}}</h1>
             </div>
             <div class="column">
-                <div class="spacer height-40"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-120"></div>
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
+            <div class="column">
+                {{CONTENT}}
             </div>
         </div>
         <div class="row">
             <div class="column">
                 <div class="spacer height-60"></div>
             </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
             <div class="column">
                 {{CONTENT}}
             </div>
@@ -107607,18 +108289,18 @@ This is the template:
 
 `,
   /* 10 (very good) */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-76 font-normal leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 type-oranienbaum-sourcesanspro box-autofit">
     <div class="is-overlay"></div>
-    <div class="is-container v2 size-17 is-content-1000 leading-12">
+    <div class="is-container v2 size-17 is-content-1000 leading-12 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-76 font-normal leading-09">{{TITLE}}</h1>
             </div>
             <div class="column">
                 <div class="spacer height-60"></div>
@@ -107629,10 +108311,23 @@ This is the template:
                 <div class="spacer height-60"></div>
             </div>
         </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
+            <div class="column">
+                {{CONTENT}}
+            </div>
+        </div>
         <div class="row">
             <div class="column">
                 <div class="spacer height-60"></div>
             </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
             <div class="column">
                 {{CONTENT}}
             </div>
@@ -107645,17 +108340,33 @@ This is the template:
 
 `,
   /* 11 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'uppercase size-84 font-normal leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Important: group all image columns together in a single row.
 
 This is the template:
 
 <div class="is-section is-box is-section-100 type-anonymouspro-catamaran box-autofit min-height-70">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 h-full flex flex-col justify-between size-19 leading-none content-py-50 is-content-1000">
+    <div class="is-container v2 h-full flex flex-col justify-between size-19 leading-none is-content-1000 content-pt-60 content-pb-60">
+        <div class="row">
+            <div class="column">
+                <h1 class="uppercase size-84 font-normal leading-09">{{TITLE}}</h1>
+            </div>
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
         <div class="row">
+            <div class="column">
+                <div class="spacer height-60"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="column">
+                {{CONTENT}}
+            </div>
             <div class="column">
                 {{CONTENT}}
             </div>
@@ -107673,7 +108384,7 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-40"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
@@ -107682,19 +108393,19 @@ This is the template:
 `],
   change_layout_of_box: [
   /* 1 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-54 font-medium leading-none'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
+Also, move the heading above the paragraph content to create a logical flow from the title to the text.
 
 This is the template:
 
 <div class="is-box type-poppins box-auto min-height-70">
     <div class="is-overlay" style="background-color: rgb(255, 255, 255);">
     </div>
-    <div class="is-container v2 leading-14 content-py-40 is-content-800 size-18">
+    <div class="is-container v2 leading-14 is-content-800 size-18 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-54 font-medium leading-none">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
@@ -107715,23 +108426,22 @@ This is the template:
 
 `,
   /* 2 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-88 font-extrabold leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
-<div class="is-box type-poppins-lekton box-auto min-height-60">
+<div class="is-box type-heebo-ibmplexmono box-auto min-height-60">
     <div class="is-overlay"></div>
-    <div class="is-container v2 is-content-900 size-19 leading-13">
+    <div class="is-container v2 is-content-900 size-18 leading-13 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-88 font-medium leading-09">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-80"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107739,7 +108449,7 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-40"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
@@ -107747,37 +108457,29 @@ This is the template:
 
 `,
   /* 3 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-68 font-normal leading-none'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
 <div class="is-box type-poppins-lekton box-auto min-height-60">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 is-content-1100 size-18 leading-13 content-py-40">
+    <div class="is-container v2 is-content-1100 size-18 leading-13 content-pt-60 content-pb-60">
         <div class="row clearfix">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-68 font-normal leading-none">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-40"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
             <div class="column">
                 {{CONTENT}}
             </div>
-        </div>
-        <div class="row clearfix">
-            <div class="column">
-                <div class="spacer height-40"></div>
-            </div>
-        </div>
-        <div class="row clearfix">
             <div class="column">
                 {{CONTENT}}
             </div>
@@ -107787,19 +108489,18 @@ This is the template:
 
 `,
   /* 4 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'uppercase size-68 font-semibold leading-none'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
 <div class="is-box type-raleway-lato box-auto min-height-60">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 h-full flex flex-col justify-between size-19 leading-none content-py-50 is-content-900">
+    <div class="is-container v2 h-full flex flex-col justify-between size-19 leading-none is-content-900 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="uppercase size-68 font-semibold leading-none">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
@@ -107820,27 +108521,23 @@ This is the template:
 
 `,
   /* 5 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-68 font-normal leading-none'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
 <div class="is-box type-alegreya-lato box-auto min-height-60">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 leading-13 size-19 is-content-860">
+    <div class="is-container v2 leading-13 size-18 is-content-860 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
-            </div>
-            <div class="column">
-                <div class="spacer height-60"></div>
+                <h1 class="size-68 font-normal leading-none">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-120"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107856,9 +108553,8 @@ This is the template:
 
 `,
   /* 6 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-64 font-medium leading-none tracking-tight'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability.
 
 This is the template:
 
@@ -107867,7 +108563,7 @@ This is the template:
     <div class="is-container v2 size-18 leading-12 is-content-800 is-content-left edge-x-1">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-64 font-medium leading-none tracking-tight">{{TITLE}}</h1>
                 <p style="border-bottom: 2px solid #333; width: 80px;"></p>
             </div>
             <div class="column">
@@ -107876,7 +108572,7 @@ This is the template:
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-40"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107892,24 +108588,23 @@ This is the template:
 
 `,
   /* 7 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-88 font-normal leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
 <div class="is-box type-poppins box-auto min-height-60">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 is-content-860 size-18 leading-13">
+    <div class="is-container v2 is-content-860 size-18 leading-13 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-88 font-normal leading-09">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-80"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107925,27 +108620,23 @@ This is the template:
 
 `,
   /* 08 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-68 font-normal leading-09 tracking-tighter'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
 <div class="is-box type-frankruhllibre-lato box-auto min-height-60">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 is-content-860 leading-12 content-py-40 size-19">
+    <div class="is-container v2 is-content-860 leading-12 size-19 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
-            </div>
-            <div class="column">
-                <div class="spacer height-60"></div>
+                <h1 class="size-68 font-normal leading-09 tracking-tighter">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-120"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107961,24 +108652,23 @@ This is the template:
 
 `,
   /* 09 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-68 font-normal leading-none tracking-tighter'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
 <div class="is-box type-alegreyasanssc-hind box-auto min-height-60">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 is-content-860 content-py-40 size-19 leading-12">
+    <div class="is-container v2 is-content-860 size-19 leading-12 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="size-68 font-normal leading-none tracking-tighter">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-120"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107986,7 +108676,7 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-60"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
@@ -107994,9 +108684,8 @@ This is the template:
 
 `,
   /* 10 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'size-76 font-normal leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
@@ -108005,10 +108694,7 @@ This is the template:
     <div class="is-container v2 size-17 is-content-860 leading-12 is-content-left edge-x-1">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
-            </div>
-            <div class="column">
-                <div class="spacer height-60"></div>
+                <h1 class="size-76 font-normal leading-09">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
@@ -108021,7 +108707,7 @@ This is the template:
                 {{CONTENT}}
             </div>
             <div class="column">
-                <div class="spacer height-60"></div>
+                {{CONTENT}}
             </div>
         </div>
     </div>
@@ -108029,19 +108715,18 @@ This is the template:
 
 `,
   /* 11 */
-  `To redesign the provided section:
-- Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'uppercase size-84 font-normal leading-09'.
+  `Re-arrange the placement of the title, paragraph, spaces, or images based the grid template below.
+Feel free to change the layout to create a visually appealing design and enhance readability. 
 
 This is the template:
 
 <div class="is-box type-anonymouspro-catamaran box-auto min-height-70">
     <div class="is-overlay">
     </div>
-    <div class="is-container v2 size-19 leading-none content-py-50 is-content-700">
+    <div class="is-container v2 size-19 leading-none is-content-700 content-pt-60 content-pb-60">
         <div class="row">
             <div class="column">
-                {{CONTENT}}
+                <h1 class="uppercase size-84 font-normal leading-09">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
@@ -108065,7 +108750,7 @@ This is the template:
 - Create the necessary rows and columns.
 - Use the example below as a template.
 - Images must use this image URL: '{{_IMAGEURL}}'. Replace the {{IMAGEURL}} with this URL.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -108090,7 +108775,7 @@ Example:
 - Create the necessary rows and columns.
 - Use the example below as a template.
 - Images must use this image URL: '{{_IMAGEURL}}'. Replace the {{IMAGEURL}} with this URL.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example :
 
@@ -108124,7 +108809,7 @@ Example :
 - Use the example below as a template.
 - For 3 list items, use 3 columns in a row. For 2 or 4 list items, use 2 columns per row.
 - Each list item has <h3> as item title. Use example below.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -108181,7 +108866,7 @@ Example:
 - Use the example below as a template.
 - Images must use this image URL: '{{_IMAGEURL}}'. Replace the {{IMAGEURL}} with this URL.
 - Each list item has <h3> as item title.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
     
 Example result (Use it as the template):
     
@@ -108245,7 +108930,7 @@ Example result (Use it as the template):
 - For 3 list items, use 3 columns in a row. For 2 or 4 list items, use 2 columns per row.
 - Use the example below as a template.
 - Each list item has <h3> as item title.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -108294,7 +108979,7 @@ Example:
   // INFO: The {{ICONCLASS}} replacement works well. No processing required.
   update_section_with_list_numbering: [`To add a list and numbering:
 - Create the required rows and column and add them inside the current 'div.is-container'.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 - For 3 list items, use 3 columns in a row. For 2 or 4 list items, use 2 columns per row.
 
 Example:
@@ -108340,7 +109025,7 @@ Example:
 
 `, `To add a list and numbering:
 - Create the required rows and column and add them inside the current 'div.is-container'.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 - For 3 list items, use 3 columns in a row. For 2 or 4 list items, use 2 columns per row.
 
 Example:
@@ -108392,7 +109077,7 @@ Example:
 `],
   update_section_article_with_image: `To add an article: 
 - Create the required rows and column and add them inside the current 'div.is-container'.
-- Replace all the text in the example with well-written copy that aligns with the requested subject.
+- Replace all the text in the example with the requested content.
 
 Example:
 
@@ -108535,6 +109220,215 @@ class Lib {
     this.builder = builder;
   }
 
+  getFunctions_block() {
+    return [{
+      name: 'get_intent',
+      description: 'analyze user command to modify or create section/content',
+      parameters: {
+        type: 'object',
+        properties: {
+          enhance_writings: {
+            type: 'boolean',
+            description: 'User requests to enhance the writings, rewrite, paraphrase or change text.'
+          },
+          editing: {
+            type: 'boolean',
+            description: 'If requested to modify the current content or style.'
+          },
+          add_headline: {
+            type: 'boolean',
+            description: 'User requests to add a headline.'
+          },
+          add_space: {
+            type: 'boolean',
+            description: 'User requests to add a space.'
+          },
+          adjust_space: {
+            type: 'boolean',
+            description: 'User requests to increase or decrease a space.'
+          },
+          add_button: {
+            type: 'boolean',
+            description: 'User requests to add a button.'
+          },
+          add_youtube: {
+            type: 'boolean',
+            description: 'User requests to add a youtube/vimeo video.'
+          },
+          add_video: {
+            type: 'boolean',
+            description: 'User requests to add a video.'
+          },
+          add_audio: {
+            type: 'boolean',
+            description: 'User requests to add an audio.'
+          },
+          add_map: {
+            type: 'boolean',
+            description: 'User requests to add a google map.'
+          },
+          add_image: {
+            type: 'boolean',
+            description: 'User requests to add an image'
+          },
+          align_text: {
+            type: 'boolean',
+            description: 'User requests to align text'
+          },
+          line_height: {
+            type: 'boolean',
+            description: 'User requests to change or adjust line height'
+          },
+          font_size: {
+            type: 'boolean',
+            description: 'User requests to change or adjust font size'
+          },
+
+          /*
+          change_section_height: {
+              type: 'number',
+              description: 'Requested height (percentage) of the section. Possible value: 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 85, 90, 100',
+          },
+           section_background: {
+              type: 'string',
+              description: 'User request to add or remove section background that can be a background image, video or slider. Possible value: image, video, slider, remove'
+          },
+           change_color_individual_text: {
+              type: 'boolean',
+              description: 'User requests to change the color of a headline, paragraph of specific element/text.',
+          },
+          change_content_dark: {
+              type: 'boolean',
+              description: 'If requested to change text/content color to dark/black.',
+          },
+          change_content_light: {
+              type: 'boolean',
+              description: 'If requested to change text/content color to light/white.',
+          },
+           align_individual_text: {
+              type: 'boolean',
+              description: 'If requested to align an individual text/element, such as a headline, a paragraph, buttons, etc to left, center or right',
+          },
+          align_whole_content: {
+              type: 'string',
+              description: 'User requests to align the whole text/content. Possible value: left, center or right',
+          },
+           move_content_left: {
+              type: 'boolean',
+              description: 'Move content to the left',
+          },
+          move_content_center: {
+              type: 'boolean',
+              description: 'Move content to the center',
+          },
+          move_content_right: {
+              type: 'boolean',
+              description: 'Move content to the right',
+          },
+          move_content_top: {
+              type: 'boolean',
+              description: 'Move content to the top',
+          },
+          move_content_bottom: {
+              type: 'boolean',
+              description: 'Move content to the bottom',
+          },
+          
+          content_width: {
+              type: 'string',
+              description: 'User requests to increase or decrease content/container width. Possible value: increase, decrease'
+          },
+           line_height_paragraph: {
+              type: 'string',
+              description: 'User requests to increase/decrease the line height of the paragraph. Possible value: increase, decrease',
+          },
+          line_height_individual_text: {
+              type: 'boolean',
+              description: 'User requests to increase/decrease the line height of an individual text/element (eg. headline).',
+          },
+          
+          font_size_paragraph: {
+              type: 'string',
+              description: 'User requests to increase/decrease the font size of the paragraph. Possible value: increase, decrease',
+          },
+          font_size_individual_text: {
+              type: 'boolean',
+              description: 'User requests to increase/decrease the font size of an individual text/element (eg. headline).',
+          },
+           animation: {
+              type: 'string',
+              description: 'User requests to add animation. Possible value: fade-in, slide-up, zoom-in, remove'
+          },
+          */
+          new_block: {
+            type: 'boolean',
+            description: 'User requests to add a new block.'
+          },
+          block_task: {
+            type: 'string',
+            description: 'User requests to move, duplicate, or delete block/row. Possible values: move-up, move-down, duplicate, remove'
+          },
+          new_column_onright: {
+            type: 'boolean',
+            description: 'User requests to add a new column.'
+          },
+          new_column_onleft: {
+            type: 'boolean',
+            description: 'User requests to add a new column on the left.'
+          },
+          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'
+          },
+          move_content_center: {
+            type: 'boolean',
+            description: 'Move content to the center'
+          },
+          move_content_right: {
+            type: 'boolean',
+            description: 'Move content to the right'
+          },
+          move_content_top: {
+            type: 'boolean',
+            description: 'Move content to the top'
+          },
+          move_content_bottom: {
+            type: 'boolean',
+            description: 'Move content to the bottom'
+          },
+          section_task: {
+            type: 'string',
+            description: 'User requests to move, duplicate, or delet section. Possible values: move-up, move-top, move-down, move-bottom, duplicate, remove'
+          },
+          select_section: {
+            type: 'string',
+            description: 'User requests to select a section. Value can be: current, next, previous, first, last.'
+          },
+          select_block: {
+            type: 'string',
+            description: 'User requests to select a block. Value can be: block, headline, title, paragraph, image, next, previous, first, last'
+          },
+          unselect_block: {
+            type: 'boolean',
+            description: 'User requests to unselect block'
+          }
+        }
+      }
+    }];
+  }
+
   getFunctions() {
     return [{
       name: 'get_intent',
@@ -108542,17 +109436,21 @@ class Lib {
       parameters: {
         type: 'object',
         properties: {
-          request_not_relate_with_current_content: {
+          asking_info: {
             type: 'boolean',
-            description: 'User request doesn\'t relate with the current content/section'
+            description: 'User request an information'
           },
 
           /*
               To make 2 columns not mixed with 2 boxes, each has to be identified separately
           */
+          // new_section: {
+          //     type: 'string', // => Not Accurate. Value can be 'article','gallery'
+          //     description: 'User requests to add a new section (normal section, section with 2 or 3 columns).Possible values: new-section, new-section-2-columns, new-section-3-columns',
+          // },
           new_section: {
-            type: 'string',
-            description: 'User requests to add a new section (normal section, section with 2 or 3 columns).Possible values: new-section, new-section-2-columns, new-section-3-columns'
+            type: 'boolean',
+            description: 'User requests to add a new section.'
           },
           redesign_layout: {
             type: 'boolean',
@@ -108560,7 +109458,11 @@ class Lib {
           },
           change_text: {
             type: 'boolean',
-            description: 'User explicitely requests to update text of the current content'
+            description: 'User explicitely requests to update text of the current content, rewrite, paraphrase or change text.'
+          },
+          write_based_on_the_current_content: {
+            type: 'boolean',
+            description: 'User request create new content based on the current content, such as to summarize, expand, make short, add more info, etc'
           },
           change_style: {
             type: 'boolean',
@@ -108686,7 +109588,7 @@ class Lib {
           },
           content_width: {
             type: 'string',
-            description: 'User requests to increase or decrease content/container width. Possible value: increase, decrease'
+            description: 'User requests to increase or decrease content width/size. Possible value: increase, decrease'
           },
           line_height_paragraph: {
             type: 'string',
@@ -108712,6 +109614,18 @@ class Lib {
             type: 'string',
             description: 'User requests to move, duplicate, or delet section. Possible values: move-up, move-top, move-down, move-bottom, duplicate, remove'
           },
+          select_section: {
+            type: 'string',
+            description: 'User requests to select a section. Value can be: current, next, previous, first, last.'
+          },
+          select_block: {
+            type: 'string',
+            description: 'User requests to select a block. Value can be: block, headline, title, paragraph, image, next, previous, first, last'
+          },
+          unselect_block: {
+            type: 'boolean',
+            description: 'User requests to unselect block'
+          },
 
           /* Must be placed on the last for more precise */
           new_section_two_boxes: {
@@ -108794,6 +109708,194 @@ class Lib {
     return true;
   }
 
+  elementContext(context, args) {
+    if (args.add_headline) {
+      let info = `- To add a headline, use this class: 'font-normal leading-11 size-64':
+<h1 class="font-normal leading-11 size-64">Headline Text Here</h1>
+
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.add_space) {
+      let info = `- To add a space, you must add 'div.spacer' element:
+
+<div class="spacer height-40"></div
+
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.adjust_space) {
+      let info = `- To increase or decrease a space, use one of these classes:
+    - height-40
+    - height-60
+    - height-80
+    - height-100
+    - height-120
+    - height-140
+    - height-160
+    - height-180
+    - height-200
+
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.add_button) {
+      let info = `- To add a buttons, use the example below as a template. Wrap the button in a <div> element.
+
+Button Example:
+
+    <div>
+        <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-9 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-wide" title="" style="background-color: rgb(240, 240, 240);">Our Works</a>
+        <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-18 px-9 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-wide" title="">Get in Touch</a>
+    </div>
+
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.add_youtube) {
+      // Choose random youtube
+      let videoList = this.builder.media.youtube_videos;
+      let videoUrl = this.chooseMedia(videoList);
+      let info = `- To embed a YouTube or Vimeo video, wrap the <iframe> element in a <div> element with the classes 'embed-responsive' and 'embed-responsive-16by9' and add add it inside a column (Youtube and Vimeo links are case sensitive):
+<div class="embed-responsive embed-responsive-16by9">
+<iframe width="560" height="315" src="${videoUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
+</div>
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.add_video) {
+      // Choose random video
+      let videoList = this.builder.media.videos;
+      let videoUrl = this.chooseMedia(videoList);
+      let info = `- To embed a video (MP4), use the <video> element, specify the source using the <source> element and add it inside a column:
+<video style="width: 100%;" loop="" autoplay="">
+<source src="${videoUrl}" type="video/mp4">
+</video>
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.add_audio) {
+      // Choose random audio
+      let audioList = this.builder.media.audios;
+      let audioUrl = this.chooseMedia(audioList);
+      let info = `- To embed an audio (MP3), wrap the <audio> element in a <div> with the default style and class as shown below and add it inside a column:
+<div style="width: 100%; position: relative; margin: 15px 0px; background: transparent;" class="flex">
+<audio controls="" style="width:100%">
+<source src="${audioUrl}" type="audio/mpeg">Your browser does not support the audio element.
+</audio>
+</div>
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.add_map) {
+      let info = `- To embed a google map, wrap the <iframe> element in a <div> element with the classes 'embed-responsive' and 'embed-responsive-16by9' and add add it inside a column:
+<div class="embed-responsive embed-responsive-16by9">
+<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&amp;hl=en&amp;sll=-7.981898,112.626504&amp;sspn=0.009084,0.016512&amp;oq=melbourne&amp;hnear=Melbourne+Victoria,+Australia&amp;t=m&amp;z=10&amp;output=embed"></iframe>
+</div>
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.add_image) {
+      // to differentiate from bg image
+      let info = `- To add an image, use "{{IMAGEURL}}" as the image src.
+
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.align_text) {
+      let info = `- To align text or element, use one of these classes: 'text-left', text-center' or 'texr-right'.
+
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.line_height) {
+      let info = `- To increase or decrease the line height of an individual text/element, apply this class on the requested element:
+    
+    - leading-08
+    - leading-09
+    - leading-none
+    - leading-11
+    - leading-12
+    - leading-13
+    - leading-14
+    - leading-15
+    - leading-16
+    - leading-17
+    - leading-18
+    - leading-19
+    - leading-20
+
+`;
+      context = context + '\n' + info;
+    }
+
+    if (args.font_size) {
+      let info = `- To increase or decrease the font size, apply this class on the requested element:
+    
+    - size-12
+    - size-13
+    - size-14
+    - size-15
+    - size-16
+    - size-17
+    - size-18
+    - size-19
+    - size-20
+    - size-21
+    - size-24
+    - size-28
+    - size-32
+    - size-35
+    - size-38
+    - size-42
+    - size-46
+    - size-48
+    - size-50
+    - size-54
+    - size-60
+    - size-64
+    - size-68
+    - size-72
+    - size-76
+    - size-80
+    - size-84
+    - size-88
+    - size-92
+    - size-96
+    - size-100
+    - size-104
+    - size-108
+    - size-112
+    - size-116
+    - size-120
+    - size-124
+    - size-128
+    - size-132
+    - size-136
+    - size-140
+    - size-144
+    - size-148
+    - size-152
+    - size-156
+    - size-160
+
+`;
+      context = context + '\n' + info;
+    }
+
+    return context;
+  }
+
   addElementContext(context, args) {
     /*
     Check for elements: space, button, youtube, video, audio, map, code.
@@ -109568,7 +110670,7 @@ class Command {
                     <option value="random">${out('Random')}</option>
                     <option value="">${out('None (Same Style)')}</option>
                     <option value="0">01: Poppins</option>
-                    <option value="1">02: Poppins & Lekton, Extra Bold</option>
+                    <option value="1">02: Heebo & IBM Plex Mono</option>
                     <option value="2">03: Poppins & Lekton</option>
                     <option value="3">04: Raleway & Lato</option>
                     <option value="4">05: Alegreya & Lato </option>
@@ -109661,7 +110763,291 @@ class Command {
 
     this.dictation = this.builder.editor.dictation;
 
-    this.dictation.opts.send = async question => {
+    const localProcess = question => {
+      // Get Selected
+      let activeBox = this.builder.activeBox;
+
+      if (!activeBox) {
+        this.builder.selectSection();
+        activeBox = this.builder.activeBox;
+      }
+
+      if (this.builder.enableShortCommands) {
+        // Process Short Commands
+        question = this.builder.editor.lib.processShortCommand(question); // Process the shortCommandList
+
+        if (!question) return false;
+        const intent = this.builder.editor.similarity.check(question); // Find similarity with commandList
+
+        question = this.processPrompt(intent, question); // Process the commandList
+
+        if (!question) return false;
+      }
+
+      return question;
+    };
+
+    const sendBlockCommand = async question => {
+      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;
+      let context = '';
+      this.sendCommand('analyze', `This is the command: "${question}"`, '', 'You will analyze the user\'s command and return what the user needs.', this.lib.getFunctions_block(), response => {
+        const args = JSON.parse(response);
+        if (this.builder.consoleLog) console.log(args);
+        const numberOfIntents = Object.keys(args).length;
+
+        if (numberOfIntents === 1) {
+          let result = this.quickAction(args);
+
+          if (result) {
+            this.dictation.finish();
+            return;
+          }
+
+          result = this.blockAction(args);
+
+          if (result) {
+            this.dictation.finish();
+            return;
+          }
+        }
+
+        let result = this.moveBlockContent(args);
+
+        if (result) {
+          this.dictation.finish(); // Must be called after finished
+
+          return true;
+        }
+
+        let systemCmd;
+
+        if (args.new_block) {
+          systemCmd = 'You will be asked to create content (in HTML) and return the HTML without any additional explanation.';
+          context = `To add a content/block:
+- Create the required rows and column and add them inside the 'div.column' element:
+
+    <div class="row">
+        <div class="column">
+            {{CONTENT}}
+        </div>
+    </div>
+
+Example: To create a block with a headline and a paragraph:
+
+    <div class="row">
+        <div class="column">
+            <h2 class="font-normal leading-none size-48">Heading here</h2>
+            <p>Paragraph here.</p>
+        </div>
+    </div>
+                        
+`;
+        } 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 with content:
+- Create the required column and add them inside the 'div.column' element:
+
+    <div class="column">
+        {{CONTENT}}
+    </div>
+
+Example: To create a column with a headline and a paragraph:
+
+    <div class="column">
+        <h2 class="font-normal leading-none size-48">Heading here</h2>
+        <p>Paragraph here.</p>
+    </div>
+  
+`;
+        } else {
+          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}
+`;
+        }
+
+        context = this.lib.elementContext(context, 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();
+
+          if (args.new_block) {
+            if (block) {
+              const row = block.parentNode;
+
+              if (row) {
+                row.insertAdjacentHTML('afterend', html);
+                setTimeout(() => {
+                  row.nextElementSibling.firstElementChild.click();
+                }, 300);
+              }
+            }
+          } else if (args.new_column_onright) {
+            if (block) {
+              block.insertAdjacentHTML('afterend', html);
+              setTimeout(() => {
+                block.nextElementSibling.click();
+              }, 300);
+            }
+          } else if (args.new_column_onleft) {
+            if (block) {
+              block.insertAdjacentHTML('beforebegin', html);
+              setTimeout(() => {
+                block.previousElementSibling.click();
+              }, 300);
+            }
+          } else {
+            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 sendOtherCommand = async question => {
+      let systemCmd = '';
+      let context = 'You are a helpful assistant. You will provide direct answers without a prologue.';
+
+      const callback = answer => {
+        if (this.builder.consoleLog) console.log(answer);
+        let systemCmd = '';
+        let question = `I have this content:
+
+${answer}
+
+Please use this content to create a new section using the provided template.
+                
+                `;
+        let context = this.chooseContext(cl.new_section_article);
+
+        const callback = html => {
+          if (this.builder.consoleLog) console.log(html);
+          html = this.fixHtml(html);
+
+          if (!html) {
+            this.dictation.finish(true);
+            return false;
+          } // html = this.fixNewSection(html); // for new section only => Not needed (no icons or images here on the template)
+
+
+          this.builder.editor.saveForUndo(); // Render
+
+          this.renderResult_NewSection(html);
+          this.dictation.finish();
+        };
+
+        this.sendCommand('html', question, context, systemCmd, [], callback);
+      };
+
+      this.sendCommand('assistant', question, context, systemCmd, [], callback);
+    };
+
+    const sendRewriteCommand = async question => {
+      let activeBox = this.builder.activeBox;
+
+      if (!activeBox) {
+        this.builder.showMessage(out('Please select a box.'));
+        this.dictation.finish(); // Must be called after finished
+
+        return;
+      }
+
+      let currentHtml = activeBox.innerText; //this.builder.editor.lib.getHtml(activeBox);
+      // Update prompt
+
+      question = `${question}.
+
+This is my current content:
+
+${currentHtml}
+`;
+      let systemCmd = '';
+      let context = 'You are a helpful assistant. You will provide direct answers without a prologue.';
+
+      const callback = answer => {
+        if (this.builder.consoleLog) console.log(answer);
+        let systemCmd = '';
+        let question = `I have this content:
+
+${answer}
+
+Place this content into the provided template. Adjust the template so that the content doesn't change. Remove unecessary element on the template that are not needed.
+                
+                `;
+        let context = cl.new_section_others;
+
+        const callback = html => {
+          if (this.builder.consoleLog) console.log(html);
+          html = this.fixHtml(html);
+
+          if (!html) {
+            this.dictation.finish(true);
+            return false;
+          } // html = this.fixNewSection(html); // for new section only => Not needed (no icons or images here on the template)
+
+
+          this.builder.editor.saveForUndo(); // Render
+
+          this.renderResult_NewSection(html);
+          this.dictation.finish();
+        };
+
+        this.sendCommand('html', question, context, systemCmd, [], callback);
+      };
+
+      if (this.builder.consoleLog) {
+        console.log(systemCmd);
+        console.log(question);
+        console.log(context);
+      }
+
+      this.sendCommand('assistant', question, context, systemCmd, [], callback);
+    };
+
+    const sendGeneralCommand = async question => {
       // Get Selected
       let activeBox = this.builder.activeBox;
       let activeSection = this.builder.activeSection;
@@ -109681,29 +111067,31 @@ class Command {
         }
       }
 
-      if (this.builder.enableShortCommands) {
-        // Process Short Commands
-        question = this.builder.editor.lib.processShortCommand(question); // Process the shortCommandList
-
-        if (!question) return;
-        const intent = this.builder.editor.similarity.check(question); // Find similarity with commandList
-
-        question = this.processPrompt(intent, question); // Process the commandList
-
-        if (!question) return;
-      } // Go to OpenAI
-
-
       if (this.builder.sendCommandUrl === '') return;
       this.sendCommand('analyze', `This is the command: "${question}"`, '', 'You will analyze the user\'s command and return what the user needs.', this.lib.getFunctions(), response => {
         const args = JSON.parse(response);
-        if (this.builder.consoleLog) console.log(args); // SIMPLE/SINGLE INTENT (like Short Commands)
+        if (this.builder.consoleLog) console.log(args);
+
+        if (args.asking_info) {
+          if (this.builder.consoleLog) console.log('asking_info');
+          sendOtherCommand(question);
+          return;
+        }
+
+        if (args.write_based_on_the_current_content) {
+          // summarize, expand, make short, add more info, etc'
+          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;
 
         if (activeBox && numberOfIntents === 1) {
           /*
-          if(activeBox && (args.move_content_left || args.move_content_center || args.move_content_right ||
+          // If single intent creates new section:
+           if(activeBox && (args.move_content_left || args.move_content_center || args.move_content_right ||
               args.move_content_top || args.move_content_bottom) &&
               !(args.align_individual_text || args.align_whole_content)) {
                    activeBox.setAttribute('data-selectbox',1);
@@ -109867,13 +111255,7 @@ class Command {
             const val = args.align_whole_content;
 
             if (val === 'left' || val === 'center' || val === 'right') {
-              this.builder.editor.saveForUndo(); // let elm = this.builder.editor.activeElement;
-              // if(elm) {
-              //     this.builder.editor.lib.alignText(elm, val);
-              // } else {
-              //     this.builder.editor.lib.alignContent(activeBox, val);
-              // }
-
+              this.builder.editor.saveForUndo();
               this.builder.editor.lib.alignContent(activeBox, val);
               this.builder.settings.onChange();
               this.dictation.finish(); // Must be called after finished
@@ -109939,42 +111321,29 @@ class Command {
             }
           }
 
-          if (args.section_task) {
-            const val = args.section_task;
-
-            if (val === 'move-up' || val === 'move-top' || val === 'move-down' || val === 'move-bottom' || val === 'duplicate' || val === 'remove') {
-              this.builder.editor.saveForUndo();
-              if (val === 'move-up') this.builder.editsection.sectionUp();
-              if (val === 'move-top') this.builder.editsection.sectionTop();
-              if (val === 'move-down') this.builder.editsection.sectionDown();
-              if (val === 'move-bottom') this.builder.editsection.sectionBottom();
+          const result = this.quickAction(args);
 
-              if (val === 'duplicate') {
-                this.builder.editsection.sectionDuplicate();
-                setTimeout(() => {
-                  this.builder.refreshAnim();
-                }, 600);
-              }
-
-              if (val === 'remove') {
-                const activeSection = this.builder.activeSection;
-                activeSection.parentNode.removeChild(activeSection);
-                this.builder.activeSection = null;
-                this.builder.activeBox = null;
-              }
-
-              this.builder.sectionStack();
-              this.builder.settings.onChange();
+          if (result) {
+            this.dictation.finish();
+            return;
+          }
+          /*
+          if(args.add_paragraph) {
+              let container = activeBox.querySelector('.is-container');
+              if(!container) this.builder.editbox.addContent(); // if no container, add.
+               this.builder.editor.lib.addBlock(activeBox, 'paragraph', 'after');
+               this.builder.settings.onChange();
+              
               this.dictation.finish(); // Must be called after finished
-
               return false;
-            }
           }
+          */
+
         } // If no activeBox
 
 
         if (!(args.new_section || args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) && !activeBox) {
-          // args.new_section = 'new-section';
+          // args.new_section = true;
           // if(this.builder.consoleLog) console.log('new_section set true');
           // if(args.redesign_layout||args.change_text||args.change_style) {
           //     this.builder.showMessage(out('Please select a box.'));
@@ -109995,16 +111364,16 @@ class Command {
 
         let context = '';
 
-        if (args.request_not_relate_with_current_content) {
+        if (args.asking_info) {
           /*
           Handle Unrelated Request
           */
-          args.new_section = 'new-section';
-          context = cl.new_section_others; // Update prompt
+          args.new_section = true;
+          context = cl.cl.new_section_others; // Update prompt
 
           question = `Add a new section containing your response on this user request: ${question}`;
         } else if (args.new_section || args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) {
-          if (args.new_section === 'new-section' || args.new_section === 'new-section-2-columns' || args.new_section === 'new-section-3-columns' || args.new_section === 'new-section-3-columns' || args.new_section === 'new-section-4-columns') {
+          if (args.new_section) {
             if (args.add_image === 'gallery') {
               context = cl.new_section_with_gallery;
             } else if (args.add_list_with_image) {
@@ -110079,6 +111448,8 @@ class Command {
               const imageUrl = this.lib.chooseMedia(imageList);
               context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
             }
+          } else {
+            context = this.chooseContext(cl.new_section_article);
           }
         } else {
           //if(args.redesign_layout || args.change_text || args.change_style) {
@@ -110099,9 +111470,17 @@ class Command {
           let redesign_request = '';
 
           if (args.redesign_layout) {
-            // Update prompt
-            redesign_request = `Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template.
-`; // Update context
+            // get title tag
+            const container = activeBox.querySelector('.is-container');
+            let titleElm, titleTag;
+
+            if (container) {
+              titleElm = container.querySelector('h1,h2');
+              if (titleElm) titleTag = titleElm.tagName.toLowerCase();
+            } // Update prompt
+
+
+            redesign_request = 'Change the placement of the title, paragraph and all elements in my section based on the layout template. '; // Update context
 
             let val;
 
@@ -110127,14 +111506,18 @@ class Command {
               } else {
                 context = this.chooseContext(cl.change_layout_of_box, val);
               }
+            } // set title tag
+
+
+            if (titleTag === 'h2') {
+              context = context.replaceAll('h1', 'h2');
             }
           } // Update prompt
 
 
-          question = `${question}. Modify the section according to this instruction and returns the complete modified section HTML.
-${redesign_request}
+          question = `${redesign_request}${question}. Modify my section according to this instruction and returns the modified section HTML.
 
-This is my current section:
+This is my section:
             
 ${currentHtml}
 `;
@@ -110171,8 +111554,12 @@ ${currentHtml}
 
         context = this.lib.addElementContext(context, args); // Send
 
-        const systemCmd = `You will be provided with HTML code to modify, and your task is to return only the modified HTML code, excluding any introductions or explanations
-    `;
+        let systemCmd = `You will be provided with HTML code to modify, and your task is to return only the modified HTML code, excluding any introductions or explanations
+`;
+
+        if (args.new_section || args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) {
+          systemCmd = 'Your task it to create and return HTML content, excluding any introductions or explanations.';
+        }
 
         const callback = html => {
           if (this.builder.consoleLog) console.log(html);
@@ -110228,10 +111615,11 @@ ${currentHtml}
             this.renderResult(html);
           } else {
             // New Section
-            // html = this.fixIcons(html);
             html = this.fixButtons(html);
             html = this.fixBgImage(html); // only if box has inline bg image, which is incorrect
 
+            html = this.fixNewSection(html); // for new section only
+
             if (args.section_background && args.section_background === 'image') {
               html = this.setBgImage(html, true); // Change the bg image (also fix incorrect structure)
             }
@@ -110254,6 +111642,7 @@ ${currentHtml}
         };
 
         if (this.builder.consoleLog) {
+          console.log(systemCmd);
           console.log(question);
           console.log(context);
         } // Check if a command includes redesign request
@@ -110282,9 +111671,29 @@ ${currentHtml}
 
         this.sendCommand('html', question, context, systemCmd, [], callback);
       });
-    }; //this.dictation.opts.send
+    };
+
+    this.dictation.opts.send = question => {
+      // Get Selected
+      let activeBox = this.builder.activeBox;
+
+      if (!activeBox) {
+        this.builder.selectSection();
+      } // Local Process
 
 
+      question = localProcess(question);
+      if (!question) return; // Go to OpenAI
+
+      if (this.builder.editor.assistantMode === 'general') {
+        sendGeneralCommand(question);
+      } else if (this.builder.editor.assistantMode === 'others') {
+        sendOtherCommand(question);
+      } else if (this.builder.editor.assistantMode === 'block') {
+        sendBlockCommand(question);
+      }
+    };
+
     this.dictation.opts.abort = () => {
       this.controller.abort();
       this.dictation.finish(true); // Must be called after finished (true = do not clear command text)
@@ -110398,7 +111807,8 @@ ${currentHtml}
       this.dictation.finish(); // Must be called after finished
     };
 
-    const systemCmd = 'You will be provided with HTML code to modify, and your task is to return only the modified HTML code, excluding any introductions or explanations';
+    let systemCmd = `You will be provided with HTML code to modify, and your task is to return only the modified HTML code, excluding any introductions or explanations
+`;
     this.sendCommand('html', question, context, systemCmd, [], callback);
   }
 
@@ -110449,11 +111859,13 @@ ${currentHtml}
     // Change the placement of the title, paragraph and all elements. Make it the same as the template's grid layout. 
     // You have to determine a suitable placement for the title, paragraph, and all other elements. 
 
-    question = `Change the position of all columns in my section based on the layout template. ${question}:
+    question = `Change the placement of the title, paragraph and all elements in my section based on the layout template. ${question}
 
 This is my section:
 
-${currentHtml}`;
+${currentHtml}
+
+`;
     let cl = contextList;
     if (this.builder.contextList) cl = this.builder.contextList;
     let context;
@@ -110487,7 +111899,7 @@ ${currentHtml}`;
         context = this.chooseContext(cl.change_layout_of_box, val);
       }
     } // Experiment
-    // context = cl.redesign_layout2[0];
+    // context = cl.redesign_layout2[1];
 
 
     if (useSavedSection) {
@@ -110506,7 +111918,21 @@ ${currentHtml}`;
     //         contentWidth=item;
     //     }
     // });
+    // get title tag
+
+
+    const container = activeBox.querySelector('.is-container');
+    let titleElm, titleTag;
+
+    if (container) {
+      titleElm = container.querySelector('h1,h2');
+      if (titleElm) titleTag = titleElm.tagName.toLowerCase();
+    } // set title tag
+
 
+    if (titleTag === 'h2') {
+      context = context.replaceAll('h1', 'h2');
+    }
 
     if (this.builder.consoleLog) console.log(context); // get typo class.
 
@@ -110549,7 +111975,8 @@ ${currentHtml}`;
       this.dictation.finish(); // Must be called after finished
     };
 
-    const systemCmd = 'You will be provided with HTML code to modify, and your task is to return only the modified HTML code, excluding any introductions or explanations';
+    let systemCmd = `You will be provided with HTML code to modify, and your task is to return only the modified HTML code, excluding any introductions or explanations
+`;
     this.sendCommand('html', question, context, systemCmd, [], callback);
   }
 
@@ -110614,14 +112041,13 @@ ${currentHtml}`;
 
       if (col) elm = col.querySelector(':first-child');
       if (elm) elm.click(); // select element 
-    };
+    }; // const selectFirst = () => {
+    //     const container = activeBox.querySelector('.is-container');
+    //     if(!container) return false;
+    //     let row = container.querySelector(':first-child');
+    //     selectElement(row);
+    // };
 
-    const selectFirst = () => {
-      const container = activeBox.querySelector('.is-container');
-      if (!container) return false;
-      let row = container.querySelector(':first-child');
-      selectElement(row);
-    };
 
     const selectLast = () => {
       const container = activeBox.querySelector('.is-container');
@@ -110646,7 +112072,11 @@ ${currentHtml}`;
 
 
     if (intent === 'select') {
-      selectFirst();
+      let elm = activeBox.querySelector('h1, p, h2, h3');
+      if (elm) elm.click();else {
+        elm = activeBox.querySelector('.is-container > div > div');
+        if (elm) elm.click();
+      }
       return false;
     } else if (intent === 'select_next') {
       let row = activeBox.querySelector('.row-active');
@@ -110661,6 +112091,17 @@ ${currentHtml}`;
     } else if (intent === 'select_last') {
       selectLast();
       return false;
+    } else if (intent === 'select_block') {
+      let elm = activeBox.querySelector('h1, p, h2, h3');
+      if (elm) elm.click();else {
+        elm = activeBox.querySelector('.is-container > div > div');
+        if (elm) elm.click();
+      }
+      return false;
+    } else if (intent === 'unselect_block') {
+      activeBox.click();
+      activeBox.click();
+      return false;
     } else if (intent === 'select_headline') {
       const elm = activeBox.querySelector('h1,h2,h3');
       if (elm) elm.click();
@@ -111606,7 +113047,8 @@ ${currentHtml}`;
   }
 
   getHtmlResult(html) {
-    // if(html.indexOf('```')!==-1) {
+    if (this.builder.consoleLog) console.log(html); // if(html.indexOf('```')!==-1) {
+
     const regex = /<div[^>]*>[\s\S]*<\/div>/;
     const matches = html.match(regex);
     const extractedString = matches && matches[0];
@@ -111614,7 +113056,7 @@ ${currentHtml}`;
 
     if (!this.isHTMLString(html)) {
       // Response is not an HTML
-      if (this.builder.consoleLog) console.log(html);
+      // if(this.builder.consoleLog) console.log(html);
       return false;
     }
 
@@ -111868,6 +113310,7 @@ ${currentHtml}`;
 
   fixCommon(html) {
     html = html.replaceAll('{{CONTENT}}', '');
+    html = html.replaceAll('{{TITLE}}', '');
     const parser = new DOMParser();
     let doc = parser.parseFromString(html, 'text/html');
 
@@ -111883,15 +113326,69 @@ ${currentHtml}`;
 
       if (container && section && !section.contains(container)) {
         section.appendChild(container);
-      } // Remove column inline width=100%
-
+      }
 
-      const cols = container.querySelectorAll('column');
+      const cols = container.querySelectorAll('.column');
       cols.forEach(col => {
+        // Remove column inline width=100%
         if (col.style.width === '100%') {
           col.style.width = '';
           col.style.flex = '';
         }
+        /*
+        Fix incorrect structure:
+            <div class="column">
+                <div class="flex flex-col justify-end items-start" style="width: 43.915%; flex: 0 0 auto;">
+                    ...
+                </div>
+            </div>
+        */
+
+
+        if (col.firstElementChild) {
+          if (col.firstElementChild.style.width && col.firstElementChild.style.flex === '0 0 auto') {
+            col.firstElementChild.outerHTML = col.firstElementChild.innerHTML;
+          }
+          /*else if(col.firstElementChild.classList.contains('flex')) {
+            col.firstElementChild.outerHTML = col.firstElementChild.innerHTML;
+          }*/
+
+        } // Fix column inside column
+
+
+        const colsInside = col.querySelectorAll('.column');
+        colsInside.forEach(item => {
+          item.outerHTML = item.innerHTML;
+        });
+        /*
+        Fix:
+            <div class="column" style="width: 30%;">
+        */
+
+        if (col.style.width && col.style.flex !== '0 0 auto') {
+          col.style.width = '';
+        } // Remove data-filename attr
+
+
+        const imgs = col.querySelectorAll('[data-filename]');
+        imgs.forEach(img => {
+          img.removeAttribute('data-filename');
+        }); // Default headings' class
+
+        let headings = col.querySelectorAll('h1');
+        headings.forEach(heading => {
+          if (!heading.getAttribute('class')) {
+            heading.classList.add('font-normal');
+            heading.classList.add('size-35');
+          }
+        });
+        headings = col.querySelectorAll('h2');
+        headings.forEach(heading => {
+          if (!heading.getAttribute('class')) {
+            heading.classList.add('font-normal');
+            heading.classList.add('size-28');
+          }
+        });
       }); // Fix grid (width)
 
       const rows = container.querySelectorAll('.row');
@@ -111911,13 +113408,13 @@ ${currentHtml}`;
         });
 
         if (totalWidth > 100) {
-          console.log('FIX: clear width. Total: ' + totalWidth);
+          // console.log('FIX: clear width. Total: ' + totalWidth);
           cols.forEach(col => {
             col.style.width = '';
             col.style.flex = '';
           });
         } else if (totalWidth < 100 && !hasAutoWidthCol) {
-          console.log('FIX: add col. Total: ' + totalWidth);
+          // console.log('FIX: add col. Total: ' + totalWidth);
           if (lastCol) lastCol.insertAdjacentHTML('afterend', '<div class="column"><div class="spacer height-60"></div></div>');
         }
       }); // Replace element style with class
@@ -112056,13 +113553,25 @@ ${currentHtml}`;
     }
 
     return doc.documentElement.innerHTML;
-  } // fixIcons(html) {
-  //     const replacementClass = 'ion-checkmark';
-  //     const regexPattern = /(<i class="icon )(ion-\S+)/g;
-  //     const modifiedHtml = html.replace(regexPattern, `$1${replacementClass}`);
-  //     return modifiedHtml;
-  // }
+  }
+
+  fixNewSection(html) {
+    // Fix icons
+    const replacementClass = 'ion-checkmark';
+    const regexPattern = /(<i class="icon )(ion-\S+)/g;
+    html = html.replace(regexPattern, `$1${replacementClass}`);
+    const parser = new DOMParser();
+    let doc = parser.parseFromString(html, 'text/html'); // Fix embedded images
 
+    const gallery = this.builder.media.images;
+    const imageList = gallery.square;
+    const imageUrl = this.lib.chooseMedia(imageList);
+    const imgs = doc.querySelectorAll('img');
+    imgs.forEach(img => {
+      img.setAttribute('src', imageUrl);
+    });
+    return doc.documentElement.innerHTML;
+  }
 
   fixButtons(html) {
     const parser = new DOMParser();
@@ -112106,6 +113615,102 @@ ${currentHtml}`;
     }
   }
 
+  fixCommonBlock(html) {
+    const parser = new DOMParser();
+    let doc = parser.parseFromString(html, 'text/html'); // Replace element style with class
+
+    const elements = doc.querySelectorAll('*');
+    elements.forEach(element => {
+      if (element.style.textDecoration === 'line-through') {
+        element.classList.add('line-through');
+        element.style.textDecoration = '';
+      }
+
+      if (element.style.textDecoration === 'underline') {
+        element.classList.add('underline');
+        element.style.textDecoration = '';
+      }
+    });
+    return doc.documentElement.innerHTML;
+  }
+
+  getHtmlBlock(html) {
+    const startIndex = html.indexOf('<');
+    const endIndex = html.lastIndexOf('>') + 1;
+
+    if (startIndex !== -1 && endIndex !== -1) {
+      const extractedHTML = html.substring(startIndex, endIndex);
+      html = extractedHTML;
+    }
+
+    const extraProcess = html => {
+      /*
+      to fix mixed result (unwanted explanation) like this:
+      
+      <div class="is-section is-box is-section-100 type-poppins box-autofit box-select section-select"><div class="is-overlay"></div>
+      ...
+      </div> 
+       Modified code:
+       <div class="is-section is-box is-section-100 type-poppins box-autofit box-select section-select"><div class="is-overlay"></div>
+      ...
+      </div>
+      */
+      let separator = '';
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+      const children = doc.body.childNodes;
+
+      for (const child of children) {
+        if (child.nodeType === 3) {
+          let s = child.textContent.trim();
+
+          if (s !== '') {
+            separator = s;
+          }
+        }
+      }
+
+      if (separator !== '') {
+        html = html.split(separator)[1];
+        return html.trim();
+      } else {
+        return html;
+      }
+    };
+
+    html = extraProcess(html);
+    return html;
+  }
+
+  fixHtmlBlock(html) {
+    html = this.getHtmlBlock(html);
+
+    if (!html) {
+      this.builder.showMessage(out('Oops! The response received is insufficient. Please try again.'));
+      return false;
+    }
+
+    if (html.includes('{{IMAGEURL}}')) {
+      // Fix {{IMAGEURL}} that failed to replace
+      const gallery = this.builder.media.images;
+      const imageList = gallery.square;
+      const imageUrl = this.lib.chooseMedia(imageList);
+      html = html.replaceAll('{{IMAGEURL}}', imageUrl);
+    } // Fix {{ICONCLASS}} that failed to replace
+
+
+    html = html.replaceAll('{{ICONCLASS}}', 'ion-checkmark');
+    html = this.replaceButtonsWithAnchorTags(html);
+    html = this.replaceStrongTag(html);
+    html = this.replaceEmTag(html);
+    html = this.replaceUnderlineTag(html);
+    html = this.replaceLineThroughTag(html);
+    html = this.fixCommonBlock(html);
+    html = this.fixButtons(html);
+    if (!html) return false;
+    return html;
+  }
+
   fixHtml(html) {
     // Fix overlay structure when "is-overlay" containing background image in the style attribute
     let regex = /<div class="is-overlay"([^>]*)style="([^"]*background-image:[^;"]+;)([^"]*)"([^>]*)>/g;
@@ -112319,6 +113924,11 @@ ${currentHtml}`;
 
           callback(html);
         });
+      } else if (mode === 'assistant') {
+        data.answer.choices.forEach(item => {
+          let answer = item.message.content;
+          callback(answer);
+        });
       } else {
         /*
             Handle Unrelated Request
@@ -112330,7 +113940,7 @@ ${currentHtml}`;
         */
         if (data.answer.role && data.answer.content) {
           callback(JSON.stringify({
-            new_section: 'new-section',
+            new_section: true,
             others: true
           })); // Just create a new section
 
@@ -112347,17 +113957,19 @@ ${currentHtml}`;
         this.dictation.finish(); // Must be called after finished
         // Debug
 
-        if (!(error + '').includes('Failed to fetch')) {
-          // Only if not CORS error
-          const response = await fetch(this.builder.sendCommandUrl, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(messages)
-          });
-          const data = await response.text();
-          console.log('Response:\n' + data); // Shows code error
+        if (this.builder.consoleLog) {
+          if (!(error + '').includes('Failed to fetch')) {
+            // Only if not CORS error
+            const response = await fetch(this.builder.sendCommandUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify(messages)
+            });
+            const data = await response.text();
+            console.log('Response:\n' + data); // Shows code error
+          }
         }
 
         this.builder.showMessage(out('Service Unavailable.'));
@@ -112384,9 +113996,9 @@ ${currentHtml}`;
       // // Select
       // if(this.builder.activeSection) this.builder.positionTool(newSection);
     } //Trigger Change event
+    // this.builder.settings.onChange();
 
 
-    this.builder.settings.onChange();
     this.dictation.finish(); // Must be called after finished
   }
 
@@ -112503,9 +114115,9 @@ ${currentHtml}`;
         this.reSelect(newSection);
       }
     } //Trigger Change event
+    // this.builder.settings.onChange();
 
 
-    this.builder.settings.onChange();
     this.dictation.finish(); // Must be called after finished
   }
 
@@ -112563,6 +114175,311 @@ ${currentHtml}`;
     }
   }
 
+  blockAction(args) {
+    const activeCol = this.builder.editor.activeCol;
+    if (!activeCol) return false;
+
+    if (args.block_task) {
+      const val = args.block_task;
+
+      if (val === 'move-up' || val === 'move-down' || val === 'duplicate' || val === 'remove') {
+        this.builder.editor.saveForUndo();
+        const grid = this.builder.editor._rowTool.grid;
+        if (val === 'move-up') grid.moveRowUp();
+        if (val === 'move-down') grid.moveRowDown();
+        if (val === 'duplicate') grid.duplicateRow();
+
+        if (val === 'remove') {
+          grid.removeRow();
+          if (this.builder.activeBox) this.builder.activeBox.click();
+        }
+
+        this.builder.settings.onChange();
+        this.dictation.finish(); // Must be called after finished
+
+        return true;
+      }
+    }
+
+    if (args.move_column) {
+      const val = args.move_column;
+
+      if (val === 'move-up' || val === 'move-down' || val === 'move-left' || val === 'move-right') {
+        this.builder.editor.saveForUndo();
+        const grid = this.builder.editor._rowTool.grid;
+        if (val === 'move-up') grid.moveColumnUp();
+        if (val === 'move-down') grid.moveColumnDown();
+        if (val === 'move-left') grid.moveColumnPrevious();
+        if (val === 'move-right') grid.moveColumnNext();
+        this.builder.settings.onChange();
+        this.dictation.finish(); // Must be called after finished
+
+        return true;
+      }
+    }
+
+    if (args.column_task) {
+      const val = args.column_task;
+
+      if (val === 'duplicate' || val === 'remove') {
+        this.builder.editor.saveForUndo();
+        const grid = this.builder.editor._rowTool.grid;
+        if (val === 'duplicate') grid.duplicateColumn();
+
+        if (val === 'remove') {
+          grid.removeColumn();
+          if (this.builder.activeBox) this.builder.activeBox.click();
+        }
+
+        this.builder.settings.onChange();
+        this.dictation.finish(); // Must be called after finished
+
+        return true;
+      }
+    }
+
+    if (args.increase_decrease_column) {
+      const val = args.increase_decrease_column;
+
+      if (val === 'increase' || val === 'decrease') {
+        this.builder.editor.saveForUndo();
+        const grid = this.builder.editor._rowTool.grid;
+        if (val === 'increase') grid.increaseColumn();
+        if (val === 'decrease') grid.decreaseColumn();
+        this.builder.settings.onChange();
+        this.dictation.finish(); // Must be called after finished
+
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  moveBlockContent(args) {
+    const cell = this.builder.editor.activeCol;
+    if (!cell) return false;
+    if (!cell || !args) return false;
+    if (!(args.move_content_left || args.move_content_center || args.move_content_right || args.move_content_top || args.move_content_bottom)) return false;
+    let moveHorizontal = false;
+    if (args.move_content_left || args.move_content_right) moveHorizontal = true;
+    let moveVertical = false;
+    if (args.move_content_top || args.move_content_bottom) moveVertical = true;
+
+    if (args.move_content_top && !moveHorizontal) {
+      this.builder.editor.lib.moveBlockContent('top');
+    } else if (args.move_content_bottom && !moveHorizontal) {
+      this.builder.editor.lib.moveBlockContent('bottom');
+    } else if (args.move_content_left && !moveVertical) {
+      this.builder.editor.lib.moveBlockContent('left');
+    } else if (args.move_content_right && !moveVertical) {
+      this.builder.editor.lib.moveBlockContent('right');
+    } else if (args.move_content_top && args.move_content_left) {
+      this.builder.editor.lib.moveBlockContent('topleft');
+    } else if (args.move_content_top && args.move_content_center) {
+      this.builder.editor.lib.moveBlockContent('topcenter');
+    } else if (args.move_content_top && args.move_content_right) {
+      this.builder.editor.lib.moveBlockContent('topright');
+    } else if (args.move_content_bottom && args.move_content_left) {
+      this.builder.editor.lib.moveBlockContent('bottomleft');
+    } else if (args.move_content_bottom && args.move_content_center) {
+      this.builder.editor.lib.moveBlockContent('bottomcenter');
+    } else if (args.move_content_bottom && args.move_content_right) {
+      this.builder.editor.lib.moveBlockContent('bottomright');
+    } else if (args.move_content_center) {
+      this.builder.editor.lib.moveBlockContent('center');
+    } else {
+      this.builder.editor.lib.moveBlockContent('center');
+    }
+
+    return true;
+  }
+
+  quickAction(args) {
+    const activeBox = this.builder.activeBox;
+    if (!activeBox) return false;
+
+    if (args.section_task) {
+      const val = args.section_task;
+
+      if (val === 'move-up' || val === 'move-top' || val === 'move-down' || val === 'move-bottom' || val === 'duplicate' || val === 'remove') {
+        this.builder.editor.saveForUndo();
+        if (val === 'move-up') this.builder.editsection.sectionUp();
+        if (val === 'move-top') this.builder.editsection.sectionTop();
+        if (val === 'move-down') this.builder.editsection.sectionDown();
+        if (val === 'move-bottom') this.builder.editsection.sectionBottom();
+
+        if (val === 'duplicate') {
+          this.builder.editsection.sectionDuplicate();
+          setTimeout(() => {
+            this.builder.refreshAnim();
+          }, 600);
+        }
+
+        if (val === 'remove') {
+          const activeSection = this.builder.activeSection;
+          activeSection.parentNode.removeChild(activeSection);
+          this.builder.activeSection = null;
+          this.builder.activeBox = null;
+        }
+
+        this.builder.sectionStack();
+        this.builder.settings.onChange();
+        this.dictation.finish(); // Must be called after finished
+
+        return true;
+      }
+    }
+
+    if (args.select_section) {
+      const activeSection = this.builder.activeSection;
+
+      if (activeSection) {
+        if (args.select_section === 'current') {
+          this.builder.scrollTo(activeSection, 600); // this.clearSelection();
+
+          activeSection.click();
+          this.reSelect(activeSection);
+          return true;
+        } else if (args.select_section === 'next') {
+          this.builder.scrollTo(activeSection.nextElementSibling, 600); // this.clearSelection();
+
+          activeSection.click();
+          this.reSelect(activeSection.nextElementSibling);
+          return true;
+        } else if (args.select_section === 'previous') {
+          this.builder.scrollTo(activeSection.previousElementSibling, 600); // this.clearSelection();
+
+          activeSection.click();
+          this.reSelect(activeSection.previousElementSibling);
+          return true;
+        } else if (args.select_section === 'first') {
+          const firstSection = this.builder.wrapperEl.querySelector('.is-section');
+
+          if (firstSection) {
+            this.builder.scrollTo(firstSection, 600); // this.clearSelection();
+
+            activeSection.click();
+            this.reSelect(firstSection);
+            return true;
+          }
+        } else if (args.select_section === 'last') {
+          const lastSection = this.builder.wrapperEl.querySelectorAll('.is-section:last-child');
+
+          if (lastSection) {
+            this.builder.scrollTo(lastSection[0], 600); // this.clearSelection();
+
+            activeSection.click();
+            this.reSelect(lastSection[0]);
+            return true;
+          }
+        }
+      }
+    }
+
+    if (args.select_block) {
+      const selectElement = row => {
+        if (!row) return;
+        let col, elm;
+        if (row) col = row.querySelector(':first-child');
+        if (col) col.click(); // select column 
+
+        if (col) elm = col.querySelector(':first-child');
+        if (elm) elm.click(); // select element 
+      };
+
+      const selectFirst = () => {
+        const container = activeBox.querySelector('.is-container');
+        if (!container) return true;
+        let row = container.querySelector(':first-child');
+        selectElement(row);
+      };
+
+      const selectLast = () => {
+        const container = activeBox.querySelector('.is-container');
+        if (!container) return true;
+        let lastRow;
+        const childElements = container.children;
+
+        for (let i = childElements.length - 1; i >= 0; i--) {
+          const childElement = childElements[i]; // Check if the child element has at least one grandchild element
+
+          if (childElement.querySelector(':first-child')) {
+            // Found a child element with a grandchild
+            lastRow = childElement;
+            break; // Exit the loop after finding the last one
+          }
+        }
+
+        if (lastRow) {
+          selectElement(lastRow);
+        }
+      };
+
+      if (args.select_block === 'block') {
+        let elm = activeBox.querySelector('h1, p, h2, h3');
+        if (elm) elm.click();else {
+          elm = activeBox.querySelector('.is-container > div > div');
+          if (elm) elm.click();
+        }
+        return true;
+      } else if (args.select_block === 'headline' || args.select_block === 'title') {
+        const elm = activeBox.querySelector('h1,h2,h3');
+        if (elm) elm.click();
+        return true;
+      } else if (args.select_block === 'paragraph') {
+        const elm = activeBox.querySelector('p');
+        if (elm) elm.click();
+        return true;
+      } else if (args.select_block === 'image') {
+        const elm = activeBox.querySelector('img');
+        if (elm) elm.click();
+        return true;
+      } else if (args.select_block === 'space') {
+        const elm = activeBox.querySelector('div.spacer');
+        if (elm) elm.click();
+        return true;
+      } else if (args.select_block === 'button') {
+        const elm = activeBox.querySelector('a[role="button"]');
+        if (elm) elm.click();
+        return true;
+      } else if (args.select_block === 'next') {
+        let row = activeBox.querySelector('.row-active');
+        if (row) row = row.nextElementSibling;
+        selectElement(row);
+        return true;
+      } else if (args.select_block === 'previous') {
+        let row = activeBox.querySelector('.row-active');
+        if (row) row = row.previousElementSibling;
+        selectElement(row);
+        return true;
+      } else if (args.select_block === 'first') {
+        selectFirst();
+        return true;
+      } else if (args.select_block === 'last') {
+        selectLast();
+        return true;
+      }
+      /*else {
+         let elm = activeBox.querySelector('h1, p, h2, h3');
+        if(elm) elm.click();
+        else {
+            elm = activeBox.querySelector('.is-container > div > div');
+            if(elm) elm.click();
+        }
+         return true;
+      }*/
+
+    }
+
+    if (args.unselect_block) {
+      activeBox.click();
+      return true;
+    }
+
+    return false;
+  }
+
   openMore() {
     const pop = this.popAIMore;
     let btn = this.builder.activeBox.querySelector('.input-box-more');
@@ -115191,6 +117108,11 @@ class ContentBox {
       showDisclaimer: true,
       enableShortCommands: true,
       speechRecognitionLang: 'en-US',
+      triggerWords: {
+        send: ['send', 'okay', 'execute', 'run'],
+        abort: ['abort', 'cancel'],
+        clear: ['clear', 'erase']
+      },
       similarityThreshold: 0.65,
       // for commandList similarity checking
       headlineList: ['We\'re [CompanyName]. Full stack development with a spark of creativity.'],
@@ -115199,8 +117121,8 @@ class ContentBox {
         slider: ['slide-01.jpg', 'slide-02.jpg'],
         blank_video: 'blank.mp4',
         videos: ['beach1.mp4', 'beach2.mp4'],
-        youtube_videos: ['https://www.youtube.com/embed/P5yHEKqx86U?rel=0'],
-        maps: ['https://www.youtube.com/embed/P5yHEKqx86U?rel=0'],
+        youtube_videos: ['https://www.youtube-nocookie.com/embed/P5yHEKqx86U?rel=0&autoplay=1&color=white'],
+        maps: ['https://www.youtube-nocookie.com/embed/P5yHEKqx86U?rel=0&autoplay=1&color=white'],
         audios: ['example.mp3'],
         images: {
           square: ['person-01.jpg', 'person-02.jpg', 'person-03.jpg', 'person-04.jpg', 'person-05.jpg', 'person-06.jpg', 'person-08.jpg']
@@ -115254,10 +117176,12 @@ class ContentBox {
         redesign: ['redesign layout', 'change layout', 'change placement', 'decide placement', 'decide layout'],
         // Others:
         two_boxes: ['2 boxes', 'two boxes'],
-        select: ['select', 'select first'],
-        select_next: ['select next', 'select after'],
-        select_previous: ['select previous', 'select before'],
-        select_last: ['select last'],
+        select: ['select', 'select first', 'select first block'],
+        select_next: ['select next', 'select after', 'select next block', 'select next row'],
+        select_previous: ['select previous', 'select before', 'select previous block', 'select previous row'],
+        select_last: ['select last', 'select last block'],
+        select_block: ['select block'],
+        unselect_block: ['unselect', 'unselect block'],
         select_headline: ['select headline'],
         select_paragraph: ['select paragraph'],
         select_button: ['select button'],
@@ -115370,17 +117294,25 @@ class ContentBox {
       commandInfo: {
         general: {
           title: 'General',
+          description: 'Commands for designing or editing.',
           list: [// 'Create a section containing a short article with ideas for outdoor activities. Divide into subtopics.',
-          'Create a section that contains an article on ideas for outdoor activities. The article should include subtopics and have a minimum of 300 words.', 'Can you suggest a captivating headline for us and replace the current one?', 'Revise the headline, paragraph, and all the text using alternative ideas.', 'Let\'s redesign the layout. Surprise me with a new idea!', // 'Add a new header section for our development studio, which uniquely integrates AI into its solutions. Include a compelling headline, a paragraph, and two buttons named \'Our Works\' and \'Get Started\'. Also, add a background image.',
-          'Add a new header section for our web studio. Include a compelling headline, a paragraph, and two buttons named \'Our Works\' and \'Get in Touch\'. Also, add a background image.', `Create a new section containing a feature list of our wood cabin for rent:<br>
+          'Add a section that highlights our AI-powered web solutions. Include a compelling headline, a paragraph, and two buttons named \'Our Works\' and \'Get in Touch\'. Also, add a background image.', 'Create a section containing an article on ideas for outdoor activities. Include a minimum of 300 words.', 'Can you suggest a captivating headline for us and replace the current one?', 'Add a section showcasing our AI-powered innovations. Craft an attention-grabbing headline, provide explanations, incorporate an image, and add an enticing call-to-action.', // 'Add a new header section for our development studio, which uniquely integrates AI into its solutions. Include a compelling headline, a paragraph, and two buttons named \'Our Works\' and \'Get Started\'. Also, add a background image.',
+          // `Add a new header section for our web studio. Include a compelling headline, a paragraph, and two buttons named 'Our Works' and 'Get in Touch'.<br> 
+          // Also, add a background image.`,
+          `Create a section containing a feature list of our wood cabin for rent:<br>
 - Scenic forest view<br>
 - Modern comforts<br>
 - Outdoor escape<br>
-Add an icon for each list item. Provide an engaging headline.`, `Add a section highlighting the features of our creative arts courses:<br>
-- Hands-on projects and assignments<br>
-- Feedback and guidance from experts<br>
-Include an image for each feature.
-Provide an engaging headline.`, 'Create a new section showcasing a photo gallery of our latest photography workshop. Includes up to 4 photos. Additionally, please add a title.', 'Do you see the button with a gray background? Please change the background color to light green.', 'Underline the phrase \'every monday\' and change the color to dark blue.' // Create a new section that highlights our web studio. It should include an attention-grabbing headline, an engaging paragraph, an image, and a compelling call-to-action button.
+Add an icon for each list item.`, // `Add a section highlighting the features of our creative arts courses:<br>
+          // - Hands-on projects and assignments<br>
+          // - Feedback and guidance from experts<br>
+          // Include an image for each feature.
+          // Provide an engaging headline.`,
+          // 'Create a new section showcasing a photo gallery of our latest photography workshop. Includes up to 3 photo placeholders. Additionally, please add a title.',
+          `Add a section highlighting the features of our creative arts courses:<br>
+- Hands-on projects<br>
+- Guidance from experts<br>
+Add an image for each feature.`, 'Revise the headline, paragraph, and all the text using alternative ideas.', 'Let\'s redesign the layout. Surprise me with a new idea!', 'Create a new section showcasing a photo gallery of our latest photography workshop. Includes up to 3 photo placeholders.', 'Do you see the button with a gray background? Please change the background color to light green.', 'Underline the phrase \'every monday\' and change the color to dark blue.', 'Summarize this content in 100 words.' // Create a new section that highlights our web studio. It should include an attention-grabbing headline, an engaging paragraph, an image, and a compelling call-to-action button.
           // Add a new section consisting of two boxes. The first box should feature a captivating headline about our Arts courses, an informative paragraph, and a button labeled 'Browse Courses'. The second box should remain empty but have a background image.
           // Create a new section highlighting what sets our web development studio apart. Include a maximum of 3 list items, each with an item title and a short paragraph with less than 20 words. Also, add a numbering.
           // Create a section containing a short article introducing the timeless classic novel 'The Brothers Karamazov' by Fyodor Dostoevsky. Divide into subtopics.
@@ -115394,6 +117326,19 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
           ] // width: '400px'
 
         },
+        others: {
+          title: 'Ask Questions or Request Information',
+          description: 'Commands that are <u>not related to designing and editing of the current content</u>.',
+          list: ['Provide well-researched information about bookstores in the Melbourne city area that offer collections of classic titles. Include specific details such as locations, website links, the range of classic titles they offer, and any unique features they have.', 'Can you explain the process of baking a classic chocolate cake from scratch?', 'Give me a list of effective home workouts for beginners without any equipment.', // 'Give me ideas for designing a cozy and functional home office space.',
+          'Provide me with a 10-hour plan for learning practical data science.' // 'Can you explain how to set up a new React project?'
+          ]
+        },
+        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.',
+          '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.']
+        },
         selection: {
           title: 'Selection & Layout',
           list: ['Select the headline', // 'Select the paragraph',
@@ -115669,7 +117614,10 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
       speechTranscribeUrl: this.settings.speechTranscribeUrl,
       autoSendDelay: this.settings.autoSendDelay,
       onlineDemo: this.settings.onlineDemo,
+      temperature: this.settings.temperature,
+      topP: this.settings.topP,
       speechRecognitionLang: this.settings.speechRecognitionLang,
+      triggerWords: this.settings.triggerWords,
       headlineList: this.settings.headlineList,
       commandList: this.settings.commandList,
       enableShortCommands: this.settings.enableShortCommands,
@@ -115690,7 +117638,8 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
         let mainCss = this.mainCss();
         localStorage.setItem('preview-maincss', mainCss);
         let sectionCss = this.sectionCss();
-        localStorage.setItem('preview-sectioncss', sectionCss); // const btnOpenPreviewWindow = this.sidebar.pageQuickSettings.querySelector('.cmd-open-preview-window');
+        localStorage.setItem('preview-sectioncss', sectionCss);
+        localStorage.removeItem('_lastscrollpos'); // const btnOpenPreviewWindow = this.sidebar.pageQuickSettings.querySelector('.cmd-open-preview-window');
         // btnOpenPreviewWindow.classList.add('on');
       },
       onPreviewClose: () => {
@@ -116576,6 +118525,7 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
           const modalEditSection = this.builderStuff.querySelector('.editsection');
           modalEditSection.style.display = '';
           if (this.settings.onPageContentClick) this.settings.onPageContentClick(e);
+          this.rePositionTool();
         } else {
           // Outside Wrapper
           if (document.activeElement) if (document.activeElement.tagName.toLowerCase() === 'input') return;