andy-widget-react 2.2.0 → 2.2.1

package/README.md

@@ -8,7 +8,7 @@ The official React Widget for Andy. Its canonical source is
 Pin an exact reviewed release:
 
 ```bash
-bun add andy-widget-react@2.0.5
+bun add andy-widget-react@2.2.1
 ```
 
 React and React DOM 18 or 19 are required peer dependencies.

package/dist/index.cjs

@@ -1497,9 +1497,6 @@ const generateDesignTokenVariablesString = () => {
 	--andy-chat-avatar-size: 32px;
 	--andy-chat-avatar-size-small: 24px;
 
-	/* Keyboard handling */
-	--andy-keyboard-height: 0px;
-
 	/* === THEMABLE VARIABLES (Default Light Theme) === */
 	--andy-themable-background: var(--andy-color-background);
 	--andy-themable-background-secondary: var(--andy-color-white);
@@ -2883,11 +2880,6 @@ const getCoreStructuralCssString = () => {
 		}
 	}
 
-	/* No special handling for keyboard - let browser handle it naturally */
-	.andy-chat-window--keyboard-open {
-		/* Browser handles positioning automatically with our margin-based approach */
-	}
-
 	/* Ensure the window content is properly laid out */
 	.andy-chat-window__messages {
 		flex: 1 1 auto;
@@ -3005,17 +2997,12 @@ const getCoreStructuralCssString = () => {
 	}
 }
 
-/* Desktop keyboard handling (for testing) */
+/* Desktop */
 @media (min-width: 521px) {
 	/* Desktop retains original positioning behavior */
 	.andy-chat-window {
 		transition: transform 0.3s ease-out;
 	}
-
-	/* Optional: Add keyboard handling for desktop if needed */
-	.andy-chat-window--keyboard-open {
-		/* No transform on desktop - keyboard doesn't affect viewport */
-	}
 }
 
 /* Orientation */
@@ -3507,244 +3494,6 @@ const UI_STRINGS = {
  */
 const getUiStrings = lang => UI_STRINGS[lang] || UI_STRINGS.en;
 
-/**
- * Keyboard detection utility for handling mobile virtual keyboards
- * Provides cross-browser support for detecting keyboard open/close events
- */
-
-class KeyboardDetector {
-	constructor() {
-		this.isKeyboardOpen = false;
-		this.keyboardHeight = 0;
-		this.listeners = new Set();
-		this.inputElement = null;
-		this.viewportHeight = window.innerHeight;
-		this.visualViewport = window.visualViewport;
-		
-		this.initializeDetection();
-	}
-
-	/**
-	 * Initialize keyboard detection
-	 */
-	initializeDetection() {
-		// Use Visual Viewport API if available (most modern browsers)
-		if (this.visualViewport) {
-			this.visualViewport.addEventListener('resize', this.handleViewportResize.bind(this));
-			this.visualViewport.addEventListener('scroll', this.handleViewportScroll.bind(this));
-		} else {
-			// Fallback for older browsers
-			window.addEventListener('resize', this.handleWindowResize.bind(this));
-		}
-
-		// Additional detection via focus/blur events
-		document.addEventListener('focusin', this.handleFocusIn.bind(this), true);
-		document.addEventListener('focusout', this.handleFocusOut.bind(this), true);
-
-		// Orientation change handler
-		window.addEventListener('orientationchange', this.handleOrientationChange.bind(this));
-	}
-
-	/**
-	 * Handle visual viewport resize (modern browsers)
-	 */
-	handleViewportResize() {
-		const currentHeight = this.visualViewport.height;
-		const heightDifference = window.innerHeight - currentHeight;
-
-		// If viewport shrunk by more than 100px, keyboard is likely open
-		if (heightDifference > 100) {
-			this.setKeyboardOpen(true, heightDifference);
-		} else if (heightDifference < 50) {
-			this.setKeyboardOpen(false, 0);
-		}
-	}
-
-	/**
-	 * Handle visual viewport scroll
-	 */
-	handleViewportScroll() {
-		// On iOS, viewport scrolls when keyboard opens
-		if (this.visualViewport.offsetTop > 0) {
-			this.setKeyboardOpen(true, this.visualViewport.offsetTop);
-		}
-	}
-
-	/**
-	 * Handle window resize (fallback for older browsers)
-	 */
-	handleWindowResize() {
-		const currentHeight = window.innerHeight;
-		const heightDifference = this.viewportHeight - currentHeight;
-
-		// Significant height reduction likely means keyboard opened
-		if (heightDifference > 100) {
-			this.setKeyboardOpen(true, heightDifference);
-		} else if (Math.abs(heightDifference) < 50) {
-			this.setKeyboardOpen(false, 0);
-			this.viewportHeight = currentHeight;
-		}
-	}
-
-	/**
-	 * Handle input focus
-	 */
-	handleFocusIn(e) {
-		const isInput = ['input', 'textarea'].includes(e.target.tagName.toLowerCase());
-		if (isInput) {
-			this.inputElement = e.target;
-			// Delay to allow keyboard animation
-			setTimeout(() => {
-				if (this.inputElement === e.target) {
-					this.checkKeyboardStatus();
-				}
-			}, 300);
-		}
-	}
-
-	/**
-	 * Handle input blur
-	 */
-	handleFocusOut(e) {
-		const isInput = ['input', 'textarea'].includes(e.target.tagName.toLowerCase());
-		if (isInput && this.inputElement === e.target) {
-			this.inputElement = null;
-			// Delay to allow keyboard animation
-			setTimeout(() => {
-				if (!this.inputElement) {
-					this.setKeyboardOpen(false, 0);
-				}
-			}, 300);
-		}
-	}
-
-	/**
-	 * Handle orientation change
-	 */
-	handleOrientationChange() {
-		// Reset viewport height after orientation change
-		setTimeout(() => {
-			this.viewportHeight = window.innerHeight;
-			this.checkKeyboardStatus();
-		}, 500);
-	}
-
-	/**
-	 * Check keyboard status (for browsers without Visual Viewport API)
-	 */
-	checkKeyboardStatus() {
-		if (!this.visualViewport) {
-			const currentHeight = window.innerHeight;
-			const heightDifference = this.viewportHeight - currentHeight;
-			
-			if (this.inputElement && heightDifference > 100) {
-				this.setKeyboardOpen(true, heightDifference);
-			}
-		}
-	}
-
-	/**
-	 * Set keyboard state and notify listeners
-	 */
-	setKeyboardOpen(isOpen, height) {
-		const changed = this.isKeyboardOpen !== isOpen || this.keyboardHeight !== height;
-		
-		this.isKeyboardOpen = isOpen;
-		this.keyboardHeight = height;
-
-		if (changed) {
-			this.notifyListeners();
-		}
-	}
-
-	/**
-	 * Add listener for keyboard state changes
-	 */
-	addListener(callback) {
-		this.listeners.add(callback);
-		// Immediately notify with current state
-		callback({
-			isOpen: this.isKeyboardOpen,
-			height: this.keyboardHeight
-		});
-	}
-
-	/**
-	 * Remove listener
-	 */
-	removeListener(callback) {
-		this.listeners.delete(callback);
-	}
-
-	/**
-	 * Notify all listeners of state change
-	 */
-	notifyListeners() {
-		const state = {
-			isOpen: this.isKeyboardOpen,
-			height: this.keyboardHeight
-		};
-		
-		this.listeners.forEach(callback => {
-			try {
-				callback(state);
-			} catch (error) {
-				console.error('Error in keyboard detector listener:', error);
-			}
-		});
-	}
-
-	/**
-	 * Get current keyboard state
-	 */
-	getState() {
-		return {
-			isOpen: this.isKeyboardOpen,
-			height: this.keyboardHeight
-		}
-	}
-
-	/**
-	 * Cleanup
-	 */
-	destroy() {
-		if (this.visualViewport) {
-			this.visualViewport.removeEventListener('resize', this.handleViewportResize.bind(this));
-			this.visualViewport.removeEventListener('scroll', this.handleViewportScroll.bind(this));
-		} else {
-			window.removeEventListener('resize', this.handleWindowResize.bind(this));
-		}
-		
-		document.removeEventListener('focusin', this.handleFocusIn.bind(this), true);
-		document.removeEventListener('focusout', this.handleFocusOut.bind(this), true);
-		window.removeEventListener('orientationchange', this.handleOrientationChange.bind(this));
-		
-		this.listeners.clear();
-	}
-}
-
-// Create singleton instance
-let keyboardDetectorInstance = null;
-
-/**
- * Get or create keyboard detector instance
- */
-function getKeyboardDetector() {
-	if (!keyboardDetectorInstance) {
-		keyboardDetectorInstance = new KeyboardDetector();
-	}
-	return keyboardDetectorInstance
-}
-
-/**
- * Update CSS custom property on host element
- */
-function updateKeyboardHeight(hostElement, height) {
-	if (hostElement) {
-		hostElement.style.setProperty('--andy-keyboard-height', `${height}px`);
-	}
-}
-
 /**
  * Mobile detection utility for AndyChat
  * Provides reliable mobile device detection with multiple methods
@@ -4034,22 +3783,7 @@ const AndyChat = ({ embedId, tooltip, name, headline, description, welcomeMessag
             portalRef.current = portalTarget;
         }
         setShadowReady(true);
-        const keyboardDetector = getKeyboardDetector();
-        const keyboardListener = ({ isOpen: kbOpen, height }) => {
-            updateKeyboardHeight(containerRef.current, height);
-            const chatWindow = shadowRef.current?.querySelector('.andy-chat-window');
-            if (chatWindow) {
-                if (kbOpen && height > 0) {
-                    chatWindow.classList.add('andy-chat-window--keyboard-open');
-                }
-                else {
-                    chatWindow.classList.remove('andy-chat-window--keyboard-open');
-                }
-            }
-        };
-        keyboardDetector.addListener(keyboardListener);
         return () => {
-            keyboardDetector.removeListener(keyboardListener);
             shadowRef.current = null;
             portalRef.current = null;
             setShadowReady(false);