@innovastudio/contentbox 1.5.71 → 1.5.73

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.5.71",
+  "version": "1.5.73",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -50,7 +50,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.88",
+    "@innovastudio/contentbuilder": "^1.4.89",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -94467,7 +94467,7 @@ class ContentBuilder {
       speechRecognitionLang: 'en-US',
       assistantMode: 'general',
       triggerWords: {
-        send: ['send', 'okay', 'execute', 'run'],
+        send: ['send', 'okay', 'ok', 'execute', 'run'],
         abort: ['abort', 'cancel'],
         clear: ['clear', 'erase']
       },
@@ -106797,7 +106797,7 @@ Example:
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-100"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row">
@@ -107016,7 +107016,7 @@ Example:
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-100"></div>
+                <div class="spacer height-60"></div>
             </div>
         </div>
         <div class="row relative sm-items-1">
@@ -107106,9 +107106,9 @@ To create a section with a list of photos or a photo gallery:
 
 Example:
 
-<div class="is-section is-box is-section-100 box-autofit type-poppins-lekton">
+<div class="is-section is-box is-section-100 box-autofit type-poppins">
     <div class="is-overlay"></div>
-    <div class="is-container v2 leading-13 is-content-1640 size-19">
+    <div class="is-container v2 leading-13 is-content-1640 size-16">
         <div class="row">
             <div class="column">
                 <h1 class="font-light size-54 leading-none">We deliver extraordinary things.</h1>
@@ -107119,18 +107119,21 @@ Example:
         </div>
         <div class="row">
             <div class="column">
-                <div class="spacer height-100"></div>
+                <div class="spacer height-80"></div>
             </div>
         </div>
         <div class="row">
             <div class="column"><img src="{{IMAGEURL}}" alt="" data-filename="img-024.jpg">
-                <p>Image Caption</p>
+                <h3 class="font-normal leading-11 size-36 size-24">Image title</h3>
+                <p>Paragraph here</p>
             </div>
             <div class="column"><img src="{{IMAGEURL}}" alt="" data-filename="img-083.jpg">
-                <p>Image Caption</p>
+                <h3 class="font-normal leading-11 size-36 size-24">Image title</h3>
+                <p>Paragraph here</p>
             </div>
             <div class="column"><img src="{{IMAGEURL}}" alt="" data-filename="img-190.jpg">
-                <p>Image Caption</p>
+                <h3 class="font-normal leading-11 size-36 size-24">Image title</h3>
+                <p>Paragraph here</p>
             </div>
         </div>
     </div>
@@ -107173,6 +107176,76 @@ Example:
 </div>
 
 `],
+  short_content: `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">
+                <p class="size-32">{{CONTENT}}</p>
+            </div>
+        </div>
+    </div>
+</div>
+    
+`,
+  new_section_answer: `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-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-20"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+`,
   new_section_others: `Use one of these templates that is more suitable:
 
 
@@ -109438,7 +109511,12 @@ class Lib {
         properties: {
           asking_info: {
             type: 'boolean',
-            description: 'User request an information'
+            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.'
           },
 
           /*
@@ -109458,11 +109536,11 @@ class Lib {
           },
           change_text: {
             type: 'boolean',
-            description: 'User explicitely requests to update text of the current content, rewrite, paraphrase or change text.'
+            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 create new content based on the current content, such as to summarize, expand, make short, add more info, etc'
+            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'
           },
           change_style: {
             type: 'boolean',
@@ -109710,9 +109788,17 @@ class Lib {
 
   elementContext(context, args) {
     if (args.add_headline) {
-      let info = `- To add a headline, use this class: 'font-normal leading-11 size-64':
+      let info = `- To add a headline or title, 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_paragraph) {
+      let info = `- To add a paragraph (long or short), just add:
+<p>Paragraph here</p>
+
 `;
       context = context + '\n' + info;
     }
@@ -109805,7 +109891,9 @@ Button Example:
 
     if (args.add_image) {
       // to differentiate from bg image
-      let info = `- To add an image, use "{{IMAGEURL}}" as the image src.
+      let info = `- To add an image, just add <img> element inside 'div.columns' element:
+            
+<img src="{{IMAGEURL}}">
 
 `;
       context = context + '\n' + info;
@@ -110853,19 +110941,26 @@ Example: To create a block with a headline and a paragraph:
 `;
         } 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:
+          context = `To add a column that contains a content:
+- Create one 'div.column' element and add the content inside it:
 
     <div class="column">
         {{CONTENT}}
     </div>
 
-Example: To create a column with a headline and a paragraph:
+Example 1: 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>
+
+
+Example 2: To create a column with an image:
+
+    <div class="column">
+        <img src="{{IMAGEURL}}">
+    </div>
   
 `;
         } else {
@@ -110896,6 +110991,10 @@ ${blockContent}
             return false;
           }
 
+          if (args.new_column_onright || args.new_column_onleft) {
+            html = this.fixNewBlock(answer);
+          }
+
           this.builder.editor.saveForUndo();
 
           if (args.new_block) {
@@ -110911,14 +111010,18 @@ ${blockContent}
             }
           } else if (args.new_column_onright) {
             if (block) {
+              const row = block.parentNode;
               block.insertAdjacentHTML('afterend', html);
+              this.builder.editor.util.fixLayout(row);
               setTimeout(() => {
                 block.nextElementSibling.click();
               }, 300);
             }
           } else if (args.new_column_onleft) {
             if (block) {
+              const row = block.parentNode;
               block.insertAdjacentHTML('beforebegin', html);
+              this.builder.editor.util.fixLayout(row);
               setTimeout(() => {
                 block.previousElementSibling.click();
               }, 300);
@@ -110949,19 +111052,40 @@ ${blockContent}
 
     const sendOtherCommand = async question => {
       let systemCmd = '';
-      let context = 'You are a helpful assistant. You will provide direct answers without a prologue.';
+      let context = 'You are a helpful assistant. You don\'t need to answer \'Sure!\' or \'Certainly\'. You will just provide direct answers without a prologue. No talk; just do.';
 
       const callback = answer => {
         if (this.builder.consoleLog) console.log(answer);
-        let systemCmd = '';
-        let question = `I have this content:
+        let systemCmd = 'You will be provided with a text content and your task is to put the content (completely) as it is in the provided template.';
+        let question = `Place my content in the provided template. Ensure that all the content are placed in the result. Feel free to add more rows/columns if needed, but don't change/add/reduce the content.
+
+This is my content:
 
 ${answer}
+`;
 
-Please use this content to create a new section using the provided template.
-                
-                `;
-        let context = this.chooseContext(cl.new_section_article);
+        const containsSingleSentence = text => {
+          // Count the occurrences of dots (periods)
+          const dotCount = (text.match(/\./g) || []).length; // If there's exactly one dot, it's likely a single sentence
+
+          return dotCount === 1;
+        };
+
+        const countWords = str => {
+          // Remove extra whitespaces and split the string into words
+          const wordsArray = str.trim().split(/\s+/); // Return the count of words
+
+          return wordsArray.length;
+        };
+
+        let context;
+        if (this.builder.consoleLog) console.log(containsSingleSentence(answer), countWords(answer));
+
+        if (containsSingleSentence(answer) || countWords(answer) <= 100) {
+          context = cl.short_content;
+        } else {
+          context = cl.new_section_answer;
+        }
 
         const callback = html => {
           if (this.builder.consoleLog) console.log(html);
@@ -110979,9 +111103,21 @@ Please use this content to create a new section using the provided template.
           this.dictation.finish();
         };
 
+        if (this.builder.consoleLog) {
+          console.log(systemCmd);
+          console.log(question);
+          console.log(context);
+        }
+
         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);
     };
 
@@ -111009,15 +111145,32 @@ ${currentHtml}
 
       const callback = answer => {
         if (this.builder.consoleLog) console.log(answer);
-        let systemCmd = '';
-        let question = `I have this content:
+        systemCmd = 'You will be provided with a text content and your task is to put the content (completely) as it is in the provided template.';
+        let question = `Place my content in the provided template. Ensure that all the content are placed in the result. Feel free to add more rows/columns if needed, but don't change/add/reduce the content.
+
+This is my 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 containsSingleSentence = text => {
+          const dotCount = (text.match(/\./g) || []).length;
+          return dotCount === 1;
+        };
+
+        const countWords = str => {
+          const wordsArray = str.trim().split(/\s+/);
+          return wordsArray.length;
+        };
+
+        let context;
+        if (this.builder.consoleLog) console.log(containsSingleSentence(answer), countWords(answer));
+
+        if (containsSingleSentence(answer) || countWords(answer) <= 100) {
+          context = cl.short_content;
+        } else {
+          context = cl.new_section_answer;
+        }
 
         const callback = html => {
           if (this.builder.consoleLog) console.log(html);
@@ -111035,6 +111188,12 @@ Place this content into the provided template. Adjust the template so that the c
           this.dictation.finish();
         };
 
+        if (this.builder.consoleLog) {
+          console.log(systemCmd);
+          console.log(question);
+          console.log(context);
+        }
+
         this.sendCommand('html', question, context, systemCmd, [], callback);
       };
 
@@ -111065,14 +111224,14 @@ Place this content into the provided template. Adjust the template so that the c
         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);
 
-        if (args.asking_info) {
+        if (args.asking_info && !args.add_info) {
           if (this.builder.consoleLog) console.log('asking_info');
           sendOtherCommand(question);
           return;
@@ -111364,15 +111523,7 @@ Place this content into the provided template. Adjust the template so that the c
 
         let context = '';
 
-        if (args.asking_info) {
-          /*
-          Handle Unrelated Request
-          */
-          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 || args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) {
           if (args.new_section) {
             if (args.add_image === 'gallery') {
               context = cl.new_section_with_gallery;
@@ -111449,10 +111600,10 @@ Place this content into the provided template. Adjust the template so that the c
               context = context.replaceAll('{{_IMAGEURL}}', imageUrl);
             }
           } else {
-            context = this.chooseContext(cl.new_section_article);
+            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) {
+          //if(args.redesign_layout || args.change_text || args.change_style || args.add_info) {
           if (!this.checkSelectedContent(activeBox)) {
             this.dictation.finish(true);
             return;
@@ -113682,6 +113833,24 @@ ${currentHtml}
     return html;
   }
 
+  fixNewBlock(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;
+  }
+
   fixHtmlBlock(html) {
     html = this.getHtmlBlock(html);
 
@@ -113888,16 +114057,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.
@@ -113930,6 +114116,8 @@ ${currentHtml}
           callback(answer);
         });
       } else {
+        // mode===analyze
+
         /*
             Handle Unrelated Request
              If OpenAI Function Call stopped (when user is asking unrelated things), it returns:
@@ -117094,6 +117282,7 @@ class ContentBox {
       speechTranscribeUrl: '',
       // http://localhost:8081
       autoSendDelay: 4000,
+      // sendCommand: async (message)=>{ },
       onlineDemo: false,
       startAIAssistant: false,
       temperature: 0.6,
@@ -117113,7 +117302,7 @@ class ContentBox {
       enableShortCommands: true,
       speechRecognitionLang: 'en-US',
       triggerWords: {
-        send: ['send', 'okay', 'execute', 'run'],
+        send: ['send', 'okay', 'ok', 'execute', 'run'],
         abort: ['abort', 'cancel'],
         clear: ['clear', 'erase']
       },
@@ -117129,7 +117318,7 @@ class ContentBox {
         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']
+          square: ['desk.jpg', 'chair.jpg', 'coffee.jpg', 'product.jpg', 'table.jpg', 'person-01.jpg', 'person-02.jpg', 'person-03.jpg', 'person-04.jpg', 'person-05.jpg', 'person-06.jpg', 'person-08.jpg']
         },
         bg_images: {
           box: ['person-01.jpg', 'person-02.jpg', 'person-03.jpg', 'person-04.jpg', 'person-05.jpg', 'person-06.jpg', 'person-07.jpg', 'person-08.jpg', 'person-09.jpg', 'person-10.jpg', 'building.jpg', 'desk.jpg', 'chair.jpg', 'coffee.jpg', 'product.jpg', 'table.jpg'],
@@ -117333,7 +117522,8 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
         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.',
+          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.', 'Explain our galaxy in a beginner-friendly and interesting way.', '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?'
           ]
         },
@@ -118096,7 +118286,7 @@ Add an image for each feature.`, 'Revise the headline, paragraph, and all the te
             display: none;
             border-radius: 50px;
             overflow:hidden;
-            background: rgba(243, 243, 243, 0.9);
+            /* background: rgba(243, 243, 243, 0.9); */
             width: 92px;
             justify-content: center;
         }
@@ -118938,7 +119128,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>