@xapp/chat-widget 1.78.0 → 1.78.1

package/dist/index.js

@@ -680,6 +680,12 @@ var CtaBubble = function (props) {
     var _e = useDimensions(), ref = _e[0], rect = _e[1];
     var animate = props.animate || false;
     var animation = animate && props.buttonAnimation === "bounce" ? "bounce" : "none";
+    var handleDismiss = function (e) {
+        e.stopPropagation();
+        if (props.onDismiss) {
+            props.onDismiss();
+        }
+    };
     return (React$1.createElement("div", { ref: ref, style: {
             border: props.borderStyle ? 'solid' : 'none',
             borderWidth: ((_a = props.borderStyle) === null || _a === void 0 ? void 0 : _a.width) || '0px',
@@ -687,11 +693,14 @@ var CtaBubble = function (props) {
             animation: "".concat(animation, " 1s infinite"),
         }, className: "cta-bubble", onClick: props.onClick },
         React$1.createElement(CtaBubbleTail, { width: (_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0, height: (_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0, direction: 60, angle: 45, length: 16 }),
-        React$1.createElement("div", { className: "cta-bubble__content" }, props.children)));
+        React$1.createElement("div", { className: "cta-bubble__content" }, props.children),
+        props.dismissible && (React$1.createElement("button", { className: "cta-bubble__dismiss", onClick: handleDismiss, "aria-label": "Dismiss" },
+            React$1.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                React$1.createElement("path", { d: "M11 1L1 11M1 1L11 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }))))));
 };
 
 var CtaBubbleContainer = function (props) {
-    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, onClick = props.onClick, children = props.children;
+    var visible = props.visible, timeout = props.timeout, delay = props.delay, animate = props.animate, buttonAnimation = props.buttonAnimation, dismissible = props.dismissible, onClick = props.onClick, onDismiss = props.onDismiss, children = props.children;
     var startTime = React$1.useMemo(function () {
         return visible ? new Date().valueOf() : undefined;
     }, [visible]);
@@ -728,7 +737,13 @@ var CtaBubbleContainer = function (props) {
             isMounted.current = false;
         };
     }, [startTime, timeout, delay]);
-    return (React$1.createElement(React$1.Fragment, null, visible && showBubble && React$1.createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation }, children)));
+    var handleDismiss = function () {
+        setShowBubble(false);
+        if (onDismiss) {
+            onDismiss();
+        }
+    };
+    return (React$1.createElement(React$1.Fragment, null, visible && showBubble && (React$1.createElement(CtaBubble, { onClick: onClick, animate: animate, buttonAnimation: buttonAnimation, dismissible: dismissible, onDismiss: handleDismiss }, children))));
 };
 
 var ChatButton = function (_a) {
@@ -749,9 +764,12 @@ var ChatButton = function (_a) {
     };
     var configToApply = getConfigToApply();
     React$1.useEffect(function () {
+        var _a;
         var delayTimer;
         var timeoutTimer;
-        if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay) {
+        // Use animationDelay if provided, otherwise fall back to delay for backwards compatibility
+        var animationDelayToUse = (_a = configToApply === null || configToApply === void 0 ? void 0 : configToApply.animationDelay) !== null && _a !== void 0 ? _a : configToApply === null || configToApply === void 0 ? void 0 : configToApply.delay;
+        if (animationDelayToUse) {
             // Set a delay for the animation to start
             delayTimer = setTimeout(function () {
                 setAnimate(true);
@@ -761,7 +779,7 @@ var ChatButton = function (_a) {
                         setAnimate(false);
                     }, configToApply.animationTimeout);
                 }
-            }, configToApply.delay);
+            }, animationDelayToUse);
         }
         else if (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animationTimeout) {
             // Start animation immediately and set a timeout to stop it
@@ -815,7 +833,7 @@ var ChatButton = function (_a) {
         React$1.createElement("svg", { width: svgSize, height: svgSize, 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" })))),
         configToApply && configToApply.message && (React$1.createElement("div", { className: "xapp-chat-button__cta" },
-            React$1.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)))));
+            React$1.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, dismissible: configToApply === null || configToApply === void 0 ? void 0 : configToApply.dismissible, visible: !visible /** Why is this !visible */ }, configToApply === null || configToApply === void 0 ? void 0 : configToApply.message)))));
 };
 
 var ChatCard = function (props) {