@innovastudio/contentbox 1.5.65 → 1.5.67

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -5840,7 +5840,7 @@ var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof w
 
 var js$2 = {exports: {}};
 
-var src$2 = {};
+var src$1 = {};
 
 var javascript$1 = {exports: {}};
 
@@ -11024,9 +11024,9 @@ function style_html$2(html_source, options, js, css) {
 }
 style_html$2.defaultOptions = html_beautify$1.defaultOptions;
 
-src$2.js = js_beautify$2;
-src$2.css = css_beautify$2;
-src$2.html = style_html$2;
+src$1.js = js_beautify$2;
+src$1.css = css_beautify$2;
+src$1.html = style_html$2;
 
 /*jshint node:true */
 
@@ -11069,7 +11069,7 @@ function get_beautify(js_beautify, css_beautify, html_beautify) {
 
 {
   (function(mod) {
-    var beautifier = src$2;
+    var beautifier = src$1;
     beautifier.js_beautify = beautifier.js;
     beautifier.css_beautify = beautifier.css;
     beautifier.html_beautify = beautifier.html;
@@ -23685,7 +23685,7 @@ class Dom {
 
 var js$1 = {exports: {}};
 
-var src$1 = {};
+var src = {};
 
 var javascript = {exports: {}};
 
@@ -28824,9 +28824,9 @@ function style_html(html_source, options, js, css) {
 }
 style_html.defaultOptions = html_beautify.defaultOptions;
 
-src$1.js = js_beautify;
-src$1.css = css_beautify;
-src$1.html = style_html;
+src.js = js_beautify;
+src.css = css_beautify;
+src.html = style_html;
 
 /*jshint node:true */
 
@@ -28869,7 +28869,7 @@ function get_beautify(js_beautify, css_beautify, html_beautify) {
 
 {
   (function(mod) {
-    var beautifier = src$1;
+    var beautifier = src;
     beautifier.js_beautify = beautifier.js;
     beautifier.css_beautify = beautifier.css;
     beautifier.html_beautify = beautifier.html;
@@ -92533,7 +92533,7 @@ class Lib$1 {
 }
 
 // import RecordRTC  from 'recordrtc';
-
+// import Recorder from 'opus-recorder'; // Using Recorder
 const dom$l = new Dom();
 class Dictation {
   constructor(opts = {}, builder) {
@@ -92967,11 +92967,17 @@ class Dictation {
     //     track.stop();
     // });
 
-    // Using mediaRecorder
-    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
-      this.mediaRecorder.stop();
-      this.localStream.getTracks().forEach(track => track.stop()); // Stop the tracks to release the resources
-    }
+    if (this.builder.useMediaRecorder) {
+      // Using mediaRecorder
+      if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+        this.mediaRecorder.stop();
+        this.localStream.getTracks().forEach(track => track.stop()); // Stop the tracks to release the resources
+      }
+    } /* else {
+        // Using Recorder
+        if(this.recorder) this.recorder.stop();
+        if(this.localStream) this.localStream.getTracks().forEach(track => track.stop()); // Stop the tracks to release the resources
+      } */
 
     if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
       this.websocket.close();
@@ -93020,30 +93026,47 @@ class Dictation {
         return;
       }
       const sampleRate = 16000;
+      if (this.builder.useMediaRecorder) {
+        // Using mediaRecorder
+        navigator.mediaDevices.getUserMedia({
+          audio: {
+            sampleSize: 16,
+            channelCount: 1,
+            sampleRate: sampleRate
+          }
+        }).then(stream => {
+          this.localStream = stream;
+          this.mediaRecorder = new MediaRecorder(stream);
+          this.mediaRecorder.addEventListener('dataavailable', event => {
+            if (this.aborted) return;
+
+            // console.log(event.data);
+            // if (event.data.size > 0) {
+            // }
+            this.websocket.send(event.data);
+          });
 
-      // Using mediaRecorder
-      navigator.mediaDevices.getUserMedia({
-        audio: {
-          sampleSize: 16,
-          channelCount: 1,
-          sampleRate: sampleRate
-        }
-      }).then(stream => {
-        this.localStream = stream;
-        this.mediaRecorder = new MediaRecorder(stream);
-        this.mediaRecorder.addEventListener('dataavailable', event => {
-          if (this.aborted) return;
-
-          // console.log(event.data);
-          // if (event.data.size > 0) {
-          // }
-          this.websocket.send(event.data);
+          // this.mediaRecorder.start(1000);
+        }).catch(error => {
+          console.log(error);
         });
-
-        // this.mediaRecorder.start(1000);
-      }).catch(error => {
-        console.log(error);
-      });
+      } /* else {
+           // Using Recorder
+          this.recorder = new Recorder({
+              encoderPath: this.builder.encoderPath||
+                  'https://cdnjs.cloudflare.com/ajax/libs/opus-recorder/8.0.5/encoderWorker.min.js',
+              leaveStreamOpen: true,
+              numberOfChannels: 1,
+                           // OPUS options
+              encoderSampleRate: sampleRate,
+              streamPages: true,
+              maxBuffersPerPage: 1,
+          });
+          this.recorder.ondataavailable = (e) => {
+              if(this.aborted) return;
+              this.websocket.send(e.buffer);
+          };
+        } */
 
       /*
       // Using RecordRTC
@@ -93072,25 +93095,37 @@ class Dictation {
         }, 2000);
       }
       let finalTranscripts = '';
+      let speechTimeout;
       this.websocket.onmessage = event => {
         const message = JSON.parse(event.data);
         if (message.event === 'can-open-mic') {
           //this.recorder.startRecording(); // Using RecordRTC
 
-          this.mediaRecorder.start(1000); // Using mediaRecorder
+          if (this.builder.useMediaRecorder) {
+            this.mediaRecorder.start(1000); // Using mediaRecorder
+          } /* else {
+              this.recorder.start(); // Using Recorder
+            } */
 
           // console.log('Start Dictation');
           this.aborted = false;
         }
         if (message.event === 'transcript-result') {
-          const transcripts = message.data;
           if (this.builder.isInProgress || this.aborted) {
             return;
           }
-          finalTranscripts += ' ' + transcripts;
+          const transcript = message.data.channel.alternatives[0].transcript;
+          if (transcript && message.data.is_final) {
+            finalTranscripts += ' ' + transcript;
+          }
           inpCommand.value = finalTranscripts;
-          clearTimeout(this.speechTimeout);
-          this.speechTimeout = setTimeout(() => {
+          clearTimeout(speechTimeout);
+
+          // console.log('Writing..');
+
+          speechTimeout = setTimeout(() => {
+            // console.log('Clear');
+
             this.builder.commandText = '';
             finalTranscripts = '';
             if (this.builder.autoSendCommand) {
@@ -93191,72 +93226,51 @@ class Dictation {
   }
 }
 
-var src = {
-	compareTwoStrings:compareTwoStrings,
-	findBestMatch:findBestMatch
+var stringSimilarity = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringSimilarity = void 0;
+/* global exports, Map */
+/**
+ * Calculate similarity between two strings
+ * @param {string} str1 First string to match
+ * @param {string} str2 Second string to match
+ * @param {number} [substringLength=2] Optional. Length of substring to be used in calculating similarity. Default 2.
+ * @param {boolean} [caseSensitive=false] Optional. Whether you want to consider case in string matching. Default false;
+ * @returns Number between 0 and 1, with 0 being a low match score.
+ */
+var stringSimilarity = function (str1, str2, substringLength, caseSensitive) {
+    if (substringLength === void 0) { substringLength = 2; }
+    if (caseSensitive === void 0) { caseSensitive = false; }
+    if (!caseSensitive) {
+        str1 = str1.toLowerCase();
+        str2 = str2.toLowerCase();
+    }
+    if (str1.length < substringLength || str2.length < substringLength)
+        return 0;
+    var map = new Map();
+    for (var i = 0; i < str1.length - (substringLength - 1); i++) {
+        var substr1 = str1.substr(i, substringLength);
+        map.set(substr1, map.has(substr1) ? map.get(substr1) + 1 : 1);
+    }
+    var match = 0;
+    for (var j = 0; j < str2.length - (substringLength - 1); j++) {
+        var substr2 = str2.substr(j, substringLength);
+        var count = map.has(substr2) ? map.get(substr2) : 0;
+        if (count > 0) {
+            map.set(substr2, count - 1);
+            match++;
+        }
+    }
+    return (match * 2) / (str1.length + str2.length - ((substringLength - 1) * 2));
 };
+exports.stringSimilarity = stringSimilarity;
+exports.default = exports.stringSimilarity;
 
-function compareTwoStrings(first, second) {
-	first = first.replace(/\s+/g, '');
-	second = second.replace(/\s+/g, '');
-
-	if (first === second) return 1; // identical or empty
-	if (first.length < 2 || second.length < 2) return 0; // if either is a 0-letter or 1-letter string
-
-	let firstBigrams = new Map();
-	for (let i = 0; i < first.length - 1; i++) {
-		const bigram = first.substring(i, i + 2);
-		const count = firstBigrams.has(bigram)
-			? firstBigrams.get(bigram) + 1
-			: 1;
-
-		firstBigrams.set(bigram, count);
-	}
-	let intersectionSize = 0;
-	for (let i = 0; i < second.length - 1; i++) {
-		const bigram = second.substring(i, i + 2);
-		const count = firstBigrams.has(bigram)
-			? firstBigrams.get(bigram)
-			: 0;
-
-		if (count > 0) {
-			firstBigrams.set(bigram, count - 1);
-			intersectionSize++;
-		}
-	}
-
-	return (2.0 * intersectionSize) / (first.length + second.length - 2);
-}
-
-function findBestMatch(mainString, targetStrings) {
-	if (!areArgsValid(mainString, targetStrings)) throw new Error('Bad arguments: First argument should be a string, second should be an array of strings');
-	
-	const ratings = [];
-	let bestMatchIndex = 0;
-
-	for (let i = 0; i < targetStrings.length; i++) {
-		const currentTargetString = targetStrings[i];
-		const currentRating = compareTwoStrings(mainString, currentTargetString);
-		ratings.push({target: currentTargetString, rating: currentRating});
-		if (currentRating > ratings[bestMatchIndex].rating) {
-			bestMatchIndex = i;
-		}
-	}
-	
-	
-	const bestMatch = ratings[bestMatchIndex];
-	
-	return { ratings: ratings, bestMatch: bestMatch, bestMatchIndex: bestMatchIndex };
-}
-
-function areArgsValid(mainString, targetStrings) {
-	if (typeof mainString !== 'string') return false;
-	if (!Array.isArray(targetStrings)) return false;
-	if (!targetStrings.length) return false;
-	if (targetStrings.find( function (s) { return typeof s !== 'string'})) return false;
-	return true;
-}
+}(stringSimilarity));
 
+// import stringSimilarity from 'string-similarity';
 class Similarity {
   constructor(builder) {
     this.builder = builder;
@@ -93286,7 +93300,7 @@ class Similarity {
     const normalizedCommand = command.toLowerCase();
     let maxSimilarity = 0;
     for (const cmd of list) {
-      const similarity = src.compareTwoStrings(normalizedCommand, cmd);
+      const similarity = stringSimilarity.stringSimilarity(normalizedCommand, cmd);
       if (similarity > maxSimilarity) {
         // console.log(list)
         // console.log(similarity)
@@ -93911,15 +93925,18 @@ class ContentBuilder {
       enableDragResize: true,
       simpleTextSettings: false,
       enableColumnsPerLine: true,
-      /* Prompt/Command Stuff */
+      /* Prompt/Command Stuff for AI Assistant */
       isContentBox: false,
       sendCommandUrl: 'http://localhost:8081/answer',
       // speechTranscribeUrl: 'http://192.168.1.7:8081',
       onlineDemo: false,
-      autoSendDelay: 3000,
+      autoSendDelay: 4000,
       commandPlaceholderText: '',
       enableShortCommands: true,
       speechRecognitionLang: 'en-US',
+      useMediaRecorder: true,
+      // do not change
+      encoderPath: '',
       headlineList: ['We create simple and effective designs.', 'Ultimate Experiences With Story, Emotion, And Purpose.', 'Build Anything Beautifully', 'With Less Stuff and More Compassion', 'We\'re [CompanyName]. Full stack development with a spark of creativity.', 'Transforming your digital experience with [CompanyName]. Achieve your online goals with our customized solutions.', 'Revolutionizing web development with [CompanyName]. Unleash your digital potential with our high-performance solutions.', 'Creative and Inspiring'],
       shortCommandList: {
         undo: ['undo'],
@@ -108593,6 +108610,10 @@ class Lib {
             description: 'If requested to add a list with numbering.'
           },
           //-----
+          change_color_individual_text: {
+            type: 'boolean',
+            description: 'User requests to change the color of a headline, paragraph of specific element/text.'
+          },
           change_content_dark: {
             type: 'boolean',
             description: 'If requested to change text/content color to dark/black.'
@@ -109673,7 +109694,7 @@ class Command {
             return;
           }
 
-          if (args.change_content_light) {
+          if (args.change_content_light && !args.change_color_individual_text) {
             this.builder.editor.saveForUndo();
             this.builder.editor.lib.updateContentColor(activeBox, 'light');
             this.builder.settings.onChange();
@@ -109681,7 +109702,7 @@ class Command {
             return false;
           }
 
-          if (args.change_content_dark) {
+          if (args.change_content_dark && !args.change_color_individual_text) {
             this.builder.editor.saveForUndo();
             this.builder.editor.lib.updateContentColor(activeBox, 'dark');
             this.builder.settings.onChange();
@@ -111253,99 +111274,132 @@ ${currentHtml}`;
 
       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'move_content_left') {
+    }
+    /*else if(intent==='move_content_left') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'left');
-      this.builder.settings.onChange();
+       this.builder.editor.lib.moveContent(activeBox, 'left');
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'move_content_center') {
+      
+    } else if(intent==='move_content_center') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'center'); // this.builder.editor.lib.moveContent(activeBox, 'middle');
-
-      this.builder.settings.onChange();
+       this.builder.editor.lib.moveContent(activeBox, 'center');
+      // this.builder.editor.lib.moveContent(activeBox, 'middle');
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'move_content_right') {
+      
+    } else if(intent==='move_content_right') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'right');
-      this.builder.settings.onChange();
+       this.builder.editor.lib.moveContent(activeBox, 'right');
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'move_content_top') {
+      
+    } else if(intent==='move_content_top') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'top');
-      this.builder.settings.onChange();
+       this.builder.editor.lib.moveContent(activeBox, 'top');
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'move_content_middle') {
+      
+    } else if(intent==='move_content_middle') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'middle');
-      this.builder.settings.onChange();
+       this.builder.editor.lib.moveContent(activeBox, 'middle');
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'move_content_bottom') {
+      
+    } else if(intent==='move_content_bottom') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'bottom');
-      this.builder.settings.onChange();
+       this.builder.editor.lib.moveContent(activeBox, 'bottom');
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'make_content_center') {
-      // This
+      
+    } else if(intent==='make_content_center') { // This
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'center');
+       this.builder.editor.lib.moveContent(activeBox, 'center');
       this.builder.editor.lib.moveContent(activeBox, 'middle');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_top_left') {
+      
+    } else if(intent==='align_content_top_left') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'top');
+       this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'left');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_top_center') {
+      
+    } else if(intent==='align_content_top_center') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'top');
+       this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'center');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_top_right') {
+      
+    } else if(intent==='align_content_top_right') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'top');
+       this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'right');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_middle_left') {
+      
+    } else if(intent==='align_content_middle_left') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'middle');
+       this.builder.editor.lib.moveContent(activeBox, 'middle');
       this.builder.editor.lib.moveContent(activeBox, 'left');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_middle_center') {
+      
+    } else if(intent==='align_content_middle_center') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'middle');
+       this.builder.editor.lib.moveContent(activeBox, 'middle');
       this.builder.editor.lib.moveContent(activeBox, 'center');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_middle_right') {
+      
+    } else if(intent==='align_content_middle_right') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'middle');
+       this.builder.editor.lib.moveContent(activeBox, 'middle');
       this.builder.editor.lib.moveContent(activeBox, 'right');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_bottom_left') {
+      
+    } else if(intent==='align_content_bottom_left') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'bottom');
+       this.builder.editor.lib.moveContent(activeBox, 'bottom');
       this.builder.editor.lib.moveContent(activeBox, 'left');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_bottom_center') {
+      
+    } else if(intent==='align_content_bottom_center') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'bottom');
+       this.builder.editor.lib.moveContent(activeBox, 'bottom');
       this.builder.editor.lib.moveContent(activeBox, 'center');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'align_content_bottom_right') {
+      
+    } else if(intent==='align_content_bottom_right') {
+      
       this.builder.editor.saveForUndo();
-      this.builder.editor.lib.moveContent(activeBox, 'bottom');
+       this.builder.editor.lib.moveContent(activeBox, 'bottom');
       this.builder.editor.lib.moveContent(activeBox, 'right');
-      this.builder.settings.onChange();
+       this.builder.settings.onChange();
       return false;
-    } else if (intent === 'increase_space') {
+      
+    } */
+    else if (intent === 'increase_space') {
       let elm = this.builder.editor.activeElement;
 
       if (elm) {
@@ -115052,13 +115106,16 @@ class ContentBox {
       // http://localhost:8081/answer
       speechTranscribeUrl: '',
       // http://localhost:8081
-      autoSendDelay: 3000,
+      autoSendDelay: 4000,
       onlineDemo: false,
       startAIAssistant: false,
       temperature: 0.6,
       //0.4,
       topP: 0.9,
       //0.6,
+      useMediaRecorder: true,
+      // do not change
+      encoderPath: '',
       commandPlaceholderText: 'Create a section containing a short article with ideas for outdoor activities.',
       disclaimerAI: `The feature you're about to use utilizes AI in some of its processes. 
             It's important to understand that AI systems have limitations.
@@ -115561,6 +115618,8 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
       commandInfo: this.settings.commandInfo,
       commandPlaceholderText: this.settings.commandPlaceholderText,
       similarityThreshold: this.settings.similarityThreshold,
+      useMediaRecorder: this.settings.useMediaRecorder,
+      encoderPath: this.settings.encoderPath,
       container: '.is-container',
       page: '.is-wrapper',
       deleteConfirm: this.settings.deleteConfirm,