@bytexbyte/nxtlinq-ai-agent-ui-react-development 0.1.1

package/src/legacy/chatbot/ui/ChatBotUI.tsx

@@ -0,0 +1,949 @@
+/** @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 GraphicEqIcon from '@mui/icons-material/GraphicEq';
+import { MessageInput } from './MessageInput';
+import { MessageList } from './MessageList';
+import { ModelSelector } from './ModelSelector';
+import { PermissionForm } from './PermissionForm';
+import { PresetMessages } from './PresetMessages';
+import { VoiceModePanel } from './VoiceModePanel';
+import {
+  chatHeader,
+  chatWindow,
+  closeButton,
+  errorToast,
+  floatingButton,
+  headerButton,
+  headerTitle,
+  idvBanner,
+  idvBannerText,
+  idvBannerTitle,
+  idvDismissButton,
+  idvVerifyButton,
+  infoToast,
+  loadingSpinner,
+  modalOverlay,
+  resizeHandleNE,
+  resizeHandleNW,
+  resizeHandleSE,
+  resizeHandleSW,
+  sdkContainer,
+  successToast,
+  toastCloseButton,
+  warningToast
+} from './styles/isolatedStyles';
+
+/** Header drag band inset so it does not overlap corner resize hit areas */
+const DRAG_CORNER_EXCLUSION_PX = 20;
+const MOBILE_BREAKPOINT = 768;
+const MOBILE_EDGE_MARGIN = 12;
+const MOBILE_FAB_POSITION = { right: MOBILE_EDGE_MARGIN, bottom: MOBILE_EDGE_MARGIN } as const;
+
+const isMobileViewport = (): boolean =>
+  typeof window !== 'undefined' && window.innerWidth <= MOBILE_BREAKPOINT;
+
+// Toast Notification Component
+const ToastNotification: React.FC<{
+  type: 'success' | 'error' | 'warning' | 'info';
+  message: string;
+  onClose: () => void;
+  isChatOpen?: boolean;
+}> = ({ 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 (
+    <div css={getToastStyles()}>
+      <span css={css`font-size: 18px !important;`}>{getIcon()}</span>
+      <span css={css`flex: 1 !important;`}>{message}</span>
+      <button
+        onClick={onClose}
+        css={toastCloseButton}
+      >
+        ×
+      </button>
+    </div>
+  );
+};
+
+export const ChatBotUI: React.FC = () => {
+  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: number; y: number }>({ 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<number | null>(null);
+  const [timeRemaining, setTimeRemaining] = React.useState<string>('');
+  const countdownIntervalRef = React.useRef<NodeJS.Timeout | null>(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: string | null) => {
+    // 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: any) => ({ ...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: any) => ({ ...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<HTMLButtonElement>(null);
+  const buttonDragState = React.useRef<{
+    startX: number;
+    startY: number;
+    startRight: number;
+    startBottom: number;
+    buttonWidth: number;
+    buttonHeight: number;
+  } | null>(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: number; bottom: number }>({ right: BUTTON_MARGIN, bottom: BUTTON_MARGIN });
+
+  // Load saved position synchronously on initialization to avoid position jump
+  const getInitialButtonPosition = (): { right: number; bottom: number } => {
+    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<{ right: number; bottom: number } | null>(
+    '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: number, bottom: number, buttonWidth: number, buttonHeight: number): { right: number; bottom: number } => {
+    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: { right: number; bottom: number }, buttonWidth?: number, buttonHeight?: number): { right: number; bottom: number } => {
+    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: React.PointerEvent<HTMLButtonElement>) => {
+    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: PointerEvent) => {
+      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 (
+      <div css={sdkContainer}>
+        <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'}
+        >
+          AI Agent
+        </button>
+
+        {notification.show && (
+          <ToastNotification
+            type={notification.type}
+            message={notification.message}
+            onClose={handleCloseNotification}
+            isChatOpen={isOpen}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div css={sdkContainer}>
+      <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;
+          ` : ''}
+        `]}
+      >
+        {!mobileLayout && (
+          <>
+            <div
+              css={resizeHandleNW}
+              onPointerDown={handleResizeStart('nw')}
+              title="Resize"
+              aria-label="Resize chat window from top-left"
+            />
+            <div
+              css={resizeHandleNE}
+              onPointerDown={handleResizeStart('ne')}
+              title="Resize"
+              aria-label="Resize chat window from top-right"
+            />
+            <div
+              css={resizeHandleSW}
+              onPointerDown={handleResizeStart('sw')}
+              title="Resize"
+              aria-label="Resize chat window from bottom-left"
+            />
+            <div
+              css={resizeHandleSE}
+              onPointerDown={handleResizeStart('se')}
+              title="Resize"
+              aria-label="Resize chat window from bottom-right"
+            />
+          </>
+        )}
+
+        <div
+          css={[chatHeader, css`
+            position: relative !important;
+          `]}
+        >
+          <div
+            css={css`
+              position: absolute !important;
+              left: ${DRAG_CORNER_EXCLUSION_PX}px !important;
+              right: ${DRAG_CORNER_EXCLUSION_PX}px !important;
+              top: 0 !important;
+              bottom: 0 !important;
+              z-index: 1 !important;
+              cursor: ${isDragging ? 'grabbing' : 'grab'} !important;
+              user-select: none !important;
+            `}
+            onPointerDown={handleDragStart}
+            title="Drag to move"
+            aria-hidden
+          />
+          <div
+            css={css`
+              position: relative !important;
+              z-index: 2 !important;
+              display: flex !important;
+              justify-content: space-between !important;
+              align-items: center !important;
+              width: 100% !important;
+              pointer-events: none !important;
+            `}
+          >
+          <div css={css`
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+            pointer-events: none !important;
+          `}>
+            <h3 css={headerTitle}>
+              AI Agent
+            </h3>
+            {!isVoiceMode && (
+              <div css={css`
+                position: relative !important;
+                pointer-events: auto !important;
+              `}>
+                <ModelSelector />
+              </div>
+            )}
+            {!isVoiceMode && piiDisplayMode === 'redacted' && (
+              <div
+                css={css`
+                  display: inline-flex !important;
+                  align-items: center !important;
+                  gap: 4px !important;
+                  padding: 2px 8px !important;
+                  background-color: rgba(255, 255, 255, 0.2) !important;
+                  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+                  border-radius: 10px !important;
+                  font-size: 10px !important;
+                  font-weight: 600 !important;
+                  color: #ffffff !important;
+                  white-space: nowrap !important;
+                  line-height: 1.4 !important;
+                  user-select: none !important;
+                `}
+                title="PII Protection is active — sensitive data is automatically anonymized before sending to AI"
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/>
+                </svg>
+                PII Protected
+              </div>
+            )}
+            {isAITLoading && (
+              <div css={css`
+                display: flex !important;
+                align-items: center !important;
+                gap: 5px !important;
+                font-size: 12px !important;
+                opacity: 0.8 !important;
+              `}>
+                <div css={loadingSpinner} />
+                Loading...
+              </div>
+            )}
+          </div>
+          <div css={css`
+            display: flex !important;
+            align-items: center !important;
+            gap: 10px !important;
+            pointer-events: auto !important;
+          `}>
+            <button
+              onClick={() => void ((isVoiceMode || isVoiceConnecting) ? exitVoiceMode() : enterVoiceMode())}
+              css={[headerButton, css`
+                width: auto !important;
+                min-width: 82px !important;
+                padding: 0 10px !important;
+                gap: 6px !important;
+                font-size: 12px !important;
+                font-weight: 600 !important;
+                line-height: 1 !important;
+                white-space: nowrap !important;
+              `]}
+              title={
+                isVoiceConnecting
+                  ? 'Cancel voice connection and return to text mode'
+                  : isVoiceMode
+                    ? 'Switch to text mode'
+                    : 'Switch to voice mode'
+              }
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              <GraphicEqIcon css={css`font-size: 16px !important; color: #fff !important;`} />
+              {(isVoiceMode || isVoiceConnecting) ? 'Text Mode' : 'Voice Mode'}
+            </button>
+            <button
+              onClick={handleSettingsClick}
+              css={headerButton}
+              title="AIT Settings"
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              ⚙️
+            </button>
+            <button
+              onClick={handleClose}
+              css={closeButton}
+              onPointerDown={(e) => e.stopPropagation()}
+              title="Minimize"
+            >
+              −
+            </button>
+          </div>
+          </div>
+        </div>
+
+        {showIDVSuggestion && hitAddress && !props.requireWalletIDVVerification && !hasBerifymeToken && !isWalletVerifiedWithBerifyme && (
+          <div
+            data-idv-banner
+            css={idvBanner}>
+            <div css={css`
+              font-size: 20px !important;
+              color: #f39c12 !important;
+            `}>💡</div>
+            <div css={css`flex: 1 !important;`}>
+              <h5 css={idvBannerTitle}>{walletTextUtils.getWalletText('Recommended: Verify Your Wallet', serviceId)}</h5>
+              <p css={idvBannerText}>
+                {walletTextUtils.getWalletText('While not required, verifying your wallet with Berify.me provides additional security and trust for your AI agent interactions.', serviceId)}
+              </p>
+              <button
+                onClick={() => onVerifyWallet('berifyme')}
+                css={idvVerifyButton}
+              >
+                {walletTextUtils.getWalletText('Verify Wallet', serviceId)}
+              </button>
+            </div>
+            <button
+              onClick={handleDismissIDV}
+              css={idvDismissButton}
+              title={`Hide for ${Math.floor((props.idvBannerDismissSeconds || 86400) / 3600)} hours`}
+            >
+              ×
+            </button>
+          </div>
+        )}
+
+        {!showIDVSuggestion && dismissUntil && timeRemaining && (
+          <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;
+          `}>
+            <span>💡 IDV suggestion hidden. Will show again in {timeRemaining}</span>
+            <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"
+            >
+              Show now
+            </button>
+          </div>
+        )}
+
+        <MessageList />
+        {!isVoiceMode && <PresetMessages />}
+        {isVoiceMode ? <VoiceModePanel /> : <MessageInput />}
+      </div>
+
+      {showPermissionForm && (
+        <div
+          css={modalOverlay}
+          onClick={(e) => {
+            // Close modal when clicking on background
+            if (e.target === e.currentTarget) {
+              setShowPermissionForm(false);
+            }
+          }}
+        >
+          <PermissionForm onClose={() => setShowPermissionForm(false)} />
+        </div>
+      )}
+
+      {notification.show && (
+        <ToastNotification
+          type={notification.type}
+          message={notification.message}
+          onClose={handleCloseNotification}
+          isChatOpen={isOpen}
+        />
+      )}
+    </div>
+  );
+};