@alan-ai/alan-sdk-web 1.8.26 → 1.8.30

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://alan.app/voice/images/github/tablet-tasks.gif" height="325px" align="right"/>
+<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/AlanButtonOptions.d.ts

@@ -7,6 +7,7 @@ export interface AlanButtonOptions {
     top?: number | string;
     position?: string;
     pinned?: boolean;
+    showOverlayOnMicPermissionPrompt?: boolean;
     zIndex?: number;
     onCommand?(commandData: object): void;
     onEvent?(event: object): void;

package/dist/alan_lib.js

@@ -319,6 +319,9 @@
 
     function fillAuth(values, ext) {
         var auth = {};
+        for (var k in ext) {
+            auth[k] = ext[k];
+        }
         for (var k in values) {
             auth[k] = values[k];
         }
@@ -695,6 +698,10 @@
         }
     };
 
+    ns.resumeAudioCtx = function() {
+        audioContext.resume();
+    };
+
     var micAllowed = false;
 
     function setMicAllowed(value) {
@@ -773,8 +780,8 @@
 
 (function(ns) {
     "use strict";
-    
-    var alanButtonVersion = '1.8.26';
+
+    var alanButtonVersion = '1.8.30';
 
     if (window.alanBtn) {
         console.warn('Alan: the Alan Button source code has already added (v.' + alanButtonVersion + ')');
@@ -896,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,
@@ -995,15 +1018,33 @@ function alanBtn(options) {
             alanAudio.stop();
             window.tutorProject.close();
             rootEl.remove();
+            if(!isTutorMode()) {
+                window.tutorProject = null;
+            }
         },
         stop: function () {
             alanAudio.stop();
         },
         updateButtonState: function (state) {
             onConnectStatusChange(state);
-        }
+        },
+        sendEvent: sendUserEvent
     };
 
+    document.addEventListener('click', resumeAudioCtx);
+
+    function resumeAudioCtx() {
+        alanAudio.resumeAudioCtx();
+        document.removeEventListener('click', resumeAudioCtx);
+    }
+
+    function sendUserEvent(eventName, eventValue) {
+        var obj = eventValue ? {name: eventName, value: eventValue} : {name: eventName};
+        // var obj = {};
+        // obj[eventName] = eventValue ? eventValue : true;
+        sendClientEvent(obj);
+    }
+
     function sendClientEvent(param) {
         if (window.tutorProject) {
             window.tutorProject.call('clientEvent', param);
@@ -1021,18 +1062,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;
     }
@@ -1368,18 +1397,23 @@ function alanBtn(options) {
             initRightPos = parseInt(sideBtnPos, 10);
         }
 
+        rootEl.style[isLeftAligned ? 'left' : 'right'] = sideBtnPos;
+        setDefaultBtnHorizontalPosition();
+    }
+
+    function setDefaultBtnHorizontalPosition(){
         if (isTopAligned) {
             topBtnPos = setDefautlPositionProps(options.top !== undefined ? options.top : btnModes[mode].topPos);
         } else {
             bottomBtnPos = setDefautlPositionProps(options.bottom !== undefined ? options.bottom : btnModes[mode].bottomPos);
         }
 
-        rootEl.style[isLeftAligned ? 'left' : 'right'] = sideBtnPos;
-
         if (isTopAligned) {
             rootEl.style.top = topBtnPos;
+            rootEl.style.setProperty('bottom', '');
         } else {
             rootEl.style.bottom = bottomBtnPos;
+            rootEl.style.setProperty('top', '');
         }
     }
 
@@ -1408,6 +1442,7 @@ function alanBtn(options) {
 
         if (absolutePosition) {
             el.style.position = 'absolute';
+            el.classList.add('absolute-positioned');
         }
         if (topPos) {
             el.style.bottom = '';
@@ -1452,11 +1487,13 @@ function alanBtn(options) {
         }
 
         applySizeSettingsToBlurLayers([btnOval1, btnOval2]);
+        setTextPanelPosition(recognisedTextHolder);
     }
 
     // Define base styles for btn
     btn.style.color = '#fff';
     btn.style.position = 'absolute';
+    var transitionCss = 'transform 0.4s ease-in-out, opacity 0.4s ease-in-out';
 
     applyBtnSizeOptions(btnSize);
 
@@ -1467,9 +1504,9 @@ function alanBtn(options) {
     }
     setStylesBasedOnSide();
     btn.style.borderRadius = '50%';
-    btn.style.boxShadow = '0 8px 10px 0 rgba(0, 75, 144, 0.35)';
+    // btn.style.boxShadow = '0 8px 10px 0 rgba(0, 75, 144, 0.35)';
     btn.style.textAlign = 'center';
-    btn.style.transition = 'all 0.4s ease-in-out';
+    btn.style.transition = transitionCss;
     btn.style.zIndex = btnZIndex;
 
     // Specify tabIndex if it exists in options
@@ -1494,7 +1531,7 @@ function alanBtn(options) {
     micIconDiv.style.left = '0%';
     micIconDiv.style.zIndex = btnIconsZIndex;
     micIconDiv.style.position = 'relative';
-    micIconDiv.style.transition = 'all 0.4s ease-in-out';
+    micIconDiv.style.transition = transitionCss;
 
     function setUpStylesForAnimatedLogoParts(logos) {
         for (var i = 0; i < logos.length; i++) {
@@ -1581,7 +1618,7 @@ function alanBtn(options) {
     roundedTriangleIconDiv.style.zIndex = btnIconsZIndex;
     roundedTriangleIconDiv.style.position = 'absolute';
     roundedTriangleIconDiv.style.opacity = 0;
-    roundedTriangleIconDiv.style.transition = 'all 0.4s ease-in-out';
+    roundedTriangleIconDiv.style.transition = transitionCss;
     roundedTriangleIconDiv.style.overflow = 'hidden';
     roundedTriangleIconDiv.style.borderRadius = '50%';
     roundedTriangleIconDiv.style.backgroundSize = '100% 100%';
@@ -1602,7 +1639,7 @@ function alanBtn(options) {
     circleIconDiv.style.zIndex = btnIconsZIndex;
     circleIconDiv.style.position = 'absolute';
     circleIconDiv.style.opacity = 0;
-    circleIconDiv.style.transition = 'all 0.4s ease-in-out';
+    circleIconDiv.style.transition = transitionCss;
     circleIconDiv.style.overflow = 'hidden';
     circleIconDiv.style.borderRadius = '50%';
     circleIconDiv.style.backgroundSize = '0% 0%';
@@ -1619,7 +1656,7 @@ function alanBtn(options) {
     disconnectedMicLoaderIconImg.style.left = '15%';
     disconnectedMicLoaderIconImg.style.zIndex = btnIconsZIndex;
     disconnectedMicLoaderIconImg.style.position = 'absolute';
-    disconnectedMicLoaderIconImg.style.transition = 'all 0.4s ease-in-out';
+    disconnectedMicLoaderIconImg.style.transition = transitionCss;
     disconnectedMicLoaderIconImg.style.opacity = '0';
     disconnectedMicLoaderIconImg.alt = alanAltText + ' disconnected microphone icon';
     disconnectedMicLoaderIconImg.src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTIiIGhlaWdodD0iMTkyIiB2aWV3Qm94PSIwIDAgMTkyIDE5MiI+CiAgICA8ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTk2IDBjNTMuMDIgMCA5NiA0Mi45OCA5NiA5NnMtNDIuOTggOTYtOTYgOTZTMCAxNDkuMDIgMCA5NiA0Mi45OCAwIDk2IDB6IiBvcGFjaXR5PSIuMDIiLz4KICAgICAgICA8cGF0aCBkPSJNMTMxLjk2NiAxOS4wOTJjLTMwLTE0LTY1LjI4NC05Ljg0OS05MS4xNDIgMTIuNTc1QzE0Ljk2NiA1NC4wOTIgNi44NSA4My44MSAxMi45MDggMTEzLjk1YzYuMDU4IDMwLjE0MiAzMC4zMDIgNTYuMTkgNjAuMDU4IDY0LjE0MiAzNS4xODMgOS40MDYgNzMtNCA5My0zNC0xNy45MjQgMjMuOTE2LTUyLjM2NiAzOC4yOTMtODMgMzMtMzAuMTY4LTUuMjEtNTcuMTA0LTMxLjExLTY0LTYxLTcuMzQ3LTMxLjgzNS43NzktNTYgMjctODBzODAtMjYgMTA5IDljNS41MzYgNi42ODEgMTMgMTkgMTUgMzQgMSA2IDEgNyAyIDEyIDAgMiAyIDQgNCA0IDMgMCA1LjM3NC0yLjI1NiA1LTYtMy0zMC0yMS41NTYtNTcuMTkzLTQ5LTcweiIgb3BhY2l0eT0iLjQiLz4KICAgIDwvZz4KPC9zdmc+Cg==";
@@ -1633,7 +1670,7 @@ function alanBtn(options) {
     lowVolumeMicIconImg.style.left = '0%';
     lowVolumeMicIconImg.style.zIndex = btnIconsZIndex;
     lowVolumeMicIconImg.style.position = 'absolute';
-    lowVolumeMicIconImg.style.transition = 'all 0.4s ease-in-out';
+    lowVolumeMicIconImg.style.transition = transitionCss;
     lowVolumeMicIconImg.style.opacity = '0';
     lowVolumeMicIconImg.alt = alanAltText + ' low volume icon';
     lowVolumeMicIconImg.src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjEgKDY3MDQ4KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5BbGFuIEJ1dHRvbiAvIEFuaW1hdGlvbiAvIGJ1dHRvbi1uby1taWM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iQWxhbi1CdXR0b24tLy1BbmltYXRpb24tLy1idXR0b24tbm8tbWljIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjIuMDAwMDAwLCAxOS4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8cGF0aCBkPSJNMzIsMTguNDczNjg0MiBDMzIsMjUuNzE5NDczNyAyNi43OCwzMS42OTI2MzE2IDIwLDMyLjY5ODQyMTEgTDIwLDQwIEMyMCw0MS4xMDQ1Njk1IDE5LjEwNDU2OTUsNDIgMTgsNDIgQzE2Ljg5NTQzMDUsNDIgMTYsNDEuMTA0NTY5NSAxNiw0MCBMMTYsMzIuNjk4NDIxMSBDOS4yMiwzMS42OTI2MzE2IDQsMjUuNzE5NDczNyA0LDE4LjQ3MzY4NDIgTDQsMTggQzQsMTYuODk1NDMwNSA0Ljg5NTQzMDUsMTYgNiwxNiBDNy4xMDQ1Njk1LDE2IDgsMTYuODk1NDMwNSA4LDE4IEw4LDE4LjQ3MzY4NDIgQzgsMjQuMTQxODY5OCAxMi40NzcxNTI1LDI4LjczNjg0MjEgMTgsMjguNzM2ODQyMSBDMjMuNTIyODQ3NSwyOC43MzY4NDIxIDI4LDI0LjE0MTg2OTggMjgsMTguNDczNjg0MiBMMjgsMTggQzI4LDE2Ljg5NTQzMDUgMjguODk1NDMwNSwxNiAzMCwxNiBDMzEuMTA0NTY5NSwxNiAzMiwxNi44OTU0MzA1IDMyLDE4IEwzMiwxOC40NzM2ODQyIFoiIGlkPSJTaGFwZSIgZmlsbC1vcGFjaXR5PSIwLjgiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTE4LC00LjUyNzM3MjYzZS0xNCBDMjEuMzEzNzA4NSwtNC42MTg1Mjc3OGUtMTQgMjQsMi43NTY5ODMzOCAyNCw2LjE1Nzg5NDc0IEwyNCwxOC40NzM2ODQyIEMyNCwyMS44NzQ1OTU2IDIxLjMxMzcwODUsMjQuNjMxNTc4OSAxOCwyNC42MzE1Nzg5IEMxNC42ODYyOTE1LDI0LjYzMTU3ODkgMTIsMjEuODc0NTk1NiAxMiwxOC40NzM2ODQyIEwxMiw2LjE1Nzg5NDc0IEMxMiwyLjc1Njk4MzM4IDE0LjY4NjI5MTUsLTQuNTI3MzcyNjNlLTE0IDE4LC00LjYxODUyNzc4ZS0xNCBaIiBpZD0iU2hhcGUiIGZpbGwtb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjgxLDMuMjcgTDM0LjczLDM0LjE5IEMzNS40MzE0MDE2LDM0Ljg5MTQwMTYgMzUuNDMxNDAxNiwzNi4wMjg1OTg0IDM0LjczLDM2LjczIEMzNC4wMjg1OTg0LDM3LjQzMTQwMTYgMzIuODkxNDAxNiwzNy40MzE0MDE2IDMyLjE5LDM2LjczIEwxLjI3LDUuODEgQzAuNTY4NTk4MzY4LDUuMTA4NTk4MzcgMC41Njg1OTgzNjgsMy45NzE0MDE2MyAxLjI3LDMuMjcgQzEuOTcxNDAxNjMsMi41Njg1OTgzNyAzLjEwODU5ODM3LDIuNTY4NTk4MzcgMy44MSwzLjI3IFoiIGlkPSJQYXRoIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=\n";
@@ -1646,7 +1683,7 @@ function alanBtn(options) {
     noVoiceSupportMicIconImg.style.left = '0%';
     noVoiceSupportMicIconImg.style.zIndex = btnIconsZIndex;
     noVoiceSupportMicIconImg.style.position = 'absolute';
-    noVoiceSupportMicIconImg.style.transition = 'all 0.4s ease-in-out';
+    noVoiceSupportMicIconImg.style.transition = transitionCss;
     noVoiceSupportMicIconImg.style.opacity = '0';
     noVoiceSupportMicIconImg.alt = alanAltText + ' no voice support icon';
     noVoiceSupportMicIconImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIuSURBVHgB7dvxUYMwFAbwpxMwAhvoBtVJygZ1A92gI1Qn6AjoBO0GsEG7wfPlgCtNA7xASzX5fnf5oyThLp+BQDiJAAAAAAAAAAAAAAAAxmHmDyk5n+ykLAn6SUhpHVaXwrQhcBsIr5FTLGSwb1IOmpkj9RnrxXE5+1x+fH7Pwyw0+PKSLLpCrGeq1oFiwNWiUGhCZE8UC22I7IliogmRPVFshkJkTxSjvhDZE8WqJ0QEqNURIgL0MTVEgmkhElTGhkix4WqzoNlYWFp1k1fhvvMHgc9n2cFRPzXAou/8t/JAM7EH/SD66ocM9bfrb+WR7kTGm1iHjqR3HDjXbOYMsLR+p9bvPentr3iuSeYM0B7Uwvr9RXqfA+cqKTRyma2sdSB3tMlZJ7X62Ru3Qa7CiSOIF6uN9pmw4NMuTjYUcDAcM8wEkTjaZdasytm9AfHsOL6lUJkZx5c2yr7a2ZlSyGSAa8egt5qBK0JU/TH+Na7uha4QzLHBm7+0ee8Iz/Sf/XlwtjeRtnq2mVU4dVSXUr6l/NDpccS0e5KSSekKybR9lReQkmLAV9hU7ZiFKcWCq8t5zeOtWfndOWhczcYN6+VSFq2+RfQhGnUYWUeY5ph5m0k6+iHENjs9RXuE2OYbYN3HFeKOYjQmwLrfRYgUo7EB1n2bEM03khXd0F0epDXs0Obaovd1ty39UCDAif5ygO0PRyWBH64eqJuFAP9kAwAAAAAAAAAAAAAAU/wC52820szaQtwAAAAASUVORK5CYII=";
@@ -1730,7 +1767,7 @@ function alanBtn(options) {
             el.style.left = 0;
             el.style.zIndex = btnBgLayerZIndex;
             el.style.position = 'absolute';
-            el.style.transition = 'all 0.4s ease-in-out';
+            el.style.transition = transitionCss;
             el.style.opacity = '.5';
             el.style.borderRadius = '100px';
             el.classList.add('alanBtn-oval-bg-default');
@@ -1745,7 +1782,7 @@ function alanBtn(options) {
     offlineIconImg.style.left = '0%';
     offlineIconImg.style.zIndex = btnIconsZIndex;
     offlineIconImg.style.position = 'absolute';
-    offlineIconImg.style.transition = 'all 0.4s ease-in-out';
+    offlineIconImg.style.transition = transitionCss;
     offlineIconImg.style.opacity = '0';
     offlineIconImg.alt = alanAltText + ' offline icon';
     offlineIconImg.src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjEgKDY3MDQ4KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5BbGFuIEJ1dHRvbiAvIEFuaW1hdGlvbiAvIGJ1dHRvbi1uby1uZXR3b3JrPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkFsYW4tQnV0dG9uLS8tQW5pbWF0aW9uLS8tYnV0dG9uLW5vLW5ldHdvcmsiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJpY29uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMS4wMDAwMDAsIDIyLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMzMsMiBDMzQuNjU2ODU0MiwyIDM2LDMuMzQzMTQ1NzUgMzYsNSBMMzYsMjkgQzM2LDMwLjY1Njg1NDIgMzQuNjU2ODU0MiwzMiAzMywzMiBDMzEuMzQzMTQ1OCwzMiAzMCwzMC42NTY4NTQyIDMwLDI5IEwzMCw1IEMzMCwzLjM0MzE0NTc1IDMxLjM0MzE0NTgsMiAzMywyIFoiIGlkPSJTaGFwZSIgZmlsbC1vcGFjaXR5PSIwLjQiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTIzLDggQzI0LjY1Njg1NDIsOCAyNiw5LjM0MzE0NTc1IDI2LDExIEwyNiwyOSBDMjYsMzAuNjU2ODU0MiAyNC42NTY4NTQyLDMyIDIzLDMyIEMyMS4zNDMxNDU4LDMyIDIwLDMwLjY1Njg1NDIgMjAsMjkgTDIwLDExIEMyMCw5LjM0MzE0NTc1IDIxLjM0MzE0NTgsOCAyMyw4IFoiIGlkPSJTaGFwZSIgZmlsbC1vcGFjaXR5PSIwLjYiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTEzLDE2IEMxNC42NTY4NTQyLDE2IDE2LDE3LjM0MzE0NTggMTYsMTkgTDE2LDI5IEMxNiwzMC42NTY4NTQyIDE0LjY1Njg1NDIsMzIgMTMsMzIgQzExLjM0MzE0NTgsMzIgMTAsMzAuNjU2ODU0MiAxMCwyOSBMMTAsMTkgQzEwLDE3LjM0MzE0NTggMTEuMzQzMTQ1OCwxNiAxMywxNiBaIiBpZD0iU2hhcGUiIGZpbGwtb3BhY2l0eT0iMC44Ij48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLDIyIEM0LjY1Njg1NDI1LDIyIDYsMjMuMzQzMTQ1OCA2LDI1IEw2LDI5IEM2LDMwLjY1Njg1NDIgNC42NTY4NTQyNSwzMiAzLDMyIEMxLjM0MzE0NTc1LDMyIDIuMDI5MDYxMjVlLTE2LDMwLjY1Njg1NDIgMCwyOSBMMCwyNSBDLTIuMDI5MDYxMjVlLTE2LDIzLjM0MzE0NTggMS4zNDMxNDU3NSwyMiAzLDIyIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44MSwxLjI3IEwzNi43MywzMi4xOSBDMzcuNDMxNDAxNiwzMi44OTE0MDE2IDM3LjQzMTQwMTYsMzQuMDI4NTk4NCAzNi43MywzNC43MyBDMzYuMDI4NTk4NCwzNS40MzE0MDE2IDM0Ljg5MTQwMTYsMzUuNDMxNDAxNiAzNC4xOSwzNC43MyBMMy4yNywzLjgxIEMyLjU2ODU5ODM3LDMuMTA4NTk4MzcgMi41Njg1OTgzNywxLjk3MTQwMTYzIDMuMjcsMS4yNyBDMy45NzE0MDE2MywwLjU2ODU5ODM2OCA1LjEwODU5ODM3LDAuNTY4NTk4MzY4IDUuODEsMS4yNyBaIiBpZD0iUGF0aCIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=\n";
@@ -1856,7 +1893,7 @@ function alanBtn(options) {
         var hoverSelector = !isMobile() ? ':hover' : ':active';
         
         if (!isMobile()) {
-            keyFrames += getStyleSheetMarker() + '.alanBtn{transform: scale(1);transition:all 0.4s ease-in-out;} .alanBtn' + hoverSelector + '{transform: scale(1.11111);transition:all 0.4s ease-in-out;}.alanBtn:focus {transform: scale(1);transition:all 0.4s ease-in-out;  border: solid 3px #50e3c2;  outline: none;  }';
+            keyFrames += getStyleSheetMarker() + '.alanBtn{transform: scale(1);'+ transitionCss +';} .alanBtn' + hoverSelector + '{transform: scale(1.11111);transition:' + transitionCss + ';}.alanBtn:focus {transform: scale(1);' + transitionCss + ';  border: solid 3px #50e3c2;  outline: none;  }';
         }
         
         keyFrames += getStyleSheetMarker() + '.alanBtn-recognised-text-holder { position:fixed; transform: translateY(' + (isTopAligned ? '-' : '') +'50%); max-width:236px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px;  min-height: 40px;  color: #000; font-weight: normal; background-color: #fff; border-radius:10px; box-shadow: 0px 1px 14px rgba(0, 0, 0, 0.35); display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack: activate;-ms-flex-pack: start;justify-content: start;}';
@@ -2168,7 +2205,11 @@ function alanBtn(options) {
             tryReadSettingsFromLocalStorage();
             switchState(getDefaultBtnState(DISCONNECTED));
 
-            window.tutorProject = alan.project(options.key, getAuthData(options.authData), options.host, null, { platform: (mode === 'demo' ? 'alanplayground' : null), appName: window.location.hostname });
+            window.tutorProject = alan.project(options.key, getAuthData(options.authData), options.host, null, {
+                platform: (mode === 'demo' ? 'alanplayground' : null),
+                userAgent: navigator.userAgent,
+                appName: window.location.hostname
+            });
             window.tutorProject.on('connectStatus', onConnectStatusChange);
             window.tutorProject.on('options', onOptionsReceived);
             //window.tutorProject.on('popup', onPopup);
@@ -2210,10 +2251,50 @@ function alanBtn(options) {
         togglePopupVisibility(true);
     }, 400);
 
+    var windowPrevInnerHeight = window.innerHeight;
+    var windowPrevOrientation = window.orientation;
+
+    function isSafari(){
+        return /apple/i.test(navigator.vendor);
+    }
+
     window.onresize = function () {
-        if (btnWasMoved) {
+        if (isTutorMode()) return;
+        var innerHeightDelta = Math.abs(windowPrevInnerHeight - window.innerHeight);
+        var isMobileIos = (isMobile() || isIpadOS()) && isSafari();
+        var orientationWasChanged = windowPrevOrientation !== window.orientation;
+        // Here we describe different cases when browser's panel on mobile are shown or hidden
+        // We cannot detect it other way, so we have to use this magic constants here
+        // innerHeightDelta === 50 - top brawser panel is shown in landscape mode
+        // innerHeightDelta === 84 - mobile ios smart banner is shown
+        // innerHeightDelta === 95 - tablet ios smart banner is shown
+        // innerHeightDelta === 0 - ios smart banner is hidden
+
+        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) &&
+            isVerticalResize) {
             var rootElClientRect = rootEl.getBoundingClientRect();
-            rootEl.style.setProperty('top', correctYPos(rootElClientRect.top) + 'px', 'important');
+            var newYPos;
+            if (innerHeightDelta === 0) {
+                newYPos = rootElClientRect.top + 84;
+            } else {
+                newYPos = rootElClientRect.top;
+            }
+
+            if (orientationWasChanged && window.orientation === 0) {//portrait
+                setDefaultBtnHorizontalPosition();
+            } else {
+                rootEl.style.setProperty('top', correctYPos(newYPos) + 'px', 'important');
+            }
         }
         togglePopupVisibility(false);
         onresizeDebounced();
@@ -2223,6 +2304,9 @@ function alanBtn(options) {
         if (navigator.permissions) {
             navigator.permissions.query({ name: 'microphone' }).then(function (result) {
                 if (result.state === 'prompt') {
+                    if (options.showOverlayOnMicPermissionPrompt) {
+                        showPopup({ overlay: true, buttonUnderOverlay: true });
+                    }
                     sendClientEvent({ micPermissionPrompt: true });
                 }
                 if (result.state !== 'granted') {
@@ -2334,6 +2418,7 @@ function alanBtn(options) {
     }
 
     function showPopup(popupOptions) {
+        if (btnDisabled) return;
         savedPopupOptions = popupOptions;
         var message = popupOptions.message;
         var buttonMarginInPopup = popupOptions.buttonMarginInPopup;
@@ -2352,7 +2437,10 @@ function alanBtn(options) {
         overlay.classList.add('alan-overlay');
         popup.classList.add('alan-overlay-popup');
 
-        btn.style.zIndex = maxZIndex;
+        if (popupOptions.buttonUnderOverlay !== true) {
+            btn.style.zIndex = maxZIndex;
+        }
+        
         overlay.style.zIndex = maxZIndex - 3;
         popup.style.zIndex = maxZIndex - 2;
 
@@ -2400,8 +2488,10 @@ function alanBtn(options) {
         }
 
         if (!popupOptions.html) {
-            popup.classList.add('default-popup');
-            popup.innerHTML = '<div class="alan-overlay-popup__body">' + message + '</div>';
+            if (message) {
+                popup.classList.add('default-popup');
+                popup.innerHTML = '<div class="alan-overlay-popup__body">' + message + '</div>';
+            }
         } else {
             popup.innerHTML = popupOptions.html;
         }
@@ -2409,20 +2499,35 @@ function alanBtn(options) {
         var closeIconImg = document.createElement('div');
         closeIconImg.id = 'alan-overlay-ok-btn';
         closeIconImg.classList.add('alan-overlay-popup__ok');
-        popup.appendChild(closeIconImg);
+        if (popupOptions.html && popup.children[0]) {
+            popup.children[0].appendChild(closeIconImg);
+        } else {
+            popup.appendChild(closeIconImg);
+        }
 
         rootEl.appendChild(popup);
         if (withOverlay) {
             rootEl.appendChild(overlay);
         }
-        closeIconImg.addEventListener('click', hidePopup);
+        closeIconImg.addEventListener('click', hidePopupByCloseIcon);
         overlay.addEventListener('click', hidePopup);
         document.addEventListener('keyup', hidePopupByEsc);
+        let showPopupEvent = "showPopup";
+        if (popupOptions.name) {
+            showPopupEvent += ":" + popupOptions.name;
+        }
+        sendUserEvent(showPopupEvent);
+    }
+
+    function hidePopupByCloseIcon() {
+        hidePopup();
+        sendClientEvent({popupCloseClicked: true});
     }
 
     function hidePopupByEsc(e) {
         if (e.keyCode === 27) {
             hidePopup();
+            sendClientEvent({popupCloseClicked: true});
         }
     }
 
@@ -2519,6 +2624,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');
@@ -2609,10 +2723,10 @@ function alanBtn(options) {
         }
 
         if (data && data.web && data.web.hidden === true) {
-            hideAlanBtn();
+            hideBtn();
         } else {
             // sendClientEvent({ buttonReady: true });
-            showAlanBtn();
+            showBtn();
         }
     }
 
@@ -2825,7 +2939,9 @@ function alanBtn(options) {
         if (options.onCommand) {
             options.onCommand(e.data);
         }
-        switchState(LISTENING);
+        if (isAlanActive) {
+            switchState(LISTENING);
+        }
         turnOffVoiceFn();
     }
 
@@ -3111,6 +3227,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) {
@@ -3246,12 +3363,18 @@ function alanBtn(options) {
     }
 
     function isMobile() {
-        if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
             return true;
         }
         return false;
     }
 
+    function isIpadOS() {
+        return navigator.maxTouchPoints &&
+            navigator.maxTouchPoints > 2 &&
+            /MacIntel/.test(navigator.platform);
+    }
+
     function isOriginSecure() {
         var isSecure = false;
         var protocol = window.location.protocol;
@@ -3297,7 +3420,7 @@ function alanBtn(options) {
     //#endregion
 
     //#region Append layers to the rootEl
-    function showAlanBtn() {
+    function showBtn() {
         rootEl.innerHTML = '';
 
         recognisedTextHolder.appendChild(recognisedTextContent);
@@ -3308,7 +3431,7 @@ function alanBtn(options) {
         sendClientEvent({ buttonReady: true });
     }
 
-    function hideAlanBtn() {
+    function hideBtn() {
         if (!isTutorMode()) {
             alanAudio.stop();
             rootEl.innerHTML = '';
@@ -3385,7 +3508,7 @@ function alanBtn(options) {
     var alanBtnSavedOptions = null;
 
     if (isTutorMode()) {
-        showAlanBtn();
+        showBtn();
     } else {
         if (isLocalStorageAvailable) {
             try {
@@ -3421,8 +3544,8 @@ function alanBtn(options) {
     //#region Drag-n-drop btn logic
 
     if (!pinned) {
-        rootEl.addEventListener('mousedown', onMouseDown, true);
-        rootEl.addEventListener('touchstart', onMouseDown, { passive: false });
+        btn.addEventListener('mousedown', onMouseDown, true);
+        btn.addEventListener('touchstart', onMouseDown, { passive: false });
 
         document.addEventListener('mouseup', onMouseUp, true);
         document.addEventListener('touchend', onMouseUp, { passive: false });
@@ -3481,7 +3604,10 @@ function alanBtn(options) {
             tempDeltaY = posInfo.clientY - dndInitMousePos[1];
             rootEl.style.setProperty('left', correctXPos(newLeftPos) + 'px', 'important');
             rootEl.style.setProperty('top', correctYPos(newTopPos) + 'px', 'important');
+            e.preventDefault();
+            return false;
         }
+        
     }
 
     function onMouseUp(e) {
@@ -3495,6 +3621,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');
@@ -3524,11 +3657,6 @@ function alanBtn(options) {
             setTimeout(function () {
                 afterMouseMove = false;
             }, 300);
-
-            if (Math.abs(tempDeltaX) < 15 || Math.abs(tempDeltaY) < 15) {
-                afterMouseMove = false;
-                dndBackAnimFinished = true;
-            }
         }
     }