@innovastudio/contentbuilder 1.4.90 → 1.4.91

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.90",
+  "version": "1.4.91",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -5553,13 +5553,13 @@ class Util {
     localStorage.removeItem('_dictation');
     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');
+    localStorage.removeItem('_ai_panel_open');
 
     //NOT USED
     localStorage.removeItem('_scrollableeditor');
@@ -5570,6 +5570,7 @@ class Util {
     localStorage.removeItem('_advancedhtmleditor');
     localStorage.removeItem('_hidecolhtmleditor');
     localStorage.removeItem('_hiderowhtmleditor');
+    localStorage.removeItem('_sampleshown');
   }
 
   // source: http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div */
@@ -77744,6 +77745,7 @@ class Dictation {
                         <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>
+                        <button class="scope-image" title="${util.out('Image')}" data-value="image" style="display:none;margin-right:5px">${util.out('Image')}</button> 
                     </div>
                 </div>
                 <textarea class="inp-command"></textarea>
@@ -77875,15 +77877,12 @@ class Dictation {
     info += '</ul>';
     divInfo.innerHTML = info;
     const inpCommand = this.builderStuff.querySelector('.inp-command');
-    if (localStorage.getItem('_sampleshown') === null) {
-      inpCommand.setAttribute('placeholder', this.builder.commandPlaceholderText);
-      localStorage.setItem('_sampleshown', true);
-    }
     this.builder.commandText = '';
     this.builder.autoSendCommand = false;
     if (localStorage.getItem('_dictation') !== null) {
       if (localStorage.getItem('_dictation') === '1') {
         this.modalCommand.classList.add('active');
+        this.doOpen();
         if (localStorage.getItem('_mic') !== null) {
           if (localStorage.getItem('_mic') === '1') {
             this.startDictation();
@@ -77984,28 +77983,34 @@ class Dictation {
     btnCommandList.addEventListener('click', () => {
       let htmlList = '';
       const commandInfo = this.builder.commandInfo;
+      let bImageGeneration = false;
+      if (this.builder.generateImageUrl && this.builder.uploadBase64Url) {
+        bImageGeneration = true;
+      }
       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>`;
+          if (key !== 'image' || key === 'image' && bImageGeneration) {
+            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 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>`;
+              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>`;
+              }
             }
           }
         }
@@ -78115,7 +78120,10 @@ class Dictation {
     const btnScopeSection = this.modalCommand.querySelector('.scope-section');
     const btnScopeBlock = this.modalCommand.querySelector('.scope-block');
     const btnScopeOthers = this.modalCommand.querySelector('.scope-others');
+    const btnScopeImage = this.modalCommand.querySelector('.scope-image');
     btnScopeBlock.disabled = true;
+    if (this.builder.generateImageUrl) btnScopeImage.style.display = ''; // show generate image button
+
     const assistModeBtns = modalCommand.querySelectorAll('.div-assistant-mode button');
     assistModeBtns.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -78124,7 +78132,21 @@ class Dictation {
         });
         btn.classList.add('on');
         const val = btn.getAttribute('data-value');
-        this.builder.assistantMode = val; // general, block, others
+        this.builder.assistantMode = val; // general, block, others, image
+
+        if (this.builder.hidePlaceholder) {
+          inpCommand.setAttribute('placeholder', '');
+        } else {
+          if (val === 'general') {
+            inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.general);
+          } else if (val === 'block') {
+            inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.edit_block);
+          } else if (val === 'others') {
+            inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.ask_questions);
+          } else if (val === 'image') {
+            inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.generate_image);
+          }
+        }
 
         /*
         // ContentBox
@@ -78155,17 +78177,20 @@ class Dictation {
           btnScopeBlock.classList.add('on');
           btnScopeSection.classList.remove('on');
           btnScopeOthers.classList.remove('on');
+          btnScopeImage.classList.remove('on');
         }
         btnScopeBlock.removeAttribute('disabled');
       } else {
         btnScopeBlock.disabled = true;
         if (btnScopeOthers.classList.contains('on')) return;
+        if (btnScopeImage.classList.contains('on')) return;
 
         // change
         this.builder.assistantMode = 'general';
         btnScopeSection.classList.add('on');
         btnScopeBlock.classList.remove('on');
         btnScopeOthers.classList.remove('on');
+        btnScopeImage.classList.remove('on');
       }
     };
     this.initialStart = false; // for Safari
@@ -78240,7 +78265,28 @@ class Dictation {
       return true;
     }
   }
+  doOpen() {
+    this.builder.hidePlaceholder = false;
+    const numeOfOpenToHidePlaceholderText = 4;
+    if (localStorage.getItem('_ai_panel_open') === null) {
+      localStorage.setItem('_ai_panel_open', 1);
+    } else {
+      let count = parseInt(localStorage.getItem('_ai_panel_open'));
+      if (count < numeOfOpenToHidePlaceholderText) {
+        count++;
+        localStorage.setItem('_ai_panel_open', count);
+      }
+    }
+    const inpCommand = this.builderStuff.querySelector('.inp-command');
+    if (localStorage.getItem('_ai_panel_open') === `${numeOfOpenToHidePlaceholderText}`) {
+      this.builder.hidePlaceholder = true;
+      inpCommand.setAttribute('placeholder', '');
+    } else {
+      inpCommand.setAttribute('placeholder', this.builder.commandPlaceholders.general);
+    }
+  }
   openDictation() {
+    this.doOpen();
     const inpCommand = this.modalCommand.querySelector('.inp-command');
     if (this.modalCommand.classList.contains('active')) {
       setTimeout(() => {
@@ -81817,64 +81863,80 @@ class ContentBuilder {
   }
   async generateImage(prompt, num, callback) {
     if (!(this.generateImageUrl && this.uploadBase64Url)) return;
+    this.controller = new AbortController(); // Create a new AbortController
+    this.signal = this.controller.signal; // Get a new signal object
+
     const messages = {
       prompt,
       num
     };
-    const response = await fetch(this.generateImageUrl, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(messages)
-    });
-    const result = await response.json();
-    if (result.error) {
-      console.log('Error:\n' + result.error);
-      return;
-    }
-    const filename = result.filename;
-    let images = [];
-    const numOfImages = result.data.data.length;
-    const imageList = result.data.data;
-    imageList.forEach(item => {
-      const base64 = item.b64_json;
-      const src = `data:image/jpeg;base64,${base64}`;
-      var newWidth = 1024;
-      var newHeight = 1024;
-      var img = new Image();
-      img.src = src;
-      img.onload = () => {
-        var canvas = document.createElement('canvas');
-        canvas.width = newWidth;
-        canvas.height = newHeight;
-        var ctx = canvas.getContext('2d');
-        ctx.drawImage(img, 0, 0, newWidth, newHeight);
-        var resizedBase64 = canvas.toDataURL('image/jpeg');
-        let image = resizedBase64;
-        image = image.replace(/^data:image\/(png|jpeg);base64,/, '');
-        const reqBody = {
-          image: image,
-          filename: filename
-        };
-        fetch(this.uploadBase64Url, {
-          method: 'POST',
-          body: JSON.stringify(reqBody),
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        }).then(response => response.json()).then(response => {
-          if (!response.error) {
-            const uploadedImageUrl = response.url;
-            images.push(uploadedImageUrl);
-            if (images.length === numOfImages) {
-              callback(images);
+    try {
+      const response = await fetch(this.generateImageUrl, {
+        signal: this.signal,
+        // Abort
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(messages)
+      });
+      const result = await response.json();
+      if (result.error) {
+        console.log('Error:\n' + result.error);
+        return;
+      }
+      const filename = result.filename;
+      let images = [];
+      const numOfImages = result.data.data.length;
+      const imageList = result.data.data;
+      imageList.forEach(item => {
+        const base64 = item.b64_json;
+        const src = `data:image/jpeg;base64,${base64}`;
+        var newWidth = 1024;
+        var newHeight = 1024;
+        var img = new Image();
+        img.src = src;
+        img.onload = () => {
+          var canvas = document.createElement('canvas');
+          canvas.width = newWidth;
+          canvas.height = newHeight;
+          var ctx = canvas.getContext('2d');
+          ctx.drawImage(img, 0, 0, newWidth, newHeight);
+          var resizedBase64 = canvas.toDataURL('image/jpeg');
+          let image = resizedBase64;
+          image = image.replace(/^data:image\/(png|jpeg);base64,/, '');
+          const reqBody = {
+            image: image,
+            filename: filename
+          };
+          fetch(this.uploadBase64Url, {
+            method: 'POST',
+            body: JSON.stringify(reqBody),
+            headers: {
+              'Content-Type': 'application/json'
             }
-          }
-        });
-      };
-    });
+          }).then(response => response.json()).then(response => {
+            if (!response.error) {
+              const uploadedImageUrl = response.url;
+              images.push(uploadedImageUrl);
+              if (images.length === numOfImages) {
+                callback(images);
+              }
+            }
+          });
+        };
+      });
+    } 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
+      }
+    }
   }
+
   lightboxOpen(col) {
     // Open Lightbox
     if (this.useLightbox) {