@xapp/chat-widget 1.54.0 → 1.54.2

package/dist/index.js

@@ -1854,7 +1854,11 @@ var CtaBubbleTail = function (props) {
 var CtaBubble = function (props) {
     var _a, _b;
     var _c = useDimensions(), ref = _c[0], rect = _c[1];
-    return (React__default$1["default"].createElement("div", { ref: ref, className: "cta-bubble", onClick: props.onClick },
+    return (React__default$1["default"].createElement("div", { ref: ref, style: props.borderStyle && {
+            border: 'solid',
+            borderWidth: props.borderStyle.width,
+            borderColor: props.borderStyle.color
+        }, className: "cta-bubble", onClick: props.onClick },
         React__default$1["default"].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__default$1["default"].createElement("div", { className: "cta-bubble__content" }, props.children)));
 };
@@ -1892,7 +1896,11 @@ var CtaBubbleContainer = function (props) {
 
 var ChatButton = function (props) {
     return (React__default$1["default"].createElement("button", { className: "xapp-chat-button ".concat(props.addClass), onClick: props.onClick },
-        React__default$1["default"].createElement("div", { id: "xapp-widget-button", className: "xapp-chat-button__btn" },
+        React__default$1["default"].createElement("div", { id: "xapp-widget-button", className: "xapp-chat-button__btn", style: props.borderStyle && {
+                border: 'solid',
+                borderWidth: props.borderStyle.width,
+                borderColor: props.borderStyle.color
+            } },
             React__default$1["default"].createElement("svg", { width: "22", height: "22", viewBox: "0 0 22 22" },
                 React__default$1["default"].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__default$1["default"].createElement("div", { className: "xapp-chat-button__cta" },
@@ -2590,10 +2598,15 @@ function getItemsLength(result) {
 
 var SuggestionsList = function (props) {
     var suggestions = props.suggestions, itemActions = props.itemActions, className = props.className;
-    var length = React.useMemo(function () { return getItemsLength(suggestions); }, [suggestions]);
+    var length = React.useMemo(function () {
+        if (suggestions) {
+            return getItemsLength(suggestions);
+        }
+        return 0;
+    }, [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) {
+    return (React__default["default"].createElement("div", { className: "xappw-suggestions-list ".concat(className || "") }, suggestions === null || suggestions === void 0 ? void 0 : 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, onSpanClick: props.onSpanClick }));
         indexWalker += group.items.length;
         return res;
@@ -8870,14 +8883,25 @@ function createActions(onItemUse) {
     };
 }
 var Suggestions = function (props) {
-    var data = props.data, onItemUse = props.onItemUse;
-    var len = data.length;
+    var data = props.data, onItemUse = props.onItemUse, searchTerms = props.searchTerms;
+    var _a = React$1.useState(), fixedSuggestions = _a[0], setFixedSuggestions = _a[1];
+    var _b = React$1.useState(), activeItem = _b[0], setActiveItem = _b[1];
+    React$1.useEffect(function () {
+        if (data) {
+            setFixedSuggestions(data);
+        }
+        if (!searchTerms) {
+            setFixedSuggestions(undefined);
+            setActiveItem(undefined);
+        }
+    }, [data, searchTerms]);
+    var len = data === null || data === void 0 ? void 0 : data.length;
     var currentIndex = len > 0 ? props.index : NaN;
-    var _a = React$1.useState(), activeItem = _a[0], setActiveItem = _a[1];
     var item = React$1.useMemo(function () { return findItemByIndex_1(data, currentIndex); }, [data, currentIndex]);
     var handleSpanClick = React$1.useCallback(function (target, span) {
         if (span.type === "inputText") {
             onItemUse(target);
+            setActiveItem(undefined);
             return false;
         }
         return undefined;
@@ -8888,15 +8912,15 @@ var Suggestions = function (props) {
     var actions = React$1.useMemo(function () { return createActions(onItemUse); }, [onItemUse]);
     return (React__default$1["default"].createElement("div", { className: "xappw-suggestions ".concat(props.className || "") },
         (activeItem === null || activeItem === void 0 ? void 0 : activeItem.content) && React__default$1["default"].createElement("div", { className: "xappw-suggestions__answer" }, activeItem.content),
-        !!data.length &&
-            React__default$1["default"].createElement(SuggestionsList_1, { suggestions: data, index: currentIndex, className: "xappw-suggestions__groups", itemActions: actions, onItemClick: props.onItemClick, onItemHover: setActiveItem, onSpanClick: handleSpanClick })));
+        fixedSuggestions && fixedSuggestions.length > 0 &&
+            React__default$1["default"].createElement(SuggestionsList_1, { suggestions: fixedSuggestions, index: currentIndex, className: "xappw-suggestions__groups", itemActions: actions, onItemClick: props.onItemClick, onItemHover: setActiveItem, onSpanClick: handleSpanClick })));
 };
 
 var ChatFooter = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     var placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, onSubmit = props.onSubmit;
-    var _e = React$1.useState(false), drawerOpen = _e[0], setDrawerState = _e[1]; // false initially
-    var _f = React$1.useState(), suggestionSearch = _f[0], setSuggestionSearch = _f[1];
+    var _d = React$1.useState(false), drawerOpen = _d[0], setDrawerState = _d[1]; // false initially
+    var _e = React$1.useState(), suggestionSearch = _e[0], setSuggestionSearch = _e[1];
     var contexts = reactRedux.useSelector(function (state) { return state.activeContexts; });
     var suggestions = useSuggestions(suggestionSearch, contexts);
     var menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
@@ -8907,10 +8931,10 @@ var ChatFooter = function (props) {
     var menuItems = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
     var branding = (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _b === void 0 ? void 0 : _b.text; // useWidgetEnv()?.footer?.branding?.text;
     var brandingEnabled = (_c = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _c === void 0 ? void 0 : _c.enabled; // useWidgetEnv()?.footer?.branding?.enabled;
-    var _g = React$1.useState({
+    var _f = React$1.useState({
         text: "",
         formats: []
-    }), input = _g[0], setInput = _g[1];
+    }), input = _f[0], setInput = _f[1];
     function toggleDrawer() {
         var newDrawer = !drawerOpen;
         setDrawerState(newDrawer);
@@ -8927,7 +8951,9 @@ var ChatFooter = function (props) {
     }
     // Clears out suggestion and input text
     var handleSubmit = React$1.useCallback(function (message) {
+        // Clears out the suggestions
         setSuggestionSearch("");
+        // Clears out the input
         setInput({
             text: "",
             formats: []
@@ -8938,16 +8964,17 @@ var ChatFooter = function (props) {
         handleSubmit(data);
     }, [handleSubmit]);
     var handleItemUse = React$1.useCallback(function (data) {
+        console.log(data);
         setInput(data);
         setSuggestionSearch(data.text);
     }, []);
-    return (React__default$1["default"].createElement("div", { className: "chat-footer", "aria-label": menuItems.length ? "to open menu click a button above the rounded rectangle at the bottom of widget" : "", "aria-hidden": true },
+    return (React__default$1["default"].createElement("div", { className: "chat-footer background-footer", "aria-label": menuItems.length ? "to open menu click a button above the rounded rectangle at the bottom of widget" : "", "aria-hidden": true },
         showMenu && menuItems.length ?
             React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
                 drawerOpen ? React__default$1["default"].createElement(ChatMenu, { opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
                 React__default$1["default"].createElement("div", { className: "chat-footer__menu-icon" },
                     React__default$1["default"].createElement(DrawerBars, { tabIndex: menuButtonTabIndex, onToggle: toggleDrawer }))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
-        ((_d = suggestions.suggestions) === null || _d === void 0 ? void 0 : _d.length) > 0 && React__default$1["default"].createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, onItemClick: handleItemClick, onItemUse: handleItemUse }),
+        React__default$1["default"].createElement(Suggestions, { className: "xappw-chat-footer__suggestions", data: suggestions.suggestions, index: suggestions.index, searchTerms: suggestionSearch, onItemClick: handleItemClick, onItemUse: handleItemUse }),
         props.isAdmin && props.isChatting && props.visible && React__default$1["default"].createElement(AdminBar, null),
         React__default$1["default"].createElement(Input, { addClass: "chat-footer__input " + (props.isChatting && props.visible ? "visible" : ""), suggestion: suggestions.item, value: input, placeholder: placeholder, sendButtonIcon: sendButtonIcon, footerConfig: footerConfig, inputConfig: inputConfig, onSubmit: handleSubmit, onChange: handleChange, onSuggestionCommand: suggestions.execute, 
             // onFocus={this.inputOnFocus}
@@ -31538,7 +31565,7 @@ var ChatHeader = function (props) {
         onSubmit(label);
     }
     return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-        React__default$1["default"].createElement("div", { className: "status-container", "aria-label": props.canRefresh ? refreshButtonAriaLabel : "" + props.canMinimize ? minimizeButtonAriaLabel : "" + props.canCancel ? closeButtonAriaLabel : "", "aria-hidden": true },
+        React__default$1["default"].createElement("div", { className: "status-container background-header", "aria-label": props.canRefresh ? refreshButtonAriaLabel : "" + props.canMinimize ? minimizeButtonAriaLabel : "" + props.canCancel ? closeButtonAriaLabel : "", "aria-hidden": true },
             showMenu && menuItems.length ? (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
                 React__default$1["default"].createElement("div", { className: "chat-footer__menu-icon" },
                     React__default$1["default"].createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
@@ -32348,7 +32375,10 @@ function storeHandler(state, action) {
     }
 }
 
+var ADMIN_STORE_KEY = "AdminAccessTimes";
+var ADMIN_STORE_MAX = 20;
 function createChatStore(config, dataStorage) {
+    var _a;
     if (!dataStorage) {
         if (typeof window !== "undefined") {
             dataStorage = localStorage;
@@ -32358,7 +32388,39 @@ function createChatStore(config, dataStorage) {
         }
     }
     var connection = config.connection;
-    var storage = new BrowserStateStorage(dataStorage, "xappchat.".concat(connection.serverUrl, ".").concat(connection.accountKey));
+    var joinSessionId = (_a = new URL(window.location.href).searchParams) === null || _a === void 0 ? void 0 : _a.get("sessionId");
+    var dataStorageKey;
+    var now = new Date().getTime();
+    if (joinSessionId) {
+        var adminTimesData = dataStorage.getItem(ADMIN_STORE_KEY);
+        // Create
+        var adminTimes = adminTimesData ? JSON.parse(adminTimesData) : {};
+        // if exists, use it. If not, check if we are maxed out. evict one session if we are.
+        if (adminTimes[joinSessionId]) {
+            log("ChatStore: reusing session: ".concat(joinSessionId));
+            adminTimes[joinSessionId].lastAccessMs = now;
+            dataStorageKey = adminTimes[joinSessionId].dataStorageKey;
+        }
+        else {
+            if (Object.keys(adminTimes).length >= ADMIN_STORE_MAX) {
+                var evictedSessionId = evictAdminSession(adminTimes);
+                log("ChatStore: evicting session: ".concat(evictedSessionId));
+                dataStorage.removeItem(adminTimes[evictedSessionId].dataStorageKey);
+                adminTimes[evictedSessionId] = undefined;
+            }
+            // We now have room
+            dataStorageKey = generateKey(connection, joinSessionId);
+            adminTimes[joinSessionId] = {
+                lastAccessMs: now,
+                dataStorageKey: dataStorageKey,
+            };
+        }
+        dataStorage.setItem(ADMIN_STORE_KEY, JSON.stringify(adminTimes));
+    }
+    else {
+        dataStorageKey = generateKey(connection);
+    }
+    var storage = new BrowserStateStorage(dataStorage, dataStorageKey);
     var defaultState = createDefaultState({
         accessToken: config.accessToken,
         userId: config.userId,
@@ -32372,6 +32434,36 @@ function createChatStore(config, dataStorage) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var composeEnhancers = globalThis.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || redux.compose;
     return redux.createStore(chatReducer, composeEnhancers(redux.applyMiddleware.apply(void 0, middlewares)));
+}
+/**
+ * Pick one admin session for eviction
+ *
+ * @param adminTimes
+ * @returns
+ */
+function evictAdminSession(adminTimes) {
+    // Find the oldest
+    var minTimeTs = Number.MAX_VALUE;
+    var minSessionId;
+    for (var _i = 0, _a = Object.keys(adminTimes); _i < _a.length; _i++) {
+        var sessionId = _a[_i];
+        if (adminTimes[sessionId].lastAccessMs < minTimeTs) {
+            minSessionId = sessionId;
+            minTimeTs = adminTimes[sessionId].lastAccessMs;
+        }
+    }
+    return minSessionId;
+}
+function generateKey(connection, sessionId) {
+    var base = "xappchat.".concat(connection.serverUrl);
+    if (sessionId) {
+        return connection.accountKey
+            ? "".concat(base, ".").concat(connection.accountKey, ".").concat(sessionId)
+            : "".concat(base, ".").concat(sessionId);
+    }
+    else {
+        return connection.accountKey ? "".concat(base, ".").concat(connection.accountKey) : base;
+    }
 }
 
 var ChatWidgetContainer = function (props) {