@innovastudio/contentbox 1.6.100 → 1.6.102

package/public/contentbox/contentbox.esm.js

@@ -26507,67 +26507,21 @@ class Snippets {
                     outline: transparent 1px solid;
                 }
 
-                
-                        
                 /* Scrollbar for modal */
-
-                /* Darker color, because background for snippet thumbnails is always light. */
-                .dark * {
-                    scrollbar-width: thin;
-                    scrollbar-color: rgb(78 78 78 / 62%) auto;
-                }
-                .dark *::-webkit-scrollbar {
-                    width: 12px;
-                }
-                .dark *::-webkit-scrollbar-track {
-                    background: transparent;
+                .is-design-list {
+                    scrollbar-width: thin; 
+                    scrollbar-color: #aaa #f0f0f0;
                 }
-                .dark *::-webkit-scrollbar-thumb {
-                    background-color:rgb(78 78 78 / 62%);
-                } 
-
-                .colored-dark * {
+                .dark .is-design-list {
                     scrollbar-width: thin;
-                    scrollbar-color: rgb(100, 100, 100) auto;
-                }
-                .colored-dark *::-webkit-scrollbar {
-                    width: 12px;
-                }
-                .colored-dark *::-webkit-scrollbar-track {
-                    background: transparent;
+                    scrollbar-color: #696969 #a1a1a1;
+                    /* scrollbar-color: rgba(255, 255, 255, 0.3) rgb(80, 80, 80); */
                 }
-                .colored-dark *::-webkit-scrollbar-thumb {
-                    background-color:rgb(100, 100, 100);
-                } 
-
-                .colored * {
+                .colored-dark .is-design-list  {
                     scrollbar-width: thin;
-                    scrollbar-color: rgba(0, 0, 0, 0.4) auto;
-                }
-                .colored *::-webkit-scrollbar {
-                    width: 12px;
+                    scrollbar-color: #7a7a7a #bebebe;
                 }
-                .colored *::-webkit-scrollbar-track {
-                    background: transparent;
-                }
-                .colored *::-webkit-scrollbar-thumb {
-                    background-color: rgba(0, 0, 0, 0.4);
-                } 
 
-                .light * {
-                    scrollbar-width: thin;
-                    scrollbar-color: rgba(0, 0, 0, 0.4) auto;
-                }
-                .light *::-webkit-scrollbar {
-                    width: 12px;
-                }
-                .light *::-webkit-scrollbar-track {
-                    background: transparent;
-                }
-                .light *::-webkit-scrollbar-thumb {
-                    background-color: rgba(0, 0, 0, 0.4);
-                } 
-        
                 svg {
                     fill: ${this.builder.styleSnippetColor};
                 }
@@ -31442,9 +31396,10 @@ class Util$1 {
     const dom = this.dom;
     pop.style.display = '';
     dom.removeClass(pop, 'active');
-    this.builder.doc.activeElement.blur();
-    document.activeElement.blur();
-    // this.builder.doc.body.focus(); 
+
+    // this.builder.doc.activeElement.blur();
+    // document.activeElement.blur();
+    this.builder.doc.body.focus();
     pop.setAttribute('aria-hidden', true);
 
     // pop.removeEventListener('keydown', this.handlePopKeyDown);
@@ -76415,6 +76370,12 @@ class Module {
     moduleModal.querySelector('div:not(.is-modal-overlay)').style.width = '90vw';
     moduleModal.querySelector('div:not(.is-modal-overlay)').style.maxWidth = w;
     moduleModal.querySelector('div:not(.is-modal-overlay)').style.height = h;
+    var themeLight = module.getAttribute('data-theme-light');
+    if (themeLight || modulename === 'form-builder') {
+      moduleModal.classList.add('theme-light');
+    } else {
+      moduleModal.classList.remove('theme-light');
+    }
     let btnClose = moduleModal.querySelector('.is-modal-close');
     dom.addEventListener(btnClose, 'click', () => {
       util.hideModal(moduleModal);
@@ -76508,6 +76469,7 @@ class Module {
 class Code {
   constructor(builder) {
     this.builder = builder;
+    this.renderTool();
   }
   renderTool() {
     const builderStuff = this.builder.builderStuff;
@@ -78178,6 +78140,8 @@ class RowTool {
   constructor(builder) {
     this.builder = builder;
     this.grid = new Grid(builder); // a must (also for ContentBox's command.js)
+
+    this.renderRowMore();
   }
 
   // Render row & column tools on each row
@@ -80072,6 +80036,7 @@ class ColumnTool {
         });
       });
     }
+    this.renderColMore();
   }
   renderColMore() {
     const builder = this.builder;
@@ -146782,7 +146747,285 @@ class Lib {
             description: 'User requests to add a new section  with 4 boxes.'
           }
         },
-        required: ['image', 'article']
+        required: []
+      }
+    }];
+  }
+
+  getFunctionsInitial() {
+    return [{
+      name: 'get_intent',
+      description: 'analyze user command to modify or create section/content',
+      parameters: {
+        type: 'object',
+        properties: {
+          new_section: {
+            type: 'boolean',
+            description: 'User requests to add a new section and not updating current section.'
+          } // edit_section: {
+          //     type: 'boolean',
+          //     description: 'User provides section to edit, such as improve content or rewrite.',
+          // },
+
+        },
+        required: []
+      }
+    }];
+  }
+
+  getFunctionsMore() {
+    return [{
+      name: 'get_intent',
+      description: 'analyze user command to modify or create section/content',
+      parameters: {
+        type: 'object',
+        properties: {
+          asking_info: {
+            type: 'boolean',
+            description: 'User request an information.'
+          },
+          add_info: {
+            // Without this, adding info will be considered as asking_info. Tha add_info should be the same as change_text
+            type: 'boolean',
+            description: 'User request an information to be added to the current content.'
+          },
+          // Add new Column or Block (in General Mode)
+          add_column_or_block: {
+            type: 'boolean',
+            description: 'User requests to add a column or a block.'
+          },
+          change_text: {
+            type: 'boolean',
+            description: 'User explicitely requests to update text of the current content, rewrite, paraphrase, translate or change text.'
+          },
+          write_based_on_the_current_content: {
+            type: 'boolean',
+            description: 'User request to create new content based on the current content, such as to summarize, expand, make short, create a tweet or social media post, etc'
+          },
+          add_headline: {
+            type: 'boolean',
+            description: 'If requested to add a headline.'
+          },
+          add_paragraph: {
+            type: 'boolean',
+            description: 'If requested to add a paragraph.'
+          },
+          add_space: {
+            type: 'boolean',
+            description: 'If requested to add a space.'
+          },
+          add_button: {
+            type: 'boolean',
+            description: 'If requested to add a button.'
+          },
+          add_youtube: {
+            type: 'boolean',
+            description: 'If requested to add a youtube/vimeo video.'
+          },
+          add_video: {
+            type: 'boolean',
+            description: 'If requested to add a video.'
+          },
+          add_audio: {
+            type: 'boolean',
+            description: 'If requested to add an audio.'
+          },
+          add_map: {
+            type: 'boolean',
+            description: 'If requested to add a google map.'
+          },
+          add_code: {
+            type: 'boolean',
+            description: 'If requested to add a custom code block.'
+          },
+          add_article: {
+            type: 'boolean',
+            description: 'If requested to add an article.'
+          },
+          add_image: {
+            type: 'string',
+            description: 'User request to add image or gallery. Possible value: image, gallery'
+          },
+          add_list: {
+            type: 'boolean',
+            description: 'If requested to add a list (eg. features, benefits, or list of items to explain).'
+          },
+          add_list_with_image: {
+            type: 'boolean',
+            description: 'If requested to add a list with an image for each list item.'
+          },
+          add_list_with_icon: {
+            type: 'boolean',
+            description: 'If requested to add a list with an icon.'
+          },
+          add_list_with_number: {
+            type: 'boolean',
+            description: 'If requested to add a list with numbering.'
+          },
+          // freeform
+          new_content: {
+            type: 'boolean',
+            description: 'User requests to add a new content.'
+          },
+          add_block: {
+            type: 'boolean',
+            description: 'User requests to add a block.'
+          },
+
+          /*
+              To make 2 columns not mixed with 2 boxes, each has to be identified separately
+          */
+          redesign_layout: {
+            type: 'boolean',
+            description: 'If redesigning the layout is requested.'
+          },
+          change_style: {
+            type: 'boolean',
+            description: 'If changing element style is requested.'
+          },
+          change_font: {
+            type: 'boolean',
+            description: 'User requests to change font of the current section.'
+          },
+          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'
+          }
+        },
+        required: []
+      }
+    }];
+  }
+
+  getFunctionsFinal() {
+    return [{
+      name: 'get_intent',
+      description: 'categorize user intent',
+      parameters: {
+        type: 'object',
+        properties: {
+          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'
+          },
+
+          /*
+          // Block Mode (in General Mode)
+          block_task: {
+              type: 'string',
+              description: 'User requests to move, duplicate, or delete block/row. Possible values: move-up, move-down, duplicate, remove'
+          },
+          column_task: {
+              type: 'string',
+              description: 'User requests to duplicate column, or delete column. Possible values: duplicate, remove'
+          },
+          move_column: {
+              type: 'string',
+              description: 'User requests to move column. Possible values: move-up, move-down, move-left, move-right'
+          },
+          increase_decrease_column: {
+              type: 'string',
+              description: 'User requests to increase/enlarge or decrease/reduce column size/width. Possible values: increase, decrease'
+          },
+             move_content_left: {
+              type: 'boolean',
+              description: 'Move content to the left',
+          },
+          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 width/size. 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'
+          },
+           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'
+          },
+          */
+          // Must be placed on the last for more precise 
+          // new_section_two_boxes: {
+          //     type: 'boolean',
+          //     description: 'User requests to add a new section  with 2 boxes.'
+          // },
+          // new_section_three_boxes: {
+          //     type: 'boolean',
+          //     description: 'User requests to add a new section  with 3 boxes.'
+          // },
+          // new_section_four_boxes: {
+          //     type: 'boolean',
+          //     description: 'User requests to add a new section  with 4 boxes.'
+          // },
+
+        },
+        required: []
       }
     }];
   }
@@ -147049,6 +147292,7 @@ Button Example:
 
   isCanvasMode() {
     let activeBox = this.builder.activeBox;
+    if (!activeBox) return false;
     let canvasMode = activeBox.classList.contains('box-canvas');
     return canvasMode;
   }
@@ -148395,7 +148639,8 @@ ${blockContent}
 
         if (activeCol) {
           // && numberOfIntents<=2) {
-          // Update Column or Block (in General Mode)
+          if (this.builder.consoleLog) console.log('branch block'); // Update Column or Block (in General Mode)
+
           if (args.align_individual_text || args.font_size_individual_text || args.line_height_individual_text) {
             sendUpdateBlockCommand(question, args);
             return;
@@ -148433,6 +148678,8 @@ ${blockContent}
         if (container) currentContent = this.builder.editor.readHtml(container, false, false);
 
         if (args.add_block || args.new_content || args.new_section || currentContent.trim() === '') {
+          if (this.builder.consoleLog) console.log('branch 1');
+
           if (args.add_image === 'gallery') {
             context = cl.new_section_with_gallery;
           } else if (args.add_list_with_image) {
@@ -148462,6 +148709,7 @@ ${blockContent}
           }
         } else {
           //if(args.redesign_layout || args.change_text || args.change_style || args.add_info) {
+          if (this.builder.consoleLog) console.log('branch 2');
           let currentHtml = '<div class="is-container">' + currentContent + '</div>';
           let redesign_request = '';
 
@@ -148604,10 +148852,30 @@ ${currentHtml}
         }
       } // if(this.builder.sendCommandUrl==='') return;
 
+      /*
+      let response = await this.sendCommandSync('analyze', 
+          `This is the command: "${question}"`, 
+          '', 
+          'You will analyze the user\'s command and return what the user needs.', 
+          this.lib.getFunctionsInitial());
+      const args1 = JSON.parse(response);
+       response = await this.sendCommandSync('analyze', 
+          `This is the command: "${question}"`, 
+          '', 
+          'You will analyze the user\'s command and return what the user needs.', 
+          this.lib.getFunctionsMore());
+      const args2 = JSON.parse(response);
+       response = await this.sendCommandSync('analyze', 
+          `This is the command: "${question}"`, 
+          '', 
+          'You will analyze the user\'s command and return what the user needs.', 
+          this.lib.getFunctionsFinal());
+      const args3 = JSON.parse(response);
+       const args = { ...args1, ...args2, ...args3 };
+      */
 
-      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);
+
+      const processGeneralCommand = args => {
         const canvasMode = this.isCanvasMode();
 
         if (args.add_block && canvasMode) ; else {
@@ -148631,14 +148899,17 @@ ${currentHtml}
 
           if (activeCol) {
             // && numberOfIntents<=2) {
-            // Update Column or Block (in General Mode)
+            if (this.builder.consoleLog) console.log('branch block'); // Update Column or Block (in General Mode)
+
             if (args.align_individual_text || args.font_size_individual_text || args.line_height_individual_text) {
+              if (this.builder.consoleLog) console.log('sendUpdateBlockCommand');
               sendUpdateBlockCommand(question, args);
               return;
             } // Add new Column or Block (in General Mode)
 
 
             if (args.add_column_or_block) {
+              if (this.builder.consoleLog) console.log('sendBlockCommand');
               sendBlockCommand(question);
               return;
             }
@@ -148646,7 +148917,8 @@ ${currentHtml}
 
 
           if (activeBox && numberOfIntents === 1) {
-            // Block Mode (in General Mode)
+            if (this.builder.consoleLog) console.log('single intent'); // Block Mode (in General Mode)
+
             let result = this.blockAction(args);
 
             if (result) {
@@ -148661,7 +148933,7 @@ ${currentHtml}
                      activeBox.setAttribute('data-selectbox',1);
                      this.section.sectionDuplicate();
                      activeBox.removeAttribute('data-selectbox');
-                                 this.builder.sectionStack();
+                             this.builder.sectionStack();
                      const nextBox = this.builder.wrapperEl.querySelector('[data-selectbox]');
                     if(nextBox) {
                          nextBox.removeAttribute('data-selectbox');
@@ -148932,6 +149204,7 @@ ${currentHtml}
         let context = '';
 
         if (args.add_block && canvasMode) {
+          if (this.builder.consoleLog) console.log('branch 1');
           cl = cl2;
 
           if (args.add_image === 'gallery') {
@@ -148974,7 +149247,11 @@ ${currentHtml}
             context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
           }
         } else if (args.new_section || args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) {
+          if (this.builder.consoleLog) console.log('branch 2');
+
           if (args.new_section) {
+            if (this.builder.consoleLog) console.log('branch 2.1');
+
             if (args.add_image === 'gallery') {
               context = cl.new_section_with_gallery;
             } else if (args.add_list_with_image) {
@@ -149015,6 +149292,8 @@ ${currentHtml}
               context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
             }
           } else if (args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) {
+            if (this.builder.consoleLog) console.log('branch 2.2');
+
             if (args.new_section_two_boxes) {
               context = cl.new_section_two_boxes;
             } else if (args.new_section_three_boxes) {
@@ -149050,10 +149329,13 @@ ${currentHtml}
               context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
             }
           } else {
+            if (this.builder.consoleLog) console.log('branch 2.3');
             context = this.chooseContext(cl.new_section_article); // Or use: context = cl.new_section_others;
           }
         } else {
           //if(args.redesign_layout || args.change_text || args.change_style || args.add_info) {
+          if (this.builder.consoleLog) console.log('branch 3');
+
           if (!this.checkSelectedContent(activeBox)) {
             this.dictation.finish(true);
             return;
@@ -149117,13 +149399,16 @@ ${currentHtml}
 
 
           question = `${redesign_request}${question}. Modify my section according to this instruction and returns the modified section HTML.
+Do not replace existing content unless requested.
 
 This is my section:
-            
+        
 ${currentHtml}
 `;
 
           if (args.change_text) ; else {
+            if (this.builder.consoleLog) console.log('branch 4');
+
             if ((args.add_headline || args.add_paragraph) && args.add_image === 'image') {
               context += '\n' + cl.update_section_with_image;
             } else if (args.add_image === 'gallery') {
@@ -149173,6 +149458,7 @@ ${currentHtml}
 
           if (!(args.add_block && canvasMode || args.new_section || args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes)) {
             // Redesign & Editing (text or style)
+            if (this.builder.consoleLog) console.log('callback 1');
             html = this.fixButtons(html);
             html = this.fixCustomCode(html);
             html = this.analyzeTitle(html, context); // Merge div.is-overlay-content
@@ -149216,7 +149502,10 @@ ${currentHtml}
             this.renderResult(html);
           } else {
             // New Section
+            if (this.builder.consoleLog) console.log('callback 2');
+
             if (args.add_block && canvasMode) {
+              if (this.builder.consoleLog) console.log('callback 2.1');
               html = this.fixHtml(html);
 
               if (!html) {
@@ -149230,6 +149519,7 @@ ${currentHtml}
 
               this.renderResult_Block(html);
             } else {
+              if (this.builder.consoleLog) console.log('callback 2.2');
               html = this.fixButtons(html);
               html = this.fixBgImage(html); // only if box has inline bg image, which is incorrect
 
@@ -149286,7 +149576,14 @@ ${currentHtml}
 
 
         this.sendCommand('html', question, context, systemCmd, [], callback);
-      });
+      };
+
+      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);
+        processGeneralCommand(args);
+      }); // console.log(args);
+      // processGeneralCommand(args);
     };
 
     this.dictation.opts.send = question => {
@@ -149311,15 +149608,19 @@ ${currentHtml}
         const activeBlock = this.activeBlock();
 
         if (activeBlock) {
-          // Special: If current box is a canvas and there is a selected block
+          if (this.builder.consoleLog) console.log('sendGeneralCommand_CanvasMode'); // Special: If current box is a canvas and there is a selected block
+
           sendGeneralCommand_CanvasMode(question);
         } else {
           // Normal
+          if (this.builder.consoleLog) console.log('sendGeneralCommand');
           sendGeneralCommand(question);
         }
       } else if (this.builder.editor.assistantMode === 'others') {
+        if (this.builder.consoleLog) console.log('sendOtherCommand');
         sendOtherCommand(question);
       } else if (this.builder.editor.assistantMode === 'block') {
+        if (this.builder.consoleLog) console.log('sendBlockCommand');
         sendBlockCommand(question);
       }
     };
@@ -150516,6 +150817,8 @@ ${currentHtml}
 
   chooseContext(list, num) {
     // random, but will be different from two previous results.
+    console.log(list);
+
     if (typeof num !== 'undefined') {
       return list[num];
     }
@@ -151620,8 +151923,143 @@ ${currentHtml}
     }
   }
 
+  async sendCommandSync(mode, question, context, system, functs) {
+    this.dictation.startSending(); // Shows sending status & Abort button
+
+    this.controller = new AbortController(); // Create a new AbortController
+
+    this.signal = this.controller.signal; // Get a new signal object
+
+    let temperature = localStorage.getItem('_temp') || this.builder.temperature;
+    let topP = localStorage.getItem('_top_p') || this.builder.topP;
+    let num = 1;
+    const messages = {
+      question,
+      context,
+      system,
+      functs,
+      temperature,
+      topP,
+      num
+    };
+
+    try {
+      /*
+      const response = await fetch(this.builder.sendCommandUrl, {
+          signal: this.signal, // Abort
+          method: 'POST',
+          headers: {
+              'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(messages),
+      });
+       const data = await response.json();
+      */
+      let data;
+
+      if (this.builder.sendCommand) {
+        data = await this.builder.sendCommand(messages);
+      } else {
+        let headers = { ...this.builder.headers,
+          ...this.builder.defaultHeaders
+        };
+        const response = await fetch(this.builder.sendCommandUrl, {
+          signal: this.signal,
+          // Abort
+          method: 'POST',
+          headers,
+          body: JSON.stringify(messages)
+        });
+        data = await response.json();
+      }
+
+      if (data.error) {
+        // Error response from OpenAI goes here.
+        console.log('Error:\n' + data.error); // ex. wrong API Key => Request failed with status code 401
+
+        this.builder.showMessage(out('Request failed.'));
+        this.dictation.finish(); // Must be called after finished
+
+        return;
+      }
+
+      if (mode === 'html') {
+        // console.log(data.answer.usage);
+        data.answer.choices.forEach(item => {
+          let html = item.message.content;
+          html = this.getHtmlResult(html);
+
+          if (!html) {
+            this.builder.showMessage(out('Oops! The response received is insufficient. Please try again.'));
+            this.dictation.finish(); // Must be called after finished
+
+            return;
+          } // callback(html);
+
+
+          return html;
+        });
+      } else if (mode === 'assistant') {
+        data.answer.choices.forEach(item => {
+          let answer = item.message.content; // callback(answer);
+
+          return answer;
+        });
+      } else {
+        // mode===analyze
+
+        /*
+            Handle Unrelated Request
+             If OpenAI Function Call stopped (when user is asking unrelated things), it returns:
+            { 
+                role: 'assistant', 
+                content: 'The user is asking for information.'
+            }
+        */
+        if (data.answer.role && data.answer.content) {
+          // callback(JSON.stringify({new_section: true, others: true})); // Just create a new section
+          // return;
+          return JSON.stringify({
+            new_section: true,
+            others: true
+          });
+        } // callback(data.answer);
+
+
+        return data.answer;
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') ; else {
+        // CORS or code errors goes here
+        console.error('Error:', error); // console.log('Error:\n'+error);
+
+        this.dictation.finish(); // Must be called after finished
+        // Debug
+
+        if (this.builder.consoleLog) {
+          if (!(error + '').includes('Failed to fetch')) {
+            // Only if not CORS error
+            let headers = { ...this.builder.headers,
+              ...this.builder.defaultHeaders
+            };
+            const response = await fetch(this.builder.sendCommandUrl, {
+              method: 'POST',
+              headers,
+              body: JSON.stringify(messages)
+            });
+            const data = await response.text();
+            console.log('Response:\n' + data); // Shows code error
+          }
+        }
+
+        this.builder.showMessage(out('Service Unavailable.'));
+      }
+    }
+  }
+
   isCanvasMode() {
     let activeBox = this.builder.activeBox;
+    if (!activeBox) return false;
     let canvasMode = activeBox.classList.contains('box-canvas');
     return canvasMode;
   }