@alan-ai/alan-sdk-web 1.8.28 → 1.8.31

package/README.md

@@ -1,4 +1,4 @@
-# Alan voice assistant SDK for Web
+# Alan AI: In-app voice assistant SDK for Web
 
 [Alan Platform](https://alan.app/) • [Alan Studio](https://studio.alan.app/register) • [Docs](https://alan.app/docs) • [FAQ](https://alan.app/docs/usage/additional/faq) •
 [Blog](https://alan.app/blog/) • [Twitter](https://twitter.com/alanvoiceai)
@@ -8,49 +8,49 @@
 [![CircleCI](https://circleci.com/gh/alan-ai/alan-sdk-web.svg?style=shield)](https://circleci.com/gh/alan-ai/alan-sdk-web)
 
 
-Quickly add voice to your app or website. Create a voice assistant or build a multimodal interface with two input modes — speech and gestures — working in sync.
+Quickly add voice to your app with the Alan Platform. Create an in-app voice assistant to enable human-like conversations and provide a personalized voice experience for every user.
 
 <img src="https://storage.googleapis.com/alan-public-images/github/tablet-tasks.gif" height="325px" align="right"/>
 
 
 ## Alan is a Voice AI Platform
 
-Alan is a conversational voice AI platform that lets you create an intelligent voice assistant for your app. It offers all necessary tools to design, embed and host your conversational experiences:
+Alan is a conversational voice AI platform that lets you create an intelligent voice assistant for your app. It offers all necessary tools to design, embed and host your voice solutions:
 
 #### Alan Studio
-A web portal where you can write, test and manage dialog scenarios for your voice assistant or chatbot.
+A powerful web-based IDE where you can write, test and debug dialog scenarios for your voice assistant or chatbot.
 
 #### Alan Client SDKs
 
-With Alan Client SDKs, you can quickly embed Alan's voice to your app.
+Alan's lightweight SDKs to quickly embed a voice assistant to your app.
 
 #### Alan Cloud
 
-Alan's AI-backend that maintains voice deployments and accomplishes all Spoken Language Understanding (SLU) and Natural Language Processing (NLP) tasks.
+Alan's AI-backend powered by the industry’s best Automatic Speech Recognition (ASR), Natural Language Understanding (NLU) and Speech Synthesis. The Alan Cloud provisions and handles the infrastructure required to maintain your voice deployments and perform all the voice processing tasks.
 
 To get more details on how Alan works, see <a href="https://alan.app/platform" target="_blank">Alan Platform</a>.
 
 ## Why Alan?
 
 * **No or minimum changes to your UI**: To voice enable your app, you only need to get the Alan Client SDK and drop it to your app.
-* **Serverless environment**: No need to plan for, deploy and maintain any infrastructure or speech components. Alan does all maintenance and voice processing tasks on behalf of your app.
+* **Serverless environment**: No need to plan for, deploy and maintain any infrastructure or speech components - the Alan Platform does the bulk of the work.
 * **On-the-fly updates**: All changes to the dialogs become available immediately.
 * **Voice flow testing and analytics**: Alan Studio provides advanced tools for testing your dialog flows and getting the analytics data on users' interactions, all in the same console.
 
 
 ## How to start
 
-To add voice a web app or page:
+To create a voice assistant for your web app or page:
 
 1. <a href="https://studio.alan.app/register" target="_blank">Sign up for Alan Studio</a> to build voice scripts in JavaScript and test them.
-2. Use the Alan Web SDK to embed the Alan button to your app or page. For details, see Alan AI documentation for the necessary framework:
-
-    * <img src="https://alan.app/assets/about/js.svg" height="35px" align="center" style="border:0px"/> <a href="https://alan.app/docs/client-api/web/vanilla" target="_blank">JavaScript</a>
-	* <img src="https://alan.app/assets/about/react.svg" height="35px" align="center" style="border:0px"/> <a href="https://alan.app/docs/client-api/web/react" target="_blank">React</a>
-    * <img src="https://alan.app/assets/about/angular.svg" height="35px" align="center" style="border:0px"/> <a href="https://alan.app/docs/client-api/web/angular" target="_blank">Angular</a>
-    * <img src="https://alan.app/assets/about/vue.svg" height="35px" align="center" style="border:0px"/> <a href="https://alan.app/docs/client-api/web/vue" target="_blank">Vue</a> 
-    * <img src="https://alan.app/assets/about/ember.svg" height="35px" align="center" style="border:0px"/> <a href="https://alan.app/docs/client-api/web/ember" target="_blank">Ember</a>
-    * <img src="https://alan.app/assets/about/electron.svg" height="35px" align="center" style="border:0px"/> <a href="https://alan.app/docs/client-api/web/electron" target="_blank">Electron</a>
+2. Use the Alan Web SDK to embed a voice assistant to your app or page. For details, see Alan AI documentation for the necessary framework:
+
+    * <a href="https://alan.app/docs/client-api/web/vanilla" target="_blank">JavaScript</a>
+	* <a href="https://alan.app/docs/client-api/web/react" target="_blank">React</a>
+    * <a href="https://alan.app/docs/client-api/web/angular" target="_blank">Angular</a>
+    * <a href="https://alan.app/docs/client-api/web/vue" target="_blank">Vue</a> 
+    * <a href="https://alan.app/docs/client-api/web/ember" target="_blank">Ember</a>
+    * <a href="https://alan.app/docs/client-api/web/electron" target="_blank">Electron</a>
 
 
 Check out our <a href="https://alan-ai.github.io/alan-sdk-web/" target="_blank">demo</a>.

package/dist/alan_lib.js

@@ -781,7 +781,7 @@
 (function(ns) {
     "use strict";
 
-    var alanButtonVersion = '1.8.28';
+    var alanButtonVersion = '1.8.31';
 
     if (window.alanBtn) {
         console.warn('Alan: the Alan Button source code has already added (v.' + alanButtonVersion + ')');
@@ -903,9 +903,25 @@ function alanBtn(options) {
     var absolutePosition = false;
     var micWasStoppedByTimeout = false;
     var keepButtonPositionAfterDnD = false;
+
+    // Btn modes
+    var mode;
+
+    if (options.mode === 'tutor') {
+        mode = 'tutor';
+        pinned = true;
+    } else if (options.mode === 'demo') {
+        mode = 'demo';
+    } else {
+        mode = 'component';
+    }
     
     console.log('Alan: v.' + alanButtonVersion);
 
+    if (window.tutorProject && !isTutorMode()) {
+        throw new Error('The Alan Button instance has already been created. There cannot be two Alan Button instances created at the same time');
+    }
+
     var btnInstance = {
         // Common public API
         version: alanButtonVersion,
@@ -970,6 +986,7 @@ function alanBtn(options) {
         },
         //deprecated
         callClientApi: function (method, data, callback) {
+            console.error('The "callClientApi" method is deprecated. Please use the "callProjectApi: instead.\n\nSee more info here: https://alan.app/docs/client-api/methods/common-api/?highlight=callprojectapi#callprojectapi');
             if (btnDisabled) {
                 return;
             }
@@ -980,6 +997,7 @@ function alanBtn(options) {
         },
         // deprecated
         setAuthData: function (data) {
+            console.error('The "setAuthData" method is deprecated. Please use the "authData" property when you create the Alan Button.\n\nSee more info here:  https://alan.app/docs/server-api/sending-data/authdata/?highlight=authdata');
             if (btnDisabled) {
                 return;
             }
@@ -1002,6 +1020,9 @@ function alanBtn(options) {
             alanAudio.stop();
             window.tutorProject.close();
             rootEl.remove();
+            if(!isTutorMode()) {
+                window.tutorProject = null;
+            }
         },
         stop: function () {
             alanAudio.stop();
@@ -1043,18 +1064,6 @@ function alanBtn(options) {
         baseUrl = 'https://' + options.host;
     }
 
-    // Btn modes
-    var mode;
-
-    if (options.mode === 'tutor') {
-        mode = 'tutor';
-        pinned = true;
-    } else if (options.mode === 'demo') {
-        mode = 'demo';
-    } else {
-        mode = 'component';
-    }
-
     if (options.position === 'absolute' || options.pinned) {
         pinned = true;
     }
@@ -1435,6 +1444,7 @@ function alanBtn(options) {
 
         if (absolutePosition) {
             el.style.position = 'absolute';
+            el.classList.add('absolute-positioned');
         }
         if (topPos) {
             el.style.bottom = '';
@@ -1479,6 +1489,7 @@ function alanBtn(options) {
         }
 
         applySizeSettingsToBlurLayers([btnOval1, btnOval2]);
+        setTextPanelPosition(recognisedTextHolder);
     }
 
     // Define base styles for btn
@@ -2207,6 +2218,7 @@ function alanBtn(options) {
 
             // console.info('BTN: tutorProject', options.key);
         } else {
+            console.error("The Alan Button key wasn't provided");
             switchState(getDefaultBtnState());
         }
     }
@@ -2239,7 +2251,7 @@ function alanBtn(options) {
     }
 
     var onresizeDebounced = debounce(function (e) {
-        togglePopupVisibility(true);
+        togglePopupVisibility(true, true);
     }, 400);
 
     var windowPrevInnerHeight = window.innerHeight;
@@ -2250,6 +2262,8 @@ function alanBtn(options) {
     }
 
     window.onresize = function () {
+        if (isTutorMode()) return;
+        if (absolutePosition) return;
         var innerHeightDelta = Math.abs(windowPrevInnerHeight - window.innerHeight);
         var isMobileIos = (isMobile() || isIpadOS()) && isSafari();
         var orientationWasChanged = windowPrevOrientation !== window.orientation;
@@ -2260,14 +2274,18 @@ function alanBtn(options) {
         // innerHeightDelta === 95 - tablet ios smart banner is shown
         // innerHeightDelta === 0 - ios smart banner is hidden
 
-        console.info('LOGS', innerHeightDelta);
+        var isVerticalResize = innerHeightDelta !== 0;
 
         var mobilePanelsWereShownOrHidden = isMobileIos &&
             (innerHeightDelta === 84 || innerHeightDelta === 95 || innerHeightDelta === 50 || innerHeightDelta === 0);
 
         windowPrevOrientation = window.orientation;
         windowPrevInnerHeight = window.innerHeight;
-        if (orientationWasChanged || btnWasMoved || mobilePanelsWereShownOrHidden) {
+
+        if ((orientationWasChanged ||
+            btnWasMoved ||
+            mobilePanelsWereShownOrHidden) &&
+            isVerticalResize) {
             var rootElClientRect = rootEl.getBoundingClientRect();
             var newYPos;
             if (innerHeightDelta === 0) {
@@ -2290,9 +2308,9 @@ function alanBtn(options) {
         if (navigator.permissions) {
             navigator.permissions.query({ name: 'microphone' }).then(function (result) {
                 if (result.state === 'prompt') {
-                    if (options.showOverlayOnMicPermissionPrompt) {
+                    // if (options.showOverlayOnMicPermissionPrompt) {
                         showPopup({ overlay: true, buttonUnderOverlay: true });
-                    }
+                    // }
                     sendClientEvent({ micPermissionPrompt: true });
                 }
                 if (result.state !== 'granted') {
@@ -2403,14 +2421,15 @@ function alanBtn(options) {
         }
     }
 
-    function showPopup(popupOptions) {
+    function showPopup(popupOptions, keepPopupOverlay) {
         if (btnDisabled) return;
+        if (popupIsVisible) return;
+        
         savedPopupOptions = popupOptions;
         var message = popupOptions.message;
         var buttonMarginInPopup = popupOptions.buttonMarginInPopup;
         var withOverlay = popupOptions.overlay;
         var _btnSize = parseInt(btnSize, 10);
-        var overlay = document.createElement('div');
         var popup = document.createElement('div');
         var rootElClientRect = rootEl.getBoundingClientRect();
         var maxZIndex = 2147483647;
@@ -2418,16 +2437,13 @@ function alanBtn(options) {
 
         popupIsVisible = true;
 
-        overlay.id = 'alan-overlay';
         popup.id = 'alan-overlay-popup';
-        overlay.classList.add('alan-overlay');
         popup.classList.add('alan-overlay-popup');
 
         if (popupOptions.buttonUnderOverlay !== true) {
             btn.style.zIndex = maxZIndex;
         }
         
-        overlay.style.zIndex = maxZIndex - 3;
         popup.style.zIndex = maxZIndex - 2;
 
         if (popupOptions.preventClick) {
@@ -2492,11 +2508,18 @@ function alanBtn(options) {
         }
 
         rootEl.appendChild(popup);
-        if (withOverlay) {
+
+        if (withOverlay && keepPopupOverlay !== true) {
+            var overlay = document.createElement('div');
+            overlay.id = 'alan-overlay';
+            overlay.classList.add('alan-overlay');
+            overlay.style.zIndex = maxZIndex - 3;
             rootEl.appendChild(overlay);
+            overlay.addEventListener('click', hidePopup);
         }
+
         closeIconImg.addEventListener('click', hidePopupByCloseIcon);
-        overlay.addEventListener('click', hidePopup);
+       
         document.addEventListener('keyup', hidePopupByEsc);
         let showPopupEvent = "showPopup";
         if (popupOptions.name) {
@@ -2517,7 +2540,7 @@ function alanBtn(options) {
         }
     }
 
-    function hidePopup(keepOptionsInMemory) {
+    function hidePopup(keepOptionsInMemory, keepPopupOverlay) {
         if (keepOptionsInMemory !== true) {
             savedPopupOptions = null;
         }
@@ -2528,7 +2551,7 @@ function alanBtn(options) {
         if (overlayCloseIcon) {
             overlayCloseIcon.removeEventListener('click', hidePopup);
         }
-        if (overlay) {
+        if (overlay && keepPopupOverlay !== true) {
             overlay.remove();
             overlay.removeEventListener('click', hidePopup);
         }
@@ -2543,14 +2566,14 @@ function alanBtn(options) {
 
     var savedPopupOptions;
 
-    function togglePopupVisibility(isVisible) {
+    function togglePopupVisibility(isVisible, keepPopupOverlay) {
         var popup = rootEl.querySelector('#alan-overlay-popup');
         if (popup) {
             popup.style.visibility = isVisible ? 'visible' : 'hidden';
             if (isVisible) {
-                hidePopup(true);
+                hidePopup(true, keepPopupOverlay);
                 if (savedPopupOptions) {
-                    showPopup(savedPopupOptions);
+                    showPopup(savedPopupOptions, keepPopupOverlay);
                 }
             }
         }
@@ -2610,6 +2633,15 @@ function alanBtn(options) {
                 }
                 recognisedTextContent.innerHTML = recognisedText;
             }
+            if (recognisedTextHolder.classList.contains('absolute-positioned')) {
+                if (recognisedText.length < 33) {
+                    recognisedTextHolder.style.whiteSpace = 'nowrap';
+                    recognisedTextHolder.style.minWidth = 'auto';
+                } else {
+                    recognisedTextHolder.style.minWidth = '236px';
+                    recognisedTextHolder.style.whiteSpace = 'normal';
+                }
+            }
 
             if (recognisedText.length > 60 && recognisedText.length <= 80) {
                 recognisedTextHolder.classList.add('alanBtn-recognised-text-holder-long');
@@ -2700,10 +2732,10 @@ function alanBtn(options) {
         }
 
         if (data && data.web && data.web.hidden === true) {
-            hideAlanBtn();
+            hideBtn();
         } else {
             // sendClientEvent({ buttonReady: true });
-            showAlanBtn();
+            showBtn();
         }
     }
 
@@ -2916,7 +2948,9 @@ function alanBtn(options) {
         if (options.onCommand) {
             options.onCommand(e.data);
         }
-        switchState(LISTENING);
+        if (isAlanActive) {
+            switchState(LISTENING);
+        }
         turnOffVoiceFn();
     }
 
@@ -3202,6 +3236,7 @@ function alanBtn(options) {
             } else if (newState === PERMISSION_DENIED) {
                 rootEl.classList.add("alan-btn-permission-denied");
                 currentErrMsg = MIC_BLOCKED_MSG;
+                console.warn(MIC_BLOCKED_MSG);
             } else if (newState === NO_VOICE_SUPPORT || newState === NOT_SECURE_ORIGIN) {
                 rootEl.classList.add("alan-btn-no-voice-support");
                 if (newState === NO_VOICE_SUPPORT) {
@@ -3300,6 +3335,7 @@ function alanBtn(options) {
         el.style.opacity = 0;
         el.style.transition = 'opacity 300ms ease-in-out';
         el.style.animation = gradientAnimation;
+        el.style.display = 'block';
     }
 
     function hideLayers(layers) {
@@ -3394,7 +3430,7 @@ function alanBtn(options) {
     //#endregion
 
     //#region Append layers to the rootEl
-    function showAlanBtn() {
+    function showBtn() {
         rootEl.innerHTML = '';
 
         recognisedTextHolder.appendChild(recognisedTextContent);
@@ -3405,7 +3441,7 @@ function alanBtn(options) {
         sendClientEvent({ buttonReady: true });
     }
 
-    function hideAlanBtn() {
+    function hideBtn() {
         if (!isTutorMode()) {
             alanAudio.stop();
             rootEl.innerHTML = '';
@@ -3482,7 +3518,7 @@ function alanBtn(options) {
     var alanBtnSavedOptions = null;
 
     if (isTutorMode()) {
-        showAlanBtn();
+        showBtn();
     } else {
         if (isLocalStorageAvailable) {
             try {
@@ -3595,6 +3631,13 @@ function alanBtn(options) {
             curX = parseInt(rootEl.style.left, 10);
             curY = parseInt(rootEl.style.top, 10);
 
+            if (Math.abs(tempDeltaX) < 15 && Math.abs(tempDeltaY) < 15) {
+                afterMouseMove = false;
+                dndBackAnimFinished = true;
+                setButtonPosition();
+                return;
+            }
+
             if (curX <= window.innerWidth / 2) {
                 rootEl.style.setProperty('left', dndFinalHorPos + 'px', 'important');
                 changeBtnSide('to-left');
@@ -3624,11 +3667,6 @@ function alanBtn(options) {
             setTimeout(function () {
                 afterMouseMove = false;
             }, 300);
-
-            if (Math.abs(tempDeltaX) < 15 && Math.abs(tempDeltaY) < 15) {
-                afterMouseMove = false;
-                dndBackAnimFinished = true;
-            }
         }
     }