@bytexbyte/nxtlinq-ai-agent-web-development 0.1.1

package/src/legacy/core/lib/useDraggable.ts

@@ -0,0 +1,193 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import useLocalStorage from './useLocalStorage';
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+const DEFAULT_POSITION: Position = { x: 0, y: 0 }; // Default position, will be calculated
+const VIEWPORT_MARGIN = 20; // Keep space from viewport edges
+
+export const useDraggable = (dimensions: { width: number; height: number }) => {
+  const dragState = useRef<{
+    startX: number;
+    startY: number;
+    startPosition: Position;
+  }>({
+    startX: 0,
+    startY: 0,
+    startPosition: DEFAULT_POSITION
+  });
+
+  // Keep track of current position for saving
+  const currentPositionRef = useRef<Position>(DEFAULT_POSITION);
+
+  // Track if we've already loaded from localStorage to prevent loops
+  const hasLoadedFromStorage = useRef(false);
+
+  // Clamp position to keep window within viewport
+  const clampPosition = useCallback((pos: Position, dims: { width: number; height: number }): Position => {
+    if (typeof window === 'undefined') {
+      return pos;
+    }
+    const maxX = Math.max(VIEWPORT_MARGIN, window.innerWidth - dims.width - VIEWPORT_MARGIN);
+    const maxY = Math.max(VIEWPORT_MARGIN, window.innerHeight - dims.height - VIEWPORT_MARGIN);
+    return {
+      x: Math.max(VIEWPORT_MARGIN, Math.min(pos.x, maxX)),
+      y: Math.max(VIEWPORT_MARGIN, Math.min(pos.y, maxY))
+    };
+  }, []);
+
+  // Calculate initial position from bottom/right (default behavior)
+  const calculateInitialPosition = useCallback((): Position => {
+    if (typeof window === 'undefined') {
+      return DEFAULT_POSITION;
+    }
+    // Default position: bottom-right corner with margin
+    const initialPos = {
+      x: window.innerWidth - dimensions.width - VIEWPORT_MARGIN,
+      y: window.innerHeight - dimensions.height - VIEWPORT_MARGIN
+    };
+    return clampPosition(initialPos, dimensions);
+  }, [dimensions.width, dimensions.height, clampPosition]);
+
+  // Load position from localStorage or use default
+  const [savedPosition, setSavedPosition, isPositionInitialized] = useLocalStorage<Position | null>(
+    'chat-window-position',
+    null
+  );
+
+  const [position, setPosition] = useState<Position>(() => {
+    // Always start with calculated initial position
+    // Will be updated when savedPosition loads from localStorage
+    const initialPos = calculateInitialPosition();
+    currentPositionRef.current = initialPos;
+    return initialPos;
+  });
+
+  // Update position when saved position loads from localStorage (only once)
+  useEffect(() => {
+    if (isPositionInitialized && !hasLoadedFromStorage.current) {
+      if (savedPosition) {
+        // Use saved position
+        const clampedPos = clampPosition(savedPosition, dimensions);
+        currentPositionRef.current = clampedPos;
+        setPosition(clampedPos);
+      }
+      // Mark as loaded regardless of whether we have saved position
+      hasLoadedFromStorage.current = true;
+    }
+  }, [isPositionInitialized, savedPosition, dimensions, clampPosition]);
+
+  // Update position when dimensions change (to keep window in viewport, but only after initial load)
+  useEffect(() => {
+    if (!isPositionInitialized || !hasLoadedFromStorage.current) return;
+
+    setPosition((current) => {
+      const clampedPosition = clampPosition(current, dimensions);
+      if (clampedPosition.x !== current.x || clampedPosition.y !== current.y) {
+        currentPositionRef.current = clampedPosition;
+        return clampedPosition;
+      }
+      return current;
+    });
+  }, [dimensions.width, dimensions.height, isPositionInitialized, clampPosition]);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = (event: React.PointerEvent<HTMLDivElement>) => {
+    // Don't start dragging if clicking on buttons or interactive elements
+    const target = event.target as HTMLElement;
+    if (
+      target.tagName === 'BUTTON' ||
+      target.closest('button') ||
+      target.closest('[role="button"]') ||
+      target.closest('input') ||
+      target.closest('select') ||
+      target.closest('textarea')
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    dragState.current = {
+      startX: event.clientX,
+      startY: event.clientY,
+      startPosition: position
+    };
+    setIsDragging(true);
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'grabbing';
+  };
+
+  // Handle pointer move and up events
+  useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const deltaX = event.clientX - dragState.current.startX;
+      const deltaY = event.clientY - dragState.current.startY;
+      const newPosition: Position = {
+        x: dragState.current.startPosition.x + deltaX,
+        y: dragState.current.startPosition.y + deltaY
+      };
+      const clampedPos = clampPosition(newPosition, dimensions);
+      currentPositionRef.current = clampedPos;
+      setPosition(clampedPos);
+    };
+
+    const handlePointerUp = () => {
+      setIsDragging(false);
+      document.body.style.userSelect = '';
+      document.body.style.cursor = '';
+      // Save position to localStorage (only after initial load)
+      if (hasLoadedFromStorage.current) {
+        setSavedPosition(currentPositionRef.current);
+      }
+    };
+
+    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 = '';
+    };
+  }, [isDragging, clampPosition, dimensions, setSavedPosition]);
+
+  // Handle window resize to keep window in viewport
+  useEffect(() => {
+    const handleResize = () => {
+      setPosition((current) => {
+        const clamped = clampPosition(current, dimensions);
+        currentPositionRef.current = clamped;
+        return clamped;
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [clampPosition, dimensions]);
+
+  const updatePosition = useCallback((newPosition: Position) => {
+    const clamped = clampPosition(newPosition, dimensions);
+    currentPositionRef.current = clamped;
+    setPosition(clamped);
+    // Save position to localStorage when updated (only after initial load)
+    if (hasLoadedFromStorage.current) {
+      setSavedPosition(clamped);
+    }
+  }, [clampPosition, dimensions, setSavedPosition]);
+
+  return {
+    position,
+    handleDragStart,
+    isDragging,
+    updatePosition
+  };
+};

package/src/legacy/core/lib/useLocalStorage.ts

@@ -0,0 +1,89 @@
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+
+/**
+ * Custom hook for managing localStorage with React state and cross-tab synchronization
+ * Automatically syncs changes across browser tabs using StorageEvent
+ * 
+ * @param key - The key to store the value under in localStorage
+ * @param defaultValue - The default value to use if no value is stored
+ * @returns [storedValue, setStoredValue, isInitialized]
+ */
+export default function useLocalStorage<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>, boolean] {
+  const [storedValue, setStoredValue] = useState<T>(defaultValue);
+  const [isInitialized, setIsInitialized] = useState(false);
+  // Ref to track if we're currently processing a storage event (to prevent loops)
+  // Note: StorageEvent only fires in OTHER tabs, not the current tab, so this ref
+  // is mainly used to prevent any edge cases
+  const isProcessingStorageEventRef = useRef(false);
+
+  // Initialize from localStorage
+  useEffect(() => {
+    try {
+      const storageValue = localStorage.getItem(key);
+      if (storageValue !== null) {
+        const parsed = JSON.parse(storageValue) as T;
+        setStoredValue(parsed);
+      }
+    } catch (error) {
+      console.warn(`Error reading from localStorage key "${key}":`, error);
+    }
+
+    setIsInitialized(true);
+  }, [key]);
+
+  // Save to localStorage when value changes
+  useEffect(() => {
+    if (!isInitialized || isProcessingStorageEventRef.current) return;
+
+    try {
+      const serialized = JSON.stringify(storedValue);
+      const currentValue = localStorage.getItem(key);
+
+      // Only write if the value actually changed (avoid unnecessary writes)
+      if (currentValue !== serialized) {
+        localStorage.setItem(key, serialized);
+      }
+    } catch (error) {
+      console.warn(`Error writing to localStorage key "${key}":`, error);
+    }
+  }, [storedValue, isInitialized, key]);
+
+  // Listen for storage changes from other tabs (cross-tab synchronization)
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      // Only handle events for this key and ignore events from the current tab
+      if (e.key !== key || e.storageArea !== localStorage) {
+        return;
+      }
+
+      // StorageEvent only fires in OTHER tabs, not the tab that made the change
+      // So we can safely update the state here
+      try {
+        isProcessingStorageEventRef.current = true;
+
+        if (e.newValue !== null) {
+          const newValue = JSON.parse(e.newValue) as T;
+          setStoredValue(newValue);
+        } else {
+          // If newValue is null, it means the item was removed
+          setStoredValue(defaultValue);
+        }
+      } catch (error) {
+        console.warn(`Error parsing storage event for key "${key}":`, error);
+      } finally {
+        // Reset the flag after a brief delay to allow state updates to complete
+        setTimeout(() => {
+          isProcessingStorageEventRef.current = false;
+        }, 0);
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, [key, defaultValue]);
+
+  return [storedValue, setStoredValue, isInitialized];
+}

package/src/legacy/core/lib/useResizable.ts

@@ -0,0 +1,256 @@
+import { useState, useRef, useCallback, useEffect, RefObject } from 'react';
+import useLocalStorage from './useLocalStorage';
+
+// Resizable chat window defaults
+const DEFAULT_WIDTH = 500;
+const DEFAULT_HEIGHT = 600;
+const ASPECT_RATIO = DEFAULT_WIDTH / DEFAULT_HEIGHT;
+const MIN_WIDTH = 320;
+const MIN_HEIGHT = 380;
+const VIEWPORT_MARGIN = 40; // Keep space from viewport edges
+const MOBILE_BREAKPOINT = 768;
+const MOBILE_EDGE_MARGIN = 12;
+
+const isMobileViewport = (): boolean =>
+  typeof window !== 'undefined' && window.innerWidth <= MOBILE_BREAKPOINT;
+
+const getMobileFullscreenDimensions = (): Dimensions => ({
+  width: Math.max(MIN_WIDTH, window.innerWidth - MOBILE_EDGE_MARGIN * 2),
+  height: Math.max(MIN_HEIGHT, window.innerHeight - MOBILE_EDGE_MARGIN * 2),
+});
+
+export type ResizeCorner = 'nw' | 'ne' | 'sw' | 'se';
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface ResizeState {
+  corner: ResizeCorner;
+  /** Window rect anchors at pointer-down (screen coords) */
+  anchorTL: Position;
+  anchorBR: Position;
+}
+
+interface Dimensions {
+  width: number;
+  height: number;
+}
+
+export const useResizable = (currentPositionRef?: RefObject<Position>) => {
+  const resizeState = useRef<ResizeState | null>(null);
+
+  const [positionAdjustment, setPositionAdjustment] = useState<Position | null>(null);
+
+  const [savedDimensions, setSavedDimensions, isDimensionsInitialized] = useLocalStorage<Dimensions | null>(
+    'chat-window-dimensions',
+    null
+  );
+
+  const [isResizing, setIsResizing] = useState(false);
+
+  const clampDimensions = useCallback((width: number, height: number): Dimensions => {
+    if (typeof window === 'undefined') {
+      return { width, height };
+    }
+    if (isMobileViewport()) {
+      return getMobileFullscreenDimensions();
+    }
+    const maxWidth = Math.max(MIN_WIDTH, window.innerWidth - VIEWPORT_MARGIN);
+    const maxHeight = Math.max(MIN_HEIGHT, window.innerHeight - VIEWPORT_MARGIN);
+    const clampedWidth = Math.min(Math.max(width, MIN_WIDTH), maxWidth);
+    let clampedHeight = clampedWidth / ASPECT_RATIO;
+    if (clampedHeight > maxHeight) {
+      clampedHeight = maxHeight;
+      const adjustedWidth = clampedHeight * ASPECT_RATIO;
+      return { width: adjustedWidth, height: clampedHeight };
+    }
+    if (clampedHeight < MIN_HEIGHT) {
+      clampedHeight = MIN_HEIGHT;
+      const adjustedWidth = clampedHeight * ASPECT_RATIO;
+      return { width: adjustedWidth, height: clampedHeight };
+    }
+    return { width: clampedWidth, height: clampedHeight };
+  }, []);
+
+  const calculateDimensions = useCallback((savedDims: Dimensions | null): Dimensions => {
+    if (typeof window === 'undefined') {
+      return { width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT };
+    }
+    const baseDimensions = savedDims || { width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT };
+    return clampDimensions(baseDimensions.width, baseDimensions.height);
+  }, [clampDimensions]);
+
+  const [dimensions, setDimensions] = useState<Dimensions>(() => {
+    if (typeof window === 'undefined') {
+      return { width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT };
+    }
+    if (isMobileViewport()) {
+      return getMobileFullscreenDimensions();
+    }
+    const maxWidth = Math.max(MIN_WIDTH, window.innerWidth - VIEWPORT_MARGIN);
+    const maxHeight = Math.max(MIN_HEIGHT, window.innerHeight - VIEWPORT_MARGIN);
+    let width = Math.min(Math.max(DEFAULT_WIDTH, MIN_WIDTH), maxWidth);
+    let height = width / ASPECT_RATIO;
+    if (height > maxHeight) {
+      height = maxHeight;
+      width = height * ASPECT_RATIO;
+    }
+    if (height < MIN_HEIGHT) {
+      height = MIN_HEIGHT;
+      width = height * ASPECT_RATIO;
+    }
+    return { width, height };
+  });
+
+  const hasLoadedFromStorage = useRef(false);
+
+  useEffect(() => {
+    if (isDimensionsInitialized && !hasLoadedFromStorage.current) {
+      const newDimensions = calculateDimensions(savedDimensions);
+      setDimensions(newDimensions);
+      hasLoadedFromStorage.current = true;
+    }
+  }, [isDimensionsInitialized, savedDimensions, calculateDimensions]);
+
+  const handleResizeStart = useCallback(
+    (corner: ResizeCorner) => (event: React.PointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const currentPos = currentPositionRef?.current;
+      if (!currentPos) {
+        return;
+      }
+      const anchorTL: Position = { x: currentPos.x, y: currentPos.y };
+      const anchorBR: Position = {
+        x: currentPos.x + dimensions.width,
+        y: currentPos.y + dimensions.height
+      };
+      resizeState.current = { corner, anchorTL, anchorBR };
+      setIsResizing(true);
+      setPositionAdjustment(null);
+      document.body.style.userSelect = 'none';
+    },
+    [currentPositionRef, dimensions.width, dimensions.height]
+  );
+
+  useEffect(() => {
+    if (!isResizing) {
+      return;
+    }
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const state = resizeState.current;
+      if (!state) {
+        return;
+      }
+
+      const { corner, anchorTL, anchorBR } = state;
+      const anchorBL: Position = { x: anchorTL.x, y: anchorBR.y };
+      const anchorTR: Position = { x: anchorBR.x, y: anchorTL.y };
+
+      let targetFromX: number;
+      let targetFromY: number;
+
+      switch (corner) {
+        case 'nw': {
+          const deltaX = anchorBR.x - event.clientX;
+          const deltaY = anchorBR.y - event.clientY;
+          targetFromX = deltaX;
+          targetFromY = deltaY * ASPECT_RATIO;
+          break;
+        }
+        case 'se': {
+          targetFromX = event.clientX - anchorTL.x;
+          targetFromY = (event.clientY - anchorTL.y) * ASPECT_RATIO;
+          break;
+        }
+        case 'ne': {
+          targetFromX = event.clientX - anchorBL.x;
+          targetFromY = (anchorBL.y - event.clientY) * ASPECT_RATIO;
+          break;
+        }
+        case 'sw': {
+          targetFromX = anchorTR.x - event.clientX;
+          targetFromY = (event.clientY - anchorTR.y) * ASPECT_RATIO;
+          break;
+        }
+        default:
+          return;
+      }
+
+      const nextWidth = (targetFromX + targetFromY) / 2;
+      const newDimensions = clampDimensions(nextWidth, nextWidth / ASPECT_RATIO);
+
+      let newPos: Position;
+      switch (corner) {
+        case 'nw':
+          newPos = {
+            x: anchorBR.x - newDimensions.width,
+            y: anchorBR.y - newDimensions.height
+          };
+          break;
+        case 'se':
+          newPos = { x: anchorTL.x, y: anchorTL.y };
+          break;
+        case 'ne':
+          newPos = {
+            x: anchorBL.x,
+            y: anchorBL.y - newDimensions.height
+          };
+          break;
+        case 'sw':
+          newPos = {
+            x: anchorTR.x - newDimensions.width,
+            y: anchorTR.y
+          };
+          break;
+        default:
+          newPos = anchorTL;
+      }
+
+      setDimensions(newDimensions);
+      setPositionAdjustment(newPos);
+    };
+
+    const handlePointerUp = () => {
+      setIsResizing(false);
+      resizeState.current = null;
+      setPositionAdjustment(null);
+      document.body.style.userSelect = '';
+    };
+
+    document.addEventListener('pointermove', handlePointerMove);
+    document.addEventListener('pointerup', handlePointerUp);
+
+    return () => {
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+      document.body.style.userSelect = '';
+    };
+  }, [clampDimensions, isResizing]);
+
+  useEffect(() => {
+    if (!isResizing && isDimensionsInitialized && hasLoadedFromStorage.current) {
+      setSavedDimensions(dimensions);
+    }
+  }, [dimensions, isResizing, isDimensionsInitialized, setSavedDimensions]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setDimensions((current) => {
+        const clamped = clampDimensions(current.width, current.height);
+        return clamped;
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [clampDimensions]);
+
+  return {
+    dimensions,
+    handleResizeStart,
+    positionAdjustment
+  };
+};

package/src/legacy/core/lib/useSessionStorage.ts

@@ -0,0 +1,43 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+/**
+ * Custom hook for managing sessionStorage with React state
+ * Similar to useLocalStorage but uses sessionStorage instead
+ * 
+ * @param key - The key to store the value under in sessionStorage
+ * @param defaultValue - The default value to use if no value is stored
+ * @returns [storedValue, setStoredValue, isInitialized]
+ */
+export default function useSessionStorage<T>(
+  key: string, 
+  defaultValue: T
+): [T, Dispatch<SetStateAction<T>>, boolean] {
+  const [storedValue, setStoredValue] = useState<T>(defaultValue);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    try {
+      const storageValue = sessionStorage.getItem(key);
+      if (storageValue !== null) {
+        setStoredValue(JSON.parse(storageValue));
+      }
+    } catch (error) {
+      console.warn(`Error reading from sessionStorage key "${key}":`, error);
+      // If there's an error, keep the default value
+    }
+
+    setIsInitialized(true);
+  }, [key]);
+
+  useEffect(() => {
+    if (isInitialized) {
+      try {
+        sessionStorage.setItem(key, JSON.stringify(storedValue));
+      } catch (error) {
+        console.warn(`Error writing to sessionStorage key "${key}":`, error);
+      }
+    }
+  }, [storedValue, isInitialized, key]);
+
+  return [storedValue, setStoredValue, isInitialized];
+}