@innovastudio/contentbuilder 1.4.87 → 1.4.88

package/public/contentbuilder/contentbuilder.esm.js

@@ -5554,6 +5554,12 @@ class Util {
     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');
@@ -51648,16 +51654,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);
 
@@ -76826,6 +76832,7 @@ class Lib {
       activeBox.classList.add('is-content-bottom');
       activeBox.classList.add('edge-y-2');
     }
+    this.builder.hideElementTools();
   }
   updateContentSize(activeBox, val) {
     const container = activeBox.querySelector('.is-container');
@@ -77425,6 +77432,81 @@ class Lib {
     }
     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';
@@ -77447,32 +77529,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
             }
@@ -77512,9 +77618,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;
@@ -77543,24 +77658,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;
@@ -77619,6 +77716,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">
@@ -77631,25 +77733,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>
@@ -77662,10 +77775,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>
@@ -77675,10 +77833,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);
@@ -77702,7 +77897,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) {
@@ -77716,48 +77910,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', () => {
@@ -77781,6 +78075,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');
@@ -77792,6 +78088,8 @@ class Dictation {
 
       // this.startSending();
 
+      // Clear
+      this.builder.commandText = '';
       this.opts.send(question);
     });
     inpCommand.addEventListener('keydown', e => {
@@ -77814,9 +78112,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') {
@@ -77841,16 +78253,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();
@@ -77886,13 +78295,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
@@ -77910,13 +78317,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
@@ -77937,10 +78342,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);
           });
 
@@ -77992,6 +78393,7 @@ class Dictation {
           this.startDictation();
         }, 2000);
       }
+      this.builder.commandText = '';
       let finalTranscripts = '';
       let speechTimeout;
       this.websocket.onmessage = event => {
@@ -78005,28 +78407,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');
@@ -78046,30 +78494,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');
@@ -78090,13 +78579,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
@@ -78174,6 +78661,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
@@ -78830,9 +79323,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: '',
@@ -79440,6 +79944,7 @@ class ContentBuilder {
             if (this.toolbarDisplay !== 'auto') {
               this.rte.showDefaultToolbar();
             }
+            if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
           }
         }
         this.element.hyperlink.buttonEditor.hide();
@@ -81484,6 +81989,7 @@ class ContentBuilder {
         this.resize.enable();
       }
     }
+    if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
   }
   handleCellKeypress(e) {
     if (e.ctrlKey || e.metaKey) {
@@ -82546,6 +83052,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 = '';
+  }
 }
 
 // (function(window){