@innovastudio/contentbuilder 1.4.77 → 1.4.79

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.77",
+  "version": "1.4.79",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [
@@ -57,6 +57,7 @@
     "moveable": "^0.30.0",
     "rangy": "^1.3.0",
     "recordrtc": "^5.6.2",
+    "socket.io-client": "^4.7.1",
     "sortablejs": "^1.14.0",
     "string-similarity": "^4.0.4"
   }

package/public/contentbuilder/contentbuilder.css

@@ -32,6 +32,11 @@ button:focus-visible {
   transition: all ease 0.1s;
 }
 
+.focus-outline {
+  outline: #3e93f7 2px solid !important;
+  outline-offset: 2px !important;
+}
+
 .is-builder {
   transition: all ease 0.3s;
   transform-origin: top;

package/public/contentbuilder/contentbuilder.esm.js

@@ -3932,13 +3932,13 @@ class Util {
       return s;
     }
   }
-  showMessage(message) {
+  showMessage(message, focusOutline, callback) {
     const dom = this.dom;
     let html = '';
     html = `<div class="is-modal modalmessage" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
             <div class="is-modal-content" style="padding-top: 15px;padding-bottom: 20px;max-width: 450px;">
                 <div style="margin: 20px 0 30px;font-size: 17px;">${message}</div>
-                <button title="${this.out('Ok')}" class="input-ok classic focus-warning">${this.out('Ok')}</button>
+                <button title="${this.out('Ok')}" class="input-ok classic">${this.out('Ok')}</button>
             </div>
         </div>`;
     const builderStuff = this.builder.builderStuff;
@@ -3949,12 +3949,18 @@ class Util {
     }
     this.showModal(modalMessage, false, () => {
       modalMessage.parentNode.removeChild(modalMessage);
+      if (callback) callback();
     });
     let buttonok = modalMessage.querySelector('.modalmessage .input-ok');
     dom.addEventListener(buttonok, 'click', () => {
       this.hideModal(modalMessage);
-      modalMessage.parentNode.removeChild(modalMessage);
+      if (modalMessage.parentNode) modalMessage.parentNode.removeChild(modalMessage);
+      if (callback) callback();
     });
+    buttonok.focus();
+    if (focusOutline) {
+      buttonok.classList.add('focus-outline');
+    }
   }
   showChoice(message, yestext, callback) {
     const dom = this.dom;
@@ -83958,16 +83964,15 @@ class Dictation {
     }
   }
   openDictation() {
+    const inpCommand = this.modalCommand.querySelector('.inp-command');
     if (this.modalCommand.classList.contains('active')) {
       setTimeout(() => {
         // Needed if opens programmatically on builder start (wait until all loaded)
-        const inpCommand = this.modalCommand.querySelector('.inp-command');
         inpCommand.focus();
       }, 600);
       return;
     }
     this.modalCommand.classList.add('active');
-    const inpCommand = this.modalCommand.querySelector('.inp-command');
     inpCommand.focus();
     localStorage.setItem('_dictation', '1');
     const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
@@ -83994,6 +83999,25 @@ class Dictation {
     });
   }
   async startDictation() {
+    const inpCommand = this.modalCommand.querySelector('.inp-command');
+    if (this.builder.onlineDemo) {
+      setTimeout(() => {
+        const btnDictation = this.builderStuff.querySelector('.cmd-enable-dictation');
+        const btnClear = this.builderStuff.querySelector('.cmd-clear-command');
+        const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
+        this.stopDictation();
+        btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
+        localStorage.setItem('_mic', '0');
+        chkAutoSend.parentNode.style.display = 'none';
+        btnClear.style.marginRight = '6px';
+      }, 1); // to give delay from the btnDictation click
+
+      //Show info
+      this.util.showMessage(this.util.out('Speech recognition is disabled in this online demo. You can type your command/prompt in the textbox.'), true, () => {
+        inpCommand.focus();
+      });
+      return;
+    }
     if (this.builder.speechTranscribeUrl) {
       this.websocket = new WebSocket(this.builder.speechTranscribeUrl);
       try {
@@ -84038,7 +84062,6 @@ class Dictation {
         this.startDictation();
       }
       let finalTranscripts = '';
-      const inpCommand = this.modalCommand.querySelector('.inp-command');
       this.websocket.onmessage = event => {
         const message = JSON.parse(event.data);
         if (message.event === 'can-open-mic') {
@@ -84062,7 +84085,7 @@ class Dictation {
               const btnSend = this.modalCommand.querySelector('.cmd-send-command');
               btnSend.click();
             }
-          }, 2000);
+          }, this.builder.autoSendDelay);
         }
       };
     } else {
@@ -84096,7 +84119,6 @@ class Dictation {
           }
           this.builder.commandText += finalTranscripts; // + '<i style="color:#999">' + interimTranscripts + '</i>';
 
-          const inpCommand = this.modalCommand.querySelector('.inp-command');
           inpCommand.value = this.builder.commandText;
           clearTimeout(this.speechTimeout);
           this.speechTimeout = setTimeout(() => {
@@ -84106,7 +84128,7 @@ class Dictation {
               const btnSend = this.modalCommand.querySelector('.cmd-send-command');
               btnSend.click();
             }
-          }, 3000);
+          }, this.builder.autoSendDelay);
         };
         this.recognition.onend = () => {
           if (!this.aborted) this.startDictation();
@@ -84880,6 +84902,8 @@ class ContentBuilder {
       isContentBox: false,
       sendCommandUrl: 'http://localhost:8081/answer',
       // speechTranscribeUrl: 'http://192.168.1.7:8081',
+      onlineDemo: false,
+      autoSendDelay: 3000,
       commandPlaceholderText: '',
       enableShortCommands: true,
       speechRecognitionLang: 'en-US',