@xapp/chat-widget 1.60.3 → 1.61.0

package/dist/index.js

@@ -23,6 +23,9 @@ var ActionButton = function (props) {
 };
 
 var defaultServerUrl = "";
+var defaultWidgetButtonWidth = "48";
+var defaultMobileWidgetButtonWidth = "30";
+var defaultNonMobileScreenWidth = "400";
 var ChatConfigContext = React$1.createContext(null);
 function useWidgetEnv() {
     var ctx = React$1.useContext(ChatConfigContext);
@@ -672,50 +675,108 @@ var CtaBubble = function (props) {
 };
 
 var CtaBubbleContainer = function (props) {
+    var visible = props.visible, timeout = props.timeout, delay = props.delay, onClick = props.onClick;
     var startTime = React$1.useMemo(function () {
-        if (props.visible) {
+        if (visible) {
             return new Date().valueOf();
         }
         return undefined;
-    }, [props.visible]);
-    var _a = React$1.useState(new Date().valueOf()), currentTime = _a[0], setCurrentTime = _a[1];
-    var timeout = props.timeout;
-    var duration = currentTime - startTime;
-    var pastDue = startTime && props.timeout && (duration >= props.timeout);
+    }, [visible]);
+    var _a = React$1.useState(false), showBubble = _a[0], setShowBubble = _a[1];
     React$1.useEffect(function () {
-        if (!startTime) {
-            return undefined;
-        }
-        var end = startTime + timeout;
-        var now = new Date().valueOf();
-        var left = end - now;
-        if (left <= 0) {
-            return undefined;
+        var isMounted = true;
+        if (startTime) {
+            var delayTimer_1 = setTimeout(function () {
+                if (isMounted) {
+                    setShowBubble(true);
+                }
+                var hideTimer = setTimeout(function () {
+                    if (isMounted) {
+                        setShowBubble(false);
+                    }
+                }, timeout);
+                return function () {
+                    clearTimeout(hideTimer);
+                };
+            }, delay);
+            return function () {
+                isMounted = false;
+                clearTimeout(delayTimer_1);
+            };
         }
-        var handle = setTimeout(function () {
-            setCurrentTime(new Date().valueOf());
-        }, left);
         return function () {
-            clearTimeout(handle);
+            isMounted = false;
         };
-    }, [startTime, timeout]);
-    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null, props.visible && !pastDue && React__default$1["default"].createElement(CtaBubble, { onClick: props.onClick }, props.children)));
+    }, [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 }, props.children)));
 };
 
-var ChatButton = function (props) {
-    return (React__default$1["default"].createElement("button", { "aria-label": "open chat", className: "xapp-chat-button ".concat(props.addClass || "").trim(), onClick: props.onClick },
-        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
-            } }, props.imageUrl ? (
+var ChatButton = function (_a) {
+    var _b;
+    var onClick = _a.onClick, addClass = _a.addClass, config = _a.config, visible = _a.visible, borderStyle = _a.borderStyle, imageUrl = _a.imageUrl;
+    var _c = React$1.useState(defaultWidgetButtonWidth), buttonWidth = _c[0], setButtonWidth = _c[1];
+    var _d = React$1.useState(false), animate = _d[0], setAnimate = _d[1];
+    var mobileWidht = ((_b = config === null || config === void 0 ? void 0 : config.mobile) === null || _b === void 0 ? void 0 : _b.applyAtLessThanWidth) || defaultNonMobileScreenWidth;
+    var getConfigToApply = function () {
+        var screenWidth = window.innerWidth;
+        if (screenWidth <= parseInt(mobileWidht, 10) && (config === null || config === void 0 ? void 0 : config.mobile)) {
+            return config.mobile;
+        }
+        else {
+            return config;
+        }
+    };
+    var configToApply = getConfigToApply();
+    React$1.useEffect(function () {
+        if ((configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay) && (configToApply === null || configToApply === void 0 ? void 0 : configToApply.timeout)) {
+            var delayTimer_1 = setTimeout(function () {
+                setAnimate(true);
+                var timeoutTimer = setTimeout(function () {
+                    setAnimate(false);
+                }, configToApply.timeout);
+                return function () {
+                    clearTimeout(timeoutTimer);
+                };
+            }, configToApply.delay);
+            return function () {
+                clearTimeout(delayTimer_1);
+            };
+        }
+        return function () { };
+    }, [configToApply]);
+    var animation = animate ? ((configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle") : "none";
+    React$1.useEffect(function () {
+        var handleResize = function () {
+            var screenWidth = window.innerWidth;
+            var newButtonWidth = screenWidth < (parseInt(mobileWidht, 10))
+                ? defaultMobileWidgetButtonWidth : defaultWidgetButtonWidth;
+            setButtonWidth(newButtonWidth);
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [mobileWidht]);
+    var maxSvgSize = 22;
+    var svgSize = Math.min(maxSvgSize, (+buttonWidth / +defaultWidgetButtonWidth) * maxSvgSize);
+    return (React__default$1["default"].createElement("button", { "aria-label": "open chat", className: "xapp-chat-button ".concat(addClass || "").trim(), onClick: onClick },
+        React__default$1["default"].createElement("div", { id: "xapp-widget-button", className: "xapp-chat-button__btn", style: {
+                width: "".concat(buttonWidth, "px"),
+                height: "".concat(buttonWidth, "px"),
+                borderRadius: "".concat(+buttonWidth / 2, "px"),
+                border: borderStyle && borderStyle.width ? 'solid' : 'none',
+                borderWidth: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.width) || '0px',
+                borderColor: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.color) || 'transparent',
+                animation: "".concat(animation, " 1s infinite"),
+            } }, imageUrl ? (
         // Display image from URL
-        React__default$1["default"].createElement("img", { src: props.imageUrl, alt: "Chat Icon", width: "22", height: "22" })) : (
+        React__default$1["default"].createElement("img", { src: imageUrl, alt: "Chat Icon", width: "22", height: "22" })) : (
         // Fallback to default SVG
-        React__default$1["default"].createElement("svg", { width: "22", height: "22", viewBox: "0 0 22 22" },
+        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" })))),
-        props.config && props.config.message && (React__default$1["default"].createElement("div", { className: "xapp-chat-button__cta" },
-            React__default$1["default"].createElement(CtaBubbleContainer, { timeout: props.config.timeout, visible: !props.visible }, props.config.message)))));
+        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, visible: !visible }, config.message)))));
 };
 
 var ChatCard = function (props) {
@@ -7900,9 +7961,23 @@ var AdminBar = function (_props) {
     return (React__default$1["default"].createElement("div", { className: "xappw-admin-input-container visible" }, joined ? renderLeave() : renderJoin()));
 };
 
-var ChatBranding = function (props) {
-    var text = props.text;
-    return (React__default$1["default"].createElement("div", { className: "chat-footer__branding" }, text !== null && text !== void 0 ? text : "Powered by XAPP AI"));
+var ChatBranding = function (_a) {
+    var text = _a.text;
+    var regex = /\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/;
+    var match = text === null || text === void 0 ? void 0 : text.match(regex);
+    var buildLink = function (match) {
+        var linkText = match[1];
+        var link = match[2];
+        var prefix = text === null || text === void 0 ? void 0 : text.split(match[0])[0];
+        var suffix = text === null || text === void 0 ? void 0 : text.split(match[0])[1];
+        return (React__default$1["default"].createElement("div", { className: "chat-footer__branding" },
+            prefix,
+            React__default$1["default"].createElement("a", { style: { color: "white", textDecoration: "underline" }, href: link, target: "_blank", rel: "noopener noreferrer" }, linkText),
+            suffix));
+    };
+    return match ? buildLink(match)
+        :
+            React__default$1["default"].createElement("div", { className: "chat-footer__branding", style: { color: "white" } }, text);
 };
 
 var CloseIcon = function () {
@@ -8038,25 +8113,24 @@ var Suggestions = function (props) {
 };
 
 var ChatFooter = function (props) {
-    var _a, _b, _c;
+    var _a, _b;
     var innerDispatch = useChatDispatch();
     var placeholder = props.placeholder, sendButtonIcon = props.sendButtonIcon, footerConfig = props.footerConfig, menuConfig = props.menuConfig, inputConfig = props.inputConfig, onSubmit = props.onSubmit;
-    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 _c = React$1.useState(false), drawerOpen = _c[0], setDrawerState = _c[1]; // false initially
+    var _d = React$1.useState(), suggestionSearch = _d[0], setSuggestionSearch = _d[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";
     var showMenu = menuPosition === "FOOTER";
-    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items; // useWidgetEnv()?.menu?.items;
-    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex; // useWidgetEnv()?.menu?.itemsTabIndex;
-    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex; // useWidgetEnv()?.menu?.button?.tabIndex;
+    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items;
+    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex;
+    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 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 _f = React$1.useState({
+    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({
         text: "",
         formats: []
-    }), input = _f[0], setInput = _f[1];
+    }), input = _e[0], setInput = _e[1];
     function toggleDrawer() {
         var newDrawer = !drawerOpen;
         setDrawerState(newDrawer);
@@ -8103,7 +8177,7 @@ var ChatFooter = function (props) {
         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: branding })));
+        brandingEnabled && React__default$1["default"].createElement(ChatBranding, { text: 'Powered by [XAPP AI](https://xapp.ai)' })));
 };
 
 var noop = function () { };