@xapp/chat-widget 1.94.4 → 1.95.0

package/dist/index.js

@@ -6,10 +6,6 @@ var reactRedux = require('react-redux');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 var lib = {};
 
 var ActionBar$1 = {};
@@ -397,6 +393,17 @@ var ActionBarCta = function (_a) {
 
 var DEFAULT_MOBILE_BREAKPOINT = 768;
 var RESIZE_DEBOUNCE_MS = 150;
+/**
+ * ChatWidget.scss sizes the chat panel against this variable. Nothing used to set it, so it always
+ * fell back to the hardcoded 80px in the SCSS - and the real mobile bar is taller than that once
+ * env(safe-area-inset-bottom) applies, which pushed the chat input row behind the bar. Measure the
+ * bar instead of guessing, so it also stays correct when a customer restyles it.
+ *
+ * This is written on documentElement, so it assumes one ActionBar per page - the same
+ * single-instance assumption the widget already makes for --xapp-widget-z-index and friends.
+ * Two concurrent bars would fight over it, and either one unmounting would clear it.
+ */
+var ACTION_BAR_HEIGHT_VAR = "--xapp-action-bar-height";
 var ActionBar = function (_a) {
     var _b, _c, _d;
     var config = _a.config, visible = _a.visible, chatDisabled = _a.chatDisabled, _e = _a.hasUserInteracted, hasUserInteracted = _e === void 0 ? false : _e, onChatClick = _a.onChatClick, onChatMinimize = _a.onChatMinimize, onFormClick = _a.onFormClick, onCtaDismiss = _a.onCtaDismiss;
@@ -404,6 +411,7 @@ var ActionBar = function (_a) {
     var mobileBreakpoint = (_b = config.mobileBreakpoint) !== null && _b !== void 0 ? _b : DEFAULT_MOBILE_BREAKPOINT;
     var position = (_c = config.position) !== null && _c !== void 0 ? _c : "right";
     var resizeTimeoutRef = React.useRef(null);
+    var barRef = React.useRef(null);
     // Debounced resize handler
     var handleResize = React.useCallback(function () {
         if (resizeTimeoutRef.current) {
@@ -424,6 +432,41 @@ var ActionBar = function (_a) {
             }
         };
     }, [mobileBreakpoint, handleResize]);
+    // Publish the bar's real height so the chat panel can size around it.
+    //
+    // useLayoutEffect, not useEffect: this commits before paint, so the panel never gets a
+    // frame laid out against the 80px SCSS fallback. useEffect would run after paint and
+    // reintroduce a one-frame version of the very misalignment this is here to remove.
+    React.useLayoutEffect(function () {
+        var bar = barRef.current;
+        if (!bar) {
+            return undefined;
+        }
+        var publishHeight = function () {
+            // getBoundingClientRect covers the whole border box, including the safe-area padding
+            // the mobile bar adds - which is exactly the space the chat panel has to clear.
+            var height = bar.getBoundingClientRect().height;
+            // A zero height means the bar is hidden or not laid out yet. Publishing 0px would
+            // be worse than the SCSS fallback, so leave whatever is already there alone.
+            if (height <= 0) {
+                return;
+            }
+            document.documentElement.style.setProperty(ACTION_BAR_HEIGHT_VAR, "".concat(height, "px"));
+        };
+        publishHeight();
+        // Older browsers without ResizeObserver keep the mount-time measurement above.
+        if (typeof ResizeObserver === "undefined") {
+            return function () {
+                document.documentElement.style.removeProperty(ACTION_BAR_HEIGHT_VAR);
+            };
+        }
+        var observer = new ResizeObserver(publishHeight);
+        observer.observe(bar);
+        return function () {
+            observer.disconnect();
+            document.documentElement.style.removeProperty(ACTION_BAR_HEIGHT_VAR);
+        };
+    }, [isMobile]);
     // Filter out chat buttons if chat is disabled
     var filteredButtons = chatDisabled
         ? config.buttons.filter(function (button) { return !lib.isActionBarChatButton(button); })
@@ -448,7 +491,7 @@ var ActionBar = function (_a) {
     var handleCtaDismiss = function () {
         onCtaDismiss === null || onCtaDismiss === void 0 ? void 0 : onCtaDismiss();
     };
-    return (require$$0.jsxs("div", { className: classNames, role: "toolbar", "aria-label": "Chat actions", children: [showCta && (require$$0.jsx("div", { className: "xapp-action-bar-cta-wrapper", children: require$$0.jsx(ActionBarCta, { config: config.cta, isMobile: isMobile, onClick: handleCtaClick, onDismiss: handleCtaDismiss, hasUserInteracted: hasUserInteracted }) })), require$$0.jsx("div", { className: "xapp-action-bar__buttons", children: filteredButtons.map(function (button) { return (require$$0.jsx(ActionBarButton, { button: button, chatActive: visible, onChatClick: onChatClick, onChatMinimize: onChatMinimize, onFormClick: onFormClick, isMobile: isMobile }, button.id)); }) })] }));
+    return (require$$0.jsxs("div", { ref: barRef, className: classNames, role: "toolbar", "aria-label": "Chat actions", children: [showCta && (require$$0.jsx("div", { className: "xapp-action-bar-cta-wrapper", children: require$$0.jsx(ActionBarCta, { config: config.cta, isMobile: isMobile, onClick: handleCtaClick, onDismiss: handleCtaDismiss, hasUserInteracted: hasUserInteracted }) })), require$$0.jsx("div", { className: "xapp-action-bar__buttons", children: filteredButtons.map(function (button) { return (require$$0.jsx(ActionBarButton, { button: button, chatActive: visible, onChatClick: onChatClick, onChatMinimize: onChatMinimize, onFormClick: onFormClick, isMobile: isMobile }, button.id)); }) })] }));
 };
 
 /**
@@ -2306,8 +2349,9 @@ var RichText = function (props) {
 };
 
 var RichInput = function (props) {
-    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, tabIndex = props.tabIndex, maxLength = props.maxLength, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
+    var id = props.id, value = props.value, type = props.type, autoFocus = props.autoFocus, spellCheck = props.spellCheck, tabIndex = props.tabIndex, maxLength = props.maxLength, enterKeyHint = props.enterKeyHint, onChange = props.onChange, onInput = props.onInput, onKeyDown = props.onKeyDown, onSearch = props.onSearch;
     var rich = value.formats.some(function (f) { return f.type === "inputText"; });
+    var keyHint = enterKeyHint || (type === "search" ? "search" : "send");
     var handleChange = react.useCallback(function (ev) {
         if (onChange) {
             onChange({
@@ -2359,7 +2403,7 @@ var RichInput = function (props) {
         }
         return undefined;
     }, [inputNode, onSearch]);
-    return (jsxRuntime.jsx("div", { className: "xappw-rich-input ".concat(props.className), children: rich ? (jsxRuntime.jsx(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") })) : (jsxRuntime.jsx("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, maxLength: maxLength, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })) }));
+    return (jsxRuntime.jsx("div", { className: "xappw-rich-input ".concat(props.className), children: rich ? (jsxRuntime.jsx(RichText, { id: id, value: value, onChange: handleRichChange, onInput: handleRichInput, onKeyDown: handleKeyDown, className: "xappw-rich-input__input ".concat(props.className, "__input") })) : (jsxRuntime.jsx("input", { id: id, ref: inputRef, type: type, value: value.text, autoComplete: "off", enterKeyHint: keyHint, autoFocus: autoFocus, placeholder: props.placeholder, spellCheck: spellCheck, tabIndex: tabIndex ? Number(tabIndex) : 0, maxLength: maxLength, className: "xappw-rich-input__input ".concat(props.className, "__input"), onFocus: props.onFocus, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown })) }));
 };
 
 var SuggestionsGroupHeading = function (props) {
@@ -12117,85 +12161,15 @@ var AdminBar = function (_a) {
     return (require$$0.jsx("div", { className: "xappw-admin-input-container visible", children: joined ? renderLeave() : renderJoin() }));
 };
 
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames () {
-			var classes = '';
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				if (arg) {
-					classes = appendClass(classes, parseValue(arg));
-				}
-			}
-
-			return classes;
-		}
-
-		function parseValue (arg) {
-			if (typeof arg === 'string' || typeof arg === 'number') {
-				return arg;
-			}
-
-			if (typeof arg !== 'object') {
-				return '';
-			}
-
-			if (Array.isArray(arg)) {
-				return classNames.apply(null, arg);
-			}
-
-			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-				return arg.toString();
-			}
-
-			var classes = '';
-
-			for (var key in arg) {
-				if (hasOwn.call(arg, key) && arg[key]) {
-					classes = appendClass(classes, key);
-				}
-			}
-
-			return classes;
-		}
-
-		function appendClass (value, newClass) {
-			if (!newClass) {
-				return value;
-			}
-		
-			if (value) {
-				return value + ' ' + newClass;
-			}
-		
-			return value + newClass;
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}()); 
-} (classnames));
-
-var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+/**
+ * Joins the keys of `classes` whose value is truthy into a single
+ * space-separated string. Local replacement for the `classnames` package.
+ */
+function classNames(classes) {
+    return Object.keys(classes)
+        .filter(function (key) { return classes[key]; })
+        .join(" ");
+}
 
 var MarkdownBuilder = function (_a) {
     var text = _a.text, applyBrandingClass = _a.applyBrandingClass, linkColor = _a.linkColor;