@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.3 → 0.1.5

package/dist/ui/ChatBotUI.js

@@ -0,0 +1,557 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import * as React from 'react';
+import { useDraggable, useLocalStorage, useResizable, walletTextUtils } from '@bytexbyte/nxtlinq-ai-agent-web-development';
+import { useChatBot } from '../context/ChatBotContext';
+import { ChatBotHeader } from './ChatBotHeader';
+import { MessageInput } from './MessageInput';
+import { MessageList } from './MessageList';
+import { PermissionForm } from './PermissionForm';
+import { PresetMessages } from './PresetMessages';
+import { VoiceModePanel } from './VoiceModePanel';
+import { chatWindow, errorToast, floatingButton, idvBanner, idvBannerText, idvBannerTitle, idvDismissButton, idvVerifyButton, infoToast, modalOverlay, resizeHandleNE, resizeHandleNW, resizeHandleSE, resizeHandleSW, sdkContainer, successToast, toastCloseButton, warningToast } from './styles/isolatedStyles';
+const MOBILE_BREAKPOINT = 768;
+const MOBILE_EDGE_MARGIN = 12;
+const MOBILE_FAB_POSITION = { right: MOBILE_EDGE_MARGIN, bottom: MOBILE_EDGE_MARGIN };
+const isMobileViewport = () => typeof window !== 'undefined' && window.innerWidth <= MOBILE_BREAKPOINT;
+// Toast Notification Component
+const ToastNotification = ({ type, message, onClose, isChatOpen = false }) => {
+    const getToastStyles = () => {
+        const baseStyles = css `
+      ${isChatOpen ? css `
+        top: 20px !important;
+        right: 20px !important;
+        max-width: 480px !important;
+      ` : css `
+        bottom: 20px !important;
+        right: 20px !important;
+      `}
+    `;
+        switch (type) {
+            case 'success':
+                return css `${successToast} ${baseStyles}`;
+            case 'error':
+                return css `${errorToast} ${baseStyles}`;
+            case 'warning':
+                return css `${warningToast} ${baseStyles}`;
+            default:
+                return css `${infoToast} ${baseStyles}`;
+        }
+    };
+    const getIcon = () => {
+        switch (type) {
+            case 'success':
+                return '✅';
+            case 'error':
+                return '❌';
+            case 'warning':
+                return '⚠️';
+            default:
+                return 'ℹ️';
+        }
+    };
+    return (_jsxs("div", { css: getToastStyles(), children: [_jsx("span", { css: css `font-size: 18px !important;`, children: getIcon() }), _jsx("span", { css: css `flex: 1 !important;`, children: message }), _jsx("button", { onClick: onClose, css: toastCloseButton, children: "\u00D7" })] }));
+};
+export const ChatBotUI = () => {
+    const { isOpen, setIsOpen, showPermissionForm, setShowPermissionForm, notification, setNotification, isAITLoading, hitAddress, walletInfo, onVerifyWallet, serviceId, isNeedSignInWithWallet, piiDisplayMode, isVoiceMode, isVoiceConnecting, enterVoiceMode, exitVoiceMode, props } = useChatBot();
+    const positionRef = React.useRef({ x: 0, y: 0 });
+    const { dimensions, handleResizeStart, positionAdjustment } = useResizable(positionRef);
+    const { position, handleDragStart, isDragging, updatePosition } = useDraggable(dimensions);
+    const [mobileLayout, setMobileLayout] = React.useState(isMobileViewport);
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
+        const sync = () => setMobileLayout(mq.matches);
+        sync();
+        mq.addEventListener('change', sync);
+        return () => mq.removeEventListener('change', sync);
+    }, []);
+    // Update position ref when position changes
+    React.useEffect(() => {
+        positionRef.current = position;
+    }, [position]);
+    // Update position when resizing to keep bottom-right corner fixed
+    React.useEffect(() => {
+        if (positionAdjustment) {
+            updatePosition(positionAdjustment);
+        }
+    }, [positionAdjustment, updatePosition]);
+    // IDV suggestion banner state
+    const [showIDVSuggestion, setShowIDVSuggestion] = React.useState(true);
+    const [dismissUntil, setDismissUntil] = React.useState(null);
+    const [timeRemaining, setTimeRemaining] = React.useState('');
+    const countdownIntervalRef = React.useRef(null);
+    // Check if there's a berifyme token in URL (indicating recent berifyme verification)
+    const urlParams = new URLSearchParams(window.location.search);
+    const hasBerifymeToken = urlParams.get('token') && urlParams.get('method') === 'berifyme';
+    const isWalletVerifiedWithBerifyme = walletInfo?.id && walletInfo?.method === 'berifyme';
+    // Helper function to update IDV suggestion state based on storage value
+    const updateIDVSuggestionState = React.useCallback((dismissedValue) => {
+        // Clear any existing countdown interval
+        if (countdownIntervalRef.current) {
+            clearInterval(countdownIntervalRef.current);
+            countdownIntervalRef.current = null;
+        }
+        if (dismissedValue) {
+            const dismissTime = parseInt(dismissedValue);
+            const now = Date.now();
+            const timeLeft = dismissTime - now;
+            if (timeLeft > 0) {
+                setShowIDVSuggestion(false);
+                setDismissUntil(dismissTime);
+                // Calculate initial time remaining immediately
+                const hours = Math.floor(timeLeft / (1000 * 60 * 60));
+                const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+                setTimeRemaining(`${hours}h ${minutes}m`);
+                // Set up countdown interval to update time remaining every minute
+                countdownIntervalRef.current = setInterval(() => {
+                    const remaining = dismissTime - Date.now();
+                    if (remaining > 0) {
+                        const hours = Math.floor(remaining / (1000 * 60 * 60));
+                        const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
+                        setTimeRemaining(`${hours}h ${minutes}m`);
+                    }
+                    else {
+                        setShowIDVSuggestion(true);
+                        setDismissUntil(null);
+                        setTimeRemaining('');
+                        localStorage.removeItem('idv-suggestion-dismissed');
+                        if (countdownIntervalRef.current) {
+                            clearInterval(countdownIntervalRef.current);
+                            countdownIntervalRef.current = null;
+                        }
+                    }
+                }, 60000);
+            }
+            else {
+                localStorage.removeItem('idv-suggestion-dismissed');
+                setShowIDVSuggestion(true);
+                setDismissUntil(null);
+                setTimeRemaining('');
+            }
+        }
+        else {
+            setShowIDVSuggestion(true);
+            setDismissUntil(null);
+            setTimeRemaining('');
+        }
+    }, []);
+    // Check if IDV suggestion should be shown
+    React.useEffect(() => {
+        const shouldShowBanner = hitAddress &&
+            !props.requireWalletIDVVerification &&
+            !hasBerifymeToken &&
+            !isWalletVerifiedWithBerifyme &&
+            !isNeedSignInWithWallet;
+        if (shouldShowBanner) {
+            const timer = setTimeout(() => {
+                const shouldShowBannerAfterDelay = hitAddress &&
+                    !props.requireWalletIDVVerification &&
+                    !hasBerifymeToken &&
+                    !isWalletVerifiedWithBerifyme &&
+                    !isNeedSignInWithWallet;
+                if (shouldShowBannerAfterDelay) {
+                    const dismissed = localStorage.getItem('idv-suggestion-dismissed');
+                    updateIDVSuggestionState(dismissed);
+                }
+                else {
+                    setShowIDVSuggestion(false);
+                    setDismissUntil(null);
+                    setTimeRemaining('');
+                }
+            }, 1000);
+            return () => {
+                clearTimeout(timer);
+                // Clear countdown interval on cleanup
+                if (countdownIntervalRef.current) {
+                    clearInterval(countdownIntervalRef.current);
+                    countdownIntervalRef.current = null;
+                }
+            };
+        }
+        else {
+            // Don't show when:
+            // - No wallet connected (no hitAddress)
+            // - Wallet is already verified (walletInfo?.id exists)
+            setShowIDVSuggestion(false);
+            setDismissUntil(null);
+            setTimeRemaining('');
+        }
+    }, [hitAddress, walletInfo, isNeedSignInWithWallet, props.requireWalletIDVVerification, updateIDVSuggestionState]);
+    const handleDismissIDV = () => {
+        const dismissSeconds = props.idvBannerDismissSeconds || 86400;
+        const dismissTime = Date.now() + (dismissSeconds * 1000);
+        localStorage.setItem('idv-suggestion-dismissed', dismissTime.toString());
+        setShowIDVSuggestion(false);
+        setDismissUntil(dismissTime);
+        // Calculate and set initial time remaining
+        const initialHours = Math.floor(dismissSeconds / 3600);
+        const initialMinutes = Math.floor((dismissSeconds % 3600) / 60);
+        setTimeRemaining(`${initialHours}h ${initialMinutes}m`);
+        // Set up countdown interval
+        if (countdownIntervalRef.current) {
+            clearInterval(countdownIntervalRef.current);
+        }
+        countdownIntervalRef.current = setInterval(() => {
+            const remaining = dismissTime - Date.now();
+            if (remaining > 0) {
+                const remainingHours = Math.floor(remaining / (1000 * 60 * 60));
+                const remainingMinutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
+                setTimeRemaining(`${remainingHours}h ${remainingMinutes}m`);
+            }
+            else {
+                setShowIDVSuggestion(true);
+                setDismissUntil(null);
+                setTimeRemaining('');
+                localStorage.removeItem('idv-suggestion-dismissed');
+                if (countdownIntervalRef.current) {
+                    clearInterval(countdownIntervalRef.current);
+                    countdownIntervalRef.current = null;
+                }
+            }
+        }, 60000);
+        const hours = Math.floor(dismissSeconds / 3600);
+        const minutes = Math.floor((dismissSeconds % 3600) / 60);
+        const timeText = hours > 0
+            ? (minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`)
+            : `${minutes}m`;
+        setNotification({
+            show: true,
+            type: 'info',
+            message: walletTextUtils.getWalletText(`IDV suggestion hidden for ${timeText}. You can still verify your wallet anytime.`, serviceId),
+            autoHide: true,
+            duration: 3000
+        });
+    };
+    // Add CSS animation for loading spinner
+    React.useEffect(() => {
+        const style = document.createElement('style');
+        style.textContent = `
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `;
+        document.head.appendChild(style);
+        return () => {
+            document.head.removeChild(style);
+        };
+    }, []);
+    const handleClose = () => {
+        if (typeof window !== 'undefined') {
+            if (mobileLayout) {
+                setButtonPosition(MOBILE_FAB_POSITION);
+                latestButtonPositionRef.current = MOBILE_FAB_POSITION;
+            }
+            else {
+                const windowRight = window.innerWidth - (position.x + dimensions.width);
+                const windowBottom = window.innerHeight - (position.y + dimensions.height);
+                const newButtonPosition = clampButtonPosition({ right: windowRight, bottom: windowBottom });
+                setButtonPosition(newButtonPosition);
+                if (hasLoadedButtonPosition.current) {
+                    setSavedButtonPosition(newButtonPosition);
+                }
+            }
+        }
+        setIsOpen(false);
+    };
+    const handleOpen = () => {
+        if (typeof window !== 'undefined') {
+            if (mobileLayout) {
+                updatePosition({ x: MOBILE_EDGE_MARGIN, y: MOBILE_EDGE_MARGIN });
+            }
+            else if (buttonRef.current) {
+                // Window's bottom-right corner aligns with the FAB
+                const buttonRect = buttonRef.current.getBoundingClientRect();
+                const buttonRight = window.innerWidth - buttonRect.right;
+                const buttonBottom = window.innerHeight - buttonRect.bottom;
+                const windowLeft = window.innerWidth - dimensions.width - buttonRight;
+                const windowTop = window.innerHeight - dimensions.height - buttonBottom;
+                const clampedLeft = Math.max(BUTTON_MARGIN, Math.min(windowLeft, window.innerWidth - dimensions.width - BUTTON_MARGIN));
+                const clampedTop = Math.max(BUTTON_MARGIN, Math.min(windowTop, window.innerHeight - dimensions.height - BUTTON_MARGIN));
+                updatePosition({ x: clampedLeft, y: clampedTop });
+            }
+        }
+        setIsOpen(true);
+    };
+    const handleCloseNotification = () => {
+        setNotification((prev) => ({ ...prev, show: false }));
+    };
+    // Auto-hide notification when autoHide is true and duration is set
+    React.useEffect(() => {
+        if (notification.show && notification.autoHide && notification.duration && notification.duration > 0) {
+            const timer = setTimeout(() => {
+                setNotification((prev) => ({ ...prev, show: false }));
+            }, notification.duration);
+            return () => clearTimeout(timer);
+        }
+    }, [notification.show, notification.autoHide, notification.duration, setNotification]);
+    const handleSettingsClick = () => {
+        setShowPermissionForm(true);
+    };
+    // Constants for button positioning
+    const BUTTON_MARGIN = 20;
+    const BUTTON_MIN_MARGIN = 5;
+    const DRAG_THRESHOLD = 5; // Minimum distance in pixels to distinguish drag from click
+    // Track window size for responsive button positioning and dragging
+    const buttonRef = React.useRef(null);
+    const buttonDragState = React.useRef(null);
+    const [isButtonDragging, setIsButtonDragging] = React.useState(false);
+    const [isButtonDragActive, setIsButtonDragActive] = React.useState(false);
+    const hasLoadedButtonPosition = React.useRef(false);
+    const buttonDragDistance = React.useRef(0);
+    // Track latest button position for saving (to avoid stale closure issues)
+    const latestButtonPositionRef = React.useRef({ right: BUTTON_MARGIN, bottom: BUTTON_MARGIN });
+    // Load saved position synchronously on initialization to avoid position jump
+    const getInitialButtonPosition = () => {
+        if (typeof window === 'undefined') {
+            return { right: BUTTON_MARGIN, bottom: BUTTON_MARGIN };
+        }
+        if (isMobileViewport()) {
+            return { ...MOBILE_FAB_POSITION };
+        }
+        try {
+            const saved = localStorage.getItem('ai-agent-button-position');
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                if (parsed && typeof parsed.right === 'number' && typeof parsed.bottom === 'number') {
+                    return parsed;
+                }
+            }
+        }
+        catch (e) {
+            // Ignore parse errors, use default
+        }
+        return { right: BUTTON_MARGIN, bottom: BUTTON_MARGIN };
+    };
+    const [, setSavedButtonPosition, isButtonPositionInitialized] = useLocalStorage('ai-agent-button-position', null);
+    const [buttonPosition, setButtonPosition] = React.useState(getInitialButtonPosition);
+    // Keep ref in sync with button position state and mark as loaded when initialized
+    React.useEffect(() => {
+        latestButtonPositionRef.current = buttonPosition;
+        if (isButtonPositionInitialized && !hasLoadedButtonPosition.current) {
+            hasLoadedButtonPosition.current = true;
+        }
+    }, [buttonPosition, isButtonPositionInitialized]);
+    // Fast clamp calculation helper (used in both drag and resize)
+    const clampButtonPositionFast = React.useCallback((right, bottom, buttonWidth, buttonHeight) => {
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Clamp horizontally
+        const maxRight = viewportWidth - buttonWidth - BUTTON_MARGIN;
+        let clampedRight = right;
+        if (clampedRight > maxRight) {
+            clampedRight = Math.max(BUTTON_MIN_MARGIN, maxRight);
+        }
+        else if (clampedRight < BUTTON_MARGIN) {
+            clampedRight = BUTTON_MARGIN;
+        }
+        // Clamp vertically
+        const maxBottom = viewportHeight - buttonHeight - BUTTON_MARGIN;
+        let clampedBottom = bottom;
+        if (clampedBottom > maxBottom) {
+            clampedBottom = Math.max(BUTTON_MIN_MARGIN, maxBottom);
+        }
+        else if (clampedBottom < BUTTON_MARGIN) {
+            clampedBottom = BUTTON_MARGIN;
+        }
+        return { right: clampedRight, bottom: clampedBottom };
+    }, []);
+    // Clamp button position to keep it within viewport
+    const clampButtonPosition = React.useCallback((pos, buttonWidth, buttonHeight) => {
+        if (typeof window === 'undefined') {
+            return pos;
+        }
+        // Use provided dimensions or get from DOM (avoid getBoundingClientRect during drag)
+        let width = buttonWidth;
+        let height = buttonHeight;
+        if (width === undefined || height === undefined) {
+            if (!buttonRef.current) {
+                return pos;
+            }
+            const rect = buttonRef.current.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+        }
+        return clampButtonPositionFast(pos.right, pos.bottom, width, height);
+    }, [clampButtonPositionFast]);
+    const handleButtonDragStart = React.useCallback((event) => {
+        if (mobileLayout) {
+            return;
+        }
+        event.stopPropagation();
+        if (buttonRef.current) {
+            // Cache button dimensions to avoid getBoundingClientRect during drag
+            const rect = buttonRef.current.getBoundingClientRect();
+            buttonDragState.current = {
+                startX: event.clientX,
+                startY: event.clientY,
+                startRight: buttonPosition.right,
+                startBottom: buttonPosition.bottom,
+                buttonWidth: rect.width,
+                buttonHeight: rect.height
+            };
+            buttonDragDistance.current = 0;
+            setIsButtonDragging(false);
+            setIsButtonDragActive(true);
+            document.body.style.userSelect = 'none';
+        }
+    }, [buttonPosition, mobileLayout]);
+    React.useEffect(() => {
+        if (!mobileLayout) {
+            return;
+        }
+        setButtonPosition(MOBILE_FAB_POSITION);
+        latestButtonPositionRef.current = MOBILE_FAB_POSITION;
+    }, [mobileLayout]);
+    // Handle button drag move and end
+    React.useEffect(() => {
+        if (mobileLayout || !isButtonDragActive) {
+            return;
+        }
+        const handlePointerMove = (event) => {
+            if (!buttonDragState.current)
+                return;
+            const deltaX = event.clientX - buttonDragState.current.startX;
+            const deltaY = event.clientY - buttonDragState.current.startY;
+            const dragDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            buttonDragDistance.current = dragDistance;
+            // Only start dragging if moved more than threshold (to distinguish from click)
+            if (dragDistance > DRAG_THRESHOLD && !isButtonDragging) {
+                setIsButtonDragging(true);
+                document.body.style.cursor = 'grabbing';
+            }
+            if (dragDistance > DRAG_THRESHOLD) {
+                // Calculate new position (right decreases when moving right, bottom decreases when moving down)
+                const newRight = buttonDragState.current.startRight - deltaX;
+                const newBottom = buttonDragState.current.startBottom - deltaY;
+                // Use fast clamp calculation with cached dimensions
+                const clampedPos = clampButtonPositionFast(newRight, newBottom, buttonDragState.current.buttonWidth, buttonDragState.current.buttonHeight);
+                latestButtonPositionRef.current = clampedPos;
+                // Update state immediately (same as window drag) for responsive dragging
+                setButtonPosition(clampedPos);
+            }
+        };
+        const handlePointerUp = () => {
+            const wasDragging = buttonDragDistance.current > DRAG_THRESHOLD;
+            // Save position to localStorage if we were dragging
+            if (wasDragging && hasLoadedButtonPosition.current) {
+                setSavedButtonPosition(latestButtonPositionRef.current);
+            }
+            setIsButtonDragging(false);
+            setIsButtonDragActive(false);
+            buttonDragDistance.current = 0;
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+            buttonDragState.current = null;
+        };
+        document.addEventListener('pointermove', handlePointerMove);
+        document.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+        };
+    }, [isButtonDragActive, isButtonDragging, setSavedButtonPosition, clampButtonPositionFast, mobileLayout]);
+    // Update button position on window resize to ensure it stays within viewport
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleResize = () => {
+            requestAnimationFrame(() => {
+                if (mobileLayout) {
+                    setButtonPosition(MOBILE_FAB_POSITION);
+                    latestButtonPositionRef.current = MOBILE_FAB_POSITION;
+                    return;
+                }
+                const clampedPos = clampButtonPosition(buttonPosition);
+                if (clampedPos.right !== buttonPosition.right || clampedPos.bottom !== buttonPosition.bottom) {
+                    setButtonPosition(clampedPos);
+                }
+            });
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [buttonPosition, clampButtonPosition, mobileLayout]);
+    const getButtonStyle = React.useMemo(() => {
+        if (mobileLayout) {
+            return css `
+        position: fixed !important;
+        bottom: calc(${MOBILE_EDGE_MARGIN}px + env(safe-area-inset-bottom, 0px)) !important;
+        right: calc(${MOBILE_EDGE_MARGIN}px + env(safe-area-inset-right, 0px)) !important;
+        left: auto !important;
+        top: auto !important;
+        touch-action: manipulation !important;
+      `;
+        }
+        return css `
+      position: fixed !important;
+      bottom: ${buttonPosition.bottom}px !important;
+      right: ${buttonPosition.right}px !important;
+    `;
+    }, [buttonPosition, mobileLayout]);
+    // Show floating button when chat is closed
+    if (!isOpen) {
+        return (_jsxs("div", { css: sdkContainer, children: [_jsx("button", { ref: buttonRef, onClick: (e) => {
+                        // Don't open if we just finished dragging (moved more than threshold)
+                        if (buttonDragDistance.current > DRAG_THRESHOLD) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            return;
+                        }
+                        handleOpen();
+                    }, onPointerDown: mobileLayout ? undefined : handleButtonDragStart, css: [floatingButton, getButtonStyle, css `
+            cursor: ${mobileLayout ? 'pointer' : isButtonDragging ? 'grabbing' : 'grab'} !important;
+            user-select: none !important;
+          `], title: mobileLayout ? 'Open AI Agent Chat' : 'Drag to move or click to open AI Agent Chat', children: "AI Agent" }), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
+    }
+    return (_jsxs("div", { css: sdkContainer, children: [_jsxs("div", { css: [chatWindow, css `
+          width: ${dimensions.width}px !important;
+          height: ${dimensions.height}px !important;
+          left: ${position.x}px !important;
+          top: ${position.y}px !important;
+          bottom: auto !important;
+          right: auto !important;
+          ${mobileLayout ? css `
+            width: calc(100vw - ${MOBILE_EDGE_MARGIN * 2}px) !important;
+            height: calc(100dvh - ${MOBILE_EDGE_MARGIN * 2}px) !important;
+            max-width: calc(100vw - ${MOBILE_EDGE_MARGIN * 2}px) !important;
+            max-height: calc(100dvh - ${MOBILE_EDGE_MARGIN * 2}px) !important;
+            left: ${MOBILE_EDGE_MARGIN}px !important;
+            top: ${MOBILE_EDGE_MARGIN}px !important;
+          ` : ''}
+        `], children: [!mobileLayout && (_jsxs(_Fragment, { children: [_jsx("div", { css: resizeHandleNW, onPointerDown: handleResizeStart('nw'), title: "Resize", "aria-label": "Resize chat window from top-left" }), _jsx("div", { css: resizeHandleNE, onPointerDown: handleResizeStart('ne'), title: "Resize", "aria-label": "Resize chat window from top-right" }), _jsx("div", { css: resizeHandleSW, onPointerDown: handleResizeStart('sw'), title: "Resize", "aria-label": "Resize chat window from bottom-left" }), _jsx("div", { css: resizeHandleSE, onPointerDown: handleResizeStart('se'), title: "Resize", "aria-label": "Resize chat window from bottom-right" })] })), _jsx(ChatBotHeader, { mobileLayout: mobileLayout, isDragging: isDragging, onDragStart: handleDragStart, isVoiceMode: isVoiceMode, isVoiceConnecting: isVoiceConnecting, onVoiceToggle: () => void ((isVoiceMode || isVoiceConnecting) ? exitVoiceMode() : enterVoiceMode()), piiDisplayMode: piiDisplayMode, isAITLoading: isAITLoading, onSettingsClick: handleSettingsClick, onClose: handleClose }), showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (_jsxs("div", { "data-idv-banner": true, css: idvBanner, children: [_jsx("div", { css: css `
+              font-size: 20px !important;
+              color: #f39c12 !important;
+            `, children: "\uD83D\uDCA1" }), _jsxs("div", { css: css `flex: 1 !important;`, children: [_jsx("h5", { css: idvBannerTitle, children: walletTextUtils.getWalletText('Recommended: Verify Your Wallet', serviceId) }), _jsx("p", { css: idvBannerText, children: walletTextUtils.getWalletText('While not required, verifying your wallet with Berify.me provides additional security and trust for your AI agent interactions.', serviceId) }), _jsx("button", { onClick: () => onVerifyWallet('berifyme'), css: idvVerifyButton, children: walletTextUtils.getWalletText('Verify Wallet', serviceId) })] }), _jsx("button", { onClick: handleDismissIDV, css: idvDismissButton, title: `Hide for ${Math.floor((props.idvBannerDismissSeconds || 86400) / 3600)} hours`, children: "\u00D7" })] })), !showIDVSuggestion && dismissUntil && timeRemaining && (_jsxs("div", { css: css `
+            background-color: #f8f9fa !important;
+            border: 1px solid #e9ecef !important;
+            margin: 16px !important;
+            padding: 12px !important;
+            border-radius: 8px !important;
+            text-align: center !important;
+            font-size: 13px !important;
+            color: #6c757d !important;
+          `, children: [_jsxs("span", { children: ["\uD83D\uDCA1 IDV suggestion hidden. Will show again in ", timeRemaining] }), _jsx("button", { onClick: () => {
+                                    localStorage.removeItem('idv-suggestion-dismissed');
+                                    setShowIDVSuggestion(true);
+                                    setDismissUntil(null);
+                                    setTimeRemaining('');
+                                }, css: css `
+                background: none !important;
+                border: none !important;
+                color: #007bff !important;
+                font-size: 12px !important;
+                cursor: pointer !important;
+                margin-left: 8px !important;
+                text-decoration: underline !important;
+              `, title: "Show now", children: "Show now" })] })), _jsx(MessageList, {}), !isVoiceMode && _jsx(PresetMessages, {}), isVoiceMode ? _jsx(VoiceModePanel, {}) : _jsx(MessageInput, {})] }), showPermissionForm && (_jsx("div", { css: modalOverlay, onClick: (e) => {
+                    // Close modal when clicking on background
+                    if (e.target === e.currentTarget) {
+                        setShowPermissionForm(false);
+                    }
+                }, children: _jsx(PermissionForm, { onClose: () => setShowPermissionForm(false) }) })), notification.show && (_jsx(ToastNotification, { type: notification.type, message: notification.message, onClose: handleCloseNotification, isChatOpen: isOpen }))] }));
+};

package/dist/ui/MessageInput.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const MessageInput: React.FC;
+//# sourceMappingURL=MessageInput.d.ts.map

package/dist/ui/MessageInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../src/ui/MessageInput.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAofhC,CAAC"}