@innovastudio/contentbuilder 1.4.89 → 1.4.91

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -3024,6 +3024,7 @@ button:focus-visible {
 .is-ui .is-tool.is-iframe-tool {
   background: rgba(0, 0, 0, 0.15);
   border: transparent 1px solid;
+  box-shadow: none;
 }
 #_cbhtml .is-tool#divImageTool > div, #_cbhtml .is-tool#divImageTool > button, #_cbhtml .is-tool.is-video-tool > div, #_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > div, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-iframe-tool > div, #_cbhtml .is-tool.is-iframe-tool > button,
 .is-ui .is-tool#divImageTool > div,
@@ -3065,13 +3066,12 @@ button:focus-visible {
 #_cbhtml .is-tool.is-spacer-tool,
 .is-ui .is-tool.is-spacer-tool {
   border: none;
-  background: none;
 }
 #_cbhtml .is-tool.is-spacer-tool > button,
 .is-ui .is-tool.is-spacer-tool > button {
   width: 30px;
   height: 30px;
-  background: rgba(240, 240, 240, 0.9);
+  background: none;
 }
 #_cbhtml .is-tool.is-spacer-tool > button svg,
 .is-ui .is-tool.is-spacer-tool > button svg {
@@ -3081,6 +3081,7 @@ button:focus-visible {
 .is-ui .is-tool.is-table-tool {
   border: none;
   background: none;
+  box-shadow: none;
 }
 #_cbhtml .is-tool.is-table-tool:hover,
 .is-ui .is-tool.is-table-tool:hover {
@@ -3114,13 +3115,20 @@ button:focus-visible {
 .is-ui .is-tool.is-module-tool > button svg {
   fill: #121212;
 }
+#_cbhtml .is-tool#divLinkTool, #_cbhtml .is-tool#divButtonTool, #_cbhtml .is-tool#divSvgTool,
+.is-ui .is-tool#divLinkTool,
+.is-ui .is-tool#divButtonTool,
+.is-ui .is-tool#divSvgTool {
+  background: rgba(243, 243, 243, 0.9);
+  box-shadow: none;
+}
 #_cbhtml .is-tool#divLinkTool button, #_cbhtml .is-tool#divButtonTool button, #_cbhtml .is-tool#divSvgTool button,
 .is-ui .is-tool#divLinkTool button,
 .is-ui .is-tool#divButtonTool button,
 .is-ui .is-tool#divSvgTool button {
   width: 30px;
   height: 30px;
-  background: rgba(243, 243, 243, 0.9);
+  background: transparent;
 }
 #_cbhtml .is-tool#divLinkTool button svg, #_cbhtml .is-tool#divButtonTool button svg, #_cbhtml .is-tool#divSvgTool button svg,
 .is-ui .is-tool#divLinkTool button svg,
@@ -4327,6 +4335,10 @@ button:focus-visible {
   fill: #000;
 }
 
+#_cbhtml[gray] .is-tool {
+  background: rgba(243, 243, 243, 0.9);
+  box-shadow: none;
+}
 #_cbhtml[gray] .is-tool.is-column-tool {
   background: rgba(243, 243, 243, 0.9);
   flex-direction: row;
@@ -4570,9 +4582,6 @@ button:focus-visible {
   background: transparent;
   padding: 5px;
 }
-#_cbhtml .is-tool.is-element-tool {
-  background: rgba(243, 243, 243, 0.9);
-}
 #_cbhtml .is-tool.is-element-tool button {
   width: 25px;
   height: 25px;
@@ -4612,6 +4621,7 @@ button:focus-visible {
   width: auto;
   left: auto;
   right: -40px;
+  box-shadow: none;
 }
 .is-tool.is-row-tool button {
   width: 25px;
@@ -4664,6 +4674,7 @@ button:focus-visible {
   flex-direction: row;
   margin-top: 0px;
   margin-left: -1px;
+  box-shadow: none;
 }
 .is-tool.is-col-tool button {
   width: 25px;

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(() => {
@@ -80021,6 +80067,7 @@ class ContentBuilder {
     window.selectAsset = this.selectAsset.bind(this);
     window.assetType = this.assetType.bind(this);
     window.hideModal = this.hideModal.bind(this);
+    window.generateImage = this.generateImage.bind(this);
     setTimeout(() => {
       // Remember UI
       if (localStorage.getItem('_livepreview') != null) {
@@ -81814,6 +81861,82 @@ 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
+    };
+    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) {