@xapp/chat-widget 1.30.0 → 1.33.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useContext, useCallback, useRef, useEffect, useState, useLayoutEffect } from 'react';
+import React$1, { createContext, useMemo, useContext, useCallback, useRef, useEffect, useState, useLayoutEffect } from 'react';
 export { default as React } from 'react';
 import { useSelector, useDispatch, Provider } from 'react-redux';
 import { createStore as createStore$1, applyMiddleware, compose } from 'redux';
@@ -11,25 +11,9 @@ var ActionButton = function (props) {
             props.onClick(props.label);
         }
     }
-    return (React.createElement("button", { type: props.type, className: "action-button " + props.addClass, onClick: handleClick }, props.label));
+    return (React$1.createElement("button", { type: props.type, className: "action-button ".concat(props.addClass), onClick: handleClick }, props.label));
 };
 
-var paramsObj = {};
-// todo: read only from xappScriptNode?
-for (var _i = 0, _a = document.scripts; _i < _a.length; _i++) {
-    var script = _a[_i];
-    if (!script.src) {
-        continue;
-    }
-    var params = script.src.split("?");
-    if (params.length < 2) {
-        continue;
-    }
-    var searchParams = new URLSearchParams(params[1]);
-    searchParams.forEach(function (value, key) {
-        paramsObj[key] = value;
-    });
-}
 var defaultServerUrl = process.env.SERVER_URL;
 process.env.ACCOUNT_KEY;
 var ChatConfigContext = createContext(null);
@@ -88,7 +72,7 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-function __awaiter(thisArg, _arguments, P, generator) {
+function __awaiter$1(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -98,7 +82,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-function __generator(thisArg, body) {
+function __generator$1(thisArg, body) {
     var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
     return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
@@ -126,7 +110,7 @@ function __generator(thisArg, body) {
     }
 }
 
-function __spreadArray(to, from, pack) {
+function __spreadArray$1(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
@@ -1466,14 +1450,14 @@ function log() {
         args[_i] = arguments[_i];
     }
     // TODO: only log in debug
-    console.log.apply(console, __spreadArray([getCurrentDateString()], args, false));
+    console.log.apply(console, __spreadArray$1([getCurrentDateString()], args, false));
 }
 function err() {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         args[_i] = arguments[_i];
     }
-    console.error.apply(console, __spreadArray([getCurrentDateString()], args, false));
+    console.error.apply(console, __spreadArray$1([getCurrentDateString()], args, false));
 }
 var logOnce = function (key) {
     var args = [];
@@ -1488,8 +1472,8 @@ var logOnce = function (key) {
 };
 
 function getVisitorSvg() {
-    return (React.createElement("svg", { width: "16", height: "19", viewBox: "0 0 16 19" },
-        React.createElement("path", { d: "M11.5 5c0-1.933-1.567-3.5-3.5-3.5S4.5 3.067 4.5 5 6.067 8.5 8 8.5s3.5-1.567 3.5-3.5zM3 5c0-2.76 2.24-5 5-5s5 2.24 5 5-2.24 5-5 5-5-2.24-5-5zM1.955 17.294c.21-.642.504-1.285.898-1.88C3.963 13.74 5.615 12.75 8 12.75c2.385 0 4.038.99 5.147 2.664.394.595.69 1.238.898 1.88.124.382.19.672.214.822.063.41.447.69.856.625.41-.063.69-.447.625-.856-.034-.225-.118-.59-.27-1.053-.247-.763-.598-1.527-1.073-2.244C13.024 12.51 10.917 11.25 8 11.25c-2.916 0-5.024 1.26-6.397 3.336-.475.717-.826 1.48-1.074 2.245-.152.463-.236.83-.27 1.054-.065.41.215.793.624.857.41.065.793-.215.857-.624.025-.15.09-.44.215-.822z", fill: "#FFF", fillRule: "evenodd" })));
+    return (React$1.createElement("svg", { width: "16", height: "19", viewBox: "0 0 16 19" },
+        React$1.createElement("path", { d: "M11.5 5c0-1.933-1.567-3.5-3.5-3.5S4.5 3.067 4.5 5 6.067 8.5 8 8.5s3.5-1.567 3.5-3.5zM3 5c0-2.76 2.24-5 5-5s5 2.24 5 5-2.24 5-5 5-5-2.24-5-5zM1.955 17.294c.21-.642.504-1.285.898-1.88C3.963 13.74 5.615 12.75 8 12.75c2.385 0 4.038.99 5.147 2.664.394.595.69 1.238.898 1.88.124.382.19.672.214.822.063.41.447.69.856.625.41-.063.69-.447.625-.856-.034-.225-.118-.59-.27-1.053-.247-.763-.598-1.527-1.073-2.244C13.024 12.51 10.917 11.25 8 11.25c-2.916 0-5.024 1.26-6.397 3.336-.475.717-.826 1.48-1.074 2.245-.152.463-.236.83-.27 1.054-.065.41.215.793.624.857.41.065.793-.215.857-.624.025-.15.09-.44.215-.822z", fill: "#FFF", fillRule: "evenodd" })));
 }
 var Avatar = function (props) {
     var _a, _b;
@@ -1503,20 +1487,20 @@ var Avatar = function (props) {
         if (avatarPath) {
             // absolute or relative url (chat server may send relative, if it hosts the file)
             if (avatarPath.startsWith("http")) {
-                style.backgroundImage = "url('" + avatarPath + "')";
+                style.backgroundImage = "url('".concat(avatarPath, "')");
             }
             else if (ctx === null || ctx === void 0 ? void 0 : ctx.assetUrl) {
-                style.backgroundImage = "url('" + (ctx === null || ctx === void 0 ? void 0 : ctx.assetUrl) + "/" + avatarPath + "')";
+                style.backgroundImage = "url('".concat(ctx === null || ctx === void 0 ? void 0 : ctx.assetUrl, "/").concat(avatarPath, "')");
             }
             style.backgroundColor = "none";
         }
-        (_a = style.backgroundImage) !== null && _a !== void 0 ? _a : (style.backgroundImage = "url('" + ((_b = ctx === null || ctx === void 0 ? void 0 : ctx.env) === null || _b === void 0 ? void 0 : _b.avatarUrl) + "')");
+        (_a = style.backgroundImage) !== null && _a !== void 0 ? _a : (style.backgroundImage = "url('".concat((_b = ctx === null || ctx === void 0 ? void 0 : ctx.env) === null || _b === void 0 ? void 0 : _b.avatarUrl, "')"));
     }
     else {
         child = getVisitorSvg();
     }
     var hasImage = !!style.backgroundImage || !!child;
-    return (React.createElement("div", { className: "avatar " + (agentAva ? "avatar--agent" : "avatar--visitor") + " " + (!hasImage ? "avatar--empty" : ""), style: style, title: entity ? entity.display_name : "Agent" }, child));
+    return (React$1.createElement("div", { className: "avatar ".concat(agentAva ? "avatar--agent" : "avatar--visitor", " ").concat(!hasImage ? "avatar--empty" : ""), style: style, title: entity ? entity.display_name : "Agent" }, child));
 };
 
 /**
@@ -1543,10 +1527,10 @@ var OptionalLink = function (props) {
         }
     }, [url, onOpen]);
     if (url) {
-        return (React.createElement("div", { onClick: handleOpenUrl, className: className }, props.children));
+        return (React$1.createElement("div", { onClick: handleOpenUrl, className: className }, props.children));
     }
     else {
-        return (React.createElement("div", { onClick: props.onClick, className: className }, props.children));
+        return (React$1.createElement("div", { onClick: props.onClick, className: className }, props.children));
     }
 };
 
@@ -1566,18 +1550,18 @@ var ActionItem = function (props) {
             onExecute(item.title, item.token);
         }
     }, [item, onExecute, onButtonClick]);
-    var className = "xappw-chat-action-item " + (singleButton ? "xappw-chat-action-item--action" : "") + " " + props.className;
-    return (React.createElement(OptionalLink, { className: className, url: getItemUrl(item), onClick: handleClick, onOpen: props.onOpenUrl }, props.children));
+    var className = "xappw-chat-action-item ".concat(singleButton ? "xappw-chat-action-item--action" : "", " ").concat(props.className);
+    return (React$1.createElement(OptionalLink, { className: className, url: getItemUrl(item), onClick: handleClick, onOpen: props.onOpenUrl }, props.children));
 };
 
 var ChatImage = function (props) {
     var cleanUrl = props.imageUrl.replace(/'/g, "%27");
-    var content = React.createElement("div", { className: "chat-card-img__content", style: { backgroundImage: "url(" + cleanUrl + ")" } });
+    var content = React$1.createElement("div", { className: "chat-card-img__content", style: { backgroundImage: "url(".concat(cleanUrl, ")") } });
     if (!props.imageActionUrl) {
-        return (React.createElement("div", { className: "chat-card-img" }, content));
+        return (React$1.createElement("div", { className: "chat-card-img" }, content));
     }
     else {
-        return (React.createElement("a", { href: props.imageActionUrl, target: "_blank", rel: "noopener noreferrer", className: "chat-card-img" }, content));
+        return (React$1.createElement("a", { href: props.imageActionUrl, target: "_blank", rel: "noopener noreferrer", className: "chat-card-img" }, content));
     }
 };
 
@@ -1588,13 +1572,13 @@ var ActionItemImage = function (props) {
     var itemUrl = getItemUrl(item);
     if (item.imageUrl) {
         var imageActionUrl = !singleButton ? item.imageActionUrl : null;
-        return (React.createElement("div", { className: props.className },
-            React.createElement(ChatImage, { imageUrl: item.imageUrl, imageActionUrl: !itemUrl && imageActionUrl })));
+        return (React$1.createElement("div", { className: props.className },
+            React$1.createElement(ChatImage, { imageUrl: item.imageUrl, imageActionUrl: !itemUrl && imageActionUrl })));
     }
     else if (props.emptyImageVisible) {
-        return (React.createElement("div", { className: props.className }));
+        return (React$1.createElement("div", { className: props.className }));
     }
-    return React.createElement(React.Fragment, null);
+    return React$1.createElement(React$1.Fragment, null);
 };
 
 var ChatActionButtonInner = function (props) {
@@ -1602,44 +1586,44 @@ var ChatActionButtonInner = function (props) {
     var handleButton = useCallback(function () {
         onClick(button);
     }, [button, onClick]);
-    return (React.createElement(ActionButton, { onClick: handleButton, addClass: "button-card", label: button.label }));
+    return (React$1.createElement(ActionButton, { onClick: handleButton, addClass: "button-card", label: button.label }));
 };
-var ChatActionButton = React.memo(ChatActionButtonInner);
+var ChatActionButton = React$1.memo(ChatActionButtonInner);
 
 var ChatActionButtonsInner = function (props) {
-    return (React.createElement("div", { className: "buttons-container " + (props.className || "") }, props.buttons.map(function (button, i) {
-        return React.createElement(ChatActionButton, { button: button, onClick: props.onClick, key: i });
+    return (React$1.createElement("div", { className: "buttons-container " + (props.className || "") }, props.buttons.map(function (button, i) {
+        return React$1.createElement(ChatActionButton, { button: button, onClick: props.onClick, key: i });
     })));
 };
-var ChatActionButtons = React.memo(ChatActionButtonsInner);
+var ChatActionButtons = React$1.memo(ChatActionButtonsInner);
 
 var CarouselItem = function (props) {
     var _a;
     var item = props.item;
-    return (React.createElement(ActionItem, { className: "chat-list-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl },
-        React.createElement("div", { className: "chat-list-item" },
-            React.createElement(ActionItemImage, { item: item, className: "chat-list-item__img", emptyImageVisible: props.emptyImageVisible }),
-            item.title && React.createElement("div", { className: "chat-list-item__title" },
-                React.createElement("span", null, item.title)),
-            item.subTitle && React.createElement("div", { className: "chat-list-item__subtitle" },
-                React.createElement("span", null, item.subTitle)),
-            !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(ChatActionButtons, { className: "chat-list-item__actions", buttons: item.buttons, onClick: props.onButtonClick }))));
+    return (React$1.createElement(ActionItem, { className: "chat-list-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl },
+        React$1.createElement("div", { className: "chat-list-item" },
+            React$1.createElement(ActionItemImage, { item: item, className: "chat-list-item__img", emptyImageVisible: props.emptyImageVisible }),
+            item.title && React$1.createElement("div", { className: "chat-list-item__title" },
+                React$1.createElement("span", null, item.title)),
+            item.subTitle && React$1.createElement("div", { className: "chat-list-item__subtitle" },
+                React$1.createElement("span", null, item.subTitle)),
+            !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && React$1.createElement(ChatActionButtons, { className: "chat-list-item__actions", buttons: item.buttons, onClick: props.onButtonClick }))));
 };
 
 function getLeftArrowSvg() {
-    return (React.createElement("svg", { viewBox: "-5 -18 10 36" },
-        React.createElement("path", { d: "M 2.5 -15 L -2.5 0 L 2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" })));
+    return (React$1.createElement("svg", { viewBox: "-5 -18 10 36" },
+        React$1.createElement("path", { d: "M 2.5 -15 L -2.5 0 L 2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" })));
 }
 var ChevronLeft = function (props) {
-    return (React.createElement("div", { onClick: props.onClick, className: "chevron" }, getLeftArrowSvg()));
+    return (React$1.createElement("div", { onClick: props.onClick, className: "chevron" }, getLeftArrowSvg()));
 };
 
 function getRightArrowSvg() {
-    return (React.createElement("svg", { viewBox: "-5 -18 10 36" },
-        React.createElement("path", { d: "M -2.5 -15 L 2.5 0 L -2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" })));
+    return (React$1.createElement("svg", { viewBox: "-5 -18 10 36" },
+        React$1.createElement("path", { d: "M -2.5 -15 L 2.5 0 L -2.5 15", stroke: "currentColor", strokeLinecap: "square", strokeWidth: "4px", fill: "none" })));
 }
 var ChevronRight = function (props) {
-    return (React.createElement("div", { onClick: props.onClick, className: "chevron" }, getRightArrowSvg()));
+    return (React$1.createElement("div", { onClick: props.onClick, className: "chevron" }, getRightArrowSvg()));
 };
 
 var Carousel = function (props) {
@@ -1677,19 +1661,19 @@ var Carousel = function (props) {
     }
     var hasImage = props.list.items.some(function (item) { return item.imageUrl; });
     var listItems = props.list.items.map(function (item, itemIndex) {
-        return (React.createElement("div", { className: "xappw-carousel-items__item", key: "item-key-" + itemIndex },
-            React.createElement(CarouselItem, { item: item, emptyImageVisible: hasImage, onExecute: props.onExecute, onButtonClick: props.onButtonClick, onOpenUrl: props.onOpenUrl })));
+        return (React$1.createElement("div", { className: "xappw-carousel-items__item", key: "item-key-".concat(itemIndex) },
+            React$1.createElement(CarouselItem, { item: item, emptyImageVisible: hasImage, onExecute: props.onExecute, onButtonClick: props.onButtonClick, onOpenUrl: props.onOpenUrl })));
     });
-    return (React.createElement("div", { className: "xappw-carousel" },
-        React.createElement("div", { className: "xappw-carousel__prev" },
-            React.createElement(ChevronLeft, { onClick: function () { return scrollMe(-1); } })),
-        React.createElement("div", { ref: listRef, className: "xappw-carousel-items" }, listItems),
-        React.createElement("div", { className: "xappw-carousel__next" },
-            React.createElement(ChevronRight, { onClick: function () { return scrollMe(1); } }))));
+    return (React$1.createElement("div", { className: "xappw-carousel" },
+        React$1.createElement("div", { className: "xappw-carousel__prev" },
+            React$1.createElement(ChevronLeft, { onClick: function () { return scrollMe(-1); } })),
+        React$1.createElement("div", { ref: listRef, className: "xappw-carousel-items" }, listItems),
+        React$1.createElement("div", { className: "xappw-carousel__next" },
+            React$1.createElement(ChevronRight, { onClick: function () { return scrollMe(1); } }))));
 };
 
 function useDimensions() {
-    var ref = useRef();
+    var ref = useRef(null);
     var _a = useState(), dimensions = _a[0], setDimensions = _a[1];
     useLayoutEffect(function () {
         var _a, _b;
@@ -1778,22 +1762,22 @@ function getTailSvgPath$1(props, viewport) {
         start: far,
         direction: rightDirection
     });
-    return "m " + far.x + " " + far.y + " L " + left.x + " " + left.y + " L " + right.x + " " + right.y + " z";
+    return "m ".concat(far.x, " ").concat(far.y, " L ").concat(left.x, " ").concat(left.y, " L ").concat(right.x, " ").concat(right.y, " z");
 }
 var CtaBubbleTail = function (props) {
     var _a, _b;
     var _c = useDimensions(), ref = _c[0], rect = _c[1];
     var viewPort = { x: (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0, y: (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0 };
-    return React.createElement("div", { ref: ref, className: "cta-bubble__tail" },
-        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 " + viewPort.x + " " + viewPort.y },
-            React.createElement("path", { d: getTailSvgPath$1(props, viewPort), fill: "currentColor" })));
+    return React$1.createElement("div", { ref: ref, className: "cta-bubble__tail" },
+        React$1.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 ".concat(viewPort.x, " ").concat(viewPort.y) },
+            React$1.createElement("path", { d: getTailSvgPath$1(props, viewPort), fill: "currentColor" })));
 };
 var CtaBubble = function (props) {
     var _a, _b;
     var _c = useDimensions(), ref = _c[0], rect = _c[1];
-    return (React.createElement("div", { ref: ref, className: "cta-bubble", onClick: props.onClick },
-        React.createElement(CtaBubbleTail, { width: (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0, height: (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0, direction: 60, angle: 45, length: 16 }),
-        React.createElement("div", { className: "cta-bubble__content" }, props.children)));
+    return (React$1.createElement("div", { ref: ref, className: "cta-bubble", onClick: props.onClick },
+        React$1.createElement(CtaBubbleTail, { width: (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0, height: (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0, direction: 60, angle: 45, length: 16 }),
+        React$1.createElement("div", { className: "cta-bubble__content" }, props.children)));
 };
 
 var CtaBubbleContainer = function (props) {
@@ -1824,16 +1808,16 @@ var CtaBubbleContainer = function (props) {
             clearTimeout(handle);
         };
     }, [startTime, timeout]);
-    return (React.createElement(React.Fragment, null, props.visible && !pastDue && React.createElement(CtaBubble, { onClick: props.onClick }, props.children)));
+    return (React$1.createElement(React$1.Fragment, null, props.visible && !pastDue && React$1.createElement(CtaBubble, { onClick: props.onClick }, props.children)));
 };
 
 var ChatButton = function (props) {
-    return (React.createElement("div", { className: "chat-button " + props.addClass },
-        React.createElement("div", { className: "chat-button__btn", onClick: props.onClick },
-            React.createElement("svg", { width: "22", height: "22", viewBox: "0 0 22 22" },
-                React.createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" }))),
-        props.config && props.config.message && (React.createElement("div", { className: "chat-button__cta" },
-            React.createElement(CtaBubbleContainer, { timeout: props.config.timeout, visible: !props.visible, onClick: props.onClick }, props.config.message)))));
+    return (React$1.createElement("div", { className: "chat-button ".concat(props.addClass) },
+        React$1.createElement("div", { className: "chat-button__btn", onClick: props.onClick },
+            React$1.createElement("svg", { width: "22", height: "22", viewBox: "0 0 22 22" },
+                React$1.createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" }))),
+        props.config && props.config.message && (React$1.createElement("div", { className: "chat-button__cta" },
+            React$1.createElement(CtaBubbleContainer, { timeout: props.config.timeout, visible: !props.visible, onClick: props.onClick }, props.config.message)))));
 };
 
 var ChatCard = function (props) {
@@ -1843,39 +1827,39 @@ var ChatCard = function (props) {
     var image;
     var content;
     if (card.imageUrl) {
-        image = React.createElement("div", { className: "chat-card-container__img" },
-            React.createElement(ChatImage, { imageUrl: card.imageUrl, imageActionUrl: card.imageActionUrl }));
+        image = React$1.createElement("div", { className: "chat-card-container__img" },
+            React$1.createElement(ChatImage, { imageUrl: card.imageUrl, imageActionUrl: card.imageActionUrl }));
     }
     if (card.title) {
         title =
-            React.createElement("div", { className: "chat-card-title" },
-                React.createElement("span", null, card.title));
+            React$1.createElement("div", { className: "chat-card-title" },
+                React$1.createElement("span", null, card.title));
     }
     if (card.content) {
         content =
-            React.createElement("div", { className: "chat-card-sub-title" },
-                React.createElement("span", null, card.content));
+            React$1.createElement("div", { className: "chat-card-sub-title" },
+                React$1.createElement("span", null, card.content));
     }
-    return (React.createElement("div", { className: "chat-card-container" },
+    return (React$1.createElement("div", { className: "chat-card-container" },
         image,
         title,
         content,
-        !!((_a = card.buttons) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(ChatActionButtons, { buttons: card.buttons, onClick: props.onButtonClick })));
+        !!((_a = card.buttons) === null || _a === void 0 ? void 0 : _a.length) && React$1.createElement(ChatActionButtons, { buttons: card.buttons, onClick: props.onButtonClick })));
 };
 
 var ChatChip = function (props) {
     var option = props.option;
     var className = option.actionUrl ? "chat-chip chat-chip-link" : "chat-chip";
-    return (React.createElement("div", { onClick: function () { return props === null || props === void 0 ? void 0 : props.onClick(option); }, className: className },
-        React.createElement("span", null, option.label || option)));
+    return (React$1.createElement("div", { onClick: function () { return props === null || props === void 0 ? void 0 : props.onClick(option); }, className: className },
+        React$1.createElement("span", null, option.label || option)));
 };
 
 /**
  * Render option list. We just follow the order.
  */
 var ChatChips = function (props) {
-    return (React.createElement("div", { className: "chat-chips" }, props.options.map(function (option, i) {
-        return React.createElement(ChatChip, { key: i, onClick: props.onOptionClick, option: option });
+    return (React$1.createElement("div", { className: "chat-chips" }, props.options.map(function (option, i) {
+        return React$1.createElement(ChatChip, { key: i, onClick: props.onOptionClick, option: option });
     })));
 };
 
@@ -1900,7 +1884,7 @@ function resolveUrlPolicy(url, config) {
 }
 
 // compile time full switch-case verification
-function throwBadKind(x) {
+function throwBadKind$1(x) {
     throw new Error("Unknown kind " + x);
 }
 
@@ -1908,7 +1892,7 @@ function execute(url, behavior) {
     var type = behavior.type;
     switch (type) {
         case "newWindow":
-            window.open(url, "callout-option", "toolbar=0,status=0,width=" + (behavior.width || 1000) + ",height=" + (behavior.height || 700));
+            window.open(url, "callout-option", "toolbar=0,status=0,width=".concat(behavior.width || 1000, ",height=").concat(behavior.height || 700));
             break;
         case "newTab":
             window.open(url, "_blank");
@@ -1917,7 +1901,7 @@ function execute(url, behavior) {
             window.open(url, "_self");
             break;
         default:
-            throwBadKind(type);
+            throwBadKind$1(type);
     }
 }
 function useOpenUrlCallback() {
@@ -1950,7 +1934,7 @@ function executeAction(text, token) {
         });
         var visitor = getState().visitor;
         dispatch(writeMessage({
-            text: !token ? text : text + " (from the list)"
+            text: !token ? text : "".concat(text, " (from the list)")
         }, visitor));
     }; };
 }
@@ -2090,31 +2074,31 @@ var LogChat = /** @class */ (function () {
         this.inner.init(dispatch);
     };
     LogChat.prototype.sendOfflineMsg = function (message, cb) {
-        log("CLIENT: sendOfflineMsg: " + JSON.stringify(message));
+        log("CLIENT: sendOfflineMsg: ".concat(JSON.stringify(message)));
         this.inner.sendOfflineMsg(message, cb);
     };
     LogChat.prototype.sendChatMsg = function (message, cb) {
-        log("CLIENT: sendChatMsg: " + JSON.stringify(message));
+        log("CLIENT: sendChatMsg: ".concat(JSON.stringify(message)));
         this.inner.sendChatMsg(message, cb);
     };
     LogChat.prototype.sendChatMsgRequest = function (message, cb) {
-        log("CLIENT: sendChatMsgRequest: " + JSON.stringify(message));
+        log("CLIENT: sendChatMsgRequest: ".concat(JSON.stringify(message)));
         this.inner.sendChatMsgRequest(message, cb);
     };
     LogChat.prototype.sendTyping = function (isTyping) {
-        log("CLIENT: sendTyping: " + JSON.stringify(isTyping));
+        log("CLIENT: sendTyping: ".concat(JSON.stringify(isTyping)));
         this.inner.sendTyping(isTyping);
     };
     LogChat.prototype.setVisitorInfo = function (visitorInfo, cb) {
-        log("CLIENT: setVisitorInfo: " + JSON.stringify(visitorInfo));
+        log("CLIENT: setVisitorInfo: ".concat(JSON.stringify(visitorInfo)));
         this.inner.setVisitorInfo(visitorInfo, cb);
     };
     LogChat.prototype.sendChatRating = function (rating) {
-        log("CLIENT: sendChatRating: " + JSON.stringify(rating));
+        log("CLIENT: sendChatRating: ".concat(JSON.stringify(rating)));
         this.inner.sendChatRating(rating);
     };
     LogChat.prototype.sendFile = function (file, cb) {
-        log("CLIENT: sendFile: " + JSON.stringify(file));
+        log("CLIENT: sendFile: ".concat(JSON.stringify(file)));
         this.inner.sendFile(file, cb);
     };
     LogChat.prototype.markAsRead = function () {
@@ -2132,20 +2116,651 @@ var LogChat = /** @class */ (function () {
     return LogChat;
 }());
 
+var dist = {};
+
+Object.defineProperty(dist, '__esModule', { value: true });
+
+var React = React$1;
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var IconButton = function (props) {
+    var type = props.type || "button";
+    var Icon = props.icon;
+    return (React__default["default"].createElement("button", { type: type, className: "xapp-search-icon-button ".concat(props.className || ""), onClick: props.onClick },
+        React__default["default"].createElement("div", { className: "xapp-search-icon-button__content" },
+            React__default["default"].createElement(Icon, null))));
+};
+
+var MessageBubble = function (props) {
+    return (React__default["default"].createElement("div", { className: "xappw-message-bubble" }, props.children));
+};
+
+// compile time full switch-case verification
+function throwBadKind(x) {
+    throw new Error("Unknown kind " + x);
+}
+
+var RichTextBoldSpan = function (props) {
+    var format = props.format, text = props.text;
+    return (React__default["default"].createElement("span", { "data-rich-text-type": "bold", className: "xapp-search-rich-text-bold-span" }, text.substring(format.start, format.end)));
+};
+
+var RichTextInputSpan = function (props) {
+    var format = props.format, text = props.text, readOnly = props.readOnly;
+    var defaultValue = format.text || text.substring(format.start, format.end);
+    var _a = React.useState(defaultValue), value = _a[0], setValue = _a[1];
+    var handleChange = React.useCallback(function (ev) {
+        setValue(ev.target.value);
+    }, []);
+    if (readOnly) {
+        return (React__default["default"].createElement("span", { className: "xapp-search-rich-text-input-span xapp-search-rich-text-input-span--readonly" }, defaultValue));
+    }
+    return (React__default["default"].createElement("input", { type: "text", value: value, className: "xapp-search-rich-text-input-span", "data-rich-text-type": "inputText", onChange: handleChange, readOnly: readOnly }));
+};
+
+var RichTextNormalSpan = function (props) {
+    var format = props.format, text = props.text;
+    return (React__default["default"].createElement("span", { "data-rich-text-type": "normal", className: "xapp-search-rich-text-normal-span" }, text.substring(format.start, format.end)));
+};
+
+var RichTextSpan = function (props) {
+    var format = props.format, text = props.text, readOnly = props.readOnly;
+    var type = format.type;
+    switch (type) {
+        case "normal":
+            return (React__default["default"].createElement(RichTextNormalSpan, { text: text, format: format, readOnly: readOnly }));
+        case "bold":
+            return (React__default["default"].createElement(RichTextBoldSpan, { text: text, format: format, readOnly: readOnly }));
+        case "inputText":
+            return (React__default["default"].createElement(RichTextInputSpan, { text: text, format: format, readOnly: readOnly }));
+        default:
+            throwBadKind(type);
+    }
+};
+
+function cleanRichTextValue(value) {
+    var text = value.text, formats = value.formats;
+    var newFormats = [];
+    for (var _i = 0, formats_1 = formats; _i < formats_1.length; _i++) {
+        var format = formats_1[_i];
+        var type = format.type;
+        switch (type) {
+            case "normal":
+                continue;
+            case "inputText":
+                newFormats.push(format);
+                break;
+            case "bold":
+                if (newFormats.length > 0) {
+                    var prev = newFormats[newFormats.length - 1];
+                    if (prev.type === type && prev.end === format.start) {
+                        newFormats.pop();
+                        newFormats.push({
+                            type: type,
+                            start: prev.start,
+                            end: format.end
+                        });
+                    }
+                }
+                else {
+                    newFormats.push(format);
+                }
+                break;
+        }
+    }
+    return {
+        text: text,
+        formats: newFormats
+    };
+}
+
+function extendFormat(formats, length) {
+    var res = [];
+    var walkerIndex = 0;
+    for (var _i = 0, formats_1 = formats; _i < formats_1.length; _i++) {
+        var format = formats_1[_i];
+        var start = format.start, end = format.end, type = format.type, text = format.text;
+        if (walkerIndex < start) {
+            res.push({
+                type: "normal",
+                start: walkerIndex,
+                end: start
+            });
+        }
+        res.push({
+            type: type,
+            start: start,
+            end: end,
+            text: text
+        });
+        walkerIndex = end;
+    }
+    if (walkerIndex < length) {
+        res.push({
+            type: "normal",
+            start: walkerIndex,
+            end: length
+        });
+    }
+    return res;
+}
+
+function parseContent(node) {
+    var children = node.childNodes;
+    var formats = [];
+    var text = "";
+    children.forEach(function (child) {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+            var node_1 = child;
+            var innerText = node_1.tagName === "INPUT" ? node_1.value : node_1.innerText;
+            var type = node_1.dataset.richTextType;
+            formats.push({
+                type: type,
+                start: text.length,
+                end: text.length + innerText.length
+            });
+            text += innerText;
+        }
+        if (child.nodeType === Node.TEXT_NODE) {
+            var node_2 = child;
+            var innerText = node_2.nodeValue;
+            if (innerText) {
+                formats.push({
+                    type: "normal",
+                    start: text.length,
+                    end: text.length + innerText.length
+                });
+                text += innerText;
+            }
+        }
+    });
+    return cleanRichTextValue({
+        text: text,
+        formats: formats
+    });
+}
+function cleanContent(node) {
+    var _a;
+    var trash = [];
+    var raw = node.childNodes;
+    for (var i = 0; i < raw.length; i++) {
+        var c = raw.item(i);
+        if ((c === null || c === void 0 ? void 0 : c.nodeType) === Node.TEXT_NODE) {
+            trash.push(c);
+        }
+    }
+    for (var _i = 0, trash_1 = trash; _i < trash_1.length; _i++) {
+        var c = trash_1[_i];
+        try {
+            (_a = c.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(c);
+        }
+        catch (_b) {
+        }
+    }
+}
+var RichText = function (props) {
+    var value = props.value, className = props.className, readOnly = props.readOnly, onInput = props.onInput, onChange = props.onChange;
+    var formatsRaw = value.formats, text = value.text;
+    var formats = React.useMemo(function () { return extendFormat(formatsRaw, text.length); }, [formatsRaw, text.length]);
+    var handleInput = React.useCallback(function (ev) {
+        var target = ev.currentTarget;
+        var newValue = parseContent(target);
+        if (onInput) {
+            onInput(newValue);
+        }
+    }, [onInput]);
+    var handleBlur = React.useCallback(function (ev) {
+        var target = ev.currentTarget;
+        var newValue = parseContent(target);
+        cleanContent(target);
+        if (onChange) {
+            onChange(newValue);
+        }
+    }, [onChange]);
+    return (React__default["default"].createElement("div", { id: props.id, className: "xapp-search-rich-text ".concat(className || ""), contentEditable: !readOnly, suppressContentEditableWarning: true, onInput: handleInput, onBlur: handleBlur }, formats.map(function (format, index) { return (React__default["default"].createElement(RichTextSpan, { format: format, text: text, key: index, readOnly: readOnly })); })));
+};
+
+var RichInput = function (props) {
+    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
+    var rich = value.formats.some(function (f) { return f.type === "inputText"; });
+    var handleChange = React.useCallback(function (ev) {
+        onChange({
+            text: ev.target.value,
+            formats: []
+        });
+    }, [onChange]);
+    var handleRichChange = React.useCallback(function (val) {
+        onChange(val);
+    }, [onChange]);
+    var handleInput = React.useCallback(function (ev) {
+        if (onInput) {
+            onInput({
+                text: ev.target.value,
+                formats: []
+            });
+        }
+    }, [onInput]);
+    var handleRichInput = React.useCallback(function (val) {
+        if (onInput) {
+            onInput(val);
+        }
+    }, [onInput]);
+    var handleKeyDown = React.useCallback(function (event) {
+        if (onKeyDown) {
+            onKeyDown(event);
+        }
+    }, [onKeyDown]);
+    var inputRef = React.useRef(null);
+    var inputNode = inputRef.current;
+    React.useEffect(function () {
+        if (inputNode && onSearch) {
+            var handler_1 = function (ev) {
+                var target = ev.target;
+                if (target) {
+                    onSearch({
+                        text: target.value,
+                        formats: []
+                    });
+                }
+            };
+            inputNode.addEventListener("search", handler_1);
+            return function () {
+                inputNode.removeEventListener("search", handler_1);
+            };
+        }
+        return undefined;
+    }, [inputNode, onSearch]);
+    return (React__default["default"].createElement("div", { className: "xappw-rich-input ".concat(props.className) }, rich ?
+        React__default["default"].createElement(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, className: "xappw-rich-input__input ".concat(props.className, "__input") }) : React__default["default"].createElement("input", { id: id, ref: inputRef, type: type, value: value.text, autoFocus: autoFocus, placeholder: props.placeholder, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })));
+};
+
+var SuggestionsGroupHeading = function (props) {
+    return (React__default["default"].createElement("div", { className: "xappw-suggestions-group-heading" }, props.label));
+};
+
+function getScrollContainer(node) {
+    var walker = node;
+    while (walker && !walker.classList.contains("xapp-search-result__suggestions")) {
+        walker = walker.parentElement;
+    }
+    return walker || undefined;
+}
+var SuggestionsItem = function (props) {
+    var data = props.data, current = props.current, ActionsComponent = props.actions, onClick = props.onClick, onHover = props.onHover;
+    var handleClick = React.useCallback(function () {
+        onClick(data);
+    }, [data, onClick]);
+    var handleHover = React.useCallback(function () {
+        if (onHover) {
+            onHover(data);
+        }
+    }, [data, onHover]);
+    var ref = React.useRef(null);
+    React.useEffect(function () {
+        var node = ref.current;
+        if (current && node) {
+            var scrollContainer = getScrollContainer(node);
+            if (scrollContainer) {
+                var scrollBox = scrollContainer.getBoundingClientRect();
+                var nodeBox = node.getBoundingClientRect();
+                var maxTop = Math.max(scrollBox.top, nodeBox.top);
+                var minBottom = Math.min(scrollBox.bottom, nodeBox.bottom);
+                var visibleHeight = minBottom - maxTop;
+                var actualHeight = nodeBox.height;
+                if (visibleHeight < actualHeight * 0.99) {
+                    node.scrollIntoView({ behavior: "smooth" });
+                }
+            }
+        }
+    }, [current]);
+    return (React__default["default"].createElement("div", { ref: ref, className: "xappw-suggestions-item ".concat(current ? "xappw-suggestions-item--current" : ""), onClick: handleClick, onMouseEnter: handleHover },
+        React__default["default"].createElement(RichText, { value: data, className: "xappw-suggestions-item__texts", readOnly: true }),
+        ActionsComponent &&
+            React__default["default"].createElement("div", { className: "xappw-suggestions-item__actions" },
+                React__default["default"].createElement(ActionsComponent, { data: data, current: current }))));
+};
+
+var SuggestionsGroup = function (props) {
+    var group = props.group, currentIndex = props.currentIndex, itemActions = props.itemActions;
+    var heading = group.heading, items = group.items;
+    return (React__default["default"].createElement("div", { className: "xappw-suggestions-group" },
+        React__default["default"].createElement("div", { className: "xappw-suggestions-group__heading" },
+            React__default["default"].createElement(SuggestionsGroupHeading, { label: heading })),
+        React__default["default"].createElement("div", { className: "xappw-suggestions-group__items" }, items.map(function (item, itemIndex) {
+            return React__default["default"].createElement(SuggestionsItem, { key: itemIndex, data: item, current: currentIndex === itemIndex, actions: itemActions, onClick: props.onItemClick, onHover: props.onItemHover });
+        }))));
+};
+
+function getItemsLength(result) {
+    return result.reduce(function (prev, cur) { return prev + cur.items.length; }, 0);
+}
+
+var SuggestionsList = function (props) {
+    var suggestions = props.suggestions, itemActions = props.itemActions, className = props.className;
+    var length = React.useMemo(function () { return getItemsLength(suggestions); }, [suggestions]);
+    var currentIndex = length >= 0 ? props.index : NaN;
+    var indexWalker = 0;
+    return (React__default["default"].createElement("div", { className: "xappw-suggestions-list ".concat(className || "") }, suggestions.map(function (group, index) {
+        var res = (React__default["default"].createElement(SuggestionsGroup, { key: index, group: group, currentIndex: currentIndex - indexWalker, itemActions: itemActions, onItemClick: props.onItemClick, onItemHover: props.onItemHover }));
+        indexWalker += group.items.length;
+        return res;
+    })));
+};
+
+function findItemByIndex(groups, index) {
+    if (index >= 0) {
+        for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {
+            var group = groups_1[_i];
+            for (var _a = 0, _b = group.items; _a < _b.length; _a++) {
+                var item = _b[_a];
+                if (index <= 0) {
+                    return item;
+                }
+                index--;
+            }
+        }
+    }
+    return undefined;
+}
+
+function parseSuggestionsFormat(format) {
+    var types = Object.keys(format);
+    var type = types[0];
+    var item = format[type];
+    if (!item) {
+        throw new Error();
+    }
+    return {
+        type: type,
+        start: item.start,
+        end: item.end
+    };
+}
+function parseSuggestionsFormats(formats) {
+    return formats.map(parseSuggestionsFormat);
+}
+function parseSuggestionsResponseItem(item) {
+    return {
+        text: item.suggestion,
+        content: item.answer,
+        formats: parseSuggestionsFormats(item.format),
+        type: item.type
+    };
+}
+function getHeading(type) {
+    switch (type) {
+        case "FAQ":
+            return "FAQs";
+        case "INTENT":
+            return "Suggestions";
+        case "HISTORICAL":
+            return "Suggestions";
+        default:
+            return type;
+    }
+}
+function parseSuggestionsResponse(response, direction) {
+    if (direction === void 0) { direction = 1; }
+    if (!response) {
+        return undefined;
+    }
+    var items = sortSuggestionItems(response.suggestions, direction);
+    return items.reduce(function (result, current) {
+        var mappedItem = parseSuggestionsResponseItem(current);
+        if (result.length) {
+            var prevGroup = result[result.length - 1];
+            if (prevGroup.heading === getHeading(current.type)) {
+                prevGroup.items.push(mappedItem);
+                return result;
+            }
+        }
+        result.push({
+            heading: getHeading(current.type),
+            items: [mappedItem]
+        });
+        return result;
+    }, []);
+}
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+var order = ["FAQ", "INTENT", "HISTORICAL"];
+var ordersMap = order.reduce(function (prev, cur, index) {
+    prev[cur] = index;
+    return prev;
+}, {});
+function compareSuggestionItems(left, right, direction) {
+    return direction * (ordersMap[right.type] - ordersMap[left.type]);
+}
+function sortSuggestionItems(items, direction) {
+    return __spreadArray([], items, true).sort(function (left, right) { return compareSuggestionItems(left, right, direction); });
+}
+
+/**
+ * Append the provided query params to the URL
+ *
+ * It will overwrite existing params on the URL if there are conflicts
+ * @param url
+ * @param params
+ */
+function addQueryParametersToURL(url, params) {
+    var existingParams = new URL(url).searchParams;
+    params.forEach(function (value, key) {
+        existingParams.append(key, value);
+    });
+    var newUrl = new URL(url);
+    newUrl.search = existingParams.toString();
+    return newUrl;
+}
+
+var defaultOptions = {};
+function noop$1() {
+}
+function useJsonFetch(url, options) {
+    if (options === void 0) { options = defaultOptions; }
+    var _a = React.useState({
+        state: "paused"
+    }), value = _a[0], setValue = _a[1];
+    var pause = options.pause;
+    React.useEffect(function () {
+        if (pause) {
+            setValue({
+                state: "paused"
+            });
+            return noop$1;
+        }
+        var controller = new AbortController();
+        var signal = controller.signal;
+        var mounted = true;
+        (function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, json, e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 4, , 5]);
+                            setValue({
+                                state: "fetching"
+                            });
+                            return [4 /*yield*/, fetch(url, { signal: signal })];
+                        case 1:
+                            response = _a.sent();
+                            if (!mounted) return [3 /*break*/, 3];
+                            return [4 /*yield*/, response.json()];
+                        case 2:
+                            json = _a.sent();
+                            if (response.ok) {
+                                setValue({
+                                    state: "success",
+                                    data: json
+                                });
+                            }
+                            else {
+                                setValue({
+                                    state: "error",
+                                    error: json
+                                });
+                            }
+                            _a.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            e_1 = _a.sent();
+                            if (e_1.name === "AbortError") {
+                                setValue({
+                                    state: "paused"
+                                });
+                                return [2 /*return*/];
+                            }
+                            throw e_1;
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        })();
+        return function () {
+            mounted = false;
+            controller.abort();
+        };
+    }, [url, pause]);
+    return value;
+}
+
+function useSuggestionsFetch$1(options) {
+    var baseUrl = options.url, context = options.context, query = options.query;
+    var url = React.useMemo(function () {
+        if (!baseUrl) {
+            return undefined;
+        }
+        var params = new URLSearchParams();
+        params.append("size", "5");
+        params.append("queryText", query);
+        if (context === null || context === void 0 ? void 0 : context.length) {
+            params.append("activeContexts", context.join(","));
+        }
+        return addQueryParametersToURL(baseUrl, params);
+    }, [query, context, baseUrl]);
+    var response = useJsonFetch(url ? "".concat(url.toString()) : "", {
+        pause: !query || !baseUrl
+    });
+    return response;
+}
+
+/**
+ * Quicker configurable uuid
+ *
+ * @export
+ * @returns {string}
+ */
+function uuid() {
+    var d = new Date().getTime();
+    var newUuid = "xxxxxxxx-xxxx-65xx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        /* tslint:disable:no-magic-numbers */
+        /* tslint:disable:no-bitwise */
+        var r = (d + Math.random() * 16) % 16 | 0;
+        d = Math.floor(d / 16);
+        return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+        /* tslint:enable:no-magic-numbers */
+        /* tslint:disable:no-bitwise */
+    });
+    return newUuid;
+}
+
+var IconButton_1 = dist.IconButton = IconButton;
+dist.MessageBubble = MessageBubble;
+var RichInput_1 = dist.RichInput = RichInput;
+dist.RichText = RichText;
+dist.SuggestionsGroup = SuggestionsGroup;
+dist.SuggestionsGroupHeading = SuggestionsGroupHeading;
+dist.SuggestionsItem = SuggestionsItem;
+var SuggestionsList_1 = dist.SuggestionsList = SuggestionsList;
+dist.addQueryParametersToURL = addQueryParametersToURL;
+dist.extendFormat = extendFormat;
+var findItemByIndex_1 = dist.findItemByIndex = findItemByIndex;
+var getItemsLength_1 = dist.getItemsLength = getItemsLength;
+var parseSuggestionsResponse_1 = dist.parseSuggestionsResponse = parseSuggestionsResponse;
+dist.sortSuggestionItems = sortSuggestionItems;
+dist.useJsonFetch = useJsonFetch;
+var useSuggestionsFetch_1 = dist.useSuggestionsFetch = useSuggestionsFetch$1;
+var uuid_1 = dist.uuid = uuid;
+
 function postMessageToStentor(data, url, key) {
-    return __awaiter(this, void 0, void 0, function () {
+    return __awaiter$1(this, void 0, void 0, function () {
         var body, response;
-        return __generator(this, function (_a) {
+        return __generator$1(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     body = JSON.stringify(data);
-                    log("URL: " + url);
-                    log("BODY: " + body);
+                    log("URL: ".concat(url));
+                    log("BODY: ".concat(body));
                     return [4 /*yield*/, fetch(url, {
                             method: "POST",
                             headers: {
                                 "Content-Type": "application/json",
-                                "Authorization": "Bearer " + key,
+                                "Authorization": "Bearer ".concat(key),
                                 "User-Agent": "Stentor Chat Server"
                             },
                             body: body,
@@ -2154,7 +2769,7 @@ function postMessageToStentor(data, url, key) {
                 case 1:
                     response = _a.sent();
                     if (!response.ok) {
-                        throw new Error("Status " + response.status + ", Text: " + response.statusText);
+                        throw new Error("Status ".concat(response.status, ", Text: ").concat(response.statusText));
                     }
                     return [2 /*return*/, response.json()];
             }
@@ -2293,7 +2908,7 @@ function getPermissionRequestType(type) {
         case "PERMISSION_LOCATION_PRECISE":
             return "LOCATION_PRECISE";
         default:
-            throw new Error("Unsupported permission: " + type);
+            throw new Error("Unsupported permission: ".concat(type));
     }
 }
 function getPermissionResponse(botResponse, now) {
@@ -2306,7 +2921,7 @@ function getPermissionResponse(botResponse, now) {
         type: "permissionRequest",
         timestamp: now,
         msg: {
-            text: (_a = outputSpeech === null || outputSpeech === void 0 ? void 0 : outputSpeech.displayText) !== null && _a !== void 0 ? _a : "" + botResponse.data.permissionRequestTTSContext,
+            text: (_a = outputSpeech === null || outputSpeech === void 0 ? void 0 : outputSpeech.displayText) !== null && _a !== void 0 ? _a : "".concat(botResponse.data.permissionRequestTTSContext),
             permissionRequest: {
                 time: now,
                 type: type,
@@ -2323,26 +2938,6 @@ function getPermissionResponse(botResponse, now) {
     };
 }
 
-/**
- * Quicker configurable uuid
- *
- * @export
- * @returns {string}
- */
-function uuid() {
-    var d = new Date().getTime();
-    var newUuid = "xxxxxxxx-xxxx-65xx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-        /* tslint:disable:no-magic-numbers */
-        /* tslint:disable:no-bitwise */
-        var r = (d + Math.random() * 16) % 16 | 0;
-        d = Math.floor(d / 16);
-        return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
-        /* tslint:enable:no-magic-numbers */
-        /* tslint:disable:no-bitwise */
-    });
-    return newUuid;
-}
-
 var PERMISSION_QUESTION_EXPIRATION_MS = 300000; // 5 minutes
 var StentorDirectChat = /** @class */ (function () {
     function StentorDirectChat(config) {
@@ -2354,15 +2949,15 @@ var StentorDirectChat = /** @class */ (function () {
          */
         this.widget = {
             setConnectionStatus: function (status) {
-                log("SERVER: connection_update: " + JSON.stringify(status));
+                log("SERVER: connection_update: ".concat(JSON.stringify(status)));
                 _this.dispatch(setConnectionStatus(status));
             },
             setAccountStatus: function (status) {
-                log("SERVER: account_status: " + JSON.stringify(status));
+                log("SERVER: account_status: ".concat(JSON.stringify(status)));
                 _this.dispatch(setAccountStatus(status));
             },
             sendNewMessage: function (data) {
-                log("SERVER: new message: " + JSON.stringify(data));
+                log("SERVER: new message: ".concat(JSON.stringify(data)));
                 _this.dispatch({
                     type: "chat",
                     detail: {
@@ -2374,7 +2969,7 @@ var StentorDirectChat = /** @class */ (function () {
                 });
             },
             userJoined: function (data) {
-                log("SERVER: user joined: " + JSON.stringify(data));
+                log("SERVER: user joined: ".concat(JSON.stringify(data)));
                 _this.visitorInfo.token = data.token;
                 _this.dispatch({
                     type: "chat",
@@ -2386,7 +2981,7 @@ var StentorDirectChat = /** @class */ (function () {
                 });
             },
             userLeft: function (data) {
-                log("SERVER: user left: " + JSON.stringify(data));
+                log("SERVER: user left: ".concat(JSON.stringify(data)));
                 _this.dispatch({
                     type: "chat",
                     detail: {
@@ -2445,7 +3040,7 @@ var StentorDirectChat = /** @class */ (function () {
     StentorDirectChat.prototype.init = function (dispatch) {
         this.dispatch = dispatch;
         // TODO: Authenticate - or at least tell the server who you are
-        log("got init auth: " + this.config.key);
+        log("got init auth: ".concat(this.config.key));
         // We are connected
         this.widget.setConnectionStatus("online");
         this.widget.setAccountStatus("online");
@@ -2457,8 +3052,8 @@ var StentorDirectChat = /** @class */ (function () {
         cb();
     };
     StentorDirectChat.prototype.sendChatMsg = function (message, cb) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
+        return __awaiter$1(this, void 0, void 0, function () {
+            return __generator$1(this, function (_a) {
                 return [2 /*return*/, this.sendChatMsgRequest({
                         msg: message,
                         timestamp: new Date().getTime(),
@@ -2471,9 +3066,9 @@ var StentorDirectChat = /** @class */ (function () {
     };
     StentorDirectChat.prototype.sendChatMsgRequest = function (serviceRequest, cb) {
         var _a;
-        return __awaiter(this, void 0, void 0, function () {
+        return __awaiter$1(this, void 0, void 0, function () {
             var agentResponse;
-            return __generator(this, function (_b) {
+            return __generator$1(this, function (_b) {
                 switch (_b.label) {
                     case 0: return [4 /*yield*/, this.postMessage(serviceRequest)];
                     case 1:
@@ -2516,9 +3111,9 @@ var StentorDirectChat = /** @class */ (function () {
     };
     StentorDirectChat.prototype.postMessage = function (message) {
         var _a, _b, _c, _d;
-        return __awaiter(this, void 0, void 0, function () {
+        return __awaiter$1(this, void 0, void 0, function () {
             var request, now, permissionRequest, expired, text, granted, userProfile, isEmail, botResponse, responseMessage;
-            return __generator(this, function (_e) {
+            return __generator$1(this, function (_e) {
                 switch (_e.label) {
                     case 0:
                         now = new Date().getTime();
@@ -2605,20 +3200,20 @@ var StentorDirectChat = /** @class */ (function () {
                                 };
                             }
                         }
-                        log("Visitor says: " + JSON.stringify(request, undefined, 2));
+                        log("Visitor says: ".concat(JSON.stringify(request, undefined, 2)));
                         // Bot is "typing"
                         this.widget.typing();
                         return [4 /*yield*/, postMessageToStentor(request, this.config.url, this.config.key).catch(function (postError) {
-                                err("POST failed: " + postError.message);
+                                err("POST failed: ".concat(postError.message));
                                 return {
-                                    text: "Bot doesn't respond. Reason: " + postError.message
+                                    text: "Bot doesn't respond. Reason: ".concat(postError.message)
                                 };
                             })];
                     case 1:
                         botResponse = _e.sent();
                         // Bot stopped "typing"
                         this.widget.stopTyping();
-                        log("Bot says: " + JSON.stringify(botResponse, undefined, 2));
+                        log("Bot says: ".concat(JSON.stringify(botResponse, undefined, 2)));
                         // Now translate the response to server dialect
                         // new session no more
                         this.isNewSession = false;
@@ -2642,15 +3237,15 @@ var StentorDirectChat = /** @class */ (function () {
     };
     StentorDirectChat.prototype.startSession = function () {
         if (this.visitorInfo.visitorId) {
-            this._userId = "stentor-widget-user-" + this.visitorInfo.visitorId;
+            this._userId = "stentor-widget-user-".concat(this.visitorInfo.visitorId);
         }
         else if (this.visitorInfo.email) {
-            this._userId = "stentor-widget-user-" + this.visitorInfo.email;
+            this._userId = "stentor-widget-user-".concat(this.visitorInfo.email);
         }
         else {
-            this._userId = "stentor-widget-user-" + uuid();
+            this._userId = "stentor-widget-user-".concat(uuid_1());
         }
-        this._sessionId = "stentor-widget-session-" + uuid();
+        this._sessionId = "stentor-widget-session-".concat(uuid_1());
         this.isNewSession = true;
     };
     Object.defineProperty(StentorDirectChat.prototype, "userId", {
@@ -5172,8 +5767,10 @@ class Socket extends Emitter_1 {
         packet.options.compress = this.flags.compress !== false;
         // event ack callback
         if ("function" === typeof args[args.length - 1]) {
-            this.acks[this.ids] = args.pop();
-            packet.id = this.ids++;
+            const id = this.ids++;
+            const ack = args.pop();
+            this._registerAckCallback(id, ack);
+            packet.id = id;
         }
         const isTransportWritable = this.io.engine &&
             this.io.engine.transport &&
@@ -5189,6 +5786,31 @@ class Socket extends Emitter_1 {
         this.flags = {};
         return this;
     }
+    /**
+     * @private
+     */
+    _registerAckCallback(id, ack) {
+        const timeout = this.flags.timeout;
+        if (timeout === undefined) {
+            this.acks[id] = ack;
+            return;
+        }
+        // @ts-ignore
+        const timer = this.io.setTimeoutFn(() => {
+            delete this.acks[id];
+            for (let i = 0; i < this.sendBuffer.length; i++) {
+                if (this.sendBuffer[i].id === id) {
+                    this.sendBuffer.splice(i, 1);
+                }
+            }
+            ack.call(this, new Error("operation has timed out"));
+        }, timeout);
+        this.acks[id] = (...args) => {
+            // @ts-ignore
+            this.io.clearTimeoutFn(timer);
+            ack.apply(this, [null, ...args]);
+        };
+    }
     /**
      * Sends a packet.
      *
@@ -5273,6 +5895,7 @@ class Socket extends Emitter_1 {
                 this.ondisconnect();
                 break;
             case PacketType.CONNECT_ERROR:
+                this.destroy();
                 const err = new Error(packet.data.message);
                 // @ts-ignore
                 err.data = packet.data.data;
@@ -5436,6 +6059,25 @@ class Socket extends Emitter_1 {
         this.flags.volatile = true;
         return this;
     }
+    /**
+     * Sets a modifier for a subsequent event emission that the callback will be called with an error when the
+     * given number of milliseconds have elapsed without an acknowledgement from the server:
+     *
+     * ```
+     * socket.timeout(5000).emit("my-event", (err) => {
+     *   if (err) {
+     *     // the server did not acknowledge the event in the given delay
+     *   }
+     * });
+     * ```
+     *
+     * @returns self
+     * @public
+     */
+    timeout(timeout) {
+        this.flags.timeout = timeout;
+        return this;
+    }
     /**
      * Adds a listener that will be fired when any event is emitted. The event name is passed as the first argument to the
      * callback.
@@ -5842,13 +6484,7 @@ class Manager extends Emitter_1 {
     _close() {
         this.skipReconnect = true;
         this._reconnecting = false;
-        if ("opening" === this._readyState) {
-            // `onclose` will not fire because
-            // an open event never happened
-            this.cleanup();
-        }
-        this.backoff.reset();
-        this._readyState = "closed";
+        this.onclose("forced close");
         if (this.engine)
             this.engine.close();
     }
@@ -5991,12 +6627,12 @@ var StentorServerChat = /** @class */ (function () {
         // TODO: Authenticate - or at least tell the server who you are
         // Socket events
         this.socket.on("account_status", function (data) {
-            log("SERVER: account_status: " + JSON.stringify(data));
+            log("SERVER: account_status: ".concat(JSON.stringify(data)));
             // Register the "communication" with the server
             if (!_this.token) {
-                _this.token = uuid();
+                _this.token = uuid_1();
                 dispatch(receiveToken(_this.token));
-                log("CLIENT: created token: " + _this.token);
+                log("CLIENT: created token: ".concat(_this.token));
             }
             _this.socket.emit("connection update", _this.token);
             dispatch({
@@ -6008,7 +6644,7 @@ var StentorServerChat = /** @class */ (function () {
             });
         });
         this.socket.on("new message", function (data) {
-            log("SERVER: new message: " + JSON.stringify(data));
+            log("SERVER: new message: ".concat(JSON.stringify(data)));
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -6023,7 +6659,7 @@ var StentorServerChat = /** @class */ (function () {
             });
         });
         this.socket.on("user joined", function (data) {
-            log("SERVER: user joined: " + JSON.stringify(data));
+            log("SERVER: user joined: ".concat(JSON.stringify(data)));
             _this.visitorInfo.token = data.token;
             _this.dispatch({
                 type: "chat",
@@ -6039,7 +6675,7 @@ var StentorServerChat = /** @class */ (function () {
             });
         });
         this.socket.on("user left", function (data) {
-            log("SERVER: user left: " + JSON.stringify(data));
+            log("SERVER: user left: ".concat(JSON.stringify(data)));
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -6053,7 +6689,7 @@ var StentorServerChat = /** @class */ (function () {
             });
         });
         this.socket.on("typing", function (data) {
-            log("SERVER: typing: " + JSON.stringify(data));
+            log("SERVER: typing: ".concat(JSON.stringify(data)));
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -6067,7 +6703,7 @@ var StentorServerChat = /** @class */ (function () {
             });
         });
         this.socket.on("stop typing", function (data) {
-            log("SERVER: stop typing: " + JSON.stringify(data));
+            log("SERVER: stop typing: ".concat(JSON.stringify(data)));
             _this.dispatch({
                 type: "chat",
                 detail: {
@@ -6151,7 +6787,7 @@ function createChatServerCore(config, token) {
         case "local":
             return new StentorLocalChat();
         default:
-            throw throwBadKind(config.type);
+            throw throwBadKind$1(config.type);
     }
 }
 function createChatServer(config, token) {
@@ -6200,8 +6836,8 @@ var ChatChipsContainer = function (_) {
             dispatch(executeAction(getChatServerActionLinkLabel(option)));
         }
     }
-    return (React.createElement("div", { className: "message-list-container__chips " + (!(chips === null || chips === void 0 ? void 0 : chips.length) ? "message-list-container__chips--empty" : "") },
-        React.createElement(ChatChips, { options: chips, onOptionClick: optionOnChange })));
+    return (React$1.createElement("div", { className: "message-list-container__chips ".concat(!(chips === null || chips === void 0 ? void 0 : chips.length) ? "message-list-container__chips--empty" : "") },
+        React$1.createElement(ChatChips, { options: chips, onOptionClick: optionOnChange })));
 };
 
 var ChatMenuItem = function (props) {
@@ -6210,24 +6846,24 @@ var ChatMenuItem = function (props) {
             props.onClick(props.label);
         }
     }
-    return (React.createElement("button", { type: "button", className: "chat-menu-item", onClick: handleClick }, props.label));
+    return (React$1.createElement("button", { type: "button", className: "chat-menu-item", onClick: handleClick }, props.label));
 };
 
 var ChatMenu = function (props) {
     var items = props.items;
-    return (React.createElement("div", { className: "chat-menu " + (props.opened ? "chat-menu--opened" : "chat-menu--closed") }, items.map(function (label, i) {
-        return React.createElement(ChatMenuItem, { key: i, onClick: props.onItemClick, label: label });
+    return (React$1.createElement("div", { className: "chat-menu ".concat(props.opened ? "chat-menu--opened" : "chat-menu--closed") }, items.map(function (label, i) {
+        return React$1.createElement(ChatMenuItem, { key: i, onClick: props.onItemClick, label: label });
     })));
 };
 
-var UnknownMessage = function () { return React.createElement(React.Fragment, null); };
+var UnknownMessage = function () { return React$1.createElement(React$1.Fragment, null); };
 
 function renderAvatar(entity) {
-    return (React.createElement("div", { className: "xappw-chat-msg-part__avatar" },
-        React.createElement(Avatar, { entity: entity })));
+    return (React$1.createElement("div", { className: "xappw-chat-msg-part__avatar" },
+        React$1.createElement(Avatar, { entity: entity })));
 }
 var ChatMessagePart = function (props) {
-    return (React.createElement("div", { className: "xappw-chat-msg-part" },
+    return (React$1.createElement("div", { className: "xappw-chat-msg-part" },
         props.showAvatar && renderAvatar(props.user),
         props.children));
 };
@@ -6278,14 +6914,14 @@ var CardMiddlewareWidget = function (props) {
     var card = useMemo(function () { return convertFromCardDisplay(msg); }, [msg]);
     var user = ctx.user;
     var handleButton = useButtonCallback();
-    return (React.createElement(ChatMessagePart, { showAvatar: true, user: user },
-        React.createElement("div", { className: "chat-msg" },
-            React.createElement(ChatCard, { card: card, onButtonClick: handleButton }))));
+    return (React$1.createElement(ChatMessagePart, { showAvatar: true, user: user },
+        React$1.createElement("div", { className: "chat-msg" },
+            React$1.createElement(ChatCard, { card: card, onButtonClick: handleButton }))));
 };
 var CardMiddleware = function (next) { return function (props) {
     var msg = props.msg, ctx = props.ctx;
     if (isCard(msg)) {
-        return React.createElement(CardMiddlewareWidget, { msg: msg, ctx: ctx });
+        return React$1.createElement(CardMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
@@ -6306,11 +6942,11 @@ function createSubscribableArray(originalValue) {
     return {
         getArray: function () { return cache; },
         push: function (val) {
-            cache = __spreadArray(__spreadArray([], cache, true), [val], false);
+            cache = __spreadArray$1(__spreadArray$1([], cache, true), [val], false);
             notify();
         },
         unshift: function (val) {
-            cache = __spreadArray([val], cache, true);
+            cache = __spreadArray$1([val], cache, true);
             notify();
         },
         subscribe: function (callback) {
@@ -6363,22 +6999,22 @@ function useLateMiddlewaresBuilder(storage) {
     var middlewares = useGlobalSubscribableArray(storage);
     return useMemo(function () { return joinMiddlewares(middlewares); }, [middlewares]);
 }
-var storage = createStorage(window, "xappMsgMiddlewares");
+var storage = createStorage(globalThis, "xappMsgMiddlewares");
 function useLateMiddleware() {
     return useLateMiddlewaresBuilder(storage);
 }
 
 function getSvg() {
-    return (React.createElement("svg", { viewBox: "0 0 20 20" },
-        React.createElement("path", { d: "M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z" }),
-        React.createElement("path", { d: "M19 1h-8l3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z" })));
+    return (React$1.createElement("svg", { viewBox: "0 0 20 20" },
+        React$1.createElement("path", { d: "M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z" }),
+        React$1.createElement("path", { d: "M19 1h-8l3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z" })));
 }
 var ExternalLink = function (props) {
     var url = props.url;
     var handleClick = useCallback(function (ev) {
         ev.preventDefault();
     }, []);
-    return (React.createElement("a", { href: url, target: "_blank", rel: "noreferrer", className: props.className, onClick: handleClick }, getSvg()));
+    return (React$1.createElement("a", { href: url, target: "_blank", rel: "noreferrer", className: props.className, onClick: handleClick }, getSvg()));
 };
 
 function firstIndex(val, patterns) {
@@ -6430,7 +7066,7 @@ var parsers = [
     pathParser,
     queryParser
 ];
-function parse$1(val) {
+function parse(val) {
     var parts = [];
     var rest = val;
     for (var _i = 0, parsers_1 = parsers; _i < parsers_1.length; _i++) {
@@ -6449,7 +7085,7 @@ var ellipsis = "/...";
 function reduceLink(url, maxLength) {
     if (url.length < maxLength)
         return url;
-    var parts = parse$1(url); // [scheme, domain, port, path, query, hash]
+    var parts = parse(url); // [scheme, domain, port, path, query, hash]
     function getText() {
         return parts.join("");
     }
@@ -6491,7 +7127,7 @@ var SmartLink = function (props) {
     var handleClick = useCallback(function (ev) {
         ev.preventDefault();
     }, []);
-    return (React.createElement("a", { href: url, target: "_blank", rel: "noreferrer", className: className, onClick: handleClick }, reduceLink(url, 40)));
+    return (React$1.createElement("a", { href: url, target: "_blank", rel: "noreferrer", className: className, onClick: handleClick }, reduceLink(url, 40)));
 };
 
 var ListItem = function (props) {
@@ -6499,18 +7135,18 @@ var ListItem = function (props) {
     var item = props.item;
     var layout = props.layout || "normal";
     var url = item.url || item.imageActionUrl;
-    return (React.createElement(ActionItem, { className: "xappw-vlist-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl },
-        React.createElement("div", { className: "xappw-vlist-item xappw-vlist-item--" + layout },
-            React.createElement("div", { className: "xappw-vlist-item__description" },
-                item.title && React.createElement("div", { className: "xappw-vlist-item__title" },
-                    React.createElement("span", null, item.title)),
-                url && React.createElement(SmartLink, { url: url, className: "xappw-vlist-item__link" }),
-                item.subTitle && React.createElement("div", { className: "xappw-vlist-item__subtitle" },
-                    React.createElement("span", null, item.subTitle)),
-                !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(ChatActionButtons, { buttons: item.buttons, onClick: props.onButtonClick })),
-            React.createElement("div", { className: "xappw-vlist-item__side" },
-                url && React.createElement(ExternalLink, { url: "url", className: "xappw-vlist-item__external-link" }),
-                React.createElement(ActionItemImage, { item: item, className: "xappw-vlist-item__img", emptyImageVisible: props.emptyImageVisible })))));
+    return (React$1.createElement(ActionItem, { className: "xappw-vlist-item-container", item: item, onButtonClick: props.onButtonClick, onExecute: props.onExecute, onOpenUrl: props.onOpenUrl },
+        React$1.createElement("div", { className: "xappw-vlist-item xappw-vlist-item--".concat(layout) },
+            React$1.createElement("div", { className: "xappw-vlist-item__description" },
+                item.title && React$1.createElement("div", { className: "xappw-vlist-item__title" },
+                    React$1.createElement("span", null, item.title)),
+                url && React$1.createElement(SmartLink, { url: url, className: "xappw-vlist-item__link" }),
+                item.subTitle && React$1.createElement("div", { className: "xappw-vlist-item__subtitle" },
+                    React$1.createElement("span", null, item.subTitle)),
+                !!((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length) && React$1.createElement(ChatActionButtons, { buttons: item.buttons, onClick: props.onButtonClick })),
+            React$1.createElement("div", { className: "xappw-vlist-item__side" },
+                url && React$1.createElement(ExternalLink, { url: "url", className: "xappw-vlist-item__external-link" }),
+                React$1.createElement(ActionItemImage, { item: item, className: "xappw-vlist-item__img", emptyImageVisible: props.emptyImageVisible })))));
 };
 
 var List = function (props) {
@@ -6519,12 +7155,12 @@ var List = function (props) {
     var hasImage = list.items.some(function (item) { return item.imageUrl; });
     var titlesOnly = !list.items.some(function (item) { var _a; return item.subTitle || ((_a = item.buttons) === null || _a === void 0 ? void 0 : _a.length); });
     var listItems = list.items.map(function (item, itemIndex) {
-        return (React.createElement("div", { className: "xappw-vlist-container__item", key: "item-key-" + itemIndex },
-            React.createElement(ListItem, { item: item, layout: titlesOnly ? "titles" : "normal", emptyImageVisible: hasImage, onExecute: props.onExecute, onButtonClick: props.onButtonClick, onOpenUrl: props.onOpenUrl })));
+        return (React$1.createElement("div", { className: "xappw-vlist-container__item", key: "item-key-".concat(itemIndex) },
+            React$1.createElement(ListItem, { item: item, layout: titlesOnly ? "titles" : "normal", emptyImageVisible: hasImage, onExecute: props.onExecute, onButtonClick: props.onButtonClick, onOpenUrl: props.onOpenUrl })));
     });
-    return (React.createElement("div", { className: "xappw-vlist" },
-        React.createElement("div", { ref: listRef, className: "xappw-vlist-container" },
-            props.list.title && React.createElement("div", { className: "xappw-vlist__header" }, props.list.title),
+    return (React$1.createElement("div", { className: "xappw-vlist" },
+        React$1.createElement("div", { ref: listRef, className: "xappw-vlist-container" },
+            props.list.title && React$1.createElement("div", { className: "xappw-vlist__header" }, props.list.title),
             listItems)));
 };
 
@@ -6534,16 +7170,16 @@ var ListMiddlewareWidget = function (props) {
     var handleExecute = useExecuteActionCallback();
     var handleButton = useButtonCallback();
     var user = ctx.user;
-    return (React.createElement(ChatMessagePart, { showAvatar: true, user: user },
-        list.type === "CAROUSEL" && React.createElement("div", { className: "chat-msg chat-msg--fullwidth chat-msg--no-ava" },
-            React.createElement(Carousel, { list: list, onExecute: handleExecute, onButtonClick: handleButton, onOpenUrl: ctx.openUrl })),
-        list.type === "LIST" && React.createElement("div", { className: "chat-msg chat-msg--expand" },
-            React.createElement(List, { list: list, onExecute: handleExecute, onButtonClick: handleButton, onOpenUrl: ctx.openUrl }))));
+    return (React$1.createElement(ChatMessagePart, { showAvatar: true, user: user },
+        list.type === "CAROUSEL" && React$1.createElement("div", { className: "chat-msg chat-msg--fullwidth chat-msg--no-ava" },
+            React$1.createElement(Carousel, { list: list, onExecute: handleExecute, onButtonClick: handleButton, onOpenUrl: ctx.openUrl })),
+        list.type === "LIST" && React$1.createElement("div", { className: "chat-msg chat-msg--expand" },
+            React$1.createElement(List, { list: list, onExecute: handleExecute, onButtonClick: handleButton, onOpenUrl: ctx.openUrl }))));
 };
 var ListMiddleware = function (next) { return function (props) {
     var msg = props.msg, ctx = props.ctx;
     if (isList(msg)) {
-        return React.createElement(ListMiddlewareWidget, { msg: msg, ctx: ctx });
+        return React$1.createElement(ListMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
@@ -6555,10 +7191,10 @@ var MultiSelect = function (props) {
         var id = ev.target.value;
         onChange(__assign(__assign({}, checked), (_a = {}, _a[id] = !checked[id], _a)));
     }, [checked, onChange]);
-    return (React.createElement("ul", { className: "xappw-multiselect" }, items.map(function (item) { return (React.createElement("li", { key: item.id },
-        React.createElement("label", null,
-            React.createElement("input", { type: "checkbox", checked: checked[item.id] || false, onChange: handleToggle, value: item.id }),
-            React.createElement("span", null, item.title)))); })));
+    return (React$1.createElement("ul", { className: "xappw-multiselect" }, items.map(function (item) { return (React$1.createElement("li", { key: item.id },
+        React$1.createElement("label", null,
+            React$1.createElement("input", { type: "checkbox", checked: checked[item.id] || false, onChange: handleToggle, value: item.id }),
+            React$1.createElement("span", null, item.title)))); })));
 };
 
 function isMultiSelect(display) {
@@ -6582,16 +7218,16 @@ var MultiSelectMiddlewareWidget = function (props) {
             })
         });
     }, [ctx, checked]);
-    return (React.createElement(ChatMessagePart, { showAvatar: true, user: user },
-        React.createElement("div", { className: "chat-msg" },
-            React.createElement("div", null,
-                React.createElement(MultiSelect, { items: items, checked: checked, onChange: setChecked }),
-                React.createElement(ActionButton, { label: "Submit", onClick: handleSubmit })))));
+    return (React$1.createElement(ChatMessagePart, { showAvatar: true, user: user },
+        React$1.createElement("div", { className: "chat-msg" },
+            React$1.createElement("div", null,
+                React$1.createElement(MultiSelect, { items: items, checked: checked, onChange: setChecked }),
+                React$1.createElement(ActionButton, { label: "Submit", onClick: handleSubmit })))));
 };
 var MultiSelectMiddleware = function (next) { return function (props) {
     var msg = props.msg, ctx = props.ctx;
     if (isMultiSelect(msg)) {
-        return React.createElement(MultiSelectMiddlewareWidget, { msg: msg, ctx: ctx });
+        return React$1.createElement(MultiSelectMiddlewareWidget, { msg: msg, ctx: ctx });
     }
     return next(props);
 }; };
@@ -6621,8 +7257,8 @@ function getTailSvgPath(owner) {
     return "m 0 0 v 240 h 60 c -40 -40 -60 -160 -60 -240";
 }
 function getTailSvg(owner) {
-    return (React.createElement("svg", { className: "chat-text-bubble__tail", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 240" },
-        React.createElement("path", { d: getTailSvgPath(owner), fill: "currentColor" })));
+    return (React$1.createElement("svg", { className: "chat-text-bubble__tail", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 240" },
+        React$1.createElement("path", { d: getTailSvgPath(owner), fill: "currentColor" })));
 }
 var ChatMessageBubble = function (props) {
     var owner = props.owner, onClick = props.onClick;
@@ -6631,7 +7267,7 @@ var ChatMessageBubble = function (props) {
             onClick();
         }
     }, [onClick]);
-    return (React.createElement("div", { onClick: handleClick, className: "chat-text-bubble " + (owner === "mine" ? "chat-text-bubble--mine" : "chat-text-bubble--others") },
+    return (React$1.createElement("div", { onClick: handleClick, className: "chat-text-bubble ".concat(owner === "mine" ? "chat-text-bubble--mine" : "chat-text-bubble--others") },
         (props.hasTail) && getTailSvg(owner),
         props.children));
 };
@@ -6665,10 +7301,10 @@ var ChatMarkdownMessage = function (props) {
         }
         return undefined;
     }, [ref, html, onOpenUrl, handleLinkClick]);
-    return (React.createElement("div", { className: "chat-msg" },
-        React.createElement("div", { className: "chat-text-container" },
-            React.createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
-                React.createElement("div", { ref: ref })))));
+    return (React$1.createElement("div", { className: "chat-msg" },
+        React$1.createElement("div", { className: "chat-text-container" },
+            React$1.createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
+                React$1.createElement("div", { ref: ref })))));
 };
 
 var ChatPermissionMessage = function (props) {
@@ -6738,20 +7374,20 @@ var ChatPermissionMessage = function (props) {
         }
     }, [handleFail, handleResult]);
     if (!permissionRequest) {
-        return React.createElement(React.Fragment, null);
+        return React$1.createElement(React$1.Fragment, null);
     }
-    return (React.createElement("div", { className: "chat-msg" },
-        React.createElement("div", { className: "buttons-container" },
-            React.createElement(ActionButton, { label: allowLabel, addClass: "button", onClick: handleAllow }),
-            React.createElement(ActionButton, { label: denyLabel, addClass: "button", onClick: handleDeny }))));
+    return (React$1.createElement("div", { className: "chat-msg" },
+        React$1.createElement("div", { className: "buttons-container" },
+            React$1.createElement(ActionButton, { label: allowLabel, addClass: "button", onClick: handleAllow }),
+            React$1.createElement(ActionButton, { label: denyLabel, addClass: "button", onClick: handleDeny }))));
 };
 
 var ChatTextMessage = function (props) {
     var agentMessage = isAgent(props.message.user.nick);
-    return (React.createElement("div", { className: "chat-msg" },
-        React.createElement("div", { className: "chat-text-container" },
-            React.createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
-                React.createElement("span", null, props.message.msg.text)))));
+    return (React$1.createElement("div", { className: "chat-msg" },
+        React$1.createElement("div", { className: "chat-text-container" },
+            React$1.createElement(ChatMessageBubble, { owner: agentMessage ? "others" : "mine", hasTail: agentMessage && !props.sibling },
+                React$1.createElement("span", null, props.message.msg.text)))));
 };
 
 function getClassName(msg) {
@@ -6775,26 +7411,26 @@ var ChatMessage = function (props) {
                 // Here is the deal. If we have text (output speech), then text - card - list - options
                 // OR card OR list only. Avatar with text bubble.
                 var avaKey = avaKeys.find(function (key) { return !!msg[key]; });
-                return (React.createElement(React.Fragment, null,
+                return (React$1.createElement(React$1.Fragment, null,
                     msg.text &&
-                        React.createElement(ChatMessagePart, { showAvatar: avaKey === "text", user: user },
-                            React.createElement(ChatTextMessage, { message: props.message, sibling: props.sibling })),
+                        React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "text", user: user },
+                            React$1.createElement(ChatTextMessage, { message: props.message, sibling: props.sibling })),
                     msg.html &&
-                        React.createElement(ChatMessagePart, { showAvatar: avaKey === "html", user: user },
-                            React.createElement(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, onOpenUrl: (_a = props.middlewareContext) === null || _a === void 0 ? void 0 : _a.openUrl })),
+                        React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "html", user: user },
+                            React$1.createElement(ChatMarkdownMessage, { message: props.message, sibling: props.sibling, onOpenUrl: (_a = props.middlewareContext) === null || _a === void 0 ? void 0 : _a.openUrl })),
                     msg.displays && middleware && msg.displays.map(function (display, index) {
                         var Middleware = middleware;
-                        return React.createElement(Middleware, { key: index, msg: display, ctx: props.middlewareContext });
+                        return React$1.createElement(Middleware, { key: index, msg: display, ctx: props.middlewareContext });
                     }),
                     msg.permissionRequest &&
-                        React.createElement(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user },
-                            React.createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: props.middlewareContext }))));
+                        React$1.createElement(ChatMessagePart, { showAvatar: avaKey === "permissionRequest", user: user },
+                            React$1.createElement(ChatPermissionMessage, { message: props.message, sibling: props.sibling, ctx: props.middlewareContext }))));
         }
-        return (React.createElement(React.Fragment, null));
+        return (React$1.createElement(React$1.Fragment, null));
     }
     // empty
-    return (React.createElement("div", { className: "chat-msg-container-wrapper " + (isAgent(props.message.user.nick) ? "agent" : "visitor") + " " + (props.sibling ? "sibling" : "") },
-        React.createElement("div", { className: "chat-msg-container " + getClassName(props.message) }, renderByType())));
+    return (React$1.createElement("div", { className: "chat-msg-container-wrapper ".concat(isAgent(props.message.user.nick) ? "agent" : "visitor", " ").concat(props.sibling ? "sibling" : "") },
+        React$1.createElement("div", { className: "chat-msg-container ".concat(getClassName(props.message)) }, renderByType())));
 };
 
 function useExternalScript(url) {
@@ -6822,7 +7458,7 @@ function getSafeCh(ch) {
     if (ch >= "A" && ch <= "Z") {
         return ch;
     }
-    return "_" + ch.charCodeAt(0) + "_";
+    return "_".concat(ch.charCodeAt(0), "_");
 }
 function getSrcId(url) {
     var res = "es-";
@@ -6868,191 +7504,26 @@ function useGreeting(active) {
 }
 
 function match(item, pattern) {
-    var value = item.suggestion;
+    var value = item.text;
     return value.toLocaleLowerCase().indexOf(pattern.toLocaleLowerCase()) >= 0;
-}
-function mapFormat$1(formats, length) {
-    var res = [];
-    var walkerIndex = 0;
-    for (var _i = 0, formats_1 = formats; _i < formats_1.length; _i++) {
-        var format = formats_1[_i];
-        var start = format.start, end = format.end, type = format.type;
-        if (walkerIndex < start) {
-            res.push({
-                type: "normal",
-                start: walkerIndex,
-                end: start
-            });
-        }
-        res.push({
-            type: type,
-            start: start,
-            end: end
-        });
-        walkerIndex = end;
-    }
-    if (walkerIndex < length) {
-        res.push({
-            type: "normal",
-            start: walkerIndex,
-            end: length
-        });
-    }
-    return res;
-}
-
-/**
- * Append the provided query params to the URL
- *
- * It will overwrite existing params on the URL if there are conflicts
- * @param url
- * @param params
- */
-function addQueryParametersToURL(url, params) {
-    if (!url) {
-        return undefined;
-    }
-    var existingParams = new URL(url).searchParams;
-    params.forEach(function (value, key) {
-        existingParams.append(key, value);
-    });
-    var newUrl = new URL(url);
-    newUrl.search = existingParams.toString();
-    return newUrl;
-}
-
-var defaultOptions = {};
-function noop$1() {
-}
-function useJsonFetch(url, options) {
-    if (options === void 0) { options = defaultOptions; }
-    var _a = useState({
-        fetching: true
-    }), value = _a[0], setValue = _a[1];
-    var pause = options.pause;
-    useEffect(function () {
-        if (pause) {
-            setValue({
-                fetching: true
-            });
-            return noop$1;
-        }
-        var controller = new AbortController();
-        var signal = controller.signal;
-        var mounted = true;
-        (function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var response, json, e_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 4, , 5]);
-                            return [4 /*yield*/, fetch(url, { signal: signal })];
-                        case 1:
-                            response = _a.sent();
-                            if (!mounted) return [3 /*break*/, 3];
-                            return [4 /*yield*/, response.json()];
-                        case 2:
-                            json = _a.sent();
-                            if (response.ok) {
-                                setValue({
-                                    fetching: false,
-                                    success: true,
-                                    data: json
-                                });
-                            }
-                            else {
-                                setValue({
-                                    fetching: false,
-                                    success: false,
-                                    error: json
-                                });
-                            }
-                            _a.label = 3;
-                        case 3: return [3 /*break*/, 5];
-                        case 4:
-                            e_1 = _a.sent();
-                            if (e_1.name === "AbortError") {
-                                return [2 /*return*/];
-                            }
-                            throw e_1;
-                        case 5: return [2 /*return*/];
-                    }
-                });
-            });
-        })();
-        return function () {
-            mounted = false;
-            controller.abort();
-        };
-    }, [url, pause]);
-    return value;
 }
 
 function useSuggestionsFetch(search, context) {
     var env = useWidgetEnv();
     var baseUrl = env === null || env === void 0 ? void 0 : env.autocompleteSuggestionsUrl;
-    var url = useMemo(function () {
-        var params = new URLSearchParams();
-        params.append("size", "5");
-        params.append("queryText", search);
-        if (context === null || context === void 0 ? void 0 : context.length) {
-            params.append("activeContexts", context.join(","));
-        }
-        return addQueryParametersToURL(baseUrl, params);
-    }, [search, context, baseUrl]);
-    var response = useJsonFetch(url ? "" + url.toString() : "", {
-        pause: !search || !baseUrl
+    return useSuggestionsFetch_1({
+        url: baseUrl,
+        query: search,
+        context: context
     });
-    return useMemo(function () {
-        if (!search) {
-            return undefined;
-        }
-        if (response.fetching === false) {
-            if (response.success) {
-                return response.data;
-            }
-            else {
-                return undefined;
-            }
-        }
-        return undefined;
-    }, [search, response]);
 }
 
 function norm(index, len) {
     return (index + len) % len;
 }
-function mapFormat(format) {
-    var types = Object.keys(format);
-    var type = types[0];
-    var item = format[type];
-    return {
-        type: type,
-        start: item.start,
-        end: item.end
-    };
-}
-function mapFormats(formats) {
-    return formats.map(mapFormat);
-}
-function parseItem(responseItem) {
-    var suggestion = responseItem.suggestion;
-    return {
-        suggestion: suggestion,
-        answer: responseItem.answer,
-        type: responseItem.type,
-        format: mapFormats(responseItem.format)
-    };
-}
-function parse(response) {
-    return {
-        items: response.suggestions.map(parseItem)
-    };
-}
 function useSuggestions(search, context) {
     var _a = useState(), suggestions = _a[0], setSuggestions = _a[1];
-    var _b = useState(0), suggestionIndex = _b[0], setSuggestionIndex = _b[1];
+    var _b = useState(-1), suggestionIndex = _b[0], setSuggestionIndex = _b[1];
     var _c = useState(search), query = _c[0], setQuery = _c[1];
     var _d = useState(context), contextState = _d[0], setContextState = _d[1];
     useEffect(function () {
@@ -7061,15 +7532,10 @@ function useSuggestions(search, context) {
     useEffect(function () {
         setContextState(context);
     }, [context]);
-    var suggestionItem = useMemo(function () {
-        if (suggestionIndex >= 0 && suggestions) {
-            return suggestions.items[suggestionIndex];
-        }
-        return undefined;
-    }, [suggestions, suggestionIndex]);
+    var suggestionItem = useMemo(function () { return suggestions ? findItemByIndex_1(suggestions, suggestionIndex) : undefined; }, [suggestions, suggestionIndex]);
     var shift = useCallback(function (delta) {
         if (suggestions) {
-            var len_1 = suggestions.items.length;
+            var len_1 = getItemsLength_1(suggestions);
             setSuggestionIndex(function (index) { return norm(index + delta + ((index < 0 && delta <= 0) ? 1 : 0), len_1); });
         }
         else {
@@ -7091,20 +7557,26 @@ function useSuggestions(search, context) {
                 break;
         }
     }, [shift]);
-    var suggestionsResponse = useSuggestionsFetch(query, contextState);
+    var suggestionsResponse = useSuggestionsFetch(query || "", contextState);
+    var suggestionsData = suggestionsResponse.state === "success" ? suggestionsResponse.data : undefined;
     var raw = useMemo(function () {
-        return suggestionsResponse ? parse(suggestionsResponse) : undefined;
-    }, [suggestionsResponse]);
+        return suggestionsData ? parseSuggestionsResponse_1(suggestionsData, -1) : undefined;
+    }, [suggestionsData]);
     useEffect(function () {
         var prev = suggestionItem;
         setSuggestions(raw);
         if (prev && raw) {
-            var prevValue = prev.suggestion;
-            for (var i = 0; i < raw.items.length; i++) {
-                var item = raw.items[i];
-                if (match(item, prevValue)) {
-                    setSuggestionIndex(i);
-                    break;
+            var prevValue = prev.text;
+            var index = 0;
+            for (var _i = 0, raw_1 = raw; _i < raw_1.length; _i++) {
+                var group = raw_1[_i];
+                for (var _a = 0, _b = group.items; _a < _b.length; _a++) {
+                    var item = _b[_a];
+                    if (match(item, prevValue)) {
+                        setSuggestionIndex(index);
+                        break;
+                    }
+                    index++;
                 }
             }
         }
@@ -7121,42 +7593,35 @@ function useSuggestions(search, context) {
 }
 
 var DrawerBars = function (props) {
-    return (React.createElement("div", { className: "drawer-bars", onClick: props.onToggle },
-        React.createElement("div", { className: "drawer-bar bar1" }),
-        React.createElement("div", { className: "drawer-bar bar2" })));
-};
-
-var IconButton = function (props) {
-    var type = props.type || "button";
-    var Icon = props.icon;
-    return (React.createElement("button", { type: type, className: "xappw-icon-button " + (props.className || ""), onClick: props.onClick },
-        React.createElement(Icon, null)));
+    return (React$1.createElement("div", { className: "drawer-bars", onClick: props.onToggle },
+        React$1.createElement("div", { className: "drawer-bar bar1" }),
+        React$1.createElement("div", { className: "drawer-bar bar2" })));
 };
 
 var CloseIcon = function () {
     // Sergey, I added this style, you will probably want to change it to be more appropriate
-    return (React.createElement("svg", { style: { color: "grey", paddingRight: "5px" }, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16" },
-        React.createElement("path", { d: "M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z" })));
+    return (React$1.createElement("svg", { style: { color: "grey", paddingRight: "5px" }, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16" },
+        React$1.createElement("path", { d: "M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z" })));
 };
 
 var LeftDownArrowIcon = function () {
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16" },
-        React.createElement("path", { fillRule: "evenodd", d: "M2 13.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1H3.707L13.854 2.854a.5.5 0 0 0-.708-.708L3 12.293V7.5a.5.5 0 0 0-1 0v6z" })));
+    return (React$1.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16" },
+        React$1.createElement("path", { fillRule: "evenodd", d: "M2 13.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1H3.707L13.854 2.854a.5.5 0 0 0-.708-.708L3 12.293V7.5a.5.5 0 0 0-1 0v6z" })));
 };
 
 var SendIcon = function () {
-    return (React.createElement("svg", { viewBox: "80.208 98.129 313.069 282.823", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("g", { transform: "matrix(0.024498, 0, 0, -0.038359, 79.83091, 381.182404)", fill: "currentColor", stroke: "none" },
-            React.createElement("path", { d: "M12670 7345 c-63 -18 -272 -77 -465 -130 -192 -53 -478 -132 -635 -175 -508 -141 -1091 -302 -2345 -649 -676 -187 -2038 -563 -3025 -836 -987 -273 -2072 -573 -2410 -666 -338 -94 -802 -222 -1030 -285 -1857 -514 -2579 -714 -2684 -742 -38 -10 -65 -21 -60 -24 5 -3 67 -22 139 -41 72 -20 326 -90 565 -157 239 -67 611 -170 825 -230 215 -60 586 -163 825 -230 239 -67 491 -137 560 -156 l126 -34 974 439 c1397 629 4128 1858 6050 2724 910 410 1826 822 2035 917 209 94 387 173 395 176 35 10 -66 -39 -8200 -3928 -586 -280 -1068 -512 -1071 -516 -3 -4 33 -117 82 -252 76 -213 355 -996 765 -2147 65 -183 120 -330 122 -329 1 2 114 558 250 1236 l248 1233 3455 2064 c1900 1135 3670 2193 3933 2351 264 158 491 293 505 301 62 33 -5 -12 -271 -182 -1671 -1070 -7188 -4613 -7188 -4617 0 -7 3661 -2455 3669 -2454 4 1 3713 6853 3977 7347 8 15 11 27 7 26 -5 0 -60 -15 -123 -34z" }),
-            React.createElement("path", { d: "M5030 2232 c-15 -61 -479 -1861 -531 -2058 -21 -83 -39 -154 -39 -158 0 -3 369 330 820 740 452 411 817 750 813 754 -11 10 -1025 754 -1039 763 -8 4 -16 -10 -24 -41z" }))));
+    return (React$1.createElement("svg", { viewBox: "80.208 98.129 313.069 282.823", xmlns: "http://www.w3.org/2000/svg" },
+        React$1.createElement("g", { transform: "matrix(0.024498, 0, 0, -0.038359, 79.83091, 381.182404)", fill: "currentColor", stroke: "none" },
+            React$1.createElement("path", { d: "M12670 7345 c-63 -18 -272 -77 -465 -130 -192 -53 -478 -132 -635 -175 -508 -141 -1091 -302 -2345 -649 -676 -187 -2038 -563 -3025 -836 -987 -273 -2072 -573 -2410 -666 -338 -94 -802 -222 -1030 -285 -1857 -514 -2579 -714 -2684 -742 -38 -10 -65 -21 -60 -24 5 -3 67 -22 139 -41 72 -20 326 -90 565 -157 239 -67 611 -170 825 -230 215 -60 586 -163 825 -230 239 -67 491 -137 560 -156 l126 -34 974 439 c1397 629 4128 1858 6050 2724 910 410 1826 822 2035 917 209 94 387 173 395 176 35 10 -66 -39 -8200 -3928 -586 -280 -1068 -512 -1071 -516 -3 -4 33 -117 82 -252 76 -213 355 -996 765 -2147 65 -183 120 -330 122 -329 1 2 114 558 250 1236 l248 1233 3455 2064 c1900 1135 3670 2193 3933 2351 264 158 491 293 505 301 62 33 -5 -12 -271 -182 -1671 -1070 -7188 -4613 -7188 -4617 0 -7 3661 -2455 3669 -2454 4 1 3713 6853 3977 7347 8 15 11 27 7 26 -5 0 -60 -15 -123 -34z" }),
+            React$1.createElement("path", { d: "M5030 2232 c-15 -61 -479 -1861 -531 -2058 -21 -83 -39 -154 -39 -158 0 -3 369 330 820 740 452 411 817 750 813 754 -11 10 -1025 754 -1039 763 -8 4 -16 -10 -24 -41z" }))));
 };
 
 var SendButton = function (props) {
-    return (React.createElement(IconButton, { className: "xappw-send-button", onClick: props.onClick, icon: SendIcon }));
+    return (React$1.createElement(IconButton_1, { className: "xappw-send-button ".concat(props.className || ""), onClick: props.onClick, icon: SendIcon }));
 };
 
 var Input = function (props) {
-    var value = props.value, suggestion = props.suggestion, onChange = props.onChange, onSuggestionCommand = props.onSuggestionCommand;
+    var value = props.value, suggestion = props.suggestion, onChange = props.onChange, onSubmit = props.onSubmit, onSuggestionCommand = props.onSuggestionCommand;
     var _a = useState(false), dragover = _a[0], setDragover = _a[1];
     function onDragOver(event) {
         setDragover(true);
@@ -7170,32 +7635,30 @@ var Input = function (props) {
     function onDragLeave() {
         setDragover(false);
     }
-    function handleOnSubmit(event) {
+    var handleOnSubmit = useCallback(function (event) {
         event && event.preventDefault();
-        props.onSubmit(value); // send to the widget
-    }
-    var handleOnChange = useCallback(function (event) {
-        var val = event.target.value;
-        onChange(val);
-    }, [onChange]);
+        onSubmit(value); // send to the widget
+    }, [value, onSubmit]);
     var handleClear = useCallback(function () {
-        onChange("");
+        onChange({
+            text: "",
+            formats: []
+        });
     }, [onChange]);
     var handleKeyDown = useCallback(function (event) {
         if (suggestion) {
             if (event.key === "End" || event.key === "ArrowRight" || event.key === "Enter") {
-                var newVal = suggestion.suggestion;
-                onChange(newVal);
+                onChange(suggestion);
                 return;
             }
         }
         if (onSuggestionCommand) {
             if (event.key === "ArrowUp") {
-                onSuggestionCommand("next");
+                onSuggestionCommand("prev");
                 event.preventDefault();
             }
             else if (event.key === "ArrowDown") {
-                onSuggestionCommand("prev");
+                onSuggestionCommand("next");
                 event.preventDefault();
             }
             else if (event.key === "Escape") {
@@ -7204,116 +7667,59 @@ var Input = function (props) {
             }
         }
     }, [suggestion, onChange, onSuggestionCommand]);
-    return (React.createElement("div", { className: "xappw-input-container " + props.addClass + " " + (dragover ? "drag-drop-zone" : ""), onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave },
-        React.createElement("form", { className: "xappw-input-form", onSubmit: handleOnSubmit },
-            suggestion && React.createElement("div", { className: "xappw-input-back", key: "suggestion" }),
-            React.createElement("input", { key: "input", className: "xappw-input", placeholder: "Type your question here...", onChange: handleOnChange, onKeyDown: handleKeyDown, 
+    return (React$1.createElement("div", { className: "xappw-input-container ".concat(props.addClass, " ").concat(dragover ? "drag-drop-zone" : ""), onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave },
+        React$1.createElement("form", { className: "xappw-input-form", onSubmit: handleOnSubmit },
+            React$1.createElement(RichInput_1, { key: "input", className: "xappw-input", placeholder: "Type your question here...", onInput: onChange, onChange: onChange, onKeyDown: handleKeyDown, 
                 // onFocus={onFocus}
-                value: value || "" }),
-            React.createElement("div", { className: "xappw-input-form__buttons" },
-                value && React.createElement(IconButton, { icon: CloseIcon, onClick: handleClear }),
-                React.createElement(SendButton, { onClick: handleOnSubmit })))));
-};
-
-var SuggestionsItem = function (props) {
-    var data = props.data, onClick = props.onClick, onUse = props.onUse, onHover = props.onHover;
-    var suggestion = data.suggestion;
-    var handleClick = useCallback(function () {
-        onClick(data);
-    }, [data, onClick]);
-    var handleUse = useCallback(function (ev) {
-        onUse(data);
-        ev.stopPropagation();
-    }, [data, onUse]);
-    var handleHover = useCallback(function () {
-        onHover(data);
-    }, [data, onHover]);
-    var formats = useMemo(function () { return mapFormat$1(data.format, suggestion.length); }, [data.format, suggestion]);
-    var canUse = data.type !== "FAQ";
-    return (React.createElement("div", { className: "xapp-suggestions-item " + (props.current ? "xapp-suggestions-item--current" : ""), onClick: handleClick, onMouseEnter: handleHover },
-        React.createElement("div", { className: "xapp-suggestions-item__texts" }, formats.map(function (format, index) { return (React.createElement("span", { className: "xapp-suggestions-item__text xapp-suggestions-item__text--" + format.type, key: index }, suggestion.substring(format.start, format.end))); })),
-        canUse && React.createElement(IconButton, { className: "xapp-suggestions-item__use", onClick: handleUse, icon: LeftDownArrowIcon })));
+                value: value }),
+            React$1.createElement("div", { className: "xappw-input-form__buttons" },
+                value.text && React$1.createElement(IconButton_1, { icon: CloseIcon, className: "xappw-input-form__btn", onClick: handleClear }),
+                React$1.createElement(SendButton, { className: "xappw-input-form__btn", onClick: handleOnSubmit })))));
 };
 
-function getLabel(type) {
-    switch (type) {
-        case "FAQ":
-            return "FAQs";
-        case "INTENT":
-            return "Suggestions";
-        case "HISTORICAL":
-            return "Suggestions";
-        default:
-            throw throwBadKind(type);
-    }
-}
-var SuggestionsGroupItem = function (props) {
-    var group = props.group, currentIndex = props.currentIndex;
-    var type = group.type, items = group.items, startIndex = group.startIndex;
-    return (React.createElement("div", { className: "xappw-suggestions-group" },
-        React.createElement("label", { className: "xappw-suggestions-group__label" }, getLabel(type)),
-        React.createElement("div", { className: "xappw-suggestions-group__items" }, items.map(function (item, itemIndex) {
-            return React.createElement(SuggestionsItem, { key: itemIndex, data: item, current: currentIndex === itemIndex + startIndex, onClick: props.onItemClick, onUse: props.onItemUse, onHover: props.onItemHover });
-        }))));
-};
-
-function normalizeType(type) {
-    switch (type) {
-        case "HISTORICAL":
-            return "INTENT";
-        default:
-            return type;
-    }
-}
-var order = ["FAQ", "INTENT", "HISTORICAL"];
-var ordersMap = order.reduce(function (prev, cur, index) {
-    prev[cur] = index;
-    return prev;
-}, {});
-function compareSuggestionItems(left, right) {
-    return (ordersMap[right.type] - ordersMap[left.type]);
+function createActions(onItemUse) {
+    return function (innerProps) {
+        var data = innerProps.data;
+        var canUse = data.type !== "FAQ";
+        var handleUse = useCallback(function (ev) {
+            onItemUse(data);
+            ev.stopPropagation();
+        }, [data]);
+        if (!canUse) {
+            return React$1.createElement(React$1.Fragment, null);
+        }
+        return (React$1.createElement(IconButton_1, { className: "xappw-suggestions__use", onClick: handleUse, icon: LeftDownArrowIcon }));
+    };
 }
 var Suggestions = function (props) {
-    var len = props.data.items.length;
+    var data = props.data, onItemUse = props.onItemUse;
+    var len = data.length;
     var currentIndex = len > 0 ? props.index : NaN;
     var _a = useState(), activeItem = _a[0], setActiveItem = _a[1];
-    var item = props.data.items[currentIndex];
+    var item = useMemo(function () { return findItemByIndex_1(data, currentIndex); }, [data, currentIndex]);
     useEffect(function () {
         setActiveItem(item);
     }, [item]);
-    var groups = useMemo(function () {
-        var items = __spreadArray([], props.data.items, true).sort(compareSuggestionItems);
-        return items.reduce(function (result, current, index) {
-            if (result.length) {
-                var prevGroup = result[result.length - 1];
-                if (prevGroup.type === normalizeType(current.type)) {
-                    prevGroup.items.push(current);
-                    return result;
-                }
-            }
-            result.push({
-                type: normalizeType(current.type),
-                items: [current],
-                startIndex: index
-            });
-            return result;
-        }, []);
-    }, [props.data]);
-    return (React.createElement("div", { className: "xappw-suggestions " + (props.className || "") },
-        (activeItem === null || activeItem === void 0 ? void 0 : activeItem.answer) && React.createElement("div", { className: "xappw-suggestions__answer" }, activeItem.answer),
-        !!groups.length && React.createElement("div", { className: "xappw-suggestions__groups" }, groups.map(function (group, index) { return (React.createElement(SuggestionsGroupItem, { key: index, group: group, currentIndex: currentIndex, onItemClick: props.onItemClick, onItemUse: props.onItemUse, onItemHover: setActiveItem })); }))));
+    var actions = useMemo(function () { return createActions(onItemUse); }, [onItemUse]);
+    return (React$1.createElement("div", { className: "xappw-suggestions ".concat(props.className || "") },
+        (activeItem === null || activeItem === void 0 ? void 0 : activeItem.content) && React$1.createElement("div", { className: "xappw-suggestions__answer" }, activeItem.content),
+        !!data.length &&
+            React$1.createElement(SuggestionsList_1, { suggestions: data, index: currentIndex, className: "xappw-suggestions__groups", itemActions: actions, onItemClick: props.onItemClick, onItemHover: setActiveItem })));
 };
 
 var ChatFooter = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     var onSubmit = props.onSubmit;
-    var _e = useState(false), drawer = _e[0], setDrawerState = _e[1]; // false initially
-    var _f = useState(), suggestionSearch = _f[0], setSuggestionSearch = _f[1];
+    var _d = useState(false), drawer = _d[0], setDrawerState = _d[1]; // false initially
+    var _e = useState(), suggestionSearch = _e[0], setSuggestionSearch = _e[1];
     var contexts = useSelector(function (state) { return state.activeContexts; });
     var suggestions = useSuggestions(suggestionSearch, contexts);
     var menuItemsRaw = (_b = (_a = useWidgetEnv()) === null || _a === void 0 ? void 0 : _a.menu) === null || _b === void 0 ? void 0 : _b.items;
     var menuItems = useMemo(function () { return menuItemsRaw ? menuItemsRaw.map(function (item) { return item.label; }) : []; }, [menuItemsRaw]);
-    var _g = useState(""), input = _g[0], setInput = _g[1];
+    var _f = useState({
+        text: "",
+        formats: []
+    }), input = _f[0], setInput = _f[1];
     function toggleDrawer() {
         var newDrawer = !drawer;
         setDrawerState(newDrawer);
@@ -7325,29 +7731,32 @@ var ChatFooter = function (props) {
     }
     function handleChange(val) {
         setInput(val);
-        props.onChange(val);
-        setSuggestionSearch(val);
+        props.onChange(val.text);
+        setSuggestionSearch(val.text);
     }
     var handleSubmit = useCallback(function (message) {
         setSuggestionSearch("");
-        setInput("");
-        onSubmit(message);
+        setInput({
+            text: "",
+            formats: []
+        });
+        onSubmit(message.text);
     }, [onSubmit]);
     var handleItemClick = useCallback(function (data) {
-        handleSubmit(data.suggestion);
+        handleSubmit(data);
     }, [handleSubmit]);
     var handleItemUse = useCallback(function (data) {
-        setInput(data.suggestion);
-        setSuggestionSearch(data.suggestion);
+        setInput(data);
+        setSuggestionSearch(data.text);
     }, []);
-    return (React.createElement("div", { className: "chat-footer" },
+    return (React$1.createElement("div", { className: "chat-footer" },
         menuItems.length ?
-            React.createElement(React.Fragment, null,
-                React.createElement(ChatMenu, { opened: drawer, onItemClick: handleMenuItem, items: menuItems }),
-                React.createElement("div", { className: "chat-footer__menu-icon" },
-                    React.createElement(DrawerBars, { onToggle: toggleDrawer }))) : React.createElement(React.Fragment, null),
-        ((_d = (_c = suggestions.suggestions) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.length) > 0 && React.createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, onItemClick: handleItemClick, onItemUse: handleItemUse }),
-        React.createElement(Input, { addClass: "chat-footer__input " + (props.isChatting ? "visible" : ""), suggestion: suggestions.item, value: input, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
+            React$1.createElement(React$1.Fragment, null,
+                React$1.createElement(ChatMenu, { opened: drawer, onItemClick: handleMenuItem, items: menuItems }),
+                React$1.createElement("div", { className: "chat-footer__menu-icon" },
+                    React$1.createElement(DrawerBars, { onToggle: toggleDrawer }))) : React$1.createElement(React$1.Fragment, null),
+        ((_c = suggestions.suggestions) === null || _c === void 0 ? void 0 : _c.length) > 0 && React$1.createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, onItemClick: handleItemClick, onItemUse: handleItemUse }),
+        React$1.createElement(Input, { addClass: "chat-footer__input " + (props.isChatting ? "visible" : ""), suggestion: suggestions.item, value: input, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
             // onFocus={this.inputOnFocus}
             onFileUpload: props.onFileUpload })));
 };
@@ -7383,12 +7792,12 @@ var MiddlewareContextFactory = /** @class */ (function () {
 var CardContainer = function (props) {
     function renderIcon() {
         var isString = typeof (props.icon) === "string";
-        return (React.createElement("div", { className: "card-container__icon" }, !isString && props.icon));
+        return (React$1.createElement("div", { className: "card-container__icon" }, !isString && props.icon));
     }
-    return (React.createElement("div", { className: "card-container " + props.addClass },
+    return (React$1.createElement("div", { className: "card-container ".concat(props.addClass) },
         renderIcon(),
-        React.createElement("div", { className: "card-container__content " + props.contentAddClass },
-            React.createElement("div", { className: "card-container__title" }, props.title),
+        React$1.createElement("div", { className: "card-container__content ".concat(props.contentAddClass) },
+            React$1.createElement("div", { className: "card-container__title" }, props.title),
             props.children)));
 };
 
@@ -7417,18 +7826,18 @@ var ChatRating = function (props) {
         return null;
     }
     if (!props.hasRating) {
-        return (React.createElement(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card" },
+        return (React$1.createElement(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card" },
             props.agent.displayName,
             " has requested you to rate the chat service.",
-            React.createElement("div", { className: "buttons-container" },
-                React.createElement(ActionButton, { addClass: "button button-rate-bad", label: "Rate Bad", onClick: rateBadButtonOnClick }),
-                React.createElement(ActionButton, { addClass: "button button-rate-good", label: "Rate Good", onClick: rateGoodButtonOnClick }))));
+            React$1.createElement("div", { className: "buttons-container" },
+                React$1.createElement(ActionButton, { addClass: "button button-rate-bad", label: "Rate Bad", onClick: rateBadButtonOnClick }),
+                React$1.createElement(ActionButton, { addClass: "button button-rate-good", label: "Rate Good", onClick: rateGoodButtonOnClick }))));
     }
     else {
-        return (React.createElement(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card" },
+        return (React$1.createElement(CardContainer, { title: "Chat Rating", addClass: "chat-rating-card" },
             "You have rated the chat service.",
-            React.createElement("div", { className: "buttons-container" },
-                React.createElement(ActionButton, { addClass: "button button-rate-again", label: "Rate again", onClick: rateAgainButtonOnClick }))));
+            React$1.createElement("div", { className: "buttons-container" },
+                React$1.createElement(ActionButton, { addClass: "button button-rate-again", label: "Rate again", onClick: rateAgainButtonOnClick }))));
     }
 };
 
@@ -7437,12 +7846,12 @@ var ChatRatingContainer = function (props) {
     var handleRate = useCallback(function (rating) {
         dispatch(sendChatRating(rating));
     }, [dispatch]);
-    return React.createElement(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate });
+    return React$1.createElement(ChatRating, { agent: props.agent, hasRating: props.hasRating, shouldDisplay: props.shouldDisplay, onRate: handleRate });
 };
 
 var MessageSvg = function (_) {
-    return (React.createElement("svg", { className: "message-svg", width: "16", height: "12", viewBox: "0 0 16 12" },
-        React.createElement("path", { d: "M14.4 0H1.6C.72 0 .008.675.008 1.5L0 10.5c0 .825.72 1.5 1.6 1.5h12.8c.88 0 1.6-.675 1.6-1.5v-9c0-.825-.72-1.5-1.6-1.5zm0 3L8 6.75 1.6 3V1.5L8 5.25l6.4-3.75V3z", fill: "#424242", fillRule: "evenodd" })));
+    return (React$1.createElement("svg", { className: "message-svg", width: "16", height: "12", viewBox: "0 0 16 12" },
+        React$1.createElement("path", { d: "M14.4 0H1.6C.72 0 .008.675.008 1.5L0 10.5c0 .825.72 1.5 1.6 1.5h12.8c.88 0 1.6-.675 1.6-1.5v-9c0-.825-.72-1.5-1.6-1.5zm0 3L8 6.75 1.6 3V1.5L8 5.25l6.4-3.75V3z", fill: "#424242", fillRule: "evenodd" })));
 };
 
 var MessageForm = function (props) {
@@ -7478,30 +7887,30 @@ var MessageForm = function (props) {
         setSent(false);
     }
     function renderSent() {
-        return (React.createElement("div", { key: "sent", className: "message-form--sent" },
+        return (React$1.createElement("div", { key: "sent", className: "message-form--sent" },
             "Your message has been sent. We will get back to you as soon as possible.",
-            React.createElement(ActionButton, { addClass: "button-resend", label: "Send another", onClick: sendAnother })));
+            React$1.createElement(ActionButton, { addClass: "button-resend", label: "Send another", onClick: sendAnother })));
     }
     function renderForm() {
-        return (React.createElement("form", { ref: form, key: "not-sent", className: "message-form", onSubmit: send },
-            React.createElement("div", { className: "content" },
-                React.createElement("div", { className: "section" },
-                    React.createElement("label", { className: "label" }, "Name"),
-                    React.createElement("input", { ref: name, maxLength: 255 })),
-                React.createElement("div", { className: "section" },
-                    React.createElement("label", { className: "label" }, "Email"),
-                    React.createElement("input", { ref: email, onChange: emailChanged, type: "email", required: true, pattern: EMAIL_REGEX })),
-                React.createElement("div", { className: "section" },
-                    React.createElement("label", { className: "label" }, "Message"),
-                    React.createElement("textarea", { required: true, ref: message }))),
-            React.createElement("div", { className: "button-container" },
-                React.createElement(ActionButton, { type: "submit", addClass: "message-form__submit", label: "Send" }))));
-    }
-    return (React.createElement(CardContainer, { title: props.title, addClass: "offline-card", contentAddClass: sent ? "sent" : "", icon: React.createElement(MessageSvg, null) }, sent ? renderSent() : renderForm()));
+        return (React$1.createElement("form", { ref: form, key: "not-sent", className: "message-form", onSubmit: send },
+            React$1.createElement("div", { className: "content" },
+                React$1.createElement("div", { className: "section" },
+                    React$1.createElement("label", { className: "label" }, "Name"),
+                    React$1.createElement("input", { ref: name, maxLength: 255 })),
+                React$1.createElement("div", { className: "section" },
+                    React$1.createElement("label", { className: "label" }, "Email"),
+                    React$1.createElement("input", { ref: email, onChange: emailChanged, type: "email", required: true, pattern: EMAIL_REGEX })),
+                React$1.createElement("div", { className: "section" },
+                    React$1.createElement("label", { className: "label" }, "Message"),
+                    React$1.createElement("textarea", { required: true, ref: message }))),
+            React$1.createElement("div", { className: "button-container" },
+                React$1.createElement(ActionButton, { type: "submit", addClass: "message-form__submit", label: "Send" }))));
+    }
+    return (React$1.createElement(CardContainer, { title: props.title, addClass: "offline-card", contentAddClass: sent ? "sent" : "", icon: React$1.createElement(MessageSvg, null) }, sent ? renderSent() : renderForm()));
 };
 
 var OfflineForm = function (props) {
-    return React.createElement(MessageForm, { title: "Offline message card title", onSubmit: props.onSubmit });
+    return React$1.createElement(MessageForm, { title: "Offline message card title", onSubmit: props.onSubmit });
 };
 
 var OfflineFormContainer = function (_) {
@@ -7509,7 +7918,7 @@ var OfflineFormContainer = function (_) {
     var handleSubmit = useCallback(function (data) {
         dispatch(sendOfflineMsg(data));
     }, [dispatch]);
-    return React.createElement(OfflineForm, { onSubmit: handleSubmit });
+    return React$1.createElement(OfflineForm, { onSubmit: handleSubmit });
 };
 
 var PrechatForm = function (props) {
@@ -7519,7 +7928,7 @@ var PrechatForm = function (props) {
         onSubmit(msg);
         setSent(true);
     }, [onSubmit]);
-    return (React.createElement(React.Fragment, null, !sent && React.createElement(MessageForm, { title: "Introduce yourself!", onSubmit: handleSubmit })));
+    return (React$1.createElement(React$1.Fragment, null, !sent && React$1.createElement(MessageForm, { title: "Introduce yourself!", onSubmit: handleSubmit })));
 };
 
 var PrechatFormContainer = function (_) {
@@ -7534,7 +7943,7 @@ var PrechatFormContainer = function (_) {
         }));
         dispatch(executeAction(data.message));
     }, [dispatch]);
-    return React.createElement(PrechatForm, { onSubmit: handleSubmit });
+    return React$1.createElement(PrechatForm, { onSubmit: handleSubmit });
 };
 
 var defaultProps$1 = {
@@ -7544,8 +7953,8 @@ var QueuePosition = function (props) {
     if (props === void 0) { props = defaultProps$1; }
     if (props.position <= 0)
         return null;
-    return (React.createElement("div", { className: "system-msg-container" },
-        React.createElement("span", { className: "system-msg" },
+    return (React$1.createElement("div", { className: "system-msg-container" },
+        React$1.createElement("span", { className: "system-msg" },
             "Queue position: ",
             props.position)));
 };
@@ -7553,34 +7962,34 @@ var QueuePosition = function (props) {
 function getMessageByType(msg) {
     switch (msg.type) {
         case "chat.memberjoin":
-            return msg.user.displayName + " has joined the chat";
+            return "".concat(msg.user.displayName, " has joined the chat");
         case "chat.memberleave":
-            return msg.user.displayName + " has left the chat";
+            return "".concat(msg.user.displayName, " has left the chat");
         case "chat.rating":
             if (!msg.newRating) {
                 return "You have removed the chat rating";
             }
             else {
                 var rating = convertToSentenceCase(msg.newRating);
-                return "You have rated the chat service " + rating;
+                return "You have rated the chat service ".concat(rating);
             }
         default:
             return JSON.stringify(msg);
     }
 }
 var SystemMessage = function (props) {
-    return (React.createElement("div", { className: "system-msg-container" },
-        React.createElement("span", { className: "system-msg" }, getMessageByType(props.message))));
+    return (React$1.createElement("div", { className: "system-msg-container" },
+        React$1.createElement("span", { className: "system-msg" }, getMessageByType(props.message))));
 };
 function convertToSentenceCase(s) {
     return s[0].toUpperCase() + s.slice(1);
 }
 
 var TypingIndicator = function (_) {
-    return (React.createElement("div", { className: "typing-indicator" },
-        React.createElement("div", { className: "typing-indicator-part" }),
-        React.createElement("div", { className: "typing-indicator-part" }),
-        React.createElement("div", { className: "typing-indicator-part" })));
+    return (React$1.createElement("div", { className: "typing-indicator" },
+        React$1.createElement("div", { className: "typing-indicator-part" }),
+        React$1.createElement("div", { className: "typing-indicator-part" }),
+        React$1.createElement("div", { className: "typing-indicator-part" })));
 };
 
 /**
@@ -7589,13 +7998,13 @@ var TypingIndicator = function (_) {
 var TypingStatus = function (props) {
     var agent_names = Object.values(props.agents)
         .filter(function (agent) { return agent.typing; });
-    return (React.createElement(React.Fragment, null, agent_names.map(function (agent) {
-        return (React.createElement("div", { className: "chat-msg-container-wrapper", key: "typing-status-" + agent.user.nick },
-            React.createElement("div", { key: agent.user.nick, className: "chat-msg-container agent chat-typing-progress" },
-                React.createElement(ChatMessagePart, { user: agent.user, showAvatar: true },
-                    React.createElement("div", { className: "chat-msg" },
-                        React.createElement(ChatMessageBubble, { owner: "others", hasTail: true },
-                            React.createElement(TypingIndicator, null)))))));
+    return (React$1.createElement(React$1.Fragment, null, agent_names.map(function (agent) {
+        return (React$1.createElement("div", { className: "chat-msg-container-wrapper", key: "typing-status-".concat(agent.user.nick) },
+            React$1.createElement("div", { key: agent.user.nick, className: "chat-msg-container agent chat-typing-progress" },
+                React$1.createElement(ChatMessagePart, { user: agent.user, showAvatar: true },
+                    React$1.createElement("div", { className: "chat-msg" },
+                        React$1.createElement(ChatMessageBubble, { owner: "others", hasTail: true },
+                            React$1.createElement(TypingIndicator, null)))))));
     })));
 };
 
@@ -7645,20 +8054,20 @@ var MessageList = function (props) {
         switch (msg.type) {
             case "chat.file":
             case "chat.msg":
-                return (React.createElement(ChatMessage, { key: msg.type + msg.timestamp, message: msg, sibling: sibling, agent: user, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user) }));
+                return (React$1.createElement(ChatMessage, { key: msg.type + msg.timestamp, message: msg, sibling: sibling, agent: user, messageMiddleware: props.messageMiddleware, middlewareContext: ctxCache.resolve(user) }));
             case "chat.memberjoin":
             case "chat.memberleave":
             case "chat.rating":
             case "chat.typing":
-                return (React.createElement(SystemMessage, { key: msg.type + msg.timestamp, message: msg }));
+                return (React$1.createElement(SystemMessage, { key: msg.type + msg.timestamp, message: msg }));
             case "chat.request.rating":
-                return (React.createElement(ChatRatingContainer, { key: msg.type + msg.timestamp, agent: user, hasRating: props.hasRating, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
+                return (React$1.createElement(ChatRatingContainer, { key: msg.type + msg.timestamp, agent: user, hasRating: props.hasRating, shouldDisplay: msg.timestamp === props.lastRatingRequestTimestamp }));
             case "chat.offline":
-                return React.createElement(OfflineFormContainer, { key: "offline-" + msg.timestamp });
+                return React$1.createElement(OfflineFormContainer, { key: "offline-".concat(msg.timestamp) });
             case "chat.prechat":
-                return React.createElement(PrechatFormContainer, { key: "prechat" });
+                return React$1.createElement(PrechatFormContainer, { key: "prechat" });
             default:
-                return React.createElement("div", { key: +new Date() },
+                return React$1.createElement("div", { key: +new Date() },
                     "Unhandled message: ",
                     JSON.stringify(msg));
         }
@@ -7681,23 +8090,23 @@ var MessageList = function (props) {
         });
     }
     var agents = props.agents, queuePosition = props.queuePosition;
-    return (React.createElement("div", { className: "message-list-container" },
-        React.createElement("div", { className: "message-list-container__msgs" },
+    return (React$1.createElement("div", { className: "message-list-container" },
+        React$1.createElement("div", { className: "message-list-container__msgs" },
             renderAll(),
-            React.createElement("div", { ref: messagesEndRef, style: { float: "left", clear: "both" } }),
-            React.createElement(QueuePosition, { position: queuePosition }),
-            React.createElement(TypingStatus, { agents: agents })),
-        React.createElement(ChatChipsContainer, null)));
+            React$1.createElement("div", { ref: messagesEndRef, style: { float: "left", clear: "both" } }),
+            React$1.createElement(QueuePosition, { position: queuePosition }),
+            React$1.createElement(TypingStatus, { agents: agents })),
+        React$1.createElement(ChatChipsContainer, null)));
 };
 
 var ServerOffline = function () {
-    return React.createElement("div", { className: "server-offline" },
-        React.createElement("h2", null, "Chat is currently unavailable"),
-        React.createElement("h3", null, "Server is offline"));
+    return React$1.createElement("div", { className: "server-offline" },
+        React$1.createElement("h2", null, "Chat is currently unavailable"),
+        React$1.createElement("h3", null, "Server is offline"));
 };
 
 var MinimizeButton = function (props) {
-    return React.createElement("div", { className: "minimize-button", onClick: props.onClick });
+    return React$1.createElement("div", { className: "minimize-button", onClick: props.onClick });
 };
 
 var DEFAULT_STATUS_CONFIG = {
@@ -7717,23 +8126,23 @@ function getStatusText(status, config) {
 }
 var StatusContainer = function (props) {
     var _a;
-    return (React.createElement("div", { className: "status-container" },
-        React.createElement("div", { className: "status-container__avatar" },
-            React.createElement(Avatar, { entity: props.agent })),
-        React.createElement("div", { className: "status-text" },
-            React.createElement("span", null, getStatusText(props.accountStatus, (_a = props.config) === null || _a === void 0 ? void 0 : _a.status))),
+    return (React$1.createElement("div", { className: "status-container" },
+        React$1.createElement("div", { className: "status-container__avatar" },
+            React$1.createElement(Avatar, { entity: props.agent })),
+        React$1.createElement("div", { className: "status-text" },
+            React$1.createElement("span", null, getStatusText(props.accountStatus, (_a = props.config) === null || _a === void 0 ? void 0 : _a.status))),
         props.canMinimize &&
-            React.createElement(MinimizeButton, { onClick: props.minimizeOnClick })));
+            React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick })));
 };
 
 function buildStyleContent(theme) {
     var _a, _b, _c, _d;
-    return "\n:root {\n" + buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _b === void 0 ? void 0 : _b.title)), withPrefix("subtitle-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.subtitle)), withPrefix("action-", getButtonStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))) + "\n}";
+    return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _b === void 0 ? void 0 : _b.title)), withPrefix("subtitle-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.subtitle)), withPrefix("action-", getButtonStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))), "\n}");
 }
 function WidgetStylesheet(props) {
     var theme = props.theme;
     var stylesContent = buildStyleContent(theme);
-    return (React.createElement("style", null, stylesContent));
+    return (React$1.createElement("style", null, stylesContent));
 }
 function buildVariables(gen) {
     var result = gen.next();
@@ -7741,7 +8150,7 @@ function buildVariables(gen) {
     while (result.done === false) {
         var _a = result.value, key = _a[0], value = _a[1];
         if (value !== undefined && value !== null && value !== "") {
-            res += key + ": " + value + ";\n\r";
+            res += "".concat(key, ": ").concat(value, ";\n\r");
         }
         result = gen.next();
     }
@@ -7749,14 +8158,14 @@ function buildVariables(gen) {
 }
 function withPrefix(prefix, gen) {
     var result;
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0:
                 result = gen.next();
                 _a.label = 1;
             case 1:
                 if (!!result.done) return [3 /*break*/, 3];
-                return [4 /*yield*/, ["" + prefix + result.value[0], result.value[1]]];
+                return [4 /*yield*/, ["".concat(prefix).concat(result.value[0]), result.value[1]]];
             case 2:
                 _a.sent();
                 result = gen.next();
@@ -7771,7 +8180,7 @@ function union() {
     for (_i = 0; _i < arguments.length; _i++) {
         children[_i] = arguments[_i];
     }
-    return __generator(this, function (_b) {
+    return __generator$1(this, function (_b) {
         switch (_b.label) {
             case 0:
                 _a = 0, children_1 = children;
@@ -7796,7 +8205,7 @@ function union() {
     });
 }
 function single(key, value) {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, [key, value]];
             case 1:
@@ -7806,7 +8215,7 @@ function single(key, value) {
     });
 }
 function empty() {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         return [2 /*return*/];
     });
 }
@@ -7826,7 +8235,7 @@ function getMessageStyle(style) {
     return union(single('bubble-color', style === null || style === void 0 ? void 0 : style.bubbleColor), getTextStyle(style === null || style === void 0 ? void 0 : style.text));
 }
 function getSize(style) {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, ['width', style === null || style === void 0 ? void 0 : style.width]];
             case 1:
@@ -7839,7 +8248,7 @@ function getSize(style) {
     });
 }
 function getMargins(style) {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 5];
@@ -7861,7 +8270,7 @@ function getMargins(style) {
     });
 }
 function getPaddings(style) {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 5];
@@ -7883,7 +8292,7 @@ function getPaddings(style) {
     });
 }
 function getTextStyle(style) {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 6];
@@ -7908,7 +8317,7 @@ function getTextStyle(style) {
     });
 }
 function getBackgroundStyle(style) {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, ["background", style]];
             case 1:
@@ -7918,7 +8327,7 @@ function getBackgroundStyle(style) {
     });
 }
 function getButtonStyle(style) {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, ['button-color', style === null || style === void 0 ? void 0 : style.color]];
             case 1:
@@ -7934,7 +8343,7 @@ function getMenuStyle(style) {
     return union(withPrefix("item-", getMenuItemStyle(style === null || style === void 0 ? void 0 : style.item)));
 }
 function getBorderStyle(style) {
-    return __generator(this, function (_a) {
+    return __generator$1(this, function (_a) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 4];
@@ -7985,9 +8394,9 @@ var ChatWidgetWrapper = function (props) {
         return (__assign(__assign({}, rawConfig), { connection: connection, assetUrl: (_a = connection === null || connection === void 0 ? void 0 : connection.serverUrl) !== null && _a !== void 0 ? _a : defaultServerUrl, env: rawConfig }));
     }, [connection, rawConfig]);
     var chatServer = useChatServer(connection);
-    return (React.createElement(ChatConfigContext.Provider, { value: config },
-        React.createElement(ChatServerContext.Provider, { value: chatServer },
-            React.createElement(ChatWidget, __assign({}, props)))));
+    return (React$1.createElement(ChatConfigContext.Provider, { value: config },
+        React$1.createElement(ChatServerContext.Provider, { value: chatServer },
+            React$1.createElement(ChatWidget, __assign({}, props)))));
 };
 var ChatWidget = function (props) {
     var _a, _b, _c, _d, _e, _f;
@@ -7998,10 +8407,10 @@ var ChatWidget = function (props) {
     var mode = (_a = props.mode) !== null && _a !== void 0 ? _a : "normal";
     var dockedMode = mode === "docked";
     var staticMode = mode === "static";
-    var modeClass = "widget-container--" + mode;
+    var modeClass = "widget-container--".concat(mode);
     var canMinimize = !dockedMode && !staticMode;
     // Our state - pull from storage
-    var _g = useState(!canMinimize || !!get("visible)") || (((_b = props.config) === null || _b === void 0 ? void 0 : _b.autoOpenOnWidth) && window.matchMedia("(min-width: " + ((_c = props.config) === null || _c === void 0 ? void 0 : _c.autoOpenOnWidth) + ")").matches)), visible = _g[0], setVisibleState = _g[1];
+    var _g = useState(!canMinimize || !!get("visible)") || (((_b = props.config) === null || _b === void 0 ? void 0 : _b.autoOpenOnWidth) && window.matchMedia("(min-width: ".concat((_c = props.config) === null || _c === void 0 ? void 0 : _c.autoOpenOnWidth, ")")).matches)), visible = _g[0], setVisibleState = _g[1];
     var _h = useState(false), typing = _h[0], setTypingState = _h[1]; // false initially
     var chatServer = useContext(ChatServerContext);
     function setVisible(newVisible) {
@@ -8103,16 +8512,16 @@ var ChatWidget = function (props) {
         }
     }, [connectionStatus, onConnectionStatusChange]);
     useExternalScript((_d = props.config) === null || _d === void 0 ? void 0 : _d.middlewareUrl);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "widget-container " + modeClass + " " + getVisibilityClass() },
-            React.createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
-            React.createElement(StatusContainer, { accountStatus: chatState.accountStatus, minimizeOnClick: minimizeOnClick, agent: (_e = chatState.agents["agent:robot"]) === null || _e === void 0 ? void 0 : _e.user, canMinimize: canMinimize, config: config === null || config === void 0 ? void 0 : config.header }),
-            React.createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
-            React.createElement("div", { className: "spinner-container " + (visible && connectionStatus === "pending" ? "visible" : "") },
-                React.createElement("div", { className: "spinner" })),
-            connectionStatus === "offline" && React.createElement(ServerOffline, null),
-            React.createElement(ChatFooter, { isChatting: chatState.isChatting, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
-        React.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_f = props.config) === null || _f === void 0 ? void 0 : _f.cta, visible: visible })));
+    return (React$1.createElement(React$1.Fragment, null,
+        React$1.createElement("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()) },
+            React$1.createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
+            React$1.createElement(StatusContainer, { accountStatus: chatState.accountStatus, minimizeOnClick: minimizeOnClick, agent: (_e = chatState.agents["agent:robot"]) === null || _e === void 0 ? void 0 : _e.user, canMinimize: canMinimize, config: config === null || config === void 0 ? void 0 : config.header }),
+            React$1.createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
+            React$1.createElement("div", { className: "spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
+                React$1.createElement("div", { className: "spinner" })),
+            connectionStatus === "offline" && React$1.createElement(ServerOffline, null),
+            React$1.createElement(ChatFooter, { isChatting: chatState.isChatting, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
+        React$1.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_f = props.config) === null || _f === void 0 ? void 0 : _f.cta, visible: visible })));
 };
 
 function tryParseJson(str) {
@@ -8151,7 +8560,7 @@ var BrowserStateStorage = /** @class */ (function () {
  * @returns {string}
  */
 function visitorFingerprint() {
-    return uuid();
+    return uuid_1();
 }
 
 var DEFAULT_VISITOR = {
@@ -8207,7 +8616,7 @@ function connectionReducer(state, action) {
 }
 
 function joinMessages(messages, msg) {
-    return insertSorted(__spreadArray([], messages, true), msg, function (left, right) { return left.timestamp - right.timestamp; });
+    return insertSorted(__spreadArray$1([], messages, true), msg, function (left, right) { return left.timestamp - right.timestamp; });
 }
 
 function memberJoin(state, detail) {
@@ -8238,7 +8647,7 @@ function memberLeave(state, detail) {
 
 function resetReducer(state) {
     if (state === void 0) { state = DEFAULT_STATE; }
-    return __assign(__assign({}, createDefaultState()), { connection: __assign(__assign({}, state.connection), { nonce: uuid() }), visitor: state.visitor, visitorId: state.visitorId });
+    return __assign(__assign({}, createDefaultState()), { connection: __assign(__assign({}, state.connection), { nonce: uuid_1() }), visitor: state.visitor, visitorId: state.visitorId });
 }
 
 // todo: create reducer (requires redux-thunk dependncy)
@@ -8337,7 +8746,7 @@ function mapSynthetic(state, action) {
                 }
             };
         default:
-            throw new Error("Unknown synthetic action. Detail type: " + action.detail.type);
+            throw new Error("Unknown synthetic action. Detail type: ".concat(action.detail.type));
     }
 }
 function storeHandler(state, action) {
@@ -8352,13 +8761,14 @@ function storeHandler(state, action) {
     }
 }
 
-function createChatStore(config) {
-    var storage = new BrowserStateStorage(sessionStorage, "xappchat." + config.serverUrl + "." + config.accountKey);
+function createChatStore(config, dataStorage) {
+    if (dataStorage === void 0) { dataStorage = sessionStorage; }
+    var storage = new BrowserStateStorage(dataStorage, "xappchat.".concat(config.serverUrl, ".").concat(config.accountKey));
     var chatReducer = persistStateReducer(storage, DEFAULT_STATE, storeHandler);
     var middlewares = [
         thunk
     ];
-    var composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+    var composeEnhancers = globalThis.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
     return createStore$1(chatReducer, composeEnhancers(applyMiddleware.apply(void 0, middlewares)));
 }
 
@@ -8368,11 +8778,11 @@ var ChatWidgetContainer = function (props) {
     var connection = useServerConfig(props.config);
     var chatStore = useMemo(function () { return createChatStore(connection); }, [connection]);
     if ((_a = props.config) === null || _a === void 0 ? void 0 : _a.disabled) {
-        return React.createElement(React.Fragment, null);
+        return React$1.createElement(React$1.Fragment, null);
     }
     var widgetProps = __assign(__assign({}, props), { messageMiddleware: messageMiddleware });
-    return (React.createElement(Provider, { store: chatStore },
-        React.createElement(ChatWidgetWrapper, __assign({}, widgetProps))));
+    return (React$1.createElement(Provider, { store: chatStore },
+        React$1.createElement(ChatWidgetWrapper, __assign({}, widgetProps))));
 };
 
 function createStaticReducer(state) {
@@ -8402,13 +8812,13 @@ var StaticChatWidgetContainer = function (props) {
                 type: "local"
             } });
     }, [props.config]);
-    return (React.createElement(Provider, { store: store },
-        React.createElement(ChatWidgetWrapper, __assign({}, props, { config: config }))));
+    return (React$1.createElement(Provider, { store: store },
+        React$1.createElement(ChatWidgetWrapper, __assign({}, props, { config: config }))));
 };
 
 function createStateFromMessages(messages) {
     var def = createDefaultState();
-    return __assign(__assign({}, def), { connection: __assign(__assign({}, def.connection), { connectionStatus: "online" }), accountStatus: "online", chats: __spreadArray([], messages, true), isChatting: true });
+    return __assign(__assign({}, def), { connection: __assign(__assign({}, def.connection), { connectionStatus: "online" }), accountStatus: "online", chats: __spreadArray$1([], messages, true), isChatting: true });
 }
 
 var StaticMessagesChatWidgetContainer = function (props) {
@@ -8416,7 +8826,7 @@ var StaticMessagesChatWidgetContainer = function (props) {
     var state = useMemo(function () {
         return createStateFromMessages(messages);
     }, [messages]);
-    return (React.createElement(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config }));
+    return (React$1.createElement(StaticChatWidgetContainer, { state: state, mode: props.mode, config: props.config }));
 };
 
 export { ActionButton, Avatar, CardMiddleware, Carousel, CarouselItem, ChatWidgetContainer as Chat, ChatButton, ChatCard, ChatChip, ChatChips, ChatMenu, ChatMessage, ChatMessageBubble, ChatMessagePart, ChatWidgetWrapper as ChatWidget, CtaBubble, CtaBubbleContainer, List, ListItem, ListMiddleware, MessageList, MiddlewareContextFactory, StaticChatWidgetContainer, StaticMessagesChatWidgetContainer, joinMiddlewares, responseToMessage, useLateMiddleware, useStandardMiddleware };