@innovastudio/contentbox 1.5.72 → 1.5.74

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.72",
+  "version": "1.5.74",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.esm.js

@@ -109518,6 +109518,11 @@ class Lib {
             type: 'boolean',
             description: 'User request an information to be added to the current content.'
           },
+          // Add new Column or Block (in General Mode)
+          add_column_or_block: {
+            type: 'boolean',
+            description: 'User requests to add a column or a block.'
+          },
 
           /*
               To make 2 columns not mixed with 2 boxes, each has to be identified separately
@@ -109644,6 +109649,23 @@ class Lib {
             type: 'string',
             description: 'User requests to align the whole text/content. Possible value: left, center or right'
           },
+          // Block Mode (in General Mode)
+          block_task: {
+            type: 'string',
+            description: 'User requests to move, duplicate, or delete block/row. Possible values: move-up, move-down, duplicate, remove'
+          },
+          column_task: {
+            type: 'string',
+            description: 'User requests to duplicate column, or delete column. Possible values: duplicate, remove'
+          },
+          move_column: {
+            type: 'string',
+            description: 'User requests to move column. Possible values: move-up, move-down, move-left, move-right'
+          },
+          increase_decrease_column: {
+            type: 'string',
+            description: 'User requests to increase/enlarge or decrease/reduce column size/width. Possible values: increase, decrease'
+          },
           move_content_left: {
             type: 'boolean',
             description: 'Move content to the left'
@@ -110939,6 +110961,19 @@ Example: To create a block with a headline and a paragraph:
     </div>
                         
 `;
+        } else if (numberOfIntents === 1 && (args.new_column_onright || args.new_column_onleft)) {
+          // single intent => no content details
+          systemCmd = 'You will be asked to create a single HTML block/column and return the HTML without any additional explanation.';
+          context = `To create a column, create single 'div.column' element and add a paragraph inside it.
+
+Example:
+
+    <div class="column">
+        <p>Paragraph here.</p>
+    </div>
+  
+`;
+          question = `${question}.  No talk; just do. You must return only one 'div.column'.`;
         } else if (args.new_column_onright || args.new_column_onleft) {
           systemCmd = 'You will be asked to create content (in HTML) and return the HTML without any additional explanation.';
           context = `To add a column that contains a content:
@@ -111206,6 +111241,78 @@ ${answer}
       this.sendCommand('assistant', question, context, systemCmd, [], callback);
     };
 
+    const numOfIntents = args => {
+      let trueCount = 0;
+
+      for (const key in args) {
+        if (args[key] === true) {
+          trueCount++;
+        }
+      }
+
+      return trueCount;
+    }; // Update Column or Block (in General Mode)
+
+
+    const sendUpdateBlockCommand = async (question, args) => {
+      let block = this.builder.editor.activeCol;
+
+      if (!block) {
+        this.builder.showMessage(out('Please select a block or content.'));
+        this.dictation.finish(); // Must be called after finished
+
+        return;
+      }
+
+      let blockContent = block.innerHTML;
+      const systemCmd = 'You will be asked to modify content (in HTML) and return only the modified HTML without any additional explanation.'; // Update prompt
+
+      question = `${question}. Modify my content according to this instruction and returns the modified content HTML.
+            
+This is my content:
+                
+${blockContent}
+`; // let context = this.lib.elementContext(context, args);
+
+      let context = this.lib.addElementContext('', args);
+
+      if (this.builder.consoleLog) {
+        console.log(systemCmd);
+        console.log(question);
+        console.log(context);
+      }
+
+      const callback = answer => {
+        if (this.builder.consoleLog) console.log(answer);
+        html = this.fixHtmlBlock(answer);
+
+        if (!html) {
+          this.dictation.finish(true);
+          return false;
+        }
+
+        this.builder.editor.saveForUndo();
+        block.innerHTML = html;
+        let elmActive = block.querySelector('.elm-active');
+
+        if (elmActive) {
+          this.builder.editor.activeElement = elmActive;
+          elmActive.focus();
+        } // See addContent() in ContentBuilder's util.js
+
+
+        let builderActive = this.builder.doc.querySelector('.builder-active');
+        if (builderActive) this.builder.editor.applyBehaviorOn(builderActive); //Trigger Change event
+
+        this.builder.settings.onChange(); //Trigger Render event
+
+        this.builder.settings.onRender();
+        this.dictation.finish();
+      };
+
+      this.sendCommand('assistant', question, context, systemCmd, [], callback);
+    };
+
     const sendGeneralCommand = async question => {
       // Get Selected
       let activeBox = this.builder.activeBox;
@@ -111224,9 +111331,9 @@ ${answer}
         if (activeSection) {
           if (activeSection.classList.contains('is-box')) sectionBox = true; // A single box section
         }
-      }
+      } // if(this.builder.sendCommandUrl==='') return;
+
 
-      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);
@@ -111242,12 +111349,37 @@ ${answer}
           if (this.builder.consoleLog) console.log('write_based_on_the_current_content');
           sendRewriteCommand(question);
           return;
-        } // SIMPLE/SINGLE INTENT (like Short Commands)
+        } // const numberOfIntents = Object.keys(args).length;
 
 
-        const numberOfIntents = Object.keys(args).length;
+        const numberOfIntents = numOfIntents(args); // SIMPLE (1 or 2) INTENTS
+
+        const activeCol = this.builder.editor.activeCol;
+
+        if (activeCol) {
+          // && numberOfIntents<=2) {
+          // Update Column or Block (in General Mode)
+          if (args.align_individual_text || args.font_size_individual_text || args.line_height_individual_text) {
+            sendUpdateBlockCommand(question, args);
+            return;
+          } // Add new Column or Block (in General Mode)
+
+
+          if (args.add_column_or_block) {
+            sendBlockCommand(question);
+            return;
+          }
+        } // SIMPLE/SINGLE INTENT (like Short Commands)
+
 
         if (activeBox && numberOfIntents === 1) {
+          // Block Mode (in General Mode)
+          let result = this.blockAction(args);
+
+          if (result) {
+            this.dictation.finish();
+            return;
+          }
           /*
           // If single intent creates new section:
            if(activeBox && (args.move_content_left || args.move_content_center || args.move_content_right ||
@@ -111268,6 +111400,8 @@ ${answer}
                   return;
           }
           */
+
+
           const moveContent = this.lib.processContent(args, activeBox);
 
           if (moveContent) {
@@ -111480,7 +111614,7 @@ ${answer}
             }
           }
 
-          const result = this.quickAction(args);
+          result = this.quickAction(args);
 
           if (result) {
             this.dictation.finish();
@@ -113848,6 +113982,16 @@ ${currentHtml}
     imgs.forEach(img => {
       img.setAttribute('src', imageUrl);
     });
+    const cols = doc.querySelectorAll('.column');
+    cols.forEach(col => {
+      // Add spacer in an empty column
+      if (col.innerHTML.trim() === '') {
+        const spacer = document.createElement('div');
+        spacer.classList.add('spacer');
+        spacer.classList.add('height-40');
+        col.appendChild(spacer);
+      }
+    });
     return doc.documentElement.innerHTML;
   }
 
@@ -114057,16 +114201,33 @@ ${currentHtml}
     };
 
     try {
+      /*
       const response = await fetch(this.builder.sendCommandUrl, {
-        signal: this.signal,
-        // Abort
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(messages)
+          signal: this.signal, // Abort
+          method: 'POST',
+          headers: {
+              'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(messages),
       });
-      const data = await response.json();
+       const data = await response.json();
+      */
+      let data;
+
+      if (this.builder.sendCommand) {
+        data = await this.builder.sendCommand(messages);
+      } else {
+        const response = await fetch(this.builder.sendCommandUrl, {
+          signal: this.signal,
+          // Abort
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(messages)
+        });
+        data = await response.json();
+      }
 
       if (data.error) {
         // Error response from OpenAI goes here.
@@ -117265,6 +117426,7 @@ class ContentBox {
       speechTranscribeUrl: '',
       // http://localhost:8081
       autoSendDelay: 4000,
+      // sendCommand: async (message)=>{ },
       onlineDemo: false,
       startAIAssistant: false,
       temperature: 0.6,
@@ -119110,7 +119272,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
     let info = box.querySelector('.is-box-info');
     if (info) info.parentNode.removeChild(info);
 
-    if (this.sendCommandUrl && this.AIToolbar) {
+    if ((this.sendCommandUrl || this.sendCommand) && this.AIToolbar) {
       dom.appendHtml(box, `<div class="is-box-info is-tool" style="transform-origin: right top;">
             <button data-title="${out('AI Rewrite')}" title="${out('AI Rewrite')}" class="input-box-rewrite" style="padding-left:3px">
                 <svg class="is-icon-flex" style="width:15px;height:15px;flex:none;fill:#000;"><use xlink:href="#icon-pencil"></use></svg>
@@ -119319,17 +119481,19 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
     let contentClass = contentCss.replace('.css', '');
     let contentStylePath = this.settings.contentStylePath; //Add contentCss
 
-    let exist = false;
+    if (contentCss) {
+      let exist = false;
 
-    let links = window.parent._cb.doc.getElementsByTagName('link');
+      let links = window.parent._cb.doc.getElementsByTagName('link');
 
-    for (let i = 0; i < links.length; i++) {
-      let src = links[i].href.toLowerCase();
-      if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
-    }
+      for (let i = 0; i < links.length; i++) {
+        let src = links[i].href.toLowerCase();
+        if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
+      }
 
-    if (!exist) {
-      this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+      if (!exist) {
+        this.wrapperEl.insertAdjacentHTML('beforeend', '<link data-name="contentstyle" data-class="' + contentClass + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+      }
     }
 
     return newSection;