@xapp/chat-widget 1.64.2 → 1.65.0

package/dist/index.js

@@ -12,14 +12,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default$1 = /*#__PURE__*/_interopDefaultLegacy(React$1);
 var thunk__default = /*#__PURE__*/_interopDefaultLegacy(thunk);
 
-var ActionButton = function (props) {
+var ActionButton = function (_a) {
+    var label = _a.label, disable = _a.disable, type = _a.type, addClass = _a.addClass, onClick = _a.onClick;
     function handleClick(ev) {
         ev.stopPropagation();
-        if (props.onClick) {
-            props.onClick(props.label);
+        if (onClick) {
+            onClick(label);
         }
     }
-    return (React__default$1["default"].createElement("button", { type: props.type, className: "action-button ".concat(props.addClass), onClick: handleClick }, props.label));
+    return (React__default$1["default"].createElement("button", { disabled: disable, type: type, className: "action-button ".concat(addClass), onClick: handleClick }, label));
 };
 
 var defaultServerUrl = "";
@@ -678,40 +679,45 @@ var CtaBubble = function (props) {
 };
 
 var CtaBubbleContainer = function (props) {
-    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, onClick = props.onClick;
+    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, onClick = props.onClick, children = props.children;
     var startTime = React$1.useMemo(function () {
-        if (visible) {
-            return new Date().valueOf();
-        }
-        return undefined;
+        return visible ? new Date().valueOf() : undefined;
     }, [visible]);
     var _a = React$1.useState(false), showBubble = _a[0], setShowBubble = _a[1];
+    var isMounted = React$1.useRef(true);
     React$1.useEffect(function () {
-        var isMounted = true;
+        var hideTimer = null;
         if (startTime) {
             var delayTimer_1 = setTimeout(function () {
-                if (isMounted) {
+                if (isMounted.current) {
                     setShowBubble(true);
                 }
-                var hideTimer = setTimeout(function () {
-                    if (isMounted) {
-                        setShowBubble(false);
-                    }
-                }, timeout);
-                return function () {
-                    clearTimeout(hideTimer);
-                };
+                if (typeof timeout === "number") {
+                    hideTimer = setTimeout(function () {
+                        if (isMounted.current) {
+                            setShowBubble(false);
+                        }
+                    }, timeout);
+                }
             }, delay);
             return function () {
-                isMounted = false;
+                if (hideTimer) {
+                    clearTimeout(hideTimer);
+                }
                 clearTimeout(delayTimer_1);
+                isMounted.current = false;
             };
         }
+        // Return a cleanup function for the case where startTime is undefined
         return function () {
-            isMounted = false;
+            if (hideTimer) {
+                clearTimeout(hideTimer);
+            }
+            isMounted.current = false;
         };
     }, [startTime, timeout, delay]);
-    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, visible && showBubble && React__default$1["default"].createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation }, props.children)));
+    console.log("visible ".concat(visible, " showBubble ").concat(showBubble));
+    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, visible && showBubble && React__default$1["default"].createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation }, children)));
 };
 
 var ChatButton = function (_a) {
@@ -753,7 +759,7 @@ var ChatButton = function (_a) {
                 setAnimate(false);
             }, configToApply.animationTimeout);
         }
-        else {
+        else if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) {
             // No delay or timeout, start animation immediately
             setAnimate(true);
         }
@@ -796,8 +802,8 @@ var ChatButton = function (_a) {
         // Fallback to default SVG
         React__default$1["default"].createElement("svg", { width: svgSize, height: svgSize, 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" })))),
-        config && config.message && (React__default$1["default"].createElement("div", { className: "xapp-chat-button__cta" },
-            React__default$1["default"].createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, visible: !visible }, config.message)))));
+        configToApply && configToApply.message && (React__default$1["default"].createElement("div", { className: "xapp-chat-button__cta" },
+            React__default$1["default"].createElement(CtaBubbleContainer, { timeout: configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout, delay: configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay, animate: animate, buttonAnimation: animation, visible: !visible /** Why is this !visible */ }, configToApply === null || configToApply === void 0 ? void 0 : configToApply.message)))));
 };
 
 var ChatCard = function (props) {
@@ -7949,11 +7955,17 @@ function useSuggestions(search, context) {
     }); }, [suggestions, suggestionIndex, execute, suggestionItem]);
 }
 
-var AdminBar = function (_props) {
+var AdminBar = function (_a) {
+    var onAdminJoin = _a.onAdminJoin;
     var name = React$1.useRef(null);
     // We can manage this locally
     // const hasAdminJoined = useSelector<ChatState, boolean | undefined>(state => state.hasAdminJoined);
-    var _a = React$1.useState(false), joined = _a[0], setJoined = _a[1];
+    var _b = React$1.useState(false), joined = _b[0], setJoined = _b[1];
+    var _c = React$1.useState(""), inputName = _c[0], setInputName = _c[1];
+    function handleInputChange(event) {
+        setInputName(event.target.value);
+    }
+    var disable = inputName === "" || inputName === undefined;
     var dispatch = useChatServerDispatch();
     function onSubmit(event) {
         var _a;
@@ -7961,18 +7973,21 @@ var AdminBar = function (_props) {
         if (!joined) {
             dispatch(sendBargeIn((_a = name.current) === null || _a === void 0 ? void 0 : _a.value));
             setJoined(true);
+            onAdminJoin(true);
         }
         else {
             dispatch(sendBargeOut());
             setJoined(false);
+            onAdminJoin(false);
+            setInputName("");
         }
     }
     function renderJoin() {
         return (React__default$1["default"].createElement("form", { className: "xappw-admin-input-form", onSubmit: onSubmit },
             React__default$1["default"].createElement("div", { className: "xappw-admin-input-form__buttons" },
-                React__default$1["default"].createElement(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Join" })),
+                React__default$1["default"].createElement(ActionButton, { addClass: "xappw-admin-input-form__btn", type: "submit", label: "Join", disable: disable })),
             React__default$1["default"].createElement("div", { className: "xappw-admin-input" },
-                React__default$1["default"].createElement("input", { ref: name, id: "adminBarInput", placeholder: "Type your name here...", className: "xappw-admin-input__input" }))));
+                React__default$1["default"].createElement("input", { ref: name, id: "adminBarInput", placeholder: "Type your name here...", className: "xappw-admin-input__input", onChange: handleInputChange }))));
     }
     function renderLeave() {
         return (React__default$1["default"].createElement("form", { className: "xappw-admin-input-form", onSubmit: onSubmit },
@@ -8244,10 +8259,11 @@ var ChatFooter = function (props) {
     var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex;
     var menuItems = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
     var brandingEnabled = (_b = footerConfig === null || footerConfig === void 0 ? void 0 : footerConfig.branding) === null || _b === void 0 ? void 0 : _b.enabled;
-    var _e = React$1.useState({
+    var _e = React$1.useState(false), isAdminJoined = _e[0], setAdminJoined = _e[1];
+    var _f = React$1.useState({
         text: "",
         formats: []
-    }), input = _e[0], setInput = _e[1];
+    }), input = _f[0], setInput = _f[1];
     function toggleDrawer() {
         var newDrawer = !drawerOpen;
         setDrawerState(newDrawer);
@@ -8283,6 +8299,9 @@ var ChatFooter = function (props) {
         setInput(data);
         setSuggestionSearch(data.text);
     }, []);
+    var handleAdminJoin = function (status) {
+        setAdminJoined(status);
+    };
     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": false },
         showMenu && menuItems.length ?
             React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
@@ -8290,10 +8309,11 @@ var ChatFooter = function (props) {
                 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),
         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}
-            onFileUpload: props.onFileUpload }),
+        props.isAdmin && props.isChatting && props.visible && React__default$1["default"].createElement(AdminBar, { onAdminJoin: handleAdminJoin }),
+        React__default$1["default"].createElement("div", { style: { pointerEvents: isAdminJoined ? "auto" : "none", opacity: isAdminJoined ? 1 : 0.5 } },
+            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}
+                onFileUpload: props.onFileUpload })),
         brandingEnabled && React__default$1["default"].createElement(ChatBranding, { text: 'Powered by [XAPP AI](https://xapp.ai)' })));
 };